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

This commit is contained in:
zheng020 2026-06-10 17:22:13 +08:00
parent 7f831c4fbe
commit 617bb201dc

View File

@ -2,7 +2,6 @@
<view
class="podium-card"
:class="['podium-' + rank]"
:style="[cardStyle, internalPosition]"
@click="handleClick"
>
<!-- 相框最底层 -->
@ -32,26 +31,6 @@ const props = defineProps({
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/3TOP 1/2/3
const displayRank = computed(() => props.rank - 3);
@ -74,11 +53,6 @@ const labelSizes = {
6: { w: 78, h: 18, font: 11 },
};
const cardStyle = computed(() => ({
width: internalSize.value.width + "rpx",
height: internalSize.value.height + "rpx",
}));
const labelStyle = {
width: labelSizes[props.rank].w + "rpx",
height: labelSizes[props.rank].h + "rpx",
@ -93,12 +67,37 @@ function handleClick() {
<style scoped>
.podium-card {
position: relative;
position: absolute;
display: flex;
align-items: 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 {
position: absolute;
inset: 0;