tabs

src/components/Steps.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="steps_container">
+    <div :class="tabStore.activeTab == 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="number">2</div>
+      <p class="text">抽取真空</p>
+    </div>
+    <div :class="tabStore.activeTab == 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="number">4</div>
+      <p class="text">开始加热</p>
+    </div>
+    <div :class="tabStore.activeTab == 5 ? 'tab_wrap active' : 'tab_wrap'">
+      <div class="number">5</div>
+      <p class="text">充入空气</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTabStore } from '@/store'
+
+const tabStore = useTabStore()
+</script>
+
+<style lang="scss" scoped>
+.steps_container {
+  width: 760px;
+  height: 70px;
+  border-radius: 35px;
+  background: #f0f6fb;
+  padding: 7px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  .tab_wrap {
+    width: 149px;
+    height: 56px;
+    border-radius: 28px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 22px 0 17px;
+    .number {
+      font-family: Poppins;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #9395a0;
+      width: 26px;
+      height: 26px;
+      background: #eaeaea;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 9px;
+    }
+    .text {
+      font-family: Source Han Sans CN;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #9395a0;
+    }
+  }
+  .active {
+    background: linear-gradient(180deg, #616af6 15%, #424bde 87%);
+    box-shadow: 0px 4px 6px 0px rgba(30, 39, 122, 0.3),
+      inset 0px 4px 10px 0px rgba(30, 46, 186, 0.3);
+    .number {
+      color: #565ee4;
+      background: #ffffff;
+    }
+    .text {
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/components/Tabs.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="tabs_container">
+    <div class="tab_wrap active"></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.tabs_container {
+  width: 760px;
+  height: 90px;
+  border-radius: 45px;
+  background: #f0f6fb;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  .tab_wrap {
+    width: 246px;
+    height: 70px;
+    border-radius: 35px;
+    box-sizing: border-box;
+  }
+  .active {
+    background: linear-gradient(180deg, #616af6 15%, #424bde 87%);
+    border: 2px solid #6e75f2;
+    box-shadow: 0px 4px 6px 0px rgba(30, 39, 122, 0.3),
+      inset 0px 4px 10px 0px rgba(30, 46, 186, 0.3);
+  }
+}
+</style>

src/components/operation/LiquidInjection.vue

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

src/pages/Home.vue

@@ -4,14 +4,19 @@
       <div class="header_info"></div>
       <Tube />
     </div>
-    <div class="content_card_wrap"></div>
-    <LeakRateModal />
+    <div class="content_card_wrap">
+      <Steps />
+      <LiquidInjection />
+      <Tabs />
+    </div>
   </div>
 </template>
 
 <script setup>
 import Tube from 'cpns/Tube'
-import LeakRateModal from 'cpns/modals/LeakRateModal'
+import Steps from 'cpns/Steps'
+import LiquidInjection from 'cpns/operation/LiquidInjection'
+import Tabs from 'cpns/Tabs'
 </script>
 
 <style lang="scss" scoped>
@@ -19,7 +24,7 @@ import LeakRateModal from 'cpns/modals/LeakRateModal'
   width: 800px;
   height: 1280px;
   opacity: 1;
-  background: #565ee4;
+  background: #f0f6fb;
   overflow: hidden;
   box-sizing: border-box;
   .header_card_wrap {
@@ -29,7 +34,7 @@ import LeakRateModal from 'cpns/modals/LeakRateModal'
       width: 740px;
       height: 97px;
       border-radius: 48px;
-      background: #f0f6fb;
+      background: #fff;
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -42,6 +47,8 @@ import LeakRateModal from 'cpns/modals/LeakRateModal'
     height: 730px;
     border-radius: 40px 40px 0 0;
     background: #ffffff;
+    padding: 20px;
+    box-sizing: border-box;
   }
 }
 </style>

src/store/index.js

@@ -1,6 +1,7 @@
 import { createPinia } from 'pinia'
-import { useCountStore } from './modules/count'
+import { useWebSocketStore } from './modules/websocket'
+import { useTabStore } from './modules/tab'
 const store = createPinia()
 
 export default store
-export { useCountStore }
+export { useWebSocketStore, useTabStore }

src/store/modules/count.js

@@ -1,27 +0,0 @@
-import { defineStore } from 'pinia'
-export const useCountStore = defineStore({
-  id: 'count', // id必填，且需要唯一
-  // state
-  state: () => {
-    return {
-      count: 0,
-    }
-  },
-  // getters
-  getters: {
-    doubleCount: state => {
-      return state.count * 2
-    },
-  },
-  // actions
-  actions: {
-    // actions 同样支持异步写法
-    countAdd() {
-      // 可以通过 this 访问 state 中的内容
-      this.count++
-    },
-    countReduce() {
-      this.count--
-    },
-  },
-})

src/store/modules/tab.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useTabStore = defineStore({
+  id: 'tab', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      activeTab: 1,
+    }
+  },
+  // actions
+  actions: {
+    updateActiveTab(activeTab) {
+      this.activeTab = activeTab
+    },
+  },
+})