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

perf(stargalaxy): replace label JS constants with pure CSS classes (.podium-N .top-label)

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

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

@ -1,14 +1,13 @@
<template>
<view
class="podium-card"
:class="['podium-' + rank]"
@click="handleClick"
>
<!-- 相框（最底层） -->
<image class="podium-frame" :src="`/static/square/galaxy/LV${rank - 3}.png`" mode="aspectFit" />
<view class="podium-card" :class="['podium-' + rank]" @click="handleClick">
<!-- 藏品主图（不规则圆角） -->
<view class="cover-wrap">
<!-- 相框（最底层） -->
<image
class="podium-frame"
:src="`/static/square/galaxy/LV${rank - 3}.png`"
mode="aspectFit"
/>
<image
class="cover-image"
:src="item.cover_url || item.cover_image || ''"
@ -17,7 +16,7 @@
</view>
<!-- TOP N 标签（cover 下方居中） -->
<view class="top-label" :style="labelStyle">TOP {{ rank - 3 }}</view>
<view class="top-label">TOP {{ rank - 3 }}</view>
</view>
</template>
@ -29,26 +28,6 @@ const props = defineProps({
const emit = defineEmits(["cardClick"]);
// 不同 rank 的标签渐变
const labelGradients = {
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
5: "radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)", // 银
6: "radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)", // 铜
};
const labelSizes = {
4: { w: 96, h: 22, font: 13 },
5: { w: 78, h: 18, font: 11 },
6: { w: 78, h: 18, font: 11 },
};
const labelStyle = {
width: labelSizes[props.rank].w + "rpx",
height: labelSizes[props.rank].h + "rpx",
fontSize: labelSizes[props.rank].font + "rpx",
background: labelGradients[props.rank],
};
function handleClick() {
emit("cardClick", props.item);
}
@ -87,6 +66,26 @@ function handleClick() {
height: 192rpx;
}
/* TOP N 标签（按 rank 区分样式） */
.podium-4 .top-label {
width: 96rpx;
height: 22rpx;
font-size: 13rpx;
background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%);
}
.podium-5 .top-label,
.podium-6 .top-label {
width: 78rpx;
height: 18rpx;
font-size: 11rpx;
}
.podium-5 .top-label {
background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
}
.podium-6 .top-label {
background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
}
.podium-frame {
position: absolute;
inset: 0;