perf(stargalaxy): inline displayRank/frameSrc into template, drop computed
This commit is contained in:
parent
617bb201dc
commit
7b7902bba6
@ -5,7 +5,7 @@
|
|||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
<!-- 相框(最底层) -->
|
<!-- 相框(最底层) -->
|
||||||
<image class="podium-frame" :src="frameSrc" mode="aspectFit" />
|
<image class="podium-frame" :src="`/static/square/galaxy/LV${rank - 3}.png`" mode="aspectFit" />
|
||||||
|
|
||||||
<!-- 藏品主图(不规则圆角) -->
|
<!-- 藏品主图(不规则圆角) -->
|
||||||
<view class="cover-wrap">
|
<view class="cover-wrap">
|
||||||
@ -17,13 +17,11 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- TOP N 标签(cover 下方居中) -->
|
<!-- TOP N 标签(cover 下方居中) -->
|
||||||
<view class="top-label" :style="labelStyle">TOP {{ displayRank }}</view>
|
<view class="top-label" :style="labelStyle">TOP {{ rank - 3 }}</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: { type: Object, required: true },
|
item: { type: Object, required: true },
|
||||||
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
|
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
|
||||||
@ -31,15 +29,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(["cardClick"]);
|
const emit = defineEmits(["cardClick"]);
|
||||||
|
|
||||||
// 内部 rank 4/5/6 对外显示 1/2/3(颁奖台:TOP 1/2/3)
|
|
||||||
const displayRank = computed(() => props.rank - 3);
|
|
||||||
|
|
||||||
// 相框图片源:rank 4 → LV1, rank 5 → LV2, rank 6 → LV3
|
|
||||||
const frameSrc = computed(() => {
|
|
||||||
const lvNumber = props.rank - 3;
|
|
||||||
return `/static/square/galaxy/LV${lvNumber}.png`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 不同 rank 的标签渐变
|
// 不同 rank 的标签渐变
|
||||||
const labelGradients = {
|
const labelGradients = {
|
||||||
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
|
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user