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

perf(stargalaxy): replace JS computed sizing with pure CSS classes (.podium-4/5/6)

Browse Source
This commit is contained in:
zheng020 2026-06-10 17:22:13 +08:00
parent 7f831c4fbe
commit 617bb201dc
1 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@
<view <view
class="podium-card" class="podium-card"
:class="['podium-' + rank]" :class="['podium-' + rank]"
:style="[cardStyle, internalPosition]"
@click="handleClick" @click="handleClick"
> >
<!-- 相框（最底层） --> <!-- 相框（最底层） -->
@ -32,26 +31,6 @@ const props = defineProps({
const emit = defineEmits(["cardClick"]); const emit = defineEmits(["cardClick"]);
// 颁奖台 3 个位置的尺寸和位置（与 ScatteredRanks 的 rpx 单位对齐）
const PODIUM_SIZES = {
4: { width: 240, height: 260 }, // TOP 1
5: { width: 200, height: 200 }, // TOP 2
6: { width: 192, height: 192 }, // TOP 3
};
const PODIUM_POSITIONS = {
4: {
position: "absolute",
top: "400rpx",
left: "50%",
transform: "translateX(-50%)",
},
5: { position: "absolute", top: "120rpx", left: "60rpx" },
6: { position: "absolute", top: "150rpx", right: "60rpx" },
};
const internalSize = computed(() => PODIUM_SIZES[props.rank]);
const internalPosition = computed(() => PODIUM_POSITIONS[props.rank]);
// 内部 rank 4/5/6 对外显示 1/2/3（颁奖台：TOP 1/2/3） // 内部 rank 4/5/6 对外显示 1/2/3（颁奖台：TOP 1/2/3）
const displayRank = computed(() => props.rank - 3); const displayRank = computed(() => props.rank - 3);
@ -74,11 +53,6 @@ const labelSizes = {
6: { w: 78, h: 18, font: 11 }, 6: { w: 78, h: 18, font: 11 },
}; };
const cardStyle = computed(() => ({
width: internalSize.value.width + "rpx",
height: internalSize.value.height + "rpx",
}));
const labelStyle = { const labelStyle = {
width: labelSizes[props.rank].w + "rpx", width: labelSizes[props.rank].w + "rpx",
height: labelSizes[props.rank].h + "rpx", height: labelSizes[props.rank].h + "rpx",
@ -93,12 +67,37 @@ function handleClick() {
<style scoped> <style scoped>
.podium-card { .podium-card {
position: relative; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* TOP 1: 中央大卡（最大） */
.podium-4 {
top: 400rpx;
left: 50%;
transform: translateX(-50%);
width: 240rpx;
height: 260rpx;
}
/* TOP 2: 左上 */
.podium-5 {
top: 120rpx;
left: 60rpx;
width: 200rpx;
height: 200rpx;
}
/* TOP 3: 右上 */
.podium-6 {
top: 150rpx;
right: 60rpx;
width: 192rpx;
height: 192rpx;
}
.podium-frame { .podium-frame {
position: absolute; position: absolute;
inset: 0; inset: 0;