diff --git a/src/App.vue b/src/App.vue
index 7e4b39df9d2c1088c5892869e393159073ac8295..b7c397085b30f7637eab3bdd2615f175fe1f3fb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,32 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
+    <SideBar/>
+    <div class="right">
+        <Top/>
+        <router-view></router-view>
+    </div>
 </template>
 
 <script>
+import SideBar from './components/container/SideBar.vue'
+import Top from './components/container/Top.vue'
 export default {
   name: "App",
-  components: {},
+  components: {
+    SideBar,
+    Top
+  },
 };
 </script>
 
-<style>
+<style lang="less">
 * {
   margin: 0;
   padding: 0;
 }
+#app{
+    display: flex;
+    .right{
+      // flex: 1;
+    }
+}
 </style>
diff --git a/src/components/container/SideBar.vue b/src/components/container/SideBar.vue
index 562f21d5a5f029d7ffa7688ee830868b61282ac5..3e0e5e42223dbbf7aad0e223b25b2ab7eacad1b2 100644
--- a/src/components/container/SideBar.vue
+++ b/src/components/container/SideBar.vue
@@ -1,24 +1,94 @@
-// 左侧菜单
+// 左侧菜单menu
 <template>
   <div class="sideBar_P">
+    <el-col :span="24">
       <div class="logo">
-         <img src="" alt="">
-         <span class="logo_title">
-            疫情物资信息平台-后台管理
-         </span>
+        <img src="" alt="" />
+        <span class="logo_title"> 疫情物资信息平台-后台管理 </span>
       </div>
       <div class="menu">
+        <el-menu
+          active-text-color="#ffd04b"
+          background-color="#545c64"
+          class="el-menu-vertical-demo"
+          default-active="2"
+          :router="true"
+          text-color="#fff"
+          :collapse="isCollapse"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon><icon-menu /></el-icon>
+              <span>Dashboard</span>
+            </template>
+            <el-menu-item index="/dash_board/work_bench">
+              <span>工作台</span>
+            </el-menu-item>
+          </el-sub-menu>
 
+          <el-sub-menu index="2">
+            <template #title>
+              <el-icon><setting /></el-icon>
+              <span>系统管理</span>
+            </template>
+            <el-menu-item index="/system_manage/account_manage">
+              <span>账号管理</span>
+            </el-menu-item>
+            <el-menu-item index="/system_manage/menu_manage">
+              <span>菜单管理</span>
+            </el-menu-item>
+          </el-sub-menu>
+        </el-menu>
       </div>
+    </el-col>
   </div>
 </template>
 
 <script>
+import { Menu as IconMenu, Setting } from "@element-plus/icons-vue";
+import { ref } from "vue";
 export default {
+  setup() {
+    const isCollapse = ref(false);
 
-}
+    const handleOpen = (key, keyPath) => {
+      console.log(key, keyPath);
+    };
+    const handleClose = (key, keyPath) => {
+      console.log(key, keyPath);
+    };
+    return {
+      isCollapse,
+      handleOpen,
+      handleClose,
+    };
+  },
+  components: {
+    IconMenu,
+    Setting,
+  },
+};
 </script>
 
-<style>
-
+<style lang="less">
+.sideBar_P {
+  background-color: rgb(42, 212, 65);
+  margin: 0;
+  box-sizing: border-box;
+  // height: 100%;
+  .logo {
+    text-align: center;
+    height: 68px;
+    .logo_title {
+      line-height: 68px;
+    }
+  }
+  .menu {
+    .tac {
+      // width: 220px;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/container/Tags.vue b/src/components/container/Tags.vue
index cab2697f0998b967dd70ef3727630b1d3b3a20ff..48cd3bab754c153ef9e6adcf3d392deb3d027e05 100644
--- a/src/components/container/Tags.vue
+++ b/src/components/container/Tags.vue
@@ -1 +1,29 @@
-// 顶部标签组件
\ No newline at end of file
+// 顶部标签组件
+<template>
+   <el-row class="Tags_P">
+    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
+    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
+    <el-check-tag :checked="checkedArr" @change="onChange">Tog</el-check-tag>
+   </el-row>
+</template>
+
+<script>
+export default {
+  setup() {
+    const checkedArr = []; //未代理
+    const onChange = (status) => {
+      checked.value = status;
+    };
+    return {
+      checkedArr,
+      onChange,
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.Tags_P{
+     background-color: rgb(86, 17, 17);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/container/Top.vue b/src/components/container/Top.vue
index 682d84e6905ce775987990b5a9238dcf989c8f75..0daac8d2a2c679d9317f378d17d8d00c52c4b324 100644
--- a/src/components/container/Top.vue
+++ b/src/components/container/Top.vue
@@ -1 +1,82 @@
-// 顶部组件,内含Tags.vue
\ No newline at end of file
+// 顶部组件,内含Tags.vue
+<template>
+  <div class="Top_P">
+      <el-row class="top" :span="24">
+         <div class="icons">
+            <el-icon v-if="fold"><Fold /></el-icon>
+            <el-icon else><Expand /></el-icon>
+         </div>
+        <el-dropdown>
+          <span class="el-dropdown-link">
+            Dropdown List
+            <el-icon class="el-icon--right">
+              <arrow-down />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>工作台</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+        </el-breadcrumb>
+         <div class="icons">
+            <el-icon size="20px"><search /></el-icon>
+            <el-icon size="20px"><bell /></el-icon>
+         </div>
+        
+        <el-dropdown>
+          <div class="user">
+            <img src="" alt="" class="avatar">
+            <span class="nick_name"></span>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>工作台</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-row>
+    <Tags />
+  </div>
+</template>
+
+<script>
+import Tags from "./Tags.vue";
+import { ArrowDown, Search, Bell,Fold,Expand } from "@element-plus/icons-vue";
+export default {
+  name: "Top_P",
+  components: {
+    Tags,
+    ArrowDown,
+    Search,
+    Bell,
+    Fold,
+    Expand
+  },
+};
+</script>
+
+<style lang="less">
+.Top_P {
+  height: 100px;
+  .top {
+    height: 60px;
+    background-color: rgb(21, 168, 55);
+    .icons{
+      
+      display: flex;
+      align-items: center;
+      .el-icon{
+         margin:0 15px;
+      }
+    }
+    *{
+       line-height: 60px;
+   }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2da7faa2a44bd984c9ea03eb603e6e95b3059cd3..18e2047c571d1e388f5b5517e91113abb8758298 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,15 +1,15 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
-import router from "./router/index.js";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router/index'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import 'animate.css/animate.min.css' // 动画库
-const app = createApp(App);
-app.use(ElementPlus);
-app.use(router);
-app.mount("#app");
+const app =  createApp(App)
+app.use(ElementPlus)
+app.use(router)
 // 注册icon
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component);
+   app.component(key, component)
 }
+app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 60c509923b2cd69b4933d8329442bed5a78d40b4..1805b01b1d27a344ed3bb9336083480cfbac6fd7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,14 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
-
-
+import {createRouter,createWebHashHistory} from 'vue-router'
 
 export default createRouter({
    history:createWebHashHistory(),
    routes:[
       // redirect
-      {
-         path:'/',
-         redirect:'/account/login',
-         component:()=>import('../components/page/account/Login')
-      },
+      // {
+      //    path:'/',
+      //    redirect:'/account/login',
+      //    component:()=>import('../components/page/account/Login')
+      // },
       // dash_board
       {
          path:'/dash_board/work_bench',