bottom tabs

src/components/Steps.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="steps_container">
-    <div :class="tabStore.activeTab == 1 ? 'tab_wrap active' : 'tab_wrap'">
+    <div :class="tabStore.activeStep == 1 ? 'tab_wrap active' : 'tab_wrap'">
       <div class="number">1</div>
       <p class="text">注入液氮</p>
     </div>
-    <div :class="tabStore.activeTab == 2 ? 'tab_wrap active' : 'tab_wrap'">
+    <div :class="tabStore.activeStep == 2 ? 'tab_wrap active' : 'tab_wrap'">
       <div class="number">2</div>
       <p class="text">抽取真空</p>
     </div>
-    <div :class="tabStore.activeTab == 3 ? 'tab_wrap active' : 'tab_wrap'">
+    <div :class="tabStore.activeStep == 3 ? 'tab_wrap active' : 'tab_wrap'">
       <div class="number">3</div>
       <p class="text">转移液氮</p>
     </div>
-    <div :class="tabStore.activeTab == 4 ? 'tab_wrap active' : 'tab_wrap'">
+    <div :class="tabStore.activeStep == 4 ? 'tab_wrap active' : 'tab_wrap'">
       <div class="number">4</div>
       <p class="text">开始加热</p>
     </div>
-    <div :class="tabStore.activeTab == 5 ? 'tab_wrap active' : 'tab_wrap'">
+    <div :class="tabStore.activeStep == 5 ? 'tab_wrap active' : 'tab_wrap'">
       <div class="number">5</div>
       <p class="text">充入空气</p>
     </div>

src/components/Tabs.vue

@@ -1,20 +1,122 @@
 <template>
   <div class="tabs_container">
