134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<template>
|
||
<view
|
||
class="podium-card"
|
||
:class="['podium-' + rank]"
|
||
:style="cardStyle"
|
||
@click="handleClick"
|
||
>
|
||
<!-- 相框（最底层） -->
|
||
<image class="podium-frame" :src="frameSrc" mode="aspectFit" />
|
||
|
||
<!-- 藏品主图（不规则圆角） -->
|
||
<view class="cover-wrap">
|
||
<image
|
||
class="cover-image"
|
||
:src="item.cover_url || item.cover_image || ''"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
|
||
<!-- TOP N 标签（cover 下方居中） -->
|
||
<view class="top-label" :style="labelStyle">TOP {{ displayRank }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
|
||
const props = defineProps({
|
||
item: { type: Object, required: true },
|
||
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
|
||
size: { type: Object, default: () => ({ width: 120, height: 130 }) },
|
||
});
|
||
|
||
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 的标签渐变
|
||
const labelGradients = {
|
||
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
|
||
5: "radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)", // 银
|
||
6: "radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)", // 铜
|
||
};
|
||
|
||
const labelSizes = {
|
||
4: { w: 96, h: 22, font: 13 },
|
||
5: { w: 78, h: 18, font: 11 },
|
||
6: { w: 78, h: 18, font: 11 },
|
||
};
|
||
|
||
// 外框颜色（金/银/铜）
|
||
const frameGradients = {
|
||
4: "radial-gradient(ellipse at -10% 5%, #FFD700 0%, #FF3939 32%, #FFEDA5 59%, #FF6B6B 100%)",
|
||
5: "radial-gradient(ellipse at -10% 5%, #C0C0C0 0%, #FF6B6B 32%, #E8E8E8 59%, #9A9A9A 100%)",
|
||
6: "radial-gradient(ellipse at -10% 5%, #CD7F32 0%, #FF3939 32%, #E8A45C 59%, #A0522D 100%)",
|
||
};
|
||
|
||
const cardStyle = {
|
||
width: props.size.width + "rpx",
|
||
height: props.size.height + "rpx",
|
||
};
|
||
|
||
const frameStyle = {
|
||
background: frameGradients[props.rank],
|
||
};
|
||
|
||
const labelStyle = {
|
||
width: labelSizes[props.rank].w + "rpx",
|
||
height: labelSizes[props.rank].h + "rpx",
|
||
fontSize: labelSizes[props.rank].font + "rpx",
|
||
background: labelGradients[props.rank],
|
||
};
|
||
|
||
function handleClick() {
|
||
emit("cardClick", props.item);
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.podium-card {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.podium-frame {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cover-wrap {
|
||
position: absolute;
|
||
inset: 10rpx;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
}
|
||
|
||
.cover-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
.top-label {
|
||
position: absolute;
|
||
bottom: -4rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 11rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
|
||
box-shadow: 0 6rpx 16rpx rgba(255, 140, 0, 0.5);
|
||
z-index: 7;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
</style>
|