diff --git a/pages/mine/index.vue b/pages/mine/index.vue index 63621db..3543a91 100644 --- a/pages/mine/index.vue +++ b/pages/mine/index.vue @@ -88,49 +88,26 @@ 拓展结余 - - - - - - - - - - - - - - 左区: {{ balanceProgress.leftValue }} - - - - - 右区: {{ balanceProgress.rightValue }} - - - - + + + + 左区 {{ balanceProgress.leftValue || 0 }}/右区 + {{ balanceProgress.rightValue || 0 }} @@ -575,41 +552,26 @@ export default { }, // 计算结余状态 balanceProgress() { - if ( - !this.balanceData.tree || - !this.balanceData.tree.length || - !this.balanceData.config - ) { + if (!this.balanceData.tree || !this.balanceData.tree.length) { return { leftProgress: 0, rightProgress: 0, leftValue: 0, rightValue: 0, - maxBig: 0, - maxSmall: 0, } } const treeData = this.balanceData.tree[0] - const config = this.balanceData.config - const leftValue = parseFloat(treeData.leftFirstSurplus) || 0 const rightValue = parseFloat(treeData.rightFirstSurplus) || 0 - const maxBig = parseFloat(config.expandBig) || 1 - const maxSmall = parseFloat(config.expandSmall) || 1 - - // 判断大小区 - const isLeftBig = leftValue >= rightValue + const total = leftValue + rightValue let leftProgress = 0 let rightProgress = 0 - if (isLeftBig) { - leftProgress = Math.min((leftValue / maxBig) * 100, 100) - rightProgress = Math.min((rightValue / maxSmall) * 100, 100) - } else { - leftProgress = Math.min((leftValue / maxSmall) * 100, 100) - rightProgress = Math.min((rightValue / maxBig) * 100, 100) + if (total > 0) { + leftProgress = (leftValue / total) * 100 + rightProgress = (rightValue / total) * 100 } return { @@ -617,9 +579,6 @@ export default { rightProgress, leftValue: leftValue.toFixed(0), rightValue: rightValue.toFixed(0), - maxBig, - maxSmall, - isLeftBig, } }, }, @@ -1449,153 +1408,4 @@ export default { font-size: 24rpx; padding: 0 4rpx; } - -/* 统一结余进度条样式 */ -.unified_balance_container { - flex: 1; - margin: 10rpx; -} - -.progress_text { - position: absolute; - top: 50%; - transform: translateY(-50%); - font-size: 22rpx; - color: #000; - // text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.8); - white-space: nowrap; - z-index: 5; -} - -/* 终点标签样式 */ -.endpoint_label { - position: absolute; - top: 50%; - transform: translateY(-50%); - font-size: 22rpx; - color: #000; - padding: 8rpx 12rpx; - border-radius: 12rpx; - z-index: 15; - font-weight: 500; -} - -.left_endpoint { - left: calc(50% - 10rpx); - transform: translate(-100%, -50%); -} - -.right_endpoint { - right: calc(50% - 10rpx); - transform: translate(100%, -50%); -} - -.left_text { - left: 10rpx; -} - -.right_text { - right: 10rpx; -} - -.unified_progress_bar { - height: 34rpx; - background: #eeeeee; - border-radius: 20rpx; - position: relative; - overflow: hidden; -} - -.left_progress { - position: absolute; - left: 0; - top: 0; - height: 100%; - max-width: 50%; - background: linear-gradient(90deg, #3385d6 0%, #3385d6 100%); - border-radius: 20rpx 0 0 20rpx; - transition: width 0.6s ease-in-out; - overflow: hidden; -} - -.left_progress.big_area { - background: linear-gradient(90deg, #3385d6 0%, #3385d6 100%); - box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3); -} - -.right_progress { - position: absolute; - right: 0; - top: 0; - height: 100%; - max-width: 50%; - background: linear-gradient(270deg, #ffb74d 0%, #ffb74d 100%); - border-radius: 0 20rpx 20rpx 0; - transition: width 0.6s ease-in-out; - overflow: hidden; -} - -.right_progress.big_area { - background: linear-gradient(270deg, #ffb74d 0%, #ffb74d 100%); - box-shadow: 0 2rpx 8rpx rgba(34, 29, 27, 0.3); -} - -.center_divider { - position: absolute; - left: 50%; - top: 0; - width: 2rpx; - height: 100%; - background: transparent; - transform: translateX(-50%); - z-index: 10; - box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2); -} - -.left_progress::before, -.right_progress::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 100deg, - rgba(255, 255, 255, 0) 20%, - rgba(255, 255, 255, 0.4) 50%, - rgba(255, 255, 255, 0) 80% - ); - transform: translateX(-100%); - animation: unified_shimmer_animation 3s infinite linear; -} - -.right_progress::before { - background: linear-gradient( - -100deg, - rgba(255, 255, 255, 0) 20%, - rgba(255, 255, 255, 0.4) 50%, - rgba(255, 255, 255, 0) 80% - ); - transform: translateX(100%); - animation: unified_shimmer_animation_right 3s infinite linear; -} - -@keyframes unified_shimmer_animation { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -@keyframes unified_shimmer_animation_right { - 0% { - transform: translateX(100%); - } - 100% { - transform: translateX(-100%); - } -}