From 3dbeb5ae8b2ed0d02c6a337015b4b05edad56336 Mon Sep 17 00:00:00 2001
From: xianfuxing <xianfuxing@126.com>
Date: Fri, 7 Sep 2018 17:25:28 +0800
Subject: [PATCH] # up base style

---
 src/views/counter/components/screen.vue | 98 +++++++++++++------------
 1 file changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/views/counter/components/screen.vue b/src/views/counter/components/screen.vue
index 61a3a77..edf27a3 100644
--- a/src/views/counter/components/screen.vue
+++ b/src/views/counter/components/screen.vue
@@ -1,47 +1,51 @@
 <template>
-  <div class="screen-wrapper">
-    <div class="device-base">
-      <ul>
-        <li>设备: <span>{{deviceID}}</span></li>
-        <li class="region">地区: <span>尖沙咀</span></li>
-        <li>设备名称: <span>香港大学1号机</span></li>
-      </ul>
+  <div class="app-container">
+    <div class="base-wrapper">
+      <div class="device-base">
+        <ul>
+          <li>设备: <span>{{deviceID}}</span></li>
+          <li class="region">地区: <span>尖沙咀</span></li>
+          <li>设备名称: <span>香港大学1号机</span></li>
+        </ul>
+      </div>
     </div>
-    <div class="device-screen">
-      <table cellspacing="0">
-        <tbody>
-          <tr>
-            <td v-for="(item, index) of lastTime" :key="index">
-              {{item}}
-            </td>
-          </tr>
-          <tr>
-            <td v-for="(item, index) of lastCount" :key="index">
-              {{item}}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="device-status">
-      <ul>
-        <li>状态： 
-          <span
-            :class="status ? 'text-success' : 'text-danger'"
-            v-if="status == 0"
-          >
-            离线
-          </span>
-          <span
-            :class="status ? 'text-success' : 'text-danger'"
-            v-if="status == 1"
-          >
-            在线
-          </span>
-        </li>
-        <li class="signal">信号： <span>{{lastItem.signal}}</span></li>
-        <li>电量： <span>{{lastItem.energy}}</span></li>
-      </ul>
+    <div class="screen-wrapper">
+      <div class="device-screen">
+        <table cellspacing="0">
+          <tbody>
+            <tr>
+              <td v-for="(item, index) of lastTime" :key="index">
+                {{item}}
+              </td>
+            </tr>
+            <tr>
+              <td v-for="(item, index) of lastCount" :key="index">
+                {{item}}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="device-status">
+        <ul>
+          <li>状态： 
+            <span
+              :class="status ? 'text-success' : 'text-danger'"
+              v-if="status == 0"
+            >
+              离线
+            </span>
+            <span
+              :class="status ? 'text-success' : 'text-danger'"
+              v-if="status == 1"
+            >
+              在线
+            </span>
+          </li>
+          <li class="signal">信号： <span>{{lastItem.signal}}</span></li>
+          <li>电量： <span>{{lastItem.energy}}</span></li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -86,13 +90,12 @@ export default {
   .text-danger {
     color: #F56C6C
   }
-  .screen-wrapper {
-    background: #F2F6FC;
+  .base-wrapper {
     overflow: auto;
     .device-base {
       display: flex;
       justify-content: center;
-      min-width: 600px;
+      min-width: 600px;      
       ul {
         padding: 0;
         li {
@@ -105,6 +108,9 @@ export default {
         }
       }
     }
+  }
+  .screen-wrapper {
+    background: #F2F6FC;
     .device-screen {
       display: flex;
       justify-content: center;
@@ -121,7 +127,7 @@ export default {
           height: 1.5rem;
           line-height: 1.5rem;
           font-weight: 600;
-          padding: .2rem;
+           padding: .2rem;
         }
       }
     }