feat(wealth): 子维度改为水滴水满样式

cfc-frontend/components/WealthSubScores.vue

@@ -1,45 +1,22 @@
 <template>
   <view class="wealth-sub-scores">
-    <view class="section-title">
-      <text class="title">{{ isParent ? '财富维度构成' : '富能量构成' }}</text>
+    <view class="section-header">
+      <text class="title">{{ isParent ? '💧 财富维度构成' : '💧 富能量构成' }}</text>
     </view>
-    
-    <!-- 家长三子维度 -->
-    <view class="sub-grid" v-if="isParent">
-      <view class="sub-item">
-        <view class="sub-label">金钱收入</view>
-        <view class="sub-value" :class="incomeClass">{{ income }}</view>
-        <view class="sub-weight">权重 50%</view>
-      </view>
-      <view class="sub-item">
-        <view class="sub-label">社会成就</view>
-        <view class="sub-value" :class="achievementClass">{{ achievement }}</view>
-        <view class="sub-weight">权重 30%</view>
-      </view>
-      <view class="sub-item">
-        <view class="sub-label">资源网络</view>
-        <view class="sub-value" :class="networkClass">{{ network }}</view>
-        <view class="sub-weight">权重 20%</view>
+
+    <view class="sub-grid">
+      <view class="drop-wrap" v-for="item in subItems" :key="item.key">
+        <view class="drop">
+          <view class="drop-fill" :style="{ height: item.score + '%' }"></view>
+          <text class="drop-score">{{ item.score }}</text>
+        </view>
+        <text class="drop-label">{{ item.label }}</text>
+        <text class="drop-weight">权重 {{ item.weight }}%</text>
       </view>
     </view>
-    
-    <!-- 孩子三子维度 -->
-    <view class="sub-grid" v-else>
-      <view class="sub-item">
-        <view class="sub-label">学业成绩</view>
-        <view class="sub-value" :class="educationClass">{{ education }}</view>
-        <view class="sub-weight">权重 30%</view>
-      </view>
-      <view class="sub-item">
-        <view class="sub-label">社交筹码</view>
-        <view class="sub-value" :class="socialClass">{{ social }}</view>
-        <view class="sub-weight">权重 20%</view>
-      </view>
-      <view class="sub-item">
-        <view class="sub-label">规则博弈</view>
-        <view class="sub-value" :class="pointsClass">{{ points }}</view>
-        <view class="sub-weight">权重 50%</view>
-      </view>
+
+    <view class="drop-tip" v-if="tipText">
+      <text class="drop-tip-text">{{ tipText }}</text>
     </view>
   </view>
 </template>
@@ -81,31 +58,34 @@ export default {
     isParent() {
       return this.role === 'parent'
     },
-    incomeClass() {
-      return this.getScoreClass(this.income)
+    subItems() {
+      if (this.isParent) {
+        return [
+          { key: 'income', label: '金钱收入', score: this.income, weight: 50 },
+          { key: 'achievement', label: '社会成就', score: this.achievement, weight: 30 },
+          { key: 'network', label: '资源网络', score: this.network, weight: 20 }
+        ]
+      }
+      return [
+        { key: 'education', label: '学业成绩', score: this.education, weight: 30 },
+        { key: 'social', label: '社交筹码', score: this.social, weight: 20 },
+        { key: 'points', label: '规则博弈', score: this.points, weight: 50 }
+      ]
     },
-    achievementClass() {
-      return this.getScoreClass(this.achievement)
-    },
-    networkClass() {
-      return this.getScoreClass(this.network)
-    },
-    educationClass() {
-      return this.getScoreClass(this.education)
-    },
-    socialClass() {
-      return this.getScoreClass(this.social)
-    },
-    pointsClass() {
-      return this.getScoreClass(this.points)
-    }
-  },
-  methods: {
-    getScoreClass(score) {
-      if (score >= 80) return 'score-excellent'
-      if (score >= 60) return 'score-good'
-      if (score >= 40) return 'score-average'
-      return 'score-poor'
+    tipText() {
+      var items = this.subItems
+      var filtered = items.filter(function(item) {
+        return item.score > 0
+      })
+      if (filtered.length < 2) return ''
+      var best = filtered.reduce(function(a, b) {
+        return a.score >= b.score ? a : b
+      })
+      var worst = filtered.reduce(function(a, b) {
+        return a.score <= b.score ? a : b
+      })
+      if (best.key === worst.key) return '均衡发展，继续保持！'
+      return best.label + '表现优秀，建议提升' + worst.label
     }
   }
 }
@@ -113,63 +93,82 @@ export default {
 
 <style scoped>
 .wealth-sub-scores {
-  margin: 20rpx;
+  margin: 20rpx 30rpx;
   padding: 24rpx;
   background: #fff;
-  border-radius: 12rpx;
+  border-radius: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
 }
-.section-title {
+.section-header {
   margin-bottom: 20rpx;
 }
-.section-title .title {
+.title {
   font-size: 30rpx;
   font-weight: bold;
   color: #333;
 }
 .sub-grid {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
 }
-.sub-item {
+.drop-wrap {
   flex: 1;
-  text-align: center;
-  padding: 20rpx;
-  background: #f9f9f9;
-  border-radius: 8rpx;
   margin: 0 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.sub-item:first-child {
+.drop-wrap:first-child {
   margin-left: 0;
 }
-.sub-item:last-child {
+.drop-wrap:last-child {
   margin-right: 0;
 }
-.sub-label {
-  font-size: 24rpx;
-  color: #666;
-  margin-bottom: 12rpx;
+.drop {
+  position: relative;
+  width: 120rpx;
+  height: 150rpx;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  background: #FEF3C7;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.drop-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
+  transition: height 0.8s ease;
 }
-.sub-value {
+.drop-score {
+  position: relative;
+  z-index: 1;
   font-size: 40rpx;
   font-weight: bold;
-  margin-bottom: 8rpx;
-}
-.score-excellent {
-  color: #52c41a;
-}
-.score-good {
-  color: #1890ff;
-}
-.score-average {
-  color: #faad14;
+  color: #92400E;
 }
-.score-poor {
-  color: #ff4d4f;
+.drop-label {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: #333;
+  font-weight: 500;
 }
-.sub-weight {
+.drop-weight {
   font-size: 20rpx;
   color: #999;
+  margin-top: 4rpx;
+}
+.drop-tip {
+  margin-top: 20rpx;
+  padding: 16rpx 20rpx;
+  background: #FFF7ED;
+  border-radius: 12rpx;
+}
+.drop-tip-text {
+  font-size: 24rpx;
+  color: #92400E;
 }
 </style>