111

src/assets/styles/index.css

@@ -114,7 +114,7 @@ header .showTime {
     background: rgba(255, 255, 255, 0.00);
     box-shadow: inset 0px -56px 99px 2px #03369F;
     position: relative;
-    height: 60%;
+    height: 100%;
     /* height: 3.9rem; */
     /* 
     margin-bottom: .975rem; */

src/pages/index/index.vue

@@ -1,72 +1,79 @@
 <template>
   <div>
     <!-- 头部区域 -->
-   <top-header></top-header>
+    <top-header></top-header>
 
     <!-- 首页主体start -->
     <div class="mainbox">
-      <div style="display: flex;
-    margin: 0rem auto ;
-    width: 15rem;">
-         <div class="column">
-        <div class="panel alarm" @click="goEleFireCard">
-          <div>
-            <img src="@/assets/images/panel-icon.png" alt="" />
-            <p>状态：<span>告警</span></p>
-            <p class="light-color">电气火灾</p>
-            <p class="light-color">电缆温度：51℃</p>
+      <div style="display: flex; margin: 0rem auto; width: 15rem">
+
+        <div class="column">
+          <div class="panel alarm" @click="goEleFireCard">
+            <div>
+              <img src="@/assets/images/panel-icon.png" alt="" />
+              <p>状态：<span>告警</span></p>
+              <p class="light-color">电气火灾</p>
+              <p class="light-color">电缆温度：51℃</p>
+            </div>
           </div>
         </div>
-        <div class="panel normal" @click="goGasCard" >
-          <div>
-            <img src="@/assets/images/gas-icon.png" alt="" />
-            <p>状态：<span>正常</span></p>
-            <p class="light-color">可燃气体</p>
-            <p class="light-color">一氧化碳浓度：120ppm</p>
+
+        <div  class="column">
+           <div class="panel normal" @click="goGasCard">
+            <div>
+              <img src="@/assets/images/gas-icon.png" alt="" />
+              <p>状态：<span>正常</span></p>
+              <p class="light-color">可燃气体</p>
+              <p class="light-color">一氧化碳浓度：120ppm</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="column" >
-        <div class="panel"  @click="goEleFireCard">
-          <div>
-            <img src="@/assets/images/panel-icon.png" alt="" />
-            <p>状态：<span>正常</span></p>
-            <p class="light-color">电气火灾</p>
-            <p class="light-color">电缆温度：51℃</p>
+
+        <div class="column">
+          <div class="panel" @click="goEleFireCard">
+            <div>
+              <img src="@/assets/images/panel-icon.png" alt="" />
+              <p>状态：<span>正常</span></p>
+              <p class="light-color">电气火灾</p>
+              <p class="light-color">电缆温度：51℃</p>
+            </div>
           </div>
+         
         </div>
-        <div class="panel" @click="goGasCard">
-          <div>
-            <img src="@/assets/images/gas-icon.png" alt="" />
-            <p>状态：<span>正常</span></p>
-            <p class="light-color">可燃气体</p>
-            <p class="light-color">一氧化碳浓度：120ppm</p>
+
+        <div class="column">
+           <div class="panel" @click="goGasCard">
+            <div>
+              <img src="@/assets/images/gas-icon.png" alt="" />
+              <p>状态：<span>正常</span></p>
+              <p class="light-color">可燃气体</p>
+              <p class="light-color">一氧化碳浓度：120ppm</p>
+            </div>
           </div>
+
         </div>
-      </div>
-      <div class="column">
-        <div class="panel fault"  @click="goEleFireCard">
-          <div>
-            <img src="@/assets/images/panel-icon.png" alt="" />
-            <p>状态：<span>故障</span></p>
-            <p class="light-color">电气火灾</p>
-            <p class="light-color">电缆温度：51℃</p>
+        <div class="column">
+          <div class="panel fault" @click="goEleFireCard">
+            <div>
+              <img src="@/assets/images/panel-icon.png" alt="" />
+              <p>状态：<span>故障</span></p>
+              <p class="light-color">电气火灾</p>
+              <p class="light-color">电缆温度：51℃</p>
+            </div>
           </div>
         </div>
-        <div class="panel" @click="goGasCard">
-          <div>
-            <img src="@/assets/images/gas-icon.png" alt="" />
-            <p>状态：<span>正常</span></p>
-            <p class="light-color">可燃气体</p>
-            <p class="light-color">一氧化碳浓度：120ppm</p>
+        <div class="column">
+           <div class="panel" @click="goGasCard">
+            <div>
+              <img src="@/assets/images/gas-icon.png" alt="" />
+              <p>状态：<span>正常</span></p>
+              <p class="light-color">可燃气体</p>
+              <p class="light-color">一氧化碳浓度：120ppm</p>
+            </div>
           </div>
         </div>
       </div>
-      </div>
-     
     </div>
-
-
   </div>
 </template>
 
@@ -75,22 +82,19 @@ import topHeader from "@/components/topHeader";
 export default {
   name: "index",
   components: {
-   topHeader
+    topHeader,
   },
-  methods:{
-    goEleFireCard(){
-       this.$router.push('/eleFireCard')
+  methods: {
+    goEleFireCard() {
+      this.$router.push("/eleFireCard");
     },
-    goGasCard(){
-       this.$router.push('/gasCard')
-    }
-  }
-
+    goGasCard() {
+      this.$router.push("/gasCard");
+    },
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-
 </style>