perf(stargalaxy): replace JS computed sizing with pure CSS classes (.podium-4/5/6)
This commit is contained in:
parent
7f831c4fbe
commit
617bb201dc
@ -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/3(颁奖台:TOP 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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user