feat 添加今日作业概览

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;
+  font-size: 20px;
-  color: #999999;
+  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;
+  font-size: 20px;
-  color: rgba(255, 255, 255, 0.8);
+  font-weight: bold;
+  color: #ffffff;
   margin-bottom: 8px;
 }
 
 .stat-value {
-  font-size: 28px;
+  font-size: 20px;
   font-weight: bold;
   color: #ffffff;
 }

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,15 +17,17 @@
     <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">
+            <view class="progress-row">
               <text class="progress-name">
                 压实合格率
               </text>
@@ -27,7 +35,10 @@
                 95.65%
               </text>
             </view>
+            <wd-progress :percentage="50" hide-text />
+          </view>
           <view class="progress-item">
+            <view class="progress-row">
               <text class="progress-name">
                 完成进度
               </text>
@@ -35,7 +46,9 @@
                 66%
               </text>
             </view>
-          <view class="progress-item">
+            <wd-progress :percentage="50" hide-text />
+          </view>
+          <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;
+  gap: 50px;
-}
-
-.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;
 }
 
 .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;
 }