引入图标

src/components/Tube.vue

@@ -61,8 +61,8 @@ const handleTubeClick = (e, number) => {
 
 const move = currEle => {
   if (
-    disabledArr.value.includes(currEle.dataset.index) ||
-    !currEle.dataset.index
+    disabledArr.value.includes(currEle?.dataset.index) ||
+    !currEle?.dataset.index
   ) {
     return
   }
@@ -81,7 +81,7 @@ const move = currEle => {
   flag &&
     resultArr.value.push({
       ele: currEle,
-      index: currEle.dataset.index,
+      index: currEle?.dataset.index,
       checked: true,
     })
 }

src/components/operation/LiquidInjection.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="liquid_injection_container"></div>
+  <div class="liquid_injection_container">
+    <div class="title_wrap">
+      <img class="water_icon" :src="Water" alt="" />
+      <p class="info">正在注入液氮</p>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Water from '@/assets/img/water.png'
+</script>
 
 <style lang="scss" scoped>
 .liquid_injection_container {
@@ -11,5 +18,25 @@
   border-radius: 16px;
   background: #f0f6fb;
   margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+  .title_wrap {
+    padding: 13px 0 33px 14px;
+    display: flex;
+    align-items: center;
+    .water_icon {
+      width: 47px;
+      height: 35px;
+      margin-right: 22px;
+    }
+    .info {
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #3d3d3d;
+    }
+  }
 }
 </style>