diff --git a/web/src/App.vue b/web/src/App.vue
index 132e8b7..6b2a2df 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -9,7 +9,7 @@
   left: 0;
   bottom: 0;
   right: 0;
-  min-width: 1440px;
-  min-height: 900px;
+  // min-width: 1440px;
+  // min-height: 900px;
 }
 </style>
diff --git a/web/src/assets/images/mainBg.png b/web/src/assets/images/mainBg.png
new file mode 100644
index 0000000..7eccde3
Binary files /dev/null and b/web/src/assets/images/mainBg.png differ
diff --git a/web/src/main.js b/web/src/main.js
index ad7e47c..3907f89 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,8 +1,9 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-import Antd from "ant-design-vue";
-import "ant-design-vue/dist/reset.css";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+import '@/style/index.scss'
 
-createApp(App).use(store).use(router).use(Antd).mount("#app");
+createApp(App).use(store).use(router).use(Antd).mount('#app')
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 794f3f8..9ceaf26 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    redirect: '/login'
+    redirect: '/main'
   },
   {
     path: '/login',
@@ -13,7 +13,14 @@ const routes = [
   {
     path: '/main',
     name: 'main',
-    component: () => import(/* webpackChunkName: "login" */ '@/views/MainView.vue')
+    redirect: '/main/monitor',
+    component: () => import(/* webpackChunkName: "main" */ '@/views/MainView.vue'),
+    children: [
+      {
+        path: 'monitor',
+        component: () => import(/* webpackChunkName: "monitor" */ '@/views/sub/monitor.vue')
+      }
+    ]
   }
 ]
 
diff --git a/web/src/style/antd.scss b/web/src/style/antd.scss
new file mode 100644
index 0000000..4df987c
--- /dev/null
+++ b/web/src/style/antd.scss
@@ -0,0 +1,14 @@
+$border-color:#12FBFF;
+
+//级联器样式
+.ant-cascader{
+.ant-select-selector{
+    background: none !important;
+    border: 1px solid  $border-color !important;
+    
+}
+.ant-select-arrow{
+        color: $border-color;
+    }
+}
+
diff --git a/web/src/style/color.scss b/web/src/style/color.scss
index e69de29..bec9603 100644
--- a/web/src/style/color.scss
+++ b/web/src/style/color.scss
@@ -0,0 +1 @@
+$border-color:#12FBFF
\ No newline at end of file
diff --git a/web/src/style/index.scss b/web/src/style/index.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/web/src/style/index.scss
@@ -0,0 +1 @@
+
diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
index 17afbf4..30f7a98 100644
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="main">
-   <div class="header"></div>
-   <div class="menu"></div>
+    <div class="header"></div>
+    <div class="page">
+      <router-view/>
+    </div>
+    <div class="menu">
+      <div v-for="menu in menuList" :key="menu.name" class="menu-item">
+        <i :class="menu.icon"></i>
+        {{ menu.name }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,7 +17,75 @@
 // @ is an alias to /src
 
 export default {
-  name: "MainView",
+  name: 'MainView',
   components: {},
-};
+  data() {
+    return {
+      menuList: [
+        {
+          name: '系统总览',
+          icon: 'icon-xitongguanli'
+        },
+        {
+          name: '系统管理',
+          icon: 'icon-xitongguanli',
+          children: [
+            {
+              name: '用户管理',
+              icon: 'icon-yonghuguanli',
+              children: [
+                {
+                  name: '用户列表',
+                  icon: 'icon-yonghuguanli',
+                  path: '/user/list'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
 </script>
+<style lang="scss" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/mainBg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.header { 
+  width: 100%;
+  height: 80px;
+  border: 1px solid red;
+}
+.page{
+  width: calc(100% - 20px);
+  height: calc(100% - 80px - 15px - 47px - 60px);
+  margin: 40px 10px 20px 10px;
+  border-radius: 20px;
+background: #052F4D;
+
+}
+.menu {
+  position: absolute;
+  width: 100%;
+  bottom: 15px;
+  // height: 150px;
+  display: flex;
+  justify-content: center;
+  .menu-item {
+    width: 120px;
+    height: 47px;
+    line-height: 47px;
+    text-align: center;
+    border-radius: 20px;
+    background: #04608e;
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+  }
+}
+</style>
diff --git a/web/src/views/sub/monitor.vue b/web/src/views/sub/monitor.vue
new file mode 100644
index 0000000..2fd211f
--- /dev/null
+++ b/web/src/views/sub/monitor.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="monitor">
+        <div class="search">
+            <div class="left">
+                <div class="search-item">
+                    <span>场站切换</span>
+                    <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+                </div>
+            </div>
+            <div class="right"></div>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.monitor{
+    padding: 10px;
+    .search{
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/web/vue.config.js b/web/vue.config.js
index ab6e164..710a83d 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -37,7 +37,10 @@ module.exports = defineConfig({
   css: {
     loaderOptions: {
       scss: {
-        additionalData: `@use "~@/style/color.scss";`
+        additionalData: `
+        @use "~@/style/color.scss";
+        @use "~@/style/antd.scss";
+        ` //在每个 .scss 文件顶部自动添加这行代码，无需手动导入
       }
     },
     extract: {