创文件

src/components/Steps.vue

@@ -1,22 +1,37 @@
 <template>
   <div class="steps_container">
-    <div :class="tabStore.activeStep == 1 ? 'tab_wrap active' : 'tab_wrap'">
+    <div
+      :class="tabStore.activeStep == 1 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeStep(1)"
+    >
       <div class="number">1</div>
       <p class="text">注入液氮</p>
     </div>
-    <div :class="tabStore.activeStep == 2 ? 'tab_wrap active' : 'tab_wrap'">
+    <div
+      :class="tabStore.activeStep == 2 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeStep(2)"
+    >
       <div class="number">2</div>
       <p class="text">抽取真空</p>
     </div>
-    <div :class="tabStore.activeStep == 3 ? 'tab_wrap active' : 'tab_wrap'">
+    <div
+      :class="tabStore.activeStep == 3 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeStep(3)"
+    >
       <div class="number">3</div>
       <p class="text">转移液氮</p>
     </div>
-    <div :class="tabStore.activeStep == 4 ? 'tab_wrap active' : 'tab_wrap'">
+    <div
+      :class="tabStore.activeStep == 4 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeStep(4)"
+    >
       <div class="number">4</div>
       <p class="text">开始加热</p>
     </div>
-    <div :class="tabStore.activeStep == 5 ? 'tab_wrap active' : 'tab_wrap'">
+    <div
+      :class="tabStore.activeStep == 5 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeStep(5)"
+    >
       <div class="number">5</div>
       <p class="text">充入空气</p>
     </div>
@@ -27,6 +42,10 @@
 import { useTabStore } from '@/store'
 
 const tabStore = useTabStore()
+
+const changeStep = index => {
+  tabStore.updateActiveStep(index)
+}
 </script>
 
 <style lang="scss" scoped>

src/components/operation/AirCharge.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="air_charge_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.air_charge_container {
+  width: 760px;
+  height: 490px;
+  border-radius: 16px;
+  background: #f0f6fb;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/components/operation/ExtractionVacuum.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="extraction_vacuum_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.extraction_vacuum_container {
+  width: 760px;
+  height: 490px;
+  border-radius: 16px;
+  background: #f0f6fb;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/components/operation/StartHeating.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="start_heating_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.start_heating_container {
+  width: 760px;
+  height: 490px;
+  border-radius: 16px;
+  background: #f0f6fb;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/components/operation/TransferLiquid.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="transfer_liquid_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.transfer_liquid_container {
+  width: 760px;
+  height: 490px;
+  border-radius: 16px;
+  background: #f0f6fb;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>

src/pages/Home.vue

@@ -12,7 +12,11 @@
     </div>
     <div class="content_card_wrap">
       <Steps />
-      <LiquidInjection />
+      <LiquidInjection v-if="tabStore.activeStep == 1" />
+      <ExtractionVacuum v-if="tabStore.activeStep == 2" />
+      <TransferLiquid v-if="tabStore.activeStep == 3" />
+      <StartHeating v-if="tabStore.activeStep == 4" />
+      <AirCharge v-if="tabStore.activeStep == 5" />
       <Tabs />
     </div>
   </div>
@@ -23,7 +27,14 @@ import Ok from '@/assets/img/ok.png'
 import Tube from 'cpns/Tube'
 import Steps from 'cpns/Steps'
 import LiquidInjection from 'cpns/operation/LiquidInjection'
+import ExtractionVacuum from 'cpns/operation/ExtractionVacuum'
+import TransferLiquid from 'cpns/operation/TransferLiquid'
+import StartHeating from 'cpns/operation/StartHeating'
+import AirCharge from 'cpns/operation/AirCharge'
 import Tabs from 'cpns/Tabs'
+import { useTabStore } from '@/store'
+
+const tabStore = useTabStore()
 </script>
 
 <style lang="scss" scoped>