diff --git a/index.html b/index.html
index e00b0e6..48e7b69 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
       height: 100%;
       margin: 0px;
       padding: 0px;
+      background: #f2f4f6;
     }
 
     .chromeframe {
diff --git a/src/App.vue b/src/App.vue
index 31839f2..de47921 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,13 +3,19 @@
 </template>
 
 <script setup>
-import useSettingsStore from '@/store/modules/settings'
-import { handleThemeStyle } from '@/utils/theme'
+import useSettingsStore from "@/store/modules/settings";
+import { handleThemeStyle } from "@/utils/theme";
 
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
-    handleThemeStyle(useSettingsStore().theme)
-  })
-})
+    handleThemeStyle(useSettingsStore().theme);
+  });
+});
 </script>
+
+<style>
+:root {
+  --el-menu-item-height: 30px;
+}
+</style>
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 7f28b44..5acd1e8 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,19 +1,28 @@
 #app {
+
   .main-container {
-    min-height: 100%;
-    transition: margin-left 0.28s;
-    margin-left: $base-sidebar-width;
+    height: 100%;
+    // height: calc(100% - 50px);
+    // transition: margin-left .28s;
+    // margin-left: $base-sidebar-width;
+    // position: relative;
+    // height: calc(100% - 50px);
+    transition: margin-left .28s;
+    margin-left: 260px;
     position: relative;
   }
 
   .sidebarHide {
-    margin-left: 0 !important;
+    margin-left: 0!important;
   }
 
   .sidebar-container {
+    -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
+    background-color: $base-menu-background;
     height: 100%;
+    // height: calc(100% - 50px);
     position: fixed;
     font-size: 0px;
     top: 0;
@@ -21,13 +30,12 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
-        0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -51,7 +59,7 @@
         font-family: Alimama ShuHeiTi;
         // font-weight: bold;
         font-size: 20px;
-        color: #ffffff;
+        color: #FFFFFF;
         line-height: 30px;
         overflow: hidden;
         padding: 10px 10px 0 10px;
@@ -59,6 +67,26 @@
       }
     }
 
+    .cheshileiming {
+      
+      padding: 10px 14px;
+      .is-active {
+        height: 30px;
+        line-height: 30px;
+        border-radius: 5px;
+        color: #FFFFFF;
+        background-color: #1485EF !important;
+      }
+      li {
+        height: 30px;
+        line-height: 30px;
+      }
+      .el-submenu__title {
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -79,44 +107,42 @@
       width: 100% !important;
     }
 
-    .el-menu-item,
-    .menu-title {
+    .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
     }
 
-    .el-menu-item .el-menu-tooltip__trigger {
-      display: inline-block !important;
-    }
-
     // menu hover
-    .sub-menu-title-noDropdown,
-    .el-sub-menu__title {
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      border-radius: 5px;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        // background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #1485EF !important;
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active > .el-submenu__title {
       color: $base-menu-color-active !important;
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: 180px !important;
+      border-radius: 5px;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        // background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #1485EF !important;
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background;
+    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .el-submenu .el-menu-item {
+      // background-color: $base-menu-background !important;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: #1485EF !important;
       }
     }
   }
@@ -130,7 +156,7 @@
       margin-left: 54px;
     }
 
-    .sub-menu-title-noDropdown {
+    .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;
 
@@ -143,29 +169,23 @@
       }
     }
 
-    .el-sub-menu {
+    .el-submenu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
           margin-left: 20px;
         }
+
       }
     }
 
     .el-menu--collapse {
-      .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
-          & > i {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -177,7 +197,7 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-sub-menu {
+  .el-menu--collapse .el-menu .el-submenu {
     min-width: $base-sidebar-width !important;
   }
 
@@ -188,7 +208,7 @@
     }
 
     .sidebar-container {
-      transition: transform 0.28s;
+      transition: transform .28s;
       width: $base-sidebar-width !important;
     }
 
@@ -202,6 +222,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -211,22 +232,22 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
+  .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $sub-menuHover
+      // you can use $subMenuHover
       background-color: rgba(0, 0, 0, 0.06) !important;
     }
   }
 
-  // the scroll bar appears when the sub-menu is too long
-  > .el-menu--popup {
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 6ef5f2c..2f6e2f7 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -206,8 +206,9 @@ getBreadcrumb();
   justify-content: center;
   align-items: center;
   img {
-    width: 17px;
-    margin-bottom: 5px;
+    width: 14px;
+    margin-bottom: 1px;
+    margin-right: 10px;
   }
 }
 .app-breadcrumb.el-breadcrumb {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 21f3039..3b2bb0e 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -36,9 +36,11 @@ function addIframe() {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
+  border-radius: 5px;
   min-height: calc(100vh - 50px);
-  width: 100%;
+  width: calc(100% - 20px);
   position: relative;
+  background-color: #fff;
   overflow: hidden;
 }
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index f152473..fd6e42a 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -111,10 +111,15 @@ function toggleTheme() {
 <style lang="scss" scoped>
 .navbar {
   height: 50px;
+  display: flex;
+  width: 100%;
+  padding: 0 40px 0 0;
+  justify-content: space-between;
+  align-items: center;
   overflow: hidden;
   position: relative;
-  background: var(--navbar-bg);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  // background: var(--navbar-bg);
+  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
@@ -131,7 +136,7 @@ function toggleTheme() {
 
   .breadcrumb-container {
     float: left;
-    padding-left: 10px;
+    // padding-left: 10px;
   }
 
   .topmenu-container {
@@ -146,7 +151,7 @@ function toggleTheme() {
 
   .right-menu {
     // float: right;
-    margin-left: 93%;
+    // margin-left: 92%;
     height: 100%;
     line-height: 50px;
     display: flex;
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 2fa82bb..3f906ba 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)" class="cheshileiming">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
           <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
@@ -9,7 +9,7 @@
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported class="cheshileiming">
       <template v-if="item.meta" #title>
         <svg-icon :icon-class="item.meta && item.meta.icon" />
         <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>