-    <div class="tab_wrap active">
+    <div
+      :class="tabStore.activeTab == 1 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeTab(1)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+      >
+        <g>
+          <g>
+            <path
+              d="M18.982599999999998,12.27498L18.9687,12.23331C18.9132,12.1222,18.8438,11.9972,18.7882,11.84442L18.704900000000002,11.63609C18.204900000000002,10.52498,17.691000000000003,9.64998,16.5521,8.511087L16.4687,8.427754C16.107599999999998,8.0527532,15.56597,7.9138648,15.06597,8.0527532C14.81597,8.108309,14.57986,8.247198,14.39931,8.427754C14.28819,8.552754,14.19097,8.691642,14.12153,8.84442C13.6632,8.511087,13.24653,8.524975,12.95486,8.566642L12.94097,8.566642C12.69097,8.622198000000001,12.45486,8.761087,12.27431,8.941642C12.09375,9.1222,11.96875,9.35831,11.91319,9.60831L11.91319,9.63609C11.74653,9.6222,11.56597,9.63609,11.41319,9.67775C11.16319,9.73331,10.92708,9.8722,10.74653,10.05275C10.6493,10.14998,10.56597,10.26109,10.51042,10.3722L8.56597,8.441642C8.49653,8.372198,8.3993,8.302754,8.37153,8.288865C8.03819,8.0527532,7.62153,7.9555313,7.21875,8.0388648L7.03819,8.0944201L6.954861,8.122198L6.84375,8.177753C6.774305,8.21942,6.704861,8.247198,6.635417,8.302754L6.579861,8.330531C6.524305,8.372198,6.482638,8.399975,6.427083,8.455531C5.857639,9.03886,5.857639,9.98331,6.427083,10.56664L9.99653,14.20553L9.12153,13.95553C8.76042,13.84442,8.35764,13.88609,7.99653,14.09442C7.67708,14.28886,7.44097,14.60831,7.34375,14.98331C7.1493,15.7472,7.60764,16.58053,8.35764,16.83053C8.6493,16.94164,10.92708,17.70553,11.92708,18.038899999999998C12.89931,18.3583,13.74653,18.525,14.46875,18.525C14.71875,18.525,14.95486,18.5111,15.17708,18.4694C15.88542,18.3444,16.204900000000002,18.052799999999998,16.2604,17.98331L18.482599999999998,15.70553C18.8993,15.27498,19.1493,14.7472,19.2187,14.13609C19.2743,13.56664,19.204900000000002,12.95553,18.982599999999998,12.27498ZM8.34375,15.2472C8.35764,15.16386,8.42708,15.08053,8.51042,15.02497C8.60764,14.96942,8.71875,14.95553,8.82986,14.9972L10.71875,15.51109C11.39931,15.71942,11.6632,15.44164,11.74653,15.26109C11.87153,15.05275,11.92708,14.69164,11.46875,14.21942L7.1632,9.83053C7.12153,9.78886,7.10764,9.7472,7.07986,9.69164C6.996529,9.46942,7.10764,9.23331,7.34375,9.13609C7.45486,9.10831,7.52431,9.10831,7.57986,9.10831C7.64931,9.1222,7.71875,9.16387,7.77431,9.21942L11.48264,13.01109C11.51042,13.03887,11.5382,13.05275,11.55208,13.06664C11.74653,13.20553,12.01042,13.19164,12.20486,13.02498L12.21875,13.01109C12.32986,12.89998,12.38542,12.73331,12.35764,12.59442C12.35764,12.4972,12.31597,12.39998,12.23264,12.28887L11.96875,12.02498L11.44097,11.48331C11.42708,11.46942,11.4132,11.45553,11.4132,11.44164C11.39931,11.42775,11.38542,11.39998,11.37153,11.38609C11.27431,11.21942,11.31597,11.01109,11.45486,10.88609C11.62153,10.71942,11.88542,10.71942,12.05208,10.88609L12.84375,11.69164L12.85764,11.70553C12.96875,11.80275,13.09375,11.84442,13.23264,11.83053C13.37153,11.81664,13.51042,11.76109,13.59375,11.64998C13.76042,11.45553,13.76042,11.16387,13.60764,10.95553L13.01042,10.34442C12.84375,10.16387,12.85764,9.89998,13.0382,9.73331C13.20486,9.56664,13.44097,9.56664,13.60764,9.73331L14.62153,10.76109C14.81597,10.95553,15.13542,10.96942,15.35764,10.77498L15.37153,10.76109C15.56597,10.56664,15.56597,10.21942,15.37153,10.01109L15.17708,9.81664C15.01042,9.63609,15.02431,9.3722,15.20486,9.20553C15.37153,9.03887,15.60764,9.03887,15.77431,9.20553L15.85764,9.28887C17.0243,10.48331,17.482599999999998,11.30275,17.8993,12.31664C17.941000000000003,12.42775,17.996499999999997,12.53886,18.0243,12.64998C18.357599999999998,13.69164,18.2743,14.48331,17.7604,14.9972L15.55208,17.2472Q15.37152,17.38609,14.94097,17.44164C14.24653,17.53887,13.31597,17.39998,12.2743,17.05276C9.49653,16.10831,8.87152,15.88609,8.70486,15.84442C8.42708,15.7472,8.28819,15.46942,8.34375,15.2472Z"
+              :fill="tabStore.activeTab == 1 ? '#FFF' : '#565EE4'"
+              fill-opacity="1"
+            />
+          </g>
+          <g>
+            <ellipse
+              cx="12.5"
+              cy="12.5"
+              rx="11.399999976158142"
+              ry="11.399999976158142"
+              fill-opacity="0"
+              stroke-opacity="1"
+              :stroke="tabStore.activeTab == 1 ? '#FFF' : '#565EE4'"
+              fill="none"
+              stroke-width="2.200000047683716"
+            />
+          </g>
+        </g>
+      </svg>
       <p class="text">操作</p>
     </div>
-    <div class="tab_wrap active">
+    <div
+      :class="tabStore.activeTab == 2 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeTab(2)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="24.5"
+        height="24.5"
+        viewBox="0 0 24.5 24.5"
+      >
+        <g>
+          <path
+            d="M14.735,11.5745C14.959,12.4215,14.7403,13.3612,14.0753,14.0245C13.083,15.0168,11.473,15.0168,10.4808,14.0245C9.4885,13.0322,9.4885,11.4222,10.4808,10.43C11.1982,9.7125,12.2395,9.51475,13.1372,9.835L22.3598,1.4595C22.848,0.973,23.464,0.79975,23.6548,0.98875C23.8892,1.22325,23.6705,1.7955,23.184,2.282L14.735,11.5745ZM12.25,3.0625C7.17675,3.0625,3.0625,7.17675,3.0625,12.25C3.0625,17.3232,7.17675,21.4375,12.25,21.4375C17.3232,21.4375,21.4375,17.3232,21.4375,12.25C21.4375,11.0442,21.1908,9.89975,20.769,8.8445L22.995,6.36475C23.9523,8.113,24.5,10.1168,24.5,12.25C24.5,19.0155,19.0155,24.5,12.25,24.5C5.4845,24.5,0,19.0155,0,12.25C0,5.4845,5.4845,0,12.25,0C14.441,0,16.4937,0.58275,18.2717,1.59075L15.8637,3.80625C14.7542,3.33025,13.5345,3.0625,12.25,3.0625Z"
+            :fill="tabStore.activeTab == 2 ? '#FFF' : '#565EE4'"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
       <p class="text">测试</p>
     </div>
