feat：完善首页样式

src/components/CoreVideo/index.vue

@@ -1,26 +1,41 @@
 <template>
   <div class="core-video">
     <div class="title">核心景区视频</div>
-    <ul class="list">
+    <ul class="list" v-loading="loading">
       <li
         class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
-        v-for="(item, index) in 10"
+        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
+        v-for="(item, index) in list"
         :key="index"
       >
-        <p class="item-title">三峡之巅-最新异常名称</p>
-        <img class="item-img" src="@/assets/images/cover.png" />
+        <div>
+          <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
+            三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
+          </p>
+          <img class="item-img" src="@/assets/images/cover.png" />
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script setup>
-  import item1 from '@/assets/images/item-1.png'
-  import item2 from '@/assets/images/item-2.png'
+  import primary from '@/assets/images/item-1.png'
+  import error from '@/assets/images/item-2.png'
+  let loading = ref(true)
+  let list = ref(0)
+  onMounted(() => {
+    setTimeout(() => {
+      loading.value = false
+      list.value = 10
+    }, 2000)
+  })
 </script>
 
 <style lang="scss" scoped>
+  :deep(.el-loading-mask) {
+    background-color: transparent !important;
+  }
   .core-video {
     margin: vh(10);
     width: vw(300);
@@ -29,16 +44,13 @@
     background-size: 100% 100%;
 
     .title {
-      width: vw(260);
+      width: 100%;
       height: vh(26);
       text-align: center;
       line-height: vh(26);
-      margin-left: vw(32.5);
       font-size: vw(16);
       font-weight: 800;
       color: #fff;
-      background-image: url('@/assets/images/title-1.png');
-      background-size: 100% 100%;
     }
 
     .list {
@@ -69,19 +81,31 @@
     }
 
     .item {
-      margin-bottom: vh(13);
+      margin-bottom: vh(10);
+      padding: vw(10);
       background-size: 100% 100%;
+      & > div {
+        position: relative;
+      }
       &-title {
-        margin-bottom: vh(6);
-        margin-left: vw(45);
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        padding: vw(10);
         color: #fff;
-        font-size: vw(16);
-        height: vh(24);
-        line-height: vh(24);
+        font-size: vw(14);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      &-title--error {
+        @extend .item-title;
+        background-color: rgba(226, 27, 27, 0.72);
+      }
+      &-title--primary {
+        @extend .item-title;
+        background-color: rgba(4, 30, 69, 0.72);
+      }
       &-img {
         width: 100%;
         height: vh(164);

src/components/Dropdown/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="dropdown">
+    <el-dropdown trigger="click" @command="handleCommand">
+      <div class="title-box">
+        <span class="title">{{ label }}</span>
+        <img class="icon" src="@/assets/images/arrow-down.png" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="(item, index) in options" :key="index" :command="item">
+            <span class="label"> {{ item.label }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    label: {
+      type: String,
+      default: '请选择'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  })
+  const handleCommand = (command) => {
+    console.log(command)
+  }
+</script>
+
+<style scoped lang="scss">
+  .title-box {
+    cursor: pointer;
+    width: vw(140);
+    padding: vw(10) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: vw(54);
+    border: 1px solid rgba(0, 114, 220, 0.3);
+    background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+    .title {
+      font-weight: 400;
+      font-size: vw(13);
+      color: #ffffff;
+    }
+    .icon {
+      width: vw(20);
+      height: auto;
+      margin-left: vh(4);
+    }
+  }
+  .label {
+    font-weight: 400;
+    font-size: vw(24);
+  }
+  :deep(.el-dropdown-menu__item) {
+    line-height: vh(24);
+    padding: vh(10) vw(20) !important;
+  }
+</style>

src/components/ScrollNumber/index.vue

@@ -57,7 +57,6 @@
   .number-digital {
     .box-item {
       position: relative;
-      height: vh(40);
       list-style: none;
       color: #2d7cff;
       writing-mode: vertical-lr;
@@ -93,11 +92,11 @@
 
         & > i {
           position: absolute;
-          top: vh(10);
+          top: 20%;
           left: 50%;
           transform: translate(-50%, 0);
           transition: transform 1s ease-in-out;
-          letter-spacing: 10px;
+          letter-spacing: vh(17);
         }
       }
     }

src/styles/common.scss

@@ -19,6 +19,9 @@
 .justify-evenly {
   justify-content: space-evenly;
 }
+.rela {
+  position: relative;
+}
 .gap-8 {
   gap: vh(8) vw(8);
 }

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>