update area

src/components/isolate-area-1/Area.vue

@@ -1,12 +1,20 @@
 <template>
   <DragabbleContainer class="isolate-area-1">
-    <SmallBox2
-      v-for="rd in rdata"
-      :key="rd.icon"
-      :icon="rd.icon"
-      :title="rd.title"
-      :value="rd.value"
-    ></SmallBox2>
+    <div class="data pressure">
+      <span>压</span>
+      <span>力</span>
+      <span v-for="press, index in pressure" :key="index"
+        :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ press
+        }}</span>
+      <span>Pa</span>
+    </div>
+    <SmallBox2 class="data-center" v-for="rd in rdata" :key="rd.icon" :icon="rd.icon" :title="rd.title" :value="rd.value"></SmallBox2>
+    <div class="data runtime">
+      <span>运</span>
+      <span>行</span>
+      <span v-for="val, index in runtime" :key="index" class="digit">{{ val }}</span>
+      <span>天</span>
+    </div>
   </DragabbleContainer>
 </template>
 
@@ -22,6 +30,8 @@ export default {
   components: { DragabbleContainer, SmallBox2 },
   data() {
     return {
+      pressure: '10.1'.split(''),
+      runtime: '0012'.split(''),
       rdata: [
         // { icon: "temp", title: "车间温度", value: "27℃" },
         { icon: "fire", title: "当前火向", value: "" },
@@ -31,13 +41,13 @@ export default {
     };
   },
   watch: {
-    fireDirection: function(val) {
+    fireDirection: function (val) {
       this.$set(this.rdata[0], 'value', val)
     },
-    fireChangeTime: function(val) {
+    fireChangeTime: function (val) {
       this.$set(this.rdata[1], 'value', val)
     },
-    lastFireChangeTime: function(val) {
+    lastFireChangeTime: function (val) {
       let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
       if (timeFun) clearInterval(timeFun)
       timeFun = setInterval(() => {
@@ -65,11 +75,23 @@ export default {
 
 .isolate-area-1 {
   display: flex;
+  color: $main-color;
+  background: lightyellow;
 
-  > .small-box-2:not(:last-child) {
+  > *:not(:last-child) {
     margin: {
-      right: adjust(15px);
+      right: adjust(10px);
     }
   }
+
+  > .data {
+    background: lightgreen;
+  }
+
+  // > .data-center + .data-center {
+  //   margin: {
+  //     left: adjust(15px);
+  //   }
+  // }
 }
 </style>