cfc/cfc-frontend/components/WealthEnergyRing.vue

<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>