diff --git a/src/api/http.js b/src/api/http.js
index dc84651..fe90d50 100644
--- a/src/api/http.js
+++ b/src/api/http.js
@@ -14,8 +14,8 @@ let loadingStatus = false;
 console.log(process.env.NODE_ENV, 'process.env.NODE_ENV')
 if (process.env.NODE_ENV == 'development') {
     // axios.defaults.baseURL = 'http://101.132.164.149:9991/';
-    // axios.defaults.baseURL = 'http://8.153.108.90:9991/'; //测试
-    axios.defaults.baseURL = 'https://smartsports.yuedongsports.com/'; //正式
+    axios.defaults.baseURL = 'http://8.153.108.90:9991/'; //测试
+    // axios.defaults.baseURL = 'https://smartsports.yuedongsports.com/'; //正式
     //  axios.defaults.baseURL = 'http://192.168.0.146:9991/'; //汤龙本地
     // axios.defaults.baseURL = 'http://47.101.60.251:9991/';
     //  axios.defaults.baseURL = 'http://localhost:9991/'; 
diff --git a/src/components/basic/VolElementMenu.vue b/src/components/basic/VolElementMenu.vue
index 5fd5317..645a15f 100644
--- a/src/components/basic/VolElementMenu.vue
+++ b/src/components/basic/VolElementMenu.vue
@@ -87,18 +87,18 @@ export default defineComponent({
         }
       });
     };
