130 lines
2.6 KiB
Vue
130 lines
2.6 KiB
Vue
<template>
|
||
<view
|
||
class="podium-card"
|
||
:class="['podium-' + rank]"
|
||
@click="handleClick"
|
||
>
|
||
<!-- 相框（最底层） -->
|
||
<image class="podium-frame" :src="`/static/square/galaxy/LV${rank - 3}.png`" 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 {{ rank - 3 }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
item: { type: Object, required: true },
|
||
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
|
||
});
|
||
|
||
const emit = defineEmits(["cardClick"]);
|
||
|
||
// 不同 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 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: 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;
|
||
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>
|