feat：完善首页样式

src/views/home/components/box-2.vue

@@ -44,7 +44,19 @@
             <span class="statistic-value">通畅</span>
           </div>
         </div>
-        <Title3 title="景区排队人数" />
+        <div class="flex rela">
+          <Title3 title="景区排队人数" />
+          <div class="dropdown">
+            <Dropdown
+              label="选择排队景区"
+              :options="[
+                { label: '山峡之巅', value: 100 },
+                { label: '白帝城', value: 100 },
+                { label: '龙桥河', value: 100 }
+              ]"
+            />
+          </div>
+        </div>
         <div class="pt-20">
           <Line
             :width="370"
@@ -218,6 +230,12 @@
       width: vw(60);
       height: auto;
     }
+    .dropdown {
+      position: absolute;
+      right: vw(8);
+      bottom: -30%;
+      z-index: 990;
+    }
     .item {
       position: relative;
       flex: 1;
@@ -366,7 +384,7 @@
       margin-top: vh(20);
       width: 100%;
       height: vh(106);
-      background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
+      background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
       .title {
         width: vw(253);
         height: vh(28);

src/views/home/components/box-3.vue

@@ -56,13 +56,8 @@
           </div>
           <div class="progress-box">
             <span class="text">工单完成数</span>
-            <div class="progress">
-              <el-progress
-                :percentage="50"
-                :show-text="false"
-                color="linear-gradient( to right,
-              #00C4F9 0%, #00C4F9 100%)"
-              />
+            <div class="progress-1">
+              <el-progress :percentage="50" :show-text="false" />
             </div>
             <span class="value">50%</span>
           </div>
@@ -80,13 +75,8 @@
           </div>
           <div class="progress-box">
             <span class="text">工单完成数</span>
-            <div class="progress">
-              <el-progress
-                :percentage="50"
-                :show-text="false"
-                color="linear-gradient( to right,
-              #DA3637 0%, #DA3637 100%)"
-              />
+            <div class="progress-2">
+              <el-progress :percentage="50" :show-text="false" />
             </div>
             <span class="value">50%</span>
           </div>
@@ -120,8 +110,8 @@
 </template>
 
 <script setup>
-  import ScrollNumber from '@/components/ScrollNumber/index.vue'
   import countup from 'vue-countup-v3'
+  import ScrollNumber from '@/components/ScrollNumber/index.vue'
   let count = ref('6945959')
 </script>
 
@@ -225,6 +215,21 @@
             }
             .progress {
               width: vw(100);
+              :deep(.el-progress-bar__outer) {
+                background-color: #0858ae !important;
+              }
+            }
+            .progress-1 {
+              @extend .progress;
+              :deep(.el-progress-bar__inner) {
+                background: linear-gradient(to right, #0566bb 0%, #00c4f9 100%);
+              }
+            }
+            .progress-2 {
+              @extend .progress;
+              :deep(.el-progress-bar__inner) {
+                background: linear-gradient(to right, #0566bb 0%, #d6383a 100%);
+              }
             }
             .value {
               margin-left: vw(10);

src/views/home/index.vue

@@ -11,7 +11,6 @@
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
-  let numm = ref(1231241)
   const navLeft = [
     { name: '安全', path: '/monitor' },
     { name: '景区', path: '/scenic' },
@@ -23,8 +22,5 @@
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]
-  const handleChange = () => {
-    numm.value++
-  }
   onMounted(() => {})
 </script>