# 调整device base 样式

src/views/counter/components/screen.vue

@@ -2,11 +2,8 @@
   <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>
+        <p class="item"><span class="keyword">{{$t('counter.device')}}: </span><el-tag>{{deviceID}}</el-tag></p>
+        <p class="item"><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{lastItem.device_name}}</el-tag></p>
       </div>
     </div>
     <div class="screen-wrapper">
@@ -93,18 +90,17 @@ export default {
     overflow: auto;
     .device-base {
       display: flex;
-      justify-content: center;
+      flex-direction: column;
+      align-items: center;
       min-width: 600px;
-      ul {
-        padding: 0;
-        li {
-          font-size: .85rem;
-          list-style-type: none;
-          display: inline-block;
-        }
-        .region {
-          margin: 0 5rem 0 5rem;
-        }
+      .item {
+        width: 300px;
+        margin: 0 0 5px 0;
+      }
+      .keyword {
+        display: inline-block;
+        width: 90px;
+        font-size: 0.8em;
       }
     }
   }