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