xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(stargalaxy): simplify rank — PodiumCard uses 1/2/3 directly (no +4 offset)

Browse Source
This commit is contained in:
zheng020 2026-06-10 17:28:31 +08:00
parent 563969c4e0
commit b130a51474
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/pages/square/components/StarGalaxy/PodiumCard.vue
View File

@ -5,7 +5,7 @@
<!-- 相框（最底层） --> <!-- 相框（最底层） -->
<image <image
class="podium-frame" class="podium-frame"
:src="`/static/square/galaxy/LV${rank - 3}.png`" :src="`/static/square/galaxy/LV${rank}.png`"
mode="aspectFit" mode="aspectFit"
/> />
<image <image
@ -16,14 +16,14 @@
</view> </view>
<!-- TOP N 标签（cover 下方居中） --> <!-- TOP N 标签（cover 下方居中） -->
<view class="top-label">TOP {{ rank - 3 }}</view> <view class="top-label">TOP {{ rank }}</view>
</view> </view>
</template> </template>
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
item: { type: Object, required: true }, item: { type: Object, required: true },
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 }, rank: { type: Number, required: true, validator: (v) => v >= 1 && v <= 3 },
}); });
const emit = defineEmits(["cardClick"]); const emit = defineEmits(["cardClick"]);
@ -42,7 +42,7 @@ function handleClick() {
} }
/* TOP 1: 中央大卡（最大） */ /* TOP 1: 中央大卡（最大） */
.podium-4 { .podium-1 {
top: 400rpx; top: 400rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -51,7 +51,7 @@ function handleClick() {
} }
/* TOP 2: 左上 */ /* TOP 2: 左上 */
.podium-5 { .podium-2 {
top: 120rpx; top: 120rpx;
left: 60rpx; left: 60rpx;
width: 200rpx; width: 200rpx;
@ -59,7 +59,7 @@ function handleClick() {
} }
/* TOP 3: 右上 */ /* TOP 3: 右上 */
.podium-6 { .podium-3 {
top: 150rpx; top: 150rpx;
right: 60rpx; right: 60rpx;
width: 192rpx; width: 192rpx;
@ -67,22 +67,22 @@ function handleClick() {
} }
/* TOP N 标签（按 rank 区分样式） */ /* TOP N 标签（按 rank 区分样式） */
.podium-4 .top-label { .podium-1 .top-label {
width: 96rpx; width: 96rpx;
height: 22rpx; height: 22rpx;
font-size: 13rpx; font-size: 13rpx;
background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%); background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%);
} }
.podium-5 .top-label, .podium-2 .top-label,
.podium-6 .top-label { .podium-3 .top-label {
width: 78rpx; width: 78rpx;
height: 18rpx; height: 18rpx;
font-size: 11rpx; font-size: 11rpx;
} }
.podium-5 .top-label { .podium-2 .top-label {
background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a); background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
} }
.podium-6 .top-label { .podium-3 .top-label {
background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d); background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
} }

2
frontend/pages/square/components/StarGalaxy/index.vue
View File

@ -34,7 +34,7 @@
v-for="(item, i) in podiumItems" v-for="(item, i) in podiumItems"
:key="item.id || i" :key="item.id || i"
:item="item" :item="item"
:rank="i + 4" :rank="i + 1"
@cardClick="handleCardClick" @cardClick="handleCardClick"
/> />
<!-- </view> --> <!-- </view> -->