feat(wealth): 新增财富能量环组件

cfc-frontend/components/WealthEnergyRing.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="wealth-ring">
+    <view class="ring-wrap">
+      <!-- SVG 环形进度 -->
+      <svg class="ring-svg" viewBox="0 0 200 200">
+        <!-- 背景轨道 -->
+        <circle cx="100" cy="100" r="88" fill="none" stroke="#FEF3C7" stroke-width="14" />
+        <!-- 进度弧线 -->
+        <circle
+          class="ring-progress"
+          cx="100" cy="100" r="88" fill="none"
+          stroke="url(#ringGradient)" stroke-width="14" stroke-linecap="round"
+          :stroke-dasharray="circumference" :stroke-dashoffset="progressOffset" />
+        <defs>
+          <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#F59E0B" />
+            <stop offset="100%" stop-color="#FBBF24" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <!-- 中心文字 -->
+      <view class="ring-center">
+        <text class="ring-score">{{ score }}</text>
+        <text class="ring-total">/ 100</text>
+        <text class="ring-level">{{ levelText }}</text>
+      </view>
+      <!-- 水波纹 -->
+      <view class="ripple-1"></view>
+      <view class="ripple-2"></view>
+    </view>
+    <view class="ring-slogan">
+      <text class="ring-slogan-text">富足源于利他与坚持</text>
+      <text class="ring-delta" v-if="delta > 0">较上月 ↑ {{ delta }}%</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'WealthEnergyRing',
+  props: {
+    score: {
+      type: Number,
+      default: 0
+    },
+    delta: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    circumference() {
+      // 2 * Math.PI * 88 ≈ 552.92
+      return 552.92
+    },
+    progressOffset() {
+      var pct = Math.max(0, Math.min(100, this.score)) / 100
+      return Math.round(552.92 * (1 - pct))
+    },
+    levelText() {
+      var s = this.score
+      if (s >= 70) return '富足'
+      if (s >= 30) return '成长'
+      return '播种'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wealth-ring {
+  margin: 20rpx 30rpx;
+  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
+  border-radius: 24rpx;
+  padding: 40rpx 30rpx 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.12);
+}
+.ring-wrap {
+  position: relative;
+  width: 360rpx;
+  height: 360rpx;
+}
+.ring-svg {
+  width: 360rpx;
+  height: 360rpx;
+  transform: rotate(-90deg);
+  position: relative;
+  z-index: 2;
+}
+.ring-progress {
+  transition: stroke-dashoffset 0.8s ease;
+  filter: drop-shadow(0 2rpx 4rpx rgba(245, 158, 11, 0.3));
+}
+.ring-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+.ring-score {
+  font-size: 72rpx;
+  font-weight: bold;
+  color: #92400E;
+  line-height: 1.1;
+}
+.ring-total {
+  font-size: 24rpx;
+  color: #B45309;
+  opacity: 0.7;
+}
+.ring-level {
+  margin-top: 8rpx;
+  font-size: 28rpx;
+  color: #F59E0B;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+}
+.ripple-1,
+.ripple-2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 360rpx;
+  height: 360rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(245, 158, 11, 0.25);
+  animation: ripple 3s ease-out infinite;
+  pointer-events: none;
+}
+.ripple-2 {
+  animation-delay: 1.5s;
+}
+@keyframes ripple {
+  0% {
+    opacity: 0.6;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+.ring-slogan {
+  margin-top: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ring-slogan-text {
+  font-size: 26rpx;
+  color: #92400E;
+  letter-spacing: 2rpx;
+}
+.ring-delta {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #F59E0B;
+  font-weight: 500;
+}
+</style>