45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<view class="collection-matrix">
|
|
<text class="section-title">藏品矩阵</text>
|
|
|
|
<!-- TOP 5 -->
|
|
<TopFiveAssets :items="topFive || []" />
|
|
|
|
<!-- 等级分布 -->
|
|
<LevelDistribution :items="levels" />
|
|
|
|
<!-- 后续 Task 12 在此追加 UpcomingUpgrades / RecentUpgrades -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import TopFiveAssets from './TopFiveAssets.vue'
|
|
import LevelDistribution from './LevelDistribution.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);
|
|
}
|
|
</style>
|