静态排版优化

src/assets/styles/index.css

@@ -14,12 +14,14 @@ li {
 /* 声明字体*/
 
 body {
-    font-family: Source Han Sans CN Bold, Source Han Sans CN Bold-Bold;
+    font-family: Microsoft YaHei Regular;
     margin: 0;
     padding: 0;
     background: url(../images/bg.png) no-repeat #000;
     background-size: cover;
     line-height: 1.15;
+    height: 100vh;
+    /* min-height: 600px; */
 }
 
 
@@ -33,31 +35,38 @@ header {
     height: 2.025rem;
     background: url(../images/header-bg.png) no-repeat top center;
     background-size: 100% 100%;
+    min-width: 1024px;
+    padding-top: .6rem;
 }
 
 header h1 {
     /* color: #ffffff; */
     font-size: .6rem;
     text-align: center;
-    line-height: 2.025rem;
+    /* line-height: 2.025rem; */
     /* background-image: -webkit-linear-gradient(0deg, #1298f5 0%, #e0eaff 100%); */
-    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
+    /* background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; */
+    background-image: -webkit-linear-gradient(bottom, #07DCEE, #fff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     color: #9abcff;
+    font-family: Source Han Sans CN Bold;
 }
 
 header .showTime {
     position: absolute;
     right: 1rem;
-    top: 0;
+    top: .38rem;
     font-weight: bold;
-    line-height: 0.9375rem;
+    /* line-height: 0.9375rem; */
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.25rem;
     background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    font-family: Microsoft YaHei Bold;
 }
 
 .time-icon {
@@ -69,18 +78,26 @@ header .showTime {
     cursor: pointer;
 }
 
+.mainbox.home {
+    font-family: Microsoft YaHei Bold;
+}
+
 .mainbox {
     display: flex;
     min-width: 1024px;
     max-width: 1920px;
     margin: 0 auto;
-    padding: 1.25rem 4.375rem 0;
+    padding-bottom: 20px;
+    /* padding: 1.25rem 4.375rem 0; */
+    /* height: calc(100% - 2.025rem); */
+    /* min-height: calc(600px - 2.025rem); */
 }
 
 .mainbox .column {
     flex: 1;
     text-align: center;
     color: #fff;
+    padding: 5%;
     /* background: pink; */
 }
 
@@ -90,7 +107,6 @@ header .showTime {
     align-items: center;
     margin: 0 auto;
     width: 3.425rem;
-    height: 3.9rem;
     opacity: 1;
     background: rgba(255, 255, 255, 0.00);
     border-radius: 23px;
@@ -98,7 +114,12 @@ header .showTime {
     background: rgba(255, 255, 255, 0.00);
     box-shadow: inset 0px -56px 99px 2px #03369F;
     position: relative;
-    margin-bottom: .975rem;
+    height: 60%;
+    /* height: 3.9rem; */
+    /* 
+    margin-bottom: .975rem; */
+    /*  */
+    margin-bottom: .8rem;
     cursor: pointer;
 }
 
@@ -111,7 +132,9 @@ header .showTime {
 }
 
 .mainbox .column .panel img {
-    margin-bottom: .5rem
+    margin-bottom: .5rem;
+    max-width: .625rem;
+    max-height: .625rem;
 }
 
 .mainbox .column .panel p {
@@ -151,26 +174,22 @@ header .showTime {
 
 /* 搜素区域 */
 
-.filterSec {
-    position: absolute;
-    top: 0;
-    right: 0.375rem;
-    line-height: 0.9375rem;
-    font-size: 0.3rem;
-    color: rgba(255, 255, 255, 0.7);
-}
-
 
 /* 搜索区域样式 */
 
 .filterSec {
     position: absolute;
+    top: 0;
+    right: 0.375rem;
     bottom: -0.0625rem;
     left: 0.425rem;
+    line-height: 0.9375rem;
+    font-size: 0.3rem;
     background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 400;
+    color: #1298f5
 }
 
 .filterSec select,
@@ -198,7 +217,9 @@ header .showTime {
     color: #fff;
     margin-top: .325rem;
     position: relative;
-    height: calc(11rem)
+    /* height: calc(11rem) */
+    width: 100%;
+    height: calc(100% - .325rem)
 }
 
 .gas-container h3 {
@@ -302,7 +323,8 @@ header .showTime {
 }
 
 .fireTabs table td {
-    padding: .75rem .4375rem
+    /* padding: .75rem .4375rem */
+    padding: 4% 0;
 }
 
 .fireTabs table p {
@@ -327,9 +349,9 @@ header .showTime {
     margin: 0 auto;
     width: calc(100% - .5rem);
     display: flex;
-    padding: .55rem;
-    height: 10.425rem;
-    margin-bottom: 0.325rem;
+    /* padding: .55rem .55rem .2rem; */
+    padding: 0;
+    height: 10rem;
 }
 
 .eleFire-data .column {
@@ -339,7 +361,8 @@ header .showTime {
 .eleFire-data .column .panel {
     height: calc(50% - .325rem);
     /* border: 1px solid pink; */
-    margin-bottom: .55rem;
+    /* margin-bottom: .55rem; */
+    margin: .3rem .5rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -433,10 +456,10 @@ header .showTime {
 .gas-container>.timeItem {
     width: 3.925rem;
     display: inline-block;
-    height: 1rem;
-    line-height: 1rem;
+    height: .9rem;
+    line-height: .9rem;
     text-align: center;
-    margin: 0 0.3125rem 0.45rem;
+    margin: 0 0.3125rem 1.3%;
     color: #fff;
     font-size: 0.325rem;
     background: rgba(18, 87, 201, 0.26);

src/pages/eleFireCard/eleFireCard.vue

@@ -1,56 +1,51 @@
 <template>
   <div>
     <top-header></top-header>
-
-    <div class="gas-container">
+    <div class="mainbox">
+      <div class="gas-container">
         <return-back></return-back>
-      <!-- <div class="return-back">返回</div> -->
-      <h3>电气火灾监控实时信息</h3>
-      <p>更新时间：2021-06-15 13:25:00</p>
+        <h3>电气火灾监控实时信息</h3>
+        <p>更新时间：2021-06-15 13:25:00</p>
 
-      <div>
-        <ul class="cardTabs">
-          <li class="active">数据列表</li>
-          <li @click="goEleFireData">数据可视化</li>
-        </ul>
+        <div>
+          <ul class="cardTabs">
+            <li class="active">数据列表</li>
+            <li @click="goEleFireData">数据可视化</li>
+          </ul>
 
-        <div class="tabBox fireTabs">
-          <div>
+          <div class="tabBox fireTabs">
+            <div>
               <table>
-              <tr>
-                <th>供电过压告警：<span class="normal">正常</span></th>
-                <th>供电低压告警：<span class="normal">正常</span></th>
-                <th>供电过流告警：<span class="normal">正常</span></th>
-                <th>漏电告警：<span class="normal">正常</span></th>
-              </tr>
-              <tr>
-                <td>
+                <tr>
+                  <th>供电过压告警：<span class="normal">正常</span></th>
+                  <th>供电低压告警：<span class="normal">正常</span></th>
+                  <th>供电过流告警：<span class="normal">正常</span></th>
+                  <th>漏电告警：<span class="normal">正常</span></th>
+                </tr>
+                <tr>
+                  <td>
                     <P>A相线缆温度超高：<span class="normal">正常</span></P>
                     <P>B相线缆温度超高：<span class="normal">正常</span></P>
                     <P>C相线缆温度超高：<span class="normal">正常</span></P>
-                </td>
-                 <td>
+                  </td>
+                  <td>
                     <P>A相电压：<span class="normal">219.00</span></P>
                     <P>B相电压：<span class="normal">219.00</span></P>
                     <P>C相电压：<span class="normal">219.00</span></P>
-                </td>
-                 <td>
+                  </td>
+                  <td>
                     <P>A相电流：<span class="normal">9.00</span></P>
                     <P>B相电流：<span class="error">3.00</span></P>
                     <P>C相电流：<span class="normal">9.00</span></P>
-                </td>
-                 <td>
+                  </td>
+                  <td>
                     <P>A相线缆温度：<span class="normal">29.00</span></P>
                     <P>B相线缆温度：<span class="error">56.00</span></P>
                     <P>C相线缆温度：<span class="normal">29.00</span></P>
-                </td>
-              </tr>
-            </table>
-
-            
-         
-
-             
+                  </td>
+                </tr>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -64,22 +59,20 @@ import returnBack from "@/components/returnBack";
 export default {
   name: "index",
   components: {
-    topHeader,returnBack
+    topHeader,
+    returnBack,
   },
-  data(){
-    return{
-  
-    }
+  data() {
+    return {};
+  },
+  methods: {
+    goEleFireData() {
+      this.$router.push("/eleFireData");
+    },
   },
-  methods:{
-      goEleFireData(){
-      this.$router.push('/eleFireData')
-    }
-  }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>

src/pages/eleFireData/components/cableTemChart.vue

@@ -61,7 +61,7 @@ export default {
           },
 
           bottom: "-2%",
-          left:"-30%",
+          // left:"-30%",
          
         },
         grid: {

src/pages/eleFireData/components/eleCurrentChart.vue

@@ -2,9 +2,10 @@
   <div id="eleCurrentChart" :style="{ width: '100%', height: '100% ' }"></div>
 </template>
 <script>
+
+//三相电压
 var yearData = [
   {
-    year: "2020", // 年份
     data: [
       // 两个数组是因为有两条线
       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
@@ -51,7 +52,7 @@ export default {
         },
         // 图列组件
         legend: {
-          show:false,
+          show:true,
           itemGap: 50,
           /* 如果series对象有name值，则legend可以不用写data */
           // 修改图列组件文字颜色
@@ -118,21 +119,21 @@ export default {
         },
         series: [
           {
-            name: "位置AAA",
+            name: "A相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
             data: yearData[0].data[0],
             symbolSize: 10, //拐点圆的大小
           },
           {
-            name: "位置bbb",
+            name: "B相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
             data: yearData[0].data[1],
             symbolSize: 10, //拐点圆的大小
           },
           {
-            name: "位置CCC",
+            name: "C相",
             type: "line",
             smooth: false, // 曲线是否平滑显示
             data: yearData[0].data[2],

src/pages/eleFireData/components/voltageChart.vue

@@ -61,7 +61,7 @@ export default {
           },
 
           bottom: "-2%",
-          right:"-18%"
+          // right:"-18%"
         },
         grid: {
           left: "1%",

src/pages/eleFireData/eleFireData.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <top-header></top-header>
-
-    <div class="gas-container">
+    <div class="main-box">
+      <div class="gas-container">
       <return-back></return-back>
       <h3>电气火灾监控实时信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
@@ -42,9 +42,13 @@
              <cable-tem-chart></cable-tem-chart>
            </div>
          </div>
+         
         </div>
+        <div style="height:0.325rem"></div>
       </div>
     </div>
+    </div>
+    
   </div>
 </template>  
 

src/pages/gasCard/gasCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <top-header></top-header>
-
-    <div class="gas-container">
+    <div class="mainbox">
+      <div class="gas-container">
       <!-- <div class="return-back">返回</div> -->
               <return-back></return-back>
 
@@ -51,6 +51,8 @@
         </div>
       </div>
     </div>
+    </div>
+    
   </div>
 </template>
 

src/pages/index/index.vue

@@ -5,7 +5,10 @@
 
     <!-- 首页主体start -->
     <div class="mainbox">
-      <div class="column">
+      <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="" />
@@ -59,6 +62,8 @@
           </div>
         </div>
       </div>
+      </div>
+     
     </div>
 
 

src/pages/inspectRecord/inspectRecord.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
     <top-header></top-header>
-
-    <div class="gas-container">
+    <div class="mainbox">
+      <div class="gas-container">
       <return-back></return-back>
-      <!-- <div class="return-back">返回</div> -->
       <h3>电气火灾监控信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
-      <div class="tabBox fireTabs" style="margin-bottom: 1rem">
+      <div class="tabBox fireTabs" style="margin-bottom: 3%">
         <table>
           <tr>
             <th>供电过压告警：<span class="normal">正常</span></th>
@@ -90,6 +89,8 @@
         </div>
       </div>
     </div>
+    </div>
+    
   </div>
 </template>
 

src/pages/recordTime/recordTime.vue

@@ -1,56 +1,58 @@
 <template>
   <div>
     <top-header></top-header>
+    <div class="mainbox">
+      <div class="gas-container">
+        <return-back></return-back>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+        <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
 
-    <div class="gas-container">
-      <return-back></return-back>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
-            <el-pagination
-  background
-@size-change="handleSizeChange"
-  layout="prev, pager, next,jumper"
-  :total="1000">
-</el-pagination>
+        <div style="position:fixed;bottom: .3rem;text-align:center;display:block;width:100%">
+          <el-pagination
+          background
+          @size-change="handleSizeChange"
+          layout="prev, pager, next,jumper"
+          :total="1000"
+        >
+        </el-pagination>
+        </div>
+        
+      </div>
     </div>
-
-
   </div>
-
-
 </template>
 
 <script>
@@ -64,30 +66,31 @@ export default {
   },
   data() {
     return {
-       currentPage1: 5,
-        currentPage2: 5,
-        currentPage3: 5,
-        currentPage4: 4
+      currentPage1: 5,
+      currentPage2: 5,
+      currentPage3: 5,
+      currentPage4: 4,
     };
   },
-   mounted() {
-    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转到: ";
+  mounted() {
+    document.getElementsByClassName(
+      "el-pagination__jump"
+    )[0].childNodes[0].nodeValue = "跳转到: ";
   },
   methods: {
-    goInspectDetail(){
+    goInspectDetail() {
       this.$router.push("/inspectRecord");
     },
-     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-      }
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style >
-
 </style>