-    let rootTreeId = !isNaN(props.rootId) ? ~~props.rootId : props.rootId;
+    let rootTreeId = ref(!isNaN(props.rootId) ? ~~props.rootId : props.rootId);
     props.list.forEach((x) => {
       if (!x.icon || x.icon.substring(0, 3) != 'el-') {
         x.icon = 'el-icon-menu';
       }
       x.children = [];
-      x.isRoot = x.parentId === rootTreeId;
+      x.isRoot = x.parentId === rootTreeId.value;
     });
     const convertTree = (data) => {
       var root_data = [];
       data.forEach((x) => {
-        if (x.parentId === rootTreeId) {
+        if (x.parentId === rootTreeId.value) {
           if (!x.hasOwnProperty('enable')) x.enable = 1;
           root_data.push(x);
           getTree(x.id, x, data);
@@ -106,6 +106,14 @@ export default defineComponent({
       });
       return root_data;
     };
+    // 监听 rootId 变化，重新生成树
+    watch(() => props.rootId, (newVal) => {
+      rootTreeId.value = !isNaN(newVal) ? ~~newVal : newVal;
+      props.list.forEach((x) => {
+        x.children = [];
+        x.isRoot = x.parentId === rootTreeId.value;
+      });
+    });
     // const openedIds = reactive([props.currentMenuId]);
     // let openedIds = ref(['2', '2145', '2156', '2146', '2159']);
     let openedIds = ref([]);
diff --git a/src/components/scaleBox/index.vue b/src/components/scaleBox/index.vue
index 0e40dd8..3de5509 100644
--- a/src/components/scaleBox/index.vue
+++ b/src/components/scaleBox/index.vue
@@ -37,8 +37,10 @@ const getScale = () => {
 
 	// 根据缩放比例调整容器的大小，确保不超出窗口的尺寸
 	const container = ContainerBox.value;
-	container.style.width = `${Math.min(width.value * scale.value, maxWidth.value)}px`;
-	container.style.height = `${Math.min(height.value * scale.value, maxHeight.value)}px`;
+	if(container) {
+		container.style.width = `${Math.min(width.value * scale.value, maxWidth.value)}px`;
+		container.style.height = `${Math.min(height.value * scale.value, maxHeight.value)}px`;
+	}
 };
 const debounce = (fn: Function, delay: number = 500) => {
 	const delays = delay || 500;
diff --git a/src/views/index.vue b/src/views/index.vue
index 8d80c35..ebf6807 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,52 +1,53 @@
 <template>
   <div id="vol-container" :class="['vol-theme-' + theme]">
-    <div class="vol-aside" :style="{ width: menuWidth + 'px' }">
-      <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
-        <img v-show="!isCollapse" v-bind:src="logo" />
-        <p v-show="!isCollapse">智慧系统</p>
-        <!-- <i @click="toggleLeft" class="el-icon-s-fold collapse-menu" /> -->
-        <i class="el-icon-s-fold collapse-menu" @click="toggleLeft" v-show="!isCollapse"></i>
-        <i class="el-icon-s-unfold collapse-menu" @click="toggleLeft" v-show="isCollapse"></i>
+    <!-- 顶部一级导航栏 -->
+    <div class="vol-top-header">
+      <div class="top-logo">
+        <img v-bind:src="logo" />
+        <span>跃动智慧体育平台</span>
       </div>
+      <div class="top-nav-menus" ref="topNavMenusRef">
+        <span
+          v-for="item in topLevelMenus"
+          :key="item.id"
+          :class="['top-nav-item', { 'is-active': activeTopMenuId == item.id }]"
+          @click="selectTopMenu(item)"
+        >{{ item.name }}</span>
+      </div>
+      <div class="header-info">
+        <div class="h-link">
+          <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => { return c.icon; })" :key="index">
+            <span v-if="!item.icon"> {{ item.text }}</span>
+            <i v-else :class="item.icon"></i>
+          </a>
+        </div>
+        <div>
+          <img class="user-header" :src="userImg" :onerror="errorImg" />
+        </div>
+        <div class="user">
+          <span>{{ userName }}</span>
+          <br />
+          <span id="index-date"></span>
+        </div>
+      </div>
+    </div>
+    <!-- 侧边二级导航栏 -->
+    <div v-show="activeTopMenuHasChildren" class="vol-aside" :style="{ width: menuWidth + 'px' }">
       <div class="vol-menu">
         <el-scrollbar style="height: 100%">
-          <VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false"
-            :isCollapse="isCollapse" :list="menuOptions"></VolMenu>
+          <VolMenu
+            :rootId="activeTopMenuId + ''"
+            :currentMenuId="currentMenuId"
+            :on-select="onSelect"
+            :enable="true"
+            :open-select="false"
+            :isCollapse="isCollapse"
+            :list="menuOptions"
+          ></VolMenu>
         </el-scrollbar>
       </div>
     </div>
-    <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
-      <div class="vol-header">
-        <!-- <div class="project-name">智慧系统</div> -->
-        <div class="header-text">
-          <div class="h-link">
-            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
-              return !c.icon;
-            })" :key="index">
-              <span v-if="!item.icon"> {{ item.text }}</span>
-              <i v-else :class="item.icon"></i>
-            </a>
-          </div>
-        </div>
-        <div class="header-info">
-          <div class="h-link">
-            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
-              return c.icon;
-            })" :key="index">
-              <span v-if="!item.icon"> {{ item.text }}</span>
-              <i v-else :class="item.icon"></i>
-            </a>
-          </div>
-          <div>
-            <img class="user-header" :src="userImg" :onerror="errorImg" />
-          </div>
-          <div class="user">
-            <span>{{ userName }}</span>
-            <br />
-            <span id="index-date"></span>
-          </div>
-        </div>
-      </div>
+    <div class="vol-container" :style="{ left: activeTopMenuHasChildren ? (menuWidth - 1) + 'px' : '0px' }">
       <div class="vol-path">
         <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)"
           type="border-card" class="header-navigation" v-model="selectId" :strtch="false">
@@ -86,9 +87,9 @@
           <router-view v-if="!$route.meta ||
             ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
           " v-slot="{ Component }">
-            <keep-alive>
-              <component :is="Component" />
-            </keep-alive>
+            <transition name="page-fade" mode="out-in">
+              <component :is="Component" :key="$route.path" />
+            </transition>
           </router-view>
           <router-view v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"></router-view>
         </el-scrollbar>
@@ -113,6 +114,30 @@
 <style lang="less" scoped>
 @import "./index/index.less";
 </style>
+
+<!-- 页面切换动画：必须非 scoped，否则无法作用于子路由组件根元素 -->
+<style lang="less">
+/* ====== 页面切换动画 ====== */
+.page-fade-enter-active {
+  transition: opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: opacity, transform;
+}
+.page-fade-leave-active {
+  transition: opacity 0.15s cubic-bezier(0.55, 0, 0.55, 0.2),
+              transform 0.15s cubic-bezier(0.55, 0, 0.55, 0.2);
+  will-change: opacity, transform;
+}
+.page-fade-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.page-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+/* ====== 页面切换动画 END ====== */
+</style>
 <script>
 import loading from "@/components/basic/RouterLoading.vue";
 import VolMenu from "@/components/basic/VolElementMenu.vue";
