feat: 添加状态

src/views/page3/item.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="list">
-    <div class="containerBox" v-for="(item, index) in list" :key="index">
+    <div
+      :class="[
+        `containerBox`,
+        {
+          online: item.状态 === `作业中`,
+        },
+      ]"
+      v-for="(item, index) in list"
+      :key="index"
+    >
       <div class="textBox">
         <p class="title">
           <span>{{ item.名称 }}</span>
-          <img :src="状态[item.状态]" alt="" />
+          <img
+            :src="状态[item.状态]"
+            :class="{ 'animated infinite flash s5': item.状态 === `故障` }"
+            alt=""
+          />
         </p>
         <p>设备IP：{{ item.ip || '' }}</p>
         <p>管理员：{{ item.管理人员 }}</p>
@@ -26,7 +39,12 @@ export default {
   name: `LayoutExample`,
   data() {
     return {
-      状态: { 故障, 关机, 运行中 },
+      状态: {
+        离线: 关机,
+        在线: 运行中,
+        作业中: 运行中,
+        故障,
+      },
     }
   },
   props: {
@@ -46,6 +64,13 @@ export default {
   height: 750px;
   overflow: auto;
   .containerBox {
+    &.online {
+      border: 4px solid rgb(22, 248, 116);
+      border-radius: 6px;
+    }
+    .s5 {
+      animation-duration: 4s;
+    }
     cursor: pointer;
     margin-bottom: 15px;
     display: flex;