feat: 优化图片加载

This commit is contained in:
alger
2024-12-15 14:13:13 +08:00
parent 51f67bb2c2
commit 100268448a
6 changed files with 23 additions and 49 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

+3 -3
View File
@@ -13,13 +13,13 @@
</template>
<div class="p-6 bg-black rounded-lg shadow-lg">
<div class="flex gap-6">
<div class="flex gap-10">
<div class="flex flex-col items-center gap-2">
<n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
<span class="text-sm text-gray-100">支付宝</span>
</div>
<div class="flex flex-col items-center gap-2">
<n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
<span class="text-sm text-gray-100">微信支付</span>
</div>
</div>
+3 -4
View File
@@ -35,10 +35,7 @@
/>
<div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
</div>
<coffee
alipay-q-r="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true"
wechat-q-r="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true"
>
<coffee :alipay-q-r="alipay" :wechat-q-r="wechat">
<div class="github" @click="toGithub">
<i class="ri-github-fill"></i>
</div>
@@ -52,6 +49,8 @@ import { useStore } from 'vuex';
import { getSearchKeyword } from '@/api/home';
import { getUserDetail, logout } from '@/api/login';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import Coffee from '@/components/Coffee.vue';
import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
import { getImgUrl } from '@/utils';
+6 -7
View File
@@ -63,12 +63,12 @@
<div class="p-6 bg-black rounded-lg shadow-lg mt-20">
<div class="text-gray-100 text-base text-center">支持作者</div>
<div class="flex gap-60">
<div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="alipay" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<span class="text-sm text-gray-100">支付宝</span>
</div>
<div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
<n-image :src="wechat" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
<span class="text-sm text-gray-100">微信支付</span>
</div>
</div>
@@ -82,15 +82,14 @@ import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import config from '@/../package.json';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import store from '@/store';
defineOptions({
name: 'Setting',
});
const alipayQR = 'https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true';
const wechatQR = 'https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true';
const isElectron = ref((window as any).electronAPI !== undefined);
const router = useRouter();