Merge branch 'bd-dev' of gitee.com:cabbage_qd/web-base-h5 into bd-test

pages/mine/index.vue

@@ -88,49 +88,26 @@
           <!-- 当前结余状态 -->
           <view class="yestDay">
             <view class="yes_t">拓展结余</view>
-            <view class="unified_balance_container">
-              <!-- 统一进度条 -->
-              <view class="unified_progress_bar">
-                <!-- 左区进度(从左开始) -->
             <view
-                  class="left_progress"
+              :class="
-                  :class="{ big_area: balanceProgress.isLeftBig }"
+                balanceProgress.leftValue != 0 &&
+                balanceProgress.rightValue != 0
+                  ? 'ju_left_bottom1'
+                  : 'ju_left_bottom'
+              "
+            >
+              <view
+                class="current-progress"
                 :style="{
-                    width: Math.max(balanceProgress.leftProgress, 0) + '%',
+                  width: yesPercent(
+                    balanceProgress.leftValue,
+                    balanceProgress.rightValue
+                  ),
                 }"
-                  v-if="balanceProgress.leftProgress > 0"
+              ></view>
-                >
+              <view class="cha">
-                </view>
+                左区 {{ balanceProgress.leftValue || 0 }}/右区
-
+                {{ balanceProgress.rightValue || 0 }}
-                <!-- 右区进度(从右开始) -->
-                <view
-                  class="right_progress"
-                  :class="{ big_area: !balanceProgress.isLeftBig }"
-                  :style="{
-                    width: Math.max(balanceProgress.rightProgress, 0) + '%',
-                  }"
-                  v-if="balanceProgress.rightProgress > 0"
-                >
-                </view>
-
-                <!-- 左区数值显示(固定在左半区终点) -->
-                <view
-                  class="endpoint_label left_endpoint"
-                  :class="{ big_area_text: balanceProgress.isLeftBig }"
-                >
-                  左区: {{ balanceProgress.leftValue }}
-                </view>
-
-                <!-- 右区数值显示(固定在右半区终点) -->
-                <view
-                  class="endpoint_label right_endpoint"
-                  :class="{ big_area_text: !balanceProgress.isLeftBig }"
-                >
-                  右区: {{ balanceProgress.rightValue }}
-                </view>
-
-                <!-- 中心分割线 -->
-                <view class="center_divider"></view>
               </view>
             </view>
           </view>
@@ -575,41 +552,26 @@ export default {
     },
     // 计算结余状态
     balanceProgress() {
-      if (
+      if (!this.balanceData.tree || !this.balanceData.tree.length) {
-        !this.balanceData.tree ||
-        !this.balanceData.tree.length ||
-        !this.balanceData.config
-      ) {
         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 total = leftValue + rightValue
-      const maxSmall = parseFloat(config.expandSmall) || 1
-
-      // 判断大小区
-      const isLeftBig = leftValue >= rightValue
 
       let leftProgress = 0
       let rightProgress = 0
 
-      if (isLeftBig) {
+      if (total > 0) {
-        leftProgress = Math.min((leftValue / maxBig) * 100, 100)
+        leftProgress = (leftValue / total) * 100
-        rightProgress = Math.min((rightValue / maxSmall) * 100, 100)
+        rightProgress = (rightValue / total) * 100
-      } else {
-        leftProgress = Math.min((leftValue / maxSmall) * 100, 100)
-        rightProgress = Math.min((rightValue / maxBig) * 100, 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%);
-  }
-}
 </style>