tab list

2 years ago · 2686d14d2b
7 changed files with 94 additions and 14 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>土壤消解仪</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/mock/tabs.js
+++ b/src/mock/tabs.js
@ -0,0 +1,42 @@
+import Shiyan from '@/assets/img/tab/shiyan2.png'
+
+const tabList = [
+  {
+    id: 1,
+    name: '实验操作',
+    path: '/',
+    icon: Shiyan,
+  },
+  {
+    id: 2,
+    name: '操作记录',
+    path: '/oper',
+    icon: Shiyan,
+  },
+  {
+    id: 3,
+    name: '预设管理',
+    path: '/preset',
+    icon: Shiyan,
+  },
+  {
+    id: 4,
+    name: '酸液管理',
+    path: '/acid',
+    icon: Shiyan,
+  },
+  {
+    id: 5,
+    name: '用户管理',
+    path: '/user',
+    icon: Shiyan,
+  },
+  {
+    id: 6,
+    name: '功能测试',
+    path: '/test',
+    icon: Shiyan,
+  },
+]
+
+export default tabList
--- a/src/pages/AcidLiquor.vue
+++ b/src/pages/AcidLiquor.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="acid_liquor_container">acid liquor 酸液管理</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.acid_liquor_container {
+}
+</style>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -6,20 +6,12 @@
        <router-view></router-view>
      </div>
      <div class="operater_tabs">
-        <router-link to="/">
-          <div :class="isActiveTab('/') ? 'btn_tab active' : 'btn_tab'">
+        <router-link :to="item.path" v-for="item in tabList" :key="item.id">
+          <div :class="isActiveTab(item.path) ? 'btn_tab active' : 'btn_tab'">
            <div class="icon_wrap">
-              <img :src="Shiyan2" class="icon" alt="" />
+              <img :src="item.icon" class="icon" alt="" />
            </div>
-            <p class="tab_text">实验操作</p>
-          </div>
-        </router-link>
-        <router-link to="/oper">
-          <div :class="isActiveTab('/oper') ? 'btn_tab active' : 'btn_tab'">
-            <div class="icon_wrap">
-              <img :src="Shiyan2" class="icon" alt="" />
-            </div>
-            <p class="tab_text">操作记录</p>
+            <p class="tab_text">{{ item.name }}</p>
          </div>
        </router-link>
      </div>
@ -29,8 +21,9 @@

 <script setup>
 import Header from 'cpns/Header'
-import Shiyan2 from '@/assets/img/tab/shiyan2.png'
+import tabList from '@/mock/tabs'
 import { useRoute } from 'vue-router'
+import { computed } from 'vue'

 const route = useRoute()

--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="test_container">test 功能测试</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.test_container {
+}
+</style>
--- a/src/pages/UserManage.vue
+++ b/src/pages/UserManage.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="user_manage_container">user manage 用户管理</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.user_manage_container {
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -3,6 +3,9 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 const Main = () => import('@/pages/Main')
 const OperatingRecord = () => import('@/pages/OperatingRecord')
 const PresetManage = () => import('@/pages/PresetManage')
+const AcidLiquor = () => import('@/pages/AcidLiquor')
+const UserManage = () => import('@/pages/UserManage')
+const Test = () => import('@/pages/Test')

 // 配置路由信息
 const routes = [
@ -18,6 +21,18 @@ const routes = [
    path: '/preset',
    component: PresetManage,
  },
+  {
+    path: '/acid',
+    component: AcidLiquor,
+  },
+  {
+    path: '/user',
+    component: UserManage,
+  },
+  {
+    path: '/test',
+    component: Test,
+  },
 ]

 const router = createRouter({