更换路由

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>

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;
+        }
+      }
     }
   }
 }

src/pages/Main.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>main</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

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,
   },
 ]