129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template>
|
||
<view class="podium-card" :class="['podium-' + rank]" @click="handleClick">
|
||
<!-- 藏品主图（不规则圆角） -->
|
||
<view class="cover-wrap">
|
||
<!-- 相框（最底层） -->
|
||
<image
|
||
class="podium-frame"
|
||
:src="`/static/square/galaxy/LV${rank - 3}.png`"
|
||
mode="aspectFit"
|
||
/>
|
||
<image
|
||
class="cover-image"
|
||
:src="item.cover_url || item.cover_image || ''"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
|
||
<!-- TOP N 标签（cover 下方居中） -->
|
||
<view class="top-label">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"]);
|
||
|
||
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;
|
||
}
|
||
|
||
/* TOP N 标签（按 rank 区分样式） */
|
||
.podium-4 .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 {
|
||
width: 78rpx;
|
||
height: 18rpx;
|
||
font-size: 11rpx;
|
||
}
|
||
.podium-5 .top-label {
|
||
background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
|
||
}
|
||
.podium-6 .top-label {
|
||
background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
|
||
}
|
||
|
||
.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>
|