-    <div class="tab_wrap active">
+    <div
+      :class="tabStore.activeTab == 3 ? 'tab_wrap active' : 'tab_wrap'"
+      @click="changeTab(3)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <g>
+          <path
+            d="M6.54521,10.9091L17.4548,10.9091L17.4548,13.0909L6.54521,13.0909L6.54521,10.9091ZM12,21.8182C17.4226,21.8182,21.8192,17.4223,21.8192,11.9987C21.8192,6.57505,17.4226,2.17913,12,2.17913C6.57744,2.17913,2.18084,6.57505,2.18084,11.9987C2.18084,17.4223,6.57744,21.8182,12,21.8182ZM12,24C5.37153,24,0,18.6275,0,11.9987C0,5.37249,5.37153,0,12,0C18.6285,0,24,5.37249,24,12.0013C24,18.6275,18.6285,24,12,24Z"
+            :fill="tabStore.activeTab == 3 ? '#FFF' : '#565EE4'"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
       <p class="text">排液氮</p>
     </div>
-    <EjectLiquid />
+    <EjectLiquid
+      v-if="ejectModalVisible"
+      :handleModalVisible="handleModalVisible"
+    />
   </div>
 </template>
 
 <script setup>
 import EjectLiquid from 'cpns/modals/EjectLiquid'
+import { useRouter } from 'vue-router'
+import { useTabStore } from '@/store'
+import { ref } from 'vue'
+
+const router = useRouter()
+const tabStore = useTabStore()
+
+const ejectModalVisible = ref(false)
+
+const handleModalVisible = () => {
+  ejectModalVisible.value = false
+  tabStore.updateActiveTab(1)
+}
+const changeTab = index => {
+  tabStore.updateActiveTab(index)
+  if (index == 1) {
+    router.push('/')
+  }
+  if (index == 2) {
+  }
+  if (index == 3) {
+    ejectModalVisible.value = true
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -42,6 +144,7 @@ import EjectLiquid from 'cpns/modals/EjectLiquid'
       line-height: normal;
       letter-spacing: 0.04em;
       color: #565ee4;
+      margin-left: 10px;
     }
   }
   .active {

src/components/Tube.vue

@@ -113,9 +113,9 @@ const touch = event => {
 
 onMounted(() => {
   const checkContainer = document.querySelector('#tube_container')
-  checkContainer.addEventListener('touchstart', touch, false)
-  checkContainer.addEventListener('touchmove', touch, false)
-  checkContainer.addEventListener('touchend', touch, false)
+  checkContainer?.addEventListener('touchstart', touch, false)
+  checkContainer?.addEventListener('touchmove', touch, false)
+  checkContainer?.addEventListener('touchend', touch, false)
 })
 </script>
 

src/components/modals/EjectLiquid.vue

@@ -3,7 +3,12 @@
     <div class="modal_content">
       <div class="modal_header">
         <p class="title">排液氮</p>
-        <img :src="Close" alt="关闭" class="close_img" />
+        <img
+          :src="Close"
+          alt="关闭"
+          class="close_img"
+          @click="handleHiddenModal"
+        />
       </div>
       <div class="chart_container">
         <div class="title_wrap">
@@ -40,6 +45,16 @@ import StartIcon from '@/assets/img/start.png'
 import StopIcon from '@/assets/img/stop.png'
 import LowerTank from 'cpns/charts/LowerTank'
 import UpperTank from 'cpns/charts/UpperTank'
+
+const props = defineProps({
+  handleModalVisible: {
+    type: Function,
+  },
+})
+
+const handleHiddenModal = () => {
+  props.handleModalVisible()
+}
 </script>
 
 <style lang="scss" scoped>

src/store/modules/tab.js

@@ -5,11 +5,15 @@ export const useTabStore = defineStore({
   // state
   state: () => {
     return {
+      activeStep: 1,
       activeTab: 1,
     }
   },
   // actions
   actions: {
+    updateActiveStep(activeStep) {
+      this.activeStep = activeStep
+    },
     updateActiveTab(activeTab) {
       this.activeTab = activeTab
     },