135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
Vue
<template>
|
|
<view class="top-five-card">
|
|
<text class="card-title">历史藏品收益 TOP 5</text>
|
|
<view v-if="!items || items.length === 0" class="empty-row">
|
|
<text class="empty-text">暂无数据</text>
|
|
</view>
|
|
<view v-else class="top-five-row">
|
|
<view v-for="item in items" :key="item.asset_id" class="top-cell">
|
|
<view class="top-thumb">
|
|
<image
|
|
v-if="item.asset_thumb"
|
|
class="top-thumb-img"
|
|
:src="item.asset_thumb"
|
|
mode="aspectFill"
|
|
/>
|
|
<text v-else class="top-emoji">🏆</text>
|
|
</view>
|
|
<view class="top-badge">
|
|
<text class="top-badge-text">TOP {{ item.rank }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
items: { type: Array, default: () => [] }, // TopAssetItem[]
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-five-card {
|
|
background: linear-gradient(
|
|
106.77deg,
|
|
rgba(255, 223, 119, 0.24) -9.76%,
|
|
rgba(185, 132, 255, 0.24) 44.65%,
|
|
rgba(255, 129, 131, 0.24) 117.82%
|
|
);
|
|
box-shadow: 0px 4px 4px 0px rgba(189, 50, 50, 0.25);
|
|
|
|
border-radius: 14px;
|
|
padding: 20rpx;
|
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
|
|
|
|
position: relative;
|
|
z-index: 2;
|
|
backdrop-filter: blur(3.5px);
|
|
// backdrop-filter: blur(1px);
|
|
}
|
|
|
|
.card-title {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.top-five-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.top-cell {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-thumb {
|
|
width: 80rpx;
|
|
height: 100rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0px 4px 5.8px 0px rgba(226, 51, 51, 0.53);
|
|
transform: rotate(-10deg);
|
|
overflow: hidden; // 裁切 image 贴合圆角
|
|
}
|
|
|
|
// 藏品缩略图：填满 .top-thumb 容器
|
|
.top-thumb-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.top-emoji {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.top-badge {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
opacity: 0.85;
|
|
background: linear-gradient(
|
|
93.1deg,
|
|
rgba(224, 180, 247, 0.71) -12.06%,
|
|
rgba(178, 246, 204, 0.71) 52.09%,
|
|
rgba(98, 178, 244, 0.71) 163.5%
|
|
);
|
|
backdrop-filter: blur(11.699999809265137px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
border-radius: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.top-badge-text {
|
|
font-size: 18rpx;
|
|
font-family: C800;
|
|
font-weight: 600;
|
|
color: #fffabd;
|
|
text-shadow: -1px 1px 4px #ce0909d6;
|
|
}
|
|
|
|
.empty-row {
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-text {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|