From dcaeedcad7a96fe9121978c1ccd928e32fa0956a Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 8 Oct 2023 11:45:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |   6 ++-
 src/assets/img/tab/shiyan2.png | Bin 0 -> 552 bytes
 src/pages/Home.vue             |  81 +++++++++++++++++++++++++++++++++++++++--
 src/pages/Main.vue             |   9 +++++
 src/router/index.js            |   4 +-
 5 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/img/tab/shiyan2.png
 create mode 100644 src/pages/Main.vue

diff --git a/src/App.vue b/src/App.vue
index 4d73cf6..228e362 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
-<script setup></script>
+<script setup>
+import Home from '@/pages/Home'
+</script>
 
 <template>
-  <router-view></router-view>
+  <Home />
 </template>
 
 <style scoped></style>
diff --git a/src/assets/img/tab/shiyan2.png b/src/assets/img/tab/shiyan2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d8de7b7eb487458f8fa582765cb2697af9340ba
GIT binary patch
literal 552
zcmV+@0@wYCP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZq(n&-?R7i={SHW?@Fc4h10!mN^p@XOc+(BFd9mJ`?
zB{)=&P=TQW(}C$Abg+3?8icH~Wa3YDMl+y0?Vb+lbSPwkqyex4umzy)0D!9<7XU}4
z)G3!UCAc9uFdt<OZ;`357sPs7;QI)YTap{^dz-o2&Re5Nb|f30OA_3W>@CSxK$1%L
z4@vE<={#F6iU*<&m1nOL!h6rxMC`pJ+(ev*z^AeSl$Lz!J_mk-5L_LK#v+{TItMnG
zIcVU1s^4e0^b%pE)CJ?cmhkQ(oZIcd)QOCM>BFd{-`2q_74^i+8Qun*o@9qEO`jB(
zcHI{Mq*NaMDh%L5nAggt^DQu(l~SK82!rGOehH?JYjFQBD2~tAE|_04)fIr(VEO=#
z#XW{<4N-x6C?Hpv@W4F-iQ`rPI0;6>%x)qEds~cPKDzQIVW9WME)Y$XOyeB88K>q6
zVW}FDenm{|x?U)ndKOK%Al6|FeC)kkBT(63jT-^iAc)4Z$7za6&$dtOr1pGcFO&S}
z@Ue&Pf_dq_`_SH+)|;1`y+9;PT|3o?qV?9e_O?xm&IGaqCP|9?e-hWl5htK>oNTJL
q7#|aZv3YRgiu<3ovr_6ihw~TzwbCVj6N{4o0000<MNUMnLSTaU%lCr-

literal 0
HcmV?d00001

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 31063a4..5f47563 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -2,14 +2,47 @@
   <div class="home_container">
     <Header />
     <div class="content_wrap">
-      <div class="main_container"></div>
-      <div class="operater_tabs"></div>
+      <div class="main_container">
+        <router-view></router-view>
+      </div>
+      <div class="operater_tabs">
+        <router-link to="/">
+          <div class="btn_tab active">
+            <div class="icon_wrap">
+              <img :src="Shiyan2" class="icon" alt="" />
+            </div>
+            <p class="tab_text">实验操作</p>
+          </div>
+        </router-link>
+        <router-link to="/oper">
+          <div class="btn_tab">
+            <div class="icon_wrap">
+              <img :src="Shiyan2" class="icon" alt="" />
+            </div>
+            <p class="tab_text">操作记录</p>
+          </div>
+        </router-link>
+
+        <div class="btn_tab">
+          <div class="icon_wrap">
+            <img :src="Shiyan2" class="icon" alt="" />
+          </div>
+          <p class="tab_text">预设管理</p>
+        </div>
+        <div class="btn_tab">
+          <div class="icon_wrap">
+            <img :src="Shiyan2" class="icon" alt="" />
+          </div>
+          <p class="tab_text">用户管理</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import Header from 'cpns/Header'
+import Shiyan2 from '@/assets/img/tab/shiyan2.png'
 </script>
 
 <style lang="scss" scoped>
@@ -28,7 +61,6 @@ import Header from 'cpns/Header'
     .main_container {
       height: 100%;
       flex: 1;
-      background: #000;
     }
     .operater_tabs {
       margin-left: 20px;
@@ -38,7 +70,48 @@ import Header from 'cpns/Header'
       flex-direction: column;
       align-items: center;
       height: 100%;
-      background: #000;
+      .btn_tab {
+        width: 230px;
+        height: 80px;
+        border-radius: 304px;
+        opacity: 1;
+        box-sizing: border-box;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        .icon_wrap {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          background: #eeeff8;
+          justify-content: center;
+          margin-right: 18px;
+          .icon {
+            width: 30px;
+            height: 30px;
+          }
+        }
+        .tab_text {
+          font-family: Poppins;
+          font-size: 26px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.06em;
+          color: #4f85fb;
+        }
+      }
+      .active {
+        background: #4f85fb;
+        .icon_wrap {
+          background: #4276e8;
+        }
+        .tab_text {
+          color: #fff;
+        }
+      }
     }
   }
 }
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
new file mode 100644
index 0000000..de4d3f6
--- /dev/null
+++ b/src/pages/Main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>main</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>
diff --git a/src/router/index.js b/src/router/index.js
index a320e7a..e765eee 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,12 +1,12 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
-const Home = () => import('@/pages/Home')
+const Main = () => import('@/pages/Main')
 
 // 配置路由信息
 const routes = [
   {
     path: '/',
-    component: Home,
+    component: Main,
   },
 ]