refactor(stargalaxy): simplify rank — PodiumCard uses 1/2/3 directly (no +4 offset)
This commit is contained in:
parent
563969c4e0
commit
b130a51474
@ -5,7 +5,7 @@
|
||||
<!-- 相框(最底层) -->
|
||||
<image
|
||||
class="podium-frame"
|
||||
:src="`/static/square/galaxy/LV${rank - 3}.png`"
|
||||
:src="`/static/square/galaxy/LV${rank}.png`"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image
|
||||
@ -16,14 +16,14 @@
|
||||
</view>
|
||||
|
||||
<!-- TOP N 标签(cover 下方居中) -->
|
||||
<view class="top-label">TOP {{ rank - 3 }}</view>
|
||||
<view class="top-label">TOP {{ rank }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
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"]);
|
||||
@ -42,7 +42,7 @@ function handleClick() {
|
||||
}
|
||||
|
||||
/* TOP 1: 中央大卡(最大) */
|
||||
.podium-4 {
|
||||
.podium-1 {
|
||||
top: 400rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@ -51,7 +51,7 @@ function handleClick() {
|
||||
}
|
||||
|
||||
/* TOP 2: 左上 */
|
||||
.podium-5 {
|
||||
.podium-2 {
|
||||
top: 120rpx;
|
||||
left: 60rpx;
|
||||
width: 200rpx;
|
||||
@ -59,7 +59,7 @@ function handleClick() {
|
||||
}
|
||||
|
||||
/* TOP 3: 右上 */
|
||||
.podium-6 {
|
||||
.podium-3 {
|
||||
top: 150rpx;
|
||||
right: 60rpx;
|
||||
width: 192rpx;
|
||||
@ -67,22 +67,22 @@ function handleClick() {
|
||||
}
|
||||
|
||||
/* TOP N 标签(按 rank 区分样式) */
|
||||
.podium-4 .top-label {
|
||||
.podium-1 .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 {
|
||||
.podium-2 .top-label,
|
||||
.podium-3 .top-label {
|
||||
width: 78rpx;
|
||||
height: 18rpx;
|
||||
font-size: 11rpx;
|
||||
}
|
||||
.podium-5 .top-label {
|
||||
.podium-2 .top-label {
|
||||
background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
|
||||
}
|
||||
.podium-6 .top-label {
|
||||
.podium-3 .top-label {
|
||||
background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
v-for="(item, i) in podiumItems"
|
||||
:key="item.id || i"
|
||||
:item="item"
|
||||
:rank="i + 4"
|
||||
:rank="i + 1"
|
||||
@cardClick="handleCardClick"
|
||||
/>
|
||||
<!-- </view> -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user