From f11cfe1bda568f24ccd8f914ee4e2dc3e64fd10a Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Mon, 31 Aug 2026 17:58:37 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E4=BB=8A=E6=97=A5?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/overview.vue |  17 +++--
 src/components/home/progress.vue | 107 ++++++++++++++-----------------
 2 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/src/components/home/overview.vue b/src/components/home/overview.vue
index 534f759..689983e 100644
--- a/src/components/home/overview.vue
+++ b/src/components/home/overview.vue
@@ -54,19 +54,21 @@
 }
 
 .card-title {
-  font-size: 15px;
+  font-size: 20px;
   font-weight: bold;
-  color: #333333;
+  color: #ffffff;
 }
 
 .card-date {
-  font-size: 12px;
-  color: #999999;
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
 }
 
 .overview-card {
   margin-top: 12px;
   background: linear-gradient(135deg, #4685FD 0%, #6BA3FF 100%);
+  height: 150px;
 }
 
 .overview-card .card-header {
@@ -92,13 +94,14 @@
 }
 
 .stat-label {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
   margin-bottom: 8px;
 }
 
 .stat-value {
-  font-size: 28px;
+  font-size: 20px;
   font-weight: bold;
   color: #ffffff;
 }
diff --git a/src/components/home/progress.vue b/src/components/home/progress.vue
index 9317859..4d9870c 100644
--- a/src/components/home/progress.vue
+++ b/src/components/home/progress.vue
@@ -1,3 +1,9 @@
+<script setup>
+import { ref } from 'vue'
+
+const current = ref(25)
+</script>
+
 <template>
   <view class="card">
     <view class="card-header">
@@ -11,31 +17,38 @@
     <view class="card-body">
       <view class="progress-content">
         <view class="progress-circle">
-          <text class="progress-percent">
+          <!-- <text class="progress-percent">
             25%
           </text>
           <text class="progress-label">
-            jobs
-          </text>
+            已完成
+          </text> -->
+          <wd-circle v-model="current" :text="`${current}%`" :size="100" />
         </view>
         <view class="progress-details">
           <view class="progress-item">
-            <text class="progress-name">
-              压实合格率
-            </text>
-            <text class="progress-value">
-              95.65%
-            </text>
+            <view class="progress-row">
+              <text class="progress-name">
+                压实合格率
+              </text>
+              <text class="progress-value">
+                95.65%
+              </text>
+            </view>
+            <wd-progress :percentage="50" hide-text />
           </view>
           <view class="progress-item">
-            <text class="progress-name">
-              完成进度
-            </text>
-            <text class="progress-value">
-              66%
-            </text>
+            <view class="progress-row">
+              <text class="progress-name">
+                完成进度
+              </text>
+              <text class="progress-value">
+                66%
+              </text>
+            </view>
+            <wd-progress :percentage="50" hide-text />
           </view>
-          <view class="progress-item">
+          <view class="progress-item progress-item-inline">
             <text class="progress-name">
               总面积
             </text>
@@ -43,7 +56,7 @@
               1164m²
             </text>
           </view>
-          <view class="progress-item">
+          <view class="progress-item progress-item-inline">
             <text class="progress-name">
               已压实面积
             </text>
@@ -51,7 +64,7 @@
               664m²
             </text>
           </view>
-          <view class="progress-item">
+          <view class="progress-item progress-item-inline">
             <text class="progress-name">
               未压实面积
             </text>
@@ -76,15 +89,16 @@
 .card-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   padding: 12px 16px;
   border-bottom: 1px solid #f5f5f5;
 }
 
 .card-title {
-  font-size: 15px;
+  /* font-size: 15px; */
   font-weight: bold;
   color: #333333;
+  margin-right: 12.08rpx;
 }
 
 .card-sub {
@@ -99,62 +113,39 @@
 .progress-content {
   display: flex;
   align-items: center;
-  gap: 16px;
-}
-
-.progress-circle {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: conic-gradient(#4685FD 0% 25%, #f0f0f0 25% 100%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.progress-circle::before {
-  content: '';
-  position: absolute;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background-color: #ffffff;
-}
-
-.progress-percent {
-  font-size: 18px;
-  font-weight: bold;
-  color: #4685FD;
-  z-index: 1;
-}
-
-.progress-label {
-  font-size: 10px;
-  color: #999999;
-  z-index: 1;
+  gap: 50px;
 }
 
 .progress-details {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 40rpx;
 }
 
 .progress-item {
+  display: flex;
+  flex-direction: column;
+  /* gap: 8px; */
+}
+
+.progress-item-inline {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.progress-row {
   display: flex;
   justify-content: space-between;
 }
 
 .progress-name {
-  font-size: 12px;
+  /* font-size: 12px; */
   color: #666666;
 }
 
 .progress-value {
-  font-size: 12px;
+  /* font-size: 12px; */
   font-weight: bold;
   color: #333333;
 }