@@ -131,6 +156,7 @@ import {
   reactive,
   ref,
   watch,
+  computed,
   onMounted,
   getCurrentInstance,
 } from "vue";
@@ -161,6 +187,7 @@ export default defineComponent({
     const { proxy } = getCurrentInstance();
     // 菜单导航默认宽度
     const menuWidth = ref(200);
+    const topNavMenusRef = ref(null);
     const contextMenuVisible = ref(false);
     const isCollapse = ref(false);
     const drawer_model = ref(false);
@@ -211,6 +238,24 @@ export default defineComponent({
     const logo = ref(imgUrl);
     const theme = ref("blue2");
     const menuOptions = ref([]);
+    const activeTopMenuId = ref(0);
+    const topLevelMenus = computed(() => {
+      return menuOptions.value.filter(item => item.parentId == 0);
+    });
+    const activeTopMenuHasChildren = computed(() => {
+      return menuOptions.value.some(item => item.parentId == activeTopMenuId.value);
+    });
+    const findTopLevelParent = (itemId) => {
+      const flatList = menuOptions.value;
+      let current = flatList.find(x => x.id == itemId);
+      while (current && current.parentId != 0 && current.parentId !== undefined && current.parentId !== null) {
+        current = flatList.find(x => x.id == current.parentId);
+      }
+      return current ? current.id : null;
+    };
+    const selectTopMenu = (item) => {
+      activeTopMenuId.value = item.id;
+    };
     const routerList = ref(JSON.parse(localStorage.getItem("routerList")))
     const permissionInited = ref(false);
     const messageList = reactive([]);
@@ -557,6 +602,8 @@ export default defineComponent({
       /* 2020.07.31增加手动打开tabs*/
       var item = getSelectMenuName(treeId);
       open(item, false);
+      const topId = findTopLevelParent(treeId);
+      if (topId !== null) activeTopMenuId.value = topId;
     };
 
     /**
@@ -713,6 +760,11 @@ export default defineComponent({
           });
           store.dispatch("setPermission", data);
           menuOptions.value = data;
+          // 初始化顶部导航选中项
+          const topItems = data.filter(x => x.parentId == 0);
+          if (topItems.length > 0) {
+            activeTopMenuId.value = topItems[0].id;
+          }
           permissionInited.value = true;
 
           //开启消息推送（main.js中设置是否开启signalR）2022.05.05
@@ -752,6 +804,11 @@ export default defineComponent({
     return {
       menuWidth,
       isCollapse,
+      topNavMenusRef,
+      activeTopMenuId,
+      activeTopMenuHasChildren,
+      topLevelMenus,
+      selectTopMenu,
       drawer_model,
       theme_color,
       errorImg,
@@ -788,11 +845,19 @@ export default defineComponent({
    */
   mounted() {
     let _date = showTime();
-    $indexDate = document.getElementById("index-date");
-    $indexDate.innerText = _date;
-    $interval = setInterval(function () {
-      $indexDate.innerText = showTime();
-    }, 1000);
+    // $indexDate = document.getElementById("index-date");
+    // $indexDate.innerText = _date;
+    // $interval = setInterval(function () {
+    //   $indexDate.innerText = showTime();
+    // }, 1000);
+
+    // 顶部导航横向滚动
+    if (this.topNavMenusRef) {
+      this.topNavMenusRef.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        this.topNavMenusRef.scrollLeft += e.deltaY || e.deltaX;
+      }, { passive: false });
+    }
 
     this.bindRightClickMenu(true);
   },
@@ -870,33 +935,34 @@ function showTime() {
 }
 
 .contextMenu {
-  width: 120px;
+  width: 130px;
   margin: 0;
-  border: 1px solid #eaeaea;
+  border: 1px solid #e8ecf2;
   background: #fff;
   z-index: 30000;
   position: absolute;
   list-style-type: none;
-  padding: 5px 0;
-  border-radius: 4px;
-  font-size: 14px;
+  padding: 4px;
+  border-radius: 10px;
+  font-size: 13px;
   color: #333;
-  box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
 
   i,
   button {
-    font-size: 14px !important;
+    font-size: 13px !important;
   }
 }
 
 .contextMenu li {
   margin: 0;
-  padding: 0px 17px;
+  padding: 2px 4px;
 }
 
 .contextMenu li:hover {
-  background: #fafafa;
+  background: #f0f7ff;
   cursor: pointer;
+  border-radius: 6px;
 }
 
 .contextMenu li button {
@@ -907,11 +973,11 @@ function showTime() {
 
 .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
 .el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
-  padding: 0;
+  padding: 0 12px !important;
 }
 
 .header-navigation ::v-deep(.el-tabs__item.is-top) {
-  padding: 0 15px;
+  padding: 0 12px !important;
 }
 </style>
 <style>
diff --git a/src/views/index/index.less b/src/views/index/index.less
index 0a7cf35..9f97b83 100644
--- a/src/views/index/index.less
+++ b/src/views/index/index.less
@@ -1,12 +1,202 @@
 .vol-aside {
-  height: 100%;
   position: absolute;
   float: left;
   overflow: hidden;
+  top: 54px;
+  bottom: 0;
 }
 .vol-menu{
   border: 0 !important;
 }
+// ====== 顶部一级导航栏 ======
+.vol-top-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  z-index: 200;
+  background-color: #2d8cf0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+}
+
+.top-logo {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  min-width: 215px;
+  height: 100%;
+  flex-shrink: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  img {
+    height: 30px;
+    margin-right: 10px;
+  }
+  span {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 700;
+    white-space: nowrap;
+    letter-spacing: 1px;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.top-nav-menus {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px;
+  gap: 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // 隐藏滚动条，但保留滚动功能
+  scrollbar-width: none; // Firefox
+  -ms-overflow-style: none; // IE/Edge
+  &::-webkit-scrollbar {
+    display: none; // Chrome/Safari
+  }
+  // 鼠标左右拖动提示
+  cursor: default;
+}
+
+.top-nav-item {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 16px;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 14px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  user-select: none;
+  border-radius: 6px;
+  letter-spacing: 0.3px;
+
+  &:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  &.is-active {
+    color: #2d8cf0;
+    font-weight: 600;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.vol-top-header .header-info {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+  height: 100%;
+  gap: 2px;
+  flex-shrink: 0;
+  > div {
+    float: none;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.vol-top-header .user {
+  color: rgba(255, 255, 255, 0.95);
+  text-align: left;
+  padding: 4px 10px;
+  line-height: 18px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background 0.2s;
+  &:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  span {
+    font-size: 12px;
+    display: block;
+    &:first-child {
+      font-size: 13px;
+      font-weight: 600;
+    }
+  }
+}
+
+.vol-top-header .h-link {
+  line-height: normal;
+  a {
+    color: rgba(255, 255, 255, 0.88);
+    font-size: 18px;
+    padding: 0 8px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    transition: all 0.2s;
+    text-decoration: none;
+    &:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+}
+
+.vol-top-header .user-header {
+  height: 34px;
+  width: 34px;
+  top: 0;
+  position: relative;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+// ====== 顶部一级导航栏 END ======
+
+// ====== 侧边栏菜单美化 ======
+.vol-aside ::v-deep(.el-menu) {
+  border-right: none !important;
+  background: transparent;
+  padding: 6px 0;
+}
+.vol-aside ::v-deep(.el-menu-item) {
+  height: 40px;
+  line-height: 40px;
+  margin: 1px 8px 1px 0;
+  border-radius: 0 20px 20px 0;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 13.5px;
+  color: #4a5568;
+  overflow: hidden;
+}
+.vol-aside ::v-deep(.el-sub-menu__title) {
+  height: 40px;
+  line-height: 40px;
+  font-size: 13.5px;
+  color: #1a202c;
+  font-weight: 600;
+  transition: background 0.2s;
+  letter-spacing: 0.3px;
+}
+.vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
+  background-color: #ebf4ff !important;
+  color: #2d8cf0 !important;
+}
+.vol-aside ::v-deep(.el-sub-menu__title:hover) {
+  background-color: #f5f7fa !important;
+}
+.vol-aside ::v-deep(.el-menu-item.is-active) {
+  background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
+  color: #2563eb !important;
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 #2d8cf0;
+}
+// ====== 侧边栏菜单美化 END ======
+
 .vol-aside .tac {
   text-align: left;
 }
@@ -27,10 +217,11 @@
 .vol-aside .vol-menu {
   position: absolute;
   width: 100%;
-  top: 40px;
+  top: 0;
   bottom: 0;
-  background: white;
-  border-right: 1px solid #e3e3e3;
+  background: #fff;
+  border-right: none;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06);
 }
 
 .vol-aside .vol-menu ::v-deep(.ivu-menu) {
@@ -53,14 +244,16 @@
   position: absolute;
   margin: 0;
   box-sizing: border-box;
-  height: 100%;
+  top: 54px;
+  bottom: 0;
 }
 
 .vol-container .vol-path {
   position: relative;
   width: 100%;
   display: inline-block;
-  border-bottom: 1px solid #eee;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
 }
 .vol-container .vol-path span {
   position: relative;
@@ -76,14 +269,11 @@
   border-bottom: 1px solid #eee;
 }
 .vol-main {
-  // border-left: 1px solid #eee;
   position: absolute;
-  // z-index: -1;
   width: 100%;
-  // height: 100%;
-  background-color: #F0F2F5;
+  background-color: #f0f2f5;
   bottom: 0;
-  top: 75px;
+  top: 38px;
   margin: 0;
   overflow: hidden;
 }
@@ -158,42 +348,56 @@
 .header-navigation {
   cursor: pointer;
   box-shadow: none;
-  border-bottom: 1px solid #eee;
-  height: 34px;
-  /* overflow: hidden; */
-  line-height: 35px;
+  border-bottom: none;
+  height: 38px;
   display: block;
   margin: 0;
-  padding: 0;
+  padding: 5px 10px 0;
   outline: 0;
   list-style: none;
   position: relative;
   z-index: 900;
   font-weight: initial;
-  margin-top: -1px;
+  background: #fff;
 }
 .el-tabs--border-card {
   border: none;
 }
+.header-navigation ::v-deep(.el-tabs__nav-wrap) {
+  margin-bottom: -1px;
+}
+.header-navigation ::v-deep(.el-tabs__header) {
+  border-bottom: none;
+  margin: 0;
+}
 .header-navigation ::v-deep(.el-tabs__item) {
-  height: 34px;
-  font-size: 14px;
-  line-height: 34px;
-  padding-bottom: 6px;
-  color: #525252 !important;
+  height: 28px;
+  font-size: 13px;
+  line-height: 28px;
+  padding: 0 12px !important;
+  color: #8492a6 !important;
   position: relative;
-  margin: 0 4px;
-  border: 1px solid #e2e2e2;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  // border-bottom: 0px;
+  margin: 0 2px;
+  border: none !important;
+  border-radius: 5px !important;
+  background: #f2f4f7;
+  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: none;
 }
 .header-navigation ::v-deep(.el-tabs__item.is-active) {
-  color: #1a81ea !important;
+  color: #2d8cf0 !important;
+  background: #deeeff !important;
+  font-weight: 600;
+  box-shadow: none;
+}
+.header-navigation ::v-deep(.el-tabs__item:hover) {
+  color: #2d8cf0 !important;
+  background: #eaf3ff !important;
 }
 .header-navigation ::v-deep(.el-tabs__nav-prev),
 .header-navigation ::v-deep(.el-tabs__nav-next) {
-  line-height: 35px;
+  line-height: 38px;
+  color: #8492a6;
   padding-left: 4px;
 }
 
@@ -223,6 +427,9 @@ img:not([src]) {
   .header {
     background: #101010;
   }
+  .vol-top-header {
+    background: #272929;
+  }
   .header-text {
     color: white;
   }
@@ -279,8 +486,14 @@ img:not([src]) {
   color: #d6d6d6;
 }
 
-.vol-theme-dark .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item:hover) {
-  background: black;
+.vol-theme-dark .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
+  background: #1a1a1a !important;
+  color: #fff !important;
+}
+.vol-theme-dark .vol-aside ::v-deep(.el-menu-item.is-active) {
+  background: linear-gradient(90deg, #2a2a2a 0%, #222 100%) !important;
+  color: #7db8f7 !important;
+  box-shadow: inset 3px 0 0 #4d9de0;
 }
 .vol-theme-dark .vol-aside ::v-deep(.el-sub-menu__title) {
   background-color: black;
@@ -297,6 +510,9 @@ img:not([src]) {
   .vol-header {
     background-color: rgb(237, 64, 20);
   }
+  .vol-top-header {
+    background-color: rgb(237, 64, 20);
+  }
   .header-text {
     color: #dcdfe6;
   }
@@ -323,11 +539,17 @@ img:not([src]) {
   .header {
     background-color: rgb(237, 64, 20);
   }
+  .vol-top-header {
+    background-color: rgb(237, 64, 20);
+  }
 }
 .vol-theme-red2 {
   .header {
     background-color: #a90000;
   }
+  .vol-top-header {
+    background-color: #a90000;
+  }
 }
 
 .vol-theme-orange,
@@ -338,6 +560,9 @@ img:not([src]) {
   .vol-header {
     background-color: rgb(255, 153, 0);
   }
+  .vol-top-header {
+    background-color: rgb(255, 153, 0);
+  }
 
   .h-link a:hover {
     background: #c97901;
@@ -360,11 +585,17 @@ img:not([src]) {
   .header {
     background: rgb(255, 153, 0);
   }
+  .vol-top-header {
+    background-color: rgb(255, 153, 0);
+  }
 }
 .vol-theme-orange2 {
   .header {
     background-color: rgb(232, 141, 5);
   }
+  .vol-top-header {
+    background-color: rgb(232, 141, 5);
+  }
 }
 
 //绿色
@@ -376,6 +607,9 @@ img:not([src]) {
   .vol-header {
     background-color: rgb(25, 190, 107);
   }
+  .vol-top-header {
+    background-color: rgb(25, 190, 107);
+  }
 
   .h-link a:hover {
     background: #329103;
@@ -399,11 +633,17 @@ img:not([src]) {
   .header {
     background: rgb(25, 190, 107);
   }
+  .vol-top-header {
+    background-color: rgb(25, 190, 107);
+  }
 }
 .vol-theme-green2 {
   .header {
     background-color: rgb(1, 158, 79);
   }
+  .vol-top-header {
+    background-color: rgb(1, 158, 79);
+  }
 }
 
 //蓝色
@@ -415,6 +655,9 @@ img:not([src]) {
   .vol-header {
     background-color: rgb(45, 140, 240);
   }
+  .vol-top-header {
+    background-color: rgb(45, 140, 240);
+  }
 
   .h-link a:hover {
     background: #0170e3;
@@ -437,11 +680,17 @@ img:not([src]) {
   .header {
     background-color: rgb(45, 140, 240);
   }
+  .vol-top-header {
+    background-color: rgb(45, 140, 240);
+  }
 }
 .vol-theme-blue2 {
   .header {
     background-color: #2d8cf0;
   }
+  .vol-top-header {
+    background-color: #2d8cf0;
+  }
 }
 
 //白色
@@ -449,6 +698,9 @@ img:not([src]) {
   .header {
     background-color: #434956;
   }
+  .vol-top-header {
+    background-color: #434956;
+  }
   .h-link a:hover {
     background: #eeeeee;
   }
@@ -488,8 +740,14 @@ background: #353941;
 color: #d6d6d6;
 }
 
-.vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item:hover) {
-background: #353941;
+.vol-theme-white .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
+  background: #2e333b !important;
+  color: #fff !important;
+}
+.vol-theme-white .vol-aside ::v-deep(.el-menu-item.is-active) {
+  background: linear-gradient(90deg, #3d4552 0%, #353941 100%) !important;
+  color: #7db8f7 !important;
+  box-shadow: inset 3px 0 0 #5b9bd5;
 }
 .vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title) {
 background-color: #353941;
@@ -558,9 +816,17 @@ color: #bababa;
 //   background-color: #19be6b;
 // }
 
+// ====== 各主题顶部选中项颜色 ======
+.vol-theme-red .top-nav-item.is-active,
+.vol-theme-red2 .top-nav-item.is-active { color: #ed4014; }
+.vol-theme-orange .top-nav-item.is-active,
+.vol-theme-orange2 .top-nav-item.is-active { color: #ff9900; }
+.vol-theme-green .top-nav-item.is-active,
+.vol-theme-green2 .top-nav-item.is-active { color: #19be6b; }
+.vol-theme-dark .top-nav-item.is-active { color: #272929; }
+.vol-theme-white .top-nav-item.is-active { color: #333; }
+
 .theme-selector {
-  height: 100%;
-  padding-left: 16px;
   .item {
     cursor: pointer;
     width: 60px;
@@ -582,3 +848,20 @@ color: #bababa;
   right: 5px;
   cursor: pointer;
 }
+
+// ====== 全局滚动条美化 ======
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f3f5;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb {
+  background: #c8cdd6;
+  border-radius: 3px;
+  &:hover {
+    background: #a0aab4;
+  }
+}