css

src/pages/shells/index.vue

@@ -30,12 +30,12 @@
         <div class="error-tips-t">错误提示：{{ exception }}</div>
       </div>
     </div>
-    <el-row type="flex" class="relative main-conatiner" :style="{'paddingTop': exception !== '' ? '.3rem' : '0'}">
+    <el-row type="flex" class="relative main-conatiner" :style="{'paddingTop': exception !== '' ? '.3rem' : '0', 'paddingBottom': taskSeq.length > 0 ? '.6rem': '0'}">
       <div class="absolute hud_left"></div>
       <div class="absolute hud_left hud_right"></div>
       <router-view></router-view>
     </el-row>
-    <div v-if="JSON.stringify(topInfo) !== '{}'" class="task_wraper">
+    <div v-if="taskSeq.length > 0" class="task_wraper">
       <div class="task_content">
         <div class="step_item" v-for="(e, i) in taskSeq" :key="i" :class="{'step_active': currentStep === i, 'step_actived': i < currentStep}">
           <div class="step_name">{{ e }}</div>
@@ -83,8 +83,8 @@ export default {
         task_seq: '工作点1-工作点2-工作点3',
         task_point: '工作点2'
       },
-      taskSeq: '',
-      currentStep: 0,
+      taskSeq: [],
+      currentStep: null,
       loginVisible: false,
       configVisible: false
     }
@@ -165,8 +165,10 @@ export default {
       this.websocket.onerror = (error) => {
         this.$message.error('WebSocket连接错误:', error)
       }
-      this.websocket.onclose = (event) => {
-        console.log(`WebSocket连接关闭: 代码=${event.code}, 原因=${event.reason}`)
+      this.websocket.onclose = () => {
+        this.topInfo = {}
+        this.taskSeq = []
+        this.currentStep = null
         this.reconnectWebSocket()
       }
     },
@@ -207,14 +209,14 @@ export default {
   background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
   border-color rgba(230, 79, 41, 0.7)
 .state-item
-  _wh(.72rem, .25rem)
-  _font(.14rem,.25rem,#fff,,center)
+  _wh(1rem, .3rem)
+  _font(.18rem,.3rem,#fff,,center)
   font-family 'Adobe Heiti Std'
   margin-right .08rem
   background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
   box-shadow inset 0px 0px 3px 2px rgb(149, 221, 253, 70%)
 .elec-qty-wrap
-  _wh(.5rem, .25rem)
+  _wh(.6rem, .3rem)
   margin-right .08rem
   background center / 100% 100% url(../../images/new/elec.png) no-repeat
   border 1px solid #5ADFBC
@@ -236,7 +238,7 @@ export default {
 .elec-txt
   position relative
   z-index 153
-  _font(.15rem, .25rem, #fff,,center)
+  _font(.18rem, .3rem, #fff,,center)
   font-family 'Adobe Heiti Std'
 .icon-user
   font-size .24rem