From 27a947878ae358a4b3de978222d2fb3c0c0511e2 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Thu, 17 Apr 2025 14:53:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(market):=20=E9=87=8D=E6=9E=84=E5=B8=82?=
 =?UTF-8?q?=E5=9C=BA=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=BB=9F=E8=AE=A1=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换原有的 fui-progress 组件为自定义的进度条样式
- 优化目标、预测、成交数据的展示布局
- 添加进度条背景色和文字颜色的动态样式
- 调整统计项目的样式和间距
---
 pages/market/index/index.vue | 96 +++++++++++++++++++++++++++---------
 1 file changed, 73 insertions(+), 23 deletions(-)

diff --git a/pages/market/index/index.vue b/pages/market/index/index.vue
index 9c2d037..96a5f0e 100644
--- a/pages/market/index/index.vue
+++ b/pages/market/index/index.vue
@@ -57,24 +57,33 @@
 <!--					目标-->
 					<view class="right1">
 						<view style="text-align: center;">{{infoData.date}}</view>
-						<view style="width: 100%;height: 80%;padding: 12rpx;">
-							<view style="padding: 10rpx;">目标 {{infoData.goal_percent}}%</view>
-							<fui-progress :percent="100" background="#ddd" activeColor="#FFB703" height="20"></fui-progress>
-						</view>
-<!--            预测-->
-						<view style="width: 100%;height: 80%;padding: 12rpx;">
-							<view style="padding: 10rpx;">目标 {{infoData.yc_yj_percent}}%</view>
-							<fui-progress :percent="1" background="#ddd" activeColor="#039f64" height="20"></fui-progress>
-						</view>
-<!--            成交-->
-						<view style="width: 100%;height: 80%;padding: 12rpx;">
-							<view style="padding: 10rpx;">目标 {{infoData.cj_yj_percent}}%</view>
-							<fui-progress :percent="20" background="#ddd" activeColor="#4066f2" height="20"></fui-progress>
-						</view>
-<!--						<view style="width: 100%;height: 80%;padding: 12rpx;">-->
-<!--							<view style="padding: 10rpx;">目标 8%</view>-->
-<!--							<fui-progress :percent="8" background="#ddd" activeColor="#3b8bd1" height="20"></fui-progress>-->
-<!--						</view>-->
+            <view class="statistics_box">
+<!--目标-->
+              <view class="item">
+                <view class="box">
+                  <view class="progress-bar" :style="{ height: `${infoData.goal_percent}%`, background: '#f59a23' }"></view>
+                  <view class="ratio" :style="{ color: infoData.goal_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.goal_percent }}%</view>
+                </view>
+                <view class="title">目标</view>
+              </view>
+<!--预测-->
+              <view class="item">
+                <view class="box">
+                  <view class="progress-bar" :style="{ height: `${infoData.yc_yj_percent}%`, background: '#039f64' }"></view>
+                  <view class="ratio" :style="{ color: infoData.yc_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.yc_yj_percent }}%</view>
+                </view>
+                <view class="title">预测</view>
+              </view>
+<!--成交-->
+              <view class="item">
+                <view class="box">
+                  <view class="progress-bar" :style="{ height: `${infoData.cj_yj_percent}%`, background: '#4066f2' }"></view>
+                  <view class="ratio" :style="{ color: infoData.cj_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.cj_yj_percent }}%</view>
+                </view>
+                <view class="title">成交</view>
+              </view>
+
+            </view>
 					</view>
 
 				</view>
@@ -262,11 +271,52 @@ export default {
 		margin: auto;
 	}
 
-	.right1 {
-		width: 48%;
-		height: 95%;
-		margin: auto;
-	}
+  .right1 {
+    width: 48%;
+    height: 95%;
+    margin: auto;
+    .statistics_box {
+      margin: auto;
+      margin-top: 10rpx;
+      display: flex;
+      justify-content: space-between;
+      .item {
+        width: 90rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .box {
+          width: 100%;
+          height: 328rpx;
+          border: 1px solid #ddd;
+          border-radius: 6rpx;
+          background: #f5f5f5;
+          position: relative;
+          .progress-bar {
+            width: 100%;
+            height: 0;
+            transition: height 0.3s ease;
+            position: absolute;
+            bottom: 0;
+          }
+          .ratio {
+            width: 100%;
+            position: absolute;
+            bottom: -0rpx;
+            font-size: 26rpx;
+            text-align: center;
+          }
+        }
+        .title {
+          margin-top: 5rpx;
+          padding: 0;
+          font-size: 26rpx;
+          color: #999999;;
+          text-align: center;
+        }
+      }
+    }
+  }
 	
 	.this_month {
 		width: 100%;