146 lines
3.0 KiB
Vue
146 lines
3.0 KiB
Vue
<template>
|
||
<view class="level-distribution">
|
||
<text class="card-title">藏品等级分布</text>
|
||
<view v-if="!items || items.length === 0" class="empty-row">
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
<view v-else class="ring-row">
|
||
<view
|
||
v-for="item in items"
|
||
:key="item.level"
|
||
class="ring-cell"
|
||
>
|
||
<view
|
||
class="ring-outer"
|
||
:style="getRingStyle(item)"
|
||
>
|
||
<view class="ring-inner">
|
||
<text class="ring-count">{{ item.count }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="ring-label">{{ item.level }}</text>
|
||
<text class="ring-pct">{{ getPercent(item) }}%</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
items: { type: Array, default: () => [] }, // AssetLevelItem[]
|
||
})
|
||
|
||
function getPercent(item) {
|
||
if (!item.total) return 0
|
||
return Math.round((item.count / item.total) * 100)
|
||
}
|
||
|
||
function getRingStyle(item) {
|
||
const pct = getPercent(item)
|
||
const colorMap = {
|
||
UR: '#FF8A65, #FFD740',
|
||
SSR: '#FF5E9C, #FFB199',
|
||
SR: '#B17BFF, #FF8FE6',
|
||
R: '#5EDFFF, #6FA9FF',
|
||
N: '#C5C5C5, #8C8C8C',
|
||
}
|
||
const colors = colorMap[item.level] || '#999, #ccc'
|
||
// 占位 0 显示灰色环
|
||
if (pct === 0) {
|
||
return {
|
||
background: 'conic-gradient(rgba(255,255,255,0.1) 0deg, rgba(255,255,255,0.1) 360deg)',
|
||
}
|
||
}
|
||
// 渐变环：从顶部开始，pct% 处停止
|
||
return {
|
||
background: `conic-gradient(${colors} 0deg ${pct * 3.6}deg, rgba(255,255,255,0.1) ${pct * 3.6}deg 360deg)`,
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.level-distribution {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 17rpx;
|
||
padding: 20rpx;
|
||
margin-top: 16rpx;
|
||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.card-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.ring-row {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
}
|
||
|
||
.ring-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.ring-outer {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.ring-inner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.ring-count {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #FFFABD;
|
||
font-family: 'Baloo Bhai', sans-serif;
|
||
}
|
||
|
||
.ring-label {
|
||
margin-top: 8rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.ring-pct {
|
||
font-size: 18rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.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>
|