Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5ce0f06e 1 parent 4355d5d2

feat(排行榜): 替换emoji皇冠为图片并调整滤镜效果 

将排行榜中的emoji皇冠替换为金银铜三种图片，同时调整了银铜皇冠的滤镜效果使其更自然
Inline Side-by-side
Showing 2 changed files with 25 additions and 12 deletions
1 <!-- 1 <!--
2 * @Date: 2025-01-09 00:00:00 2 * @Date: 2025-01-09 00:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-11 21:35:04 4 + * @LastEditTime: 2025-09-15 16:00:12
5 * @FilePath: /lls_program/src/components/RankingCard.vue 5 * @FilePath: /lls_program/src/components/RankingCard.vue
6 * @Description: 排行榜卡片组件 6 * @Description: 排行榜卡片组件
7 --> 7 -->
...@@ -45,7 +45,9 @@ ...@@ -45,7 +45,9 @@
45 <view class="top-three"> 45 <view class="top-three">
46 <!-- 第二名 --> 46 <!-- 第二名 -->
47 <view v-if="topRanks[1]" class="rank-item second"> 47 <view v-if="topRanks[1]" class="rank-item second">
48 - <view class="crown crown-silver">👑</view> 48 + <view class="crown">
49 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-silver.png" class="w-5 h-5" mode="aspectFill" />
50 + </view>
49 <view class="avatar"> 51 <view class="avatar">
50 <image :src="topRanks[1]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 52 <image :src="topRanks[1]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
51 </view> 53 </view>
...@@ -59,7 +61,9 @@ ...@@ -59,7 +61,9 @@
59 61
60 <!-- 第一名 --> 62 <!-- 第一名 -->
61 <view v-if="topRanks[0]" class="rank-item first"> 63 <view v-if="topRanks[0]" class="rank-item first">
62 - <view class="crown crown-gold">👑</view> 64 + <view class="crown">
65 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-gold.png" class="w-5 h-5" mode="aspectFill" />
66 + </view>
63 <view class="avatar"> 67 <view class="avatar">
64 <image :src="topRanks[0]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 68 <image :src="topRanks[0]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
65 </view> 69 </view>
...@@ -73,7 +77,9 @@ ...@@ -73,7 +77,9 @@
73 77
74 <!-- 第三名 --> 78 <!-- 第三名 -->
75 <view v-if="topRanks[2]" class="rank-item third"> 79 <view v-if="topRanks[2]" class="rank-item third">
76 - <view class="crown crown-bronze">👑</view> 80 + <view class="crown">
81 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-bronze.png" class="w-5 h-5" mode="aspectFill" />
82 + </view>
77 <view class="avatar"> 83 <view class="avatar">
78 <image :src="topRanks[2]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 84 <image :src="topRanks[2]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
79 </view> 85 </view>
...@@ -484,11 +490,11 @@ defineExpose({ ...@@ -484,11 +490,11 @@ defineExpose({
484 } 490 }
485 491
486 &.crown-silver { 492 &.crown-silver {
487 - filter: hue-rotate(45deg) brightness(1.2); 493 + filter: hue-rotate(20deg) brightness(1.2);
488 } 494 }
489 495
490 &.crown-bronze { 496 &.crown-bronze {
491 - filter: hue-rotate(25deg) brightness(0.9); 497 + filter: hue-rotate(10deg) brightness(0.9);
492 } 498 }
493 } 499 }
494 500
......
1 <!-- 1 <!--
2 * @Date: 2025-09-01 13:07:52 2 * @Date: 2025-09-01 13:07:52
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-15 15:10:07 4 + * @LastEditTime: 2025-09-15 15:59:31
5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue 5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -47,7 +47,10 @@ ...@@ -47,7 +47,10 @@
47 <view v-if="!loading && topThreeData.length > 0" class="top-three"> 47 <view v-if="!loading && topThreeData.length > 0" class="top-three">
48 <!-- 第二名 --> 48 <!-- 第二名 -->
49 <view v-if="topThreeData[1]" class="rank-item second"> 49 <view v-if="topThreeData[1]" class="rank-item second">
50 - <view class="crown crown-silver">👑</view> 50 + <!-- <view class="crown crown-silver">👑</view> -->
51 + <view class="crown">
52 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-silver.png" class="w-5 h-5" mode="aspectFill" />
53 + </view>
51 <view class="avatar"> 54 <view class="avatar">
52 <image :src="topThreeData[1]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 55 <image :src="topThreeData[1]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
53 </view> 56 </view>
...@@ -61,7 +64,9 @@ ...@@ -61,7 +64,9 @@
61 64
62 <!-- 第一名 --> 65 <!-- 第一名 -->
63 <view v-if="topThreeData[0]" class="rank-item first"> 66 <view v-if="topThreeData[0]" class="rank-item first">
64 - <view class="crown crown-gold">👑</view> 67 + <view class="crown">
68 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-gold.png" class="w-5 h-5" mode="aspectFill" />
69 + </view>
65 <view class="avatar"> 70 <view class="avatar">
66 <image :src="topThreeData[0]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 71 <image :src="topThreeData[0]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
67 </view> 72 </view>
...@@ -75,7 +80,9 @@ ...@@ -75,7 +80,9 @@
75 80
76 <!-- 第三名 --> 81 <!-- 第三名 -->
77 <view v-if="topThreeData[2]" class="rank-item third"> 82 <view v-if="topThreeData[2]" class="rank-item third">
78 - <view class="crown crown-bronze">👑</view> 83 + <view class="crown">
84 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-bronze.png" class="w-5 h-5" mode="aspectFill" />
85 + </view>
79 <view class="avatar"> 86 <view class="avatar">
80 <image :src="topThreeData[2]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" /> 87 <image :src="topThreeData[2]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
81 </view> 88 </view>
...@@ -479,11 +486,11 @@ onMounted(async () => { ...@@ -479,11 +486,11 @@ onMounted(async () => {
479 } 486 }
480 487
481 &.crown-silver { 488 &.crown-silver {
482 - filter: hue-rotate(45deg) brightness(1.2); 489 + filter: hue-rotate(20deg) brightness(1.2);
483 } 490 }
484 491
485 &.crown-bronze { 492 &.crown-bronze {
486 - filter: hue-rotate(25deg) brightness(0.9); 493 + filter: hue-rotate(10deg) brightness(0.9);
487 } 494 }
488 } 495 }
489 496
......