整合样式

3 years ago · e37ea66ff0
parent 5eee51507d
commit e37ea66ff0
5 changed files with 86 additions and 9410 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json


 # local env files
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/index.html
+++ b/public/index.html
@ -8,6 +8,15 @@
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
+    <style>
+      *{
+        padding: 0;
+        margin: 0;
+      }
+      html,body{
+        overflow: hidden;
+      }
+    </style>
  </head>
  <body>
    <noscript>
--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@ -1,23 +1,39 @@
 <template>
  <div class="mile_warp">
-    <table class="table">
+    <table class="table_box">
+      <colgroup>
+        <col width="20%"/>
+        <col width="30%"/>
+        <col width="25%"/>
+        <col width="25%"/>
+      </colgroup>
      <thead>
        <tr>
-          <th>排名</th>
-          <th>车牌号</th>
-          <th>昨日里程(km/h)</th>
-          <th>轨迹查询</th>
+          <td>排名</td>
+          <td>车牌号</td>
+          <td>昨日里程<br />(km/h)</td>
+          <td>轨迹查询</td>
        </tr>
      </thead>
-      <tbody>
-        <tr v-for="(item,index) in carMile" :key="'car'+index">
-          <td>{{index+1}}</td>
-          <td>{{item.cardNo}}</td>
-          <td>{{item.mile}}</td>
-          <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
-        </tr>
-      </tbody>
    </table>
+    <div style="width:100%;height:4.5rem;overflow-y:auto;">
+      <table class="table_box">
+        <colgroup>
+          <col width="20%"/>
+          <col width="30%"/>
+          <col width="25%"/>
+          <col width="25%"/>
+        </colgroup>
+        <tbody>
+          <tr v-for="(item, index) in carMile" :key="'car' + index">
+            <td>{{ index+ 1}}</td>
+            <td>{{ item.cardNo }}</td>
+            <td>{{ item.mile }}</td>
+            <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
  </div>
 </template>

@ -27,7 +43,7 @@ export default {
  data() {
    return {
      carList: carList,//车辆设备
-      carMile:[],
+      carMile: [],
    }
  },
  mounted() {
@ -43,7 +59,7 @@ export default {
          item.mile = idx > -1 ? res.Data[idx].Mile : 0;
          this.carMile.push(item);
        })
-        this.carMile.sort((a,b) => {
+        this.carMile.sort((a, b) => {
          return b.mile - a.mile;
        })
      })
@ -57,12 +73,20 @@ export default {
  width: 100%;
  height: 100%;
  overflow: hidden;
-  .table {
+
+  .table_box {
    width: 100%;
-    th,td{
-      color:#fff;
-      font-size: 0.16rem;
-      padding: 0.03rem 0.05rem;
+
+    tr {
+      td {
+        font-size: 0.18rem;
+        color: #fff;
+        padding: 0.08rem 0;
+      }
+    }
+    a{
+      color:#0e94ea;
+      text-decoration: none;
    }
  }
 }
--- a/src/views/components/carWarn.vue
+++ b/src/views/components/carWarn.vue
@ -1,21 +1,35 @@
 <template>
  <div class="mile_warp">
-    <table class="table">
+    <table class="table_box">
+      <colgroup>
+        <col width="40%" />
+        <col width="30%" />
+        <col width="30%" />
+      </colgroup>
      <thead>
        <tr>
-          <th>时间</th>
-          <th>车牌号</th>
-          <th>报警信息</th>
+          <td>时间</td>
+          <td>车牌号</td>
+          <td>报警信息</td>
        </tr>
      </thead>
-      <tbody>
-        <tr v-for="(item, index) in carWarn" :key="'car' + index">
-          <td>{{ item.TimeStamp }}</td>
-          <td>{{ item.MESSTYPE }}</td>
-          <td>{{ item.MESSCONTENT }}</td>
-        </tr>
-      </tbody>
    </table>
+    <div style="width:100%;height:1.5rem;overflow-y:auto;">
+      <table class="table_box">
+        <colgroup>
+          <col width="40%" />
+          <col width="30%" />
+          <col width="30%" />
+        </colgroup>
+        <tbody>
+          <tr v-for="(item, index) in carWarn" :key="'car' + index">
+            <td>{{ item.TimeStamp }}</td>
+            <td>{{ item.carNo }}</td>
+            <td :title="item.MESSCONTENT">{{ item.MESSTYPE }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
  </div>
 </template>

@ -61,14 +75,15 @@ export default {
  height: 100%;
  overflow: hidden;

-  .table {
+  .table_box {
    width: 100%;

-    th,
-    td {
-      color: #fff;
-      font-size: 0.16rem;
-      padding: 0.03rem 0.05rem;
+    tr {
+      td {
+        font-size: 0.18rem;
+        color: #fff;
+        padding: 0.08rem 0;
+      }
    }
  }
 }