61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
|
<view class="collection-matrix">
|
|
<text class="section-title">藏品矩阵</text>
|
|
|
|
<!-- TOP 5 -->
|
|
<TopFiveAssets :items="topFive || []" />
|
|
|
|
<!-- 等级分布 -->
|
|
<LevelDistribution :items="levels" />
|
|
|
|
<!-- 即将升级 + 最近升级 (双列) -->
|
|
<view class="upgrades-two-col">
|
|
<UpcomingUpgrades :items="upgrades?.upcoming || []" />
|
|
<RecentUpgrades :items="upgrades?.recent || []" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import TopFiveAssets from './TopFiveAssets.vue'
|
|
import LevelDistribution from './LevelDistribution.vue'
|
|
import UpcomingUpgrades from './UpcomingUpgrades.vue'
|
|
import RecentUpgrades from './RecentUpgrades.vue'
|
|
|
|
defineProps({
|
|
topFive: { type: Array, default: () => [] },
|
|
levels: { type: Array, default: () => [] },
|
|
upgrades: { type: Object, default: () => ({ upcoming: [], recent: [] }) },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.collection-matrix {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 22rpx;
|
|
padding: 24rpx;
|
|
margin: 24rpx 0;
|
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 24rpx;
|
|
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.upgrades-two-col {
|
|
display: flex;
|
|
gap: 12rpx;
|
|
margin-top: 16rpx;
|
|
|
|
> * {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|