add 预警

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="backg">
     <router-view />
     <theme-picker />
   </div>
@@ -25,4 +25,9 @@ export default {
 #app .theme-picker {
   display: none;
 }
+.backg {
+  background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255, 255, 255, 0)), url("./assets/knowledge/backgrand_picture.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 </style>

src/components/TopNav/index.vue

@@ -5,14 +5,16 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+      <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+        ><svg-icon :icon-class="item.meta.icon" /> -->
+        <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index"
         ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <!-- <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
@@ -23,7 +25,7 @@
           {{ item.meta.title }}</el-menu-item
         >
       </template>
-    </el-submenu>
+    </el-submenu> -->
   </el-menu>
 </template>
 

src/views/index.vue

@@ -9,11 +9,11 @@
     </el-form>
     <el-row style="margin: 20px;">
       <el-col :span="3" v-for="(items,indexs) in numList" :key="items.id" @click.native="showDrawer(items)">
-        <el-card shadow="hover" @click="showDrawer(items)">
-          <span style="font-size: 25px;display: block;">机号</span>
+        <div shadow="hover" @click="showDrawer(items)" class="card">
+          <span style="font-size: 25px;display: block; color: wheat">机号</span>
           <span class="span1" :style="{color: items.color1}">{{items.num}}</span>
           <span>状态：<span :style="{color: items.color2}">{{items.name}}</span></span>
-        </el-card>
+        </div>
       </el-col>
     </el-row>
 
@@ -188,15 +188,15 @@
             id: 1,
             num: '01',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 2,
             num: '02',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 3,
@@ -209,205 +209,149 @@
             id: 4,
             num: '04',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 5,
             num: '05',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 6,
             num: '06',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 7,
             num: '07',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 8,
             num: '08',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 9,
             num: '09',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 10,
             num: '10',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 11,
             num: '11',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 12,
             num: '12',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 13,
             num: '13',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 14,
             num: '14',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 15,
             num: '15',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 16,
             num: '16',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 17,
             num: '17',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 18,
             num: '18',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 19,
             num: '19',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 20,
             num: '20',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 21,
             num: '21',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 22,
             num: '22',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 23,
             num: '23',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
+            color1: 'green',
+            color2: 'green',
           },
           {
             id: 24,
             num: '24',
             name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 25,
-            num: '25',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 26,
-            num: '26',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 27,
-            num: '27',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 28,
-            num: '28',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 29,
-            num: '29',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 30,
-            num: '30',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 31,
-            num: '31',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
-          {
-            id: 32,
-            num: '32',
-            name: '健康',
-            color1: 'yellow',
-            color2: 'yellow',
-          },
+            color1: 'green',
+            color2: 'green',
+          }
         ],
         numList: []
       }
@@ -510,7 +454,7 @@
     margin: 20px 0;
   }
 
-  .el-card {
+  .card {
     text-align: center;
     margin: 20px;
     background-image: url("../assets/knowledge/预警数量.png");