feat: 首页样式新增

src/views/dashboard/AppearanceMonitor.scss

@@ -1,4 +1,6 @@
 .appearance-monitor-warp {
+    box-sizing: border-box;
+    padding-top: 32px;
     height: 100%;
     display: flex;
     justify-content: center;
@@ -25,14 +27,15 @@
       .monitor-left-top {
         box-sizing: border-box;
         padding: 32px 16px;
+        margin-bottom: 16px;
         min-height: 600px;
         background-image: url("@/assets/common/boderBg.png");
-        background-size: calc(100%);
+        background-size: 100% 100%;
         background-position: center;
         background-repeat: no-repeat;
         img {
           width: 100%;
-          height: 600px;
+          height: 590px;
         }
       }
       .monitor-left-bottom {
@@ -46,7 +49,7 @@
             border-radius:4px;
             img {
                 width: 100%;
-                height: 100%;
+                height: 144px;
                 border-radius:4px;
             }
           }

src/views/dashboard/DataOverview.scss

@@ -19,6 +19,22 @@
       .module-header {
         color: #4a7ebf;
         margin-bottom: 15px;
+        .month-btn,
+        .week-btn {
+          width: 70px;
+          height: 28px;
+          font-size: 14px;
+          color: #FFF;
+          background: #0F2839;
+          border: none;
+        }
+        .week-btn {
+          margin-right: 20px;
+        }
+        .active-btn { 
+          background: #0B345E;
+          border: 1px solid #3FDDEB;
+        }
       }
       .chart-container {
         margin-top: 40px;

src/views/dashboard/DataOverview.vue

@@ -9,7 +9,14 @@
               <div class="w-[200px] bg_title bg_title_0"></div>
             </template>
             <template #extra>
-              <div></div>
+              <div>
+                <el-button type="primary" class="month-btn" @click="activeBtn = '月'" :class="{ 'active-btn': activeBtn === '月' }">
+                   月
+                </el-button>
+                <el-button class="week-btn" @click="activeBtn = '周'" :class="{ 'active-btn': activeBtn === '周' }">
+                   周
+                </el-button>
+              </div>
             </template>
           </ContentHeader>
         </div>
@@ -70,7 +77,10 @@
                 <div class="w-[200px] bg_title bg_title_2"></div>
               </template>
               <template #extra>
-                <div></div>
+                  <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                    <el-option label="A" value="deviceA"></el-option>
+                    <el-option label="B" value="deviceB"></el-option>
+                </el-select>
               </template>
             </ContentHeader>
           </div>
@@ -101,7 +111,12 @@
               <template #title>
                 <div class="w-[200px] bg_title bg_title_3"></div>
               </template>
-              <template #extra> </template>
+              <template #extra>
+                <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                    <el-option label="A" value="deviceA"></el-option>
+                    <el-option label="B" value="deviceB"></el-option>
+                </el-select>
+              </template>
             </ContentHeader>
           </div>
           <div class="chart-container">
@@ -158,6 +173,12 @@ const deviceStatus = ref({
     errorCount: 10,
     outlineCount: 10
 });
+const searchForm = reactive({
+    name: "",
+    status: "",
+    faultType: "",
+});
+const activeBtn = ref("月");
 onMounted(() => {
 });
 </script>

src/views/dashboard/PoleMonitor.scss

@@ -54,7 +54,7 @@
             border-radius: 4px;
             img {
               width: 100%;
-              height: 100%;
+              height: 144px;
               border-radius: 4px;
             }
           }