From c8ffd7d3b1d5363e6a95ebfba18c2752fc2c5043 Mon Sep 17 00:00:00 2001
From: ltx <1006158920@qq.com>
Date: Fri, 3 Jul 2026 17:14:10 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E6=95=B4=E4=BD=93=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/basic/RouterLoading.vue | 198 ++++++++++++--------
 src/components/commonManage/index.vue  | 247 ++++++++++++++++++++++++-
 src/components/commonTable/index.vue   | 129 ++++++++-----
 src/views/index.vue                    | 130 +++++++++----
 src/views/index/index.less             | 187 +++++++++++--------
 5 files changed, 652 insertions(+), 239 deletions(-)

diff --git a/src/components/basic/RouterLoading.vue b/src/components/basic/RouterLoading.vue
index 134a454..fbbf75e 100644
--- a/src/components/basic/RouterLoading.vue
+++ b/src/components/basic/RouterLoading.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="router-loading" style="background: #eeeeee5c;">
-    <div class="spanner">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
+  <div class="router-loading">
+    <div class="loading-panel" aria-label="页面加载中">
+      <div class="loader-mark">
+        <span></span>
+      </div>
+      <div class="loading-copy">
+        <p>加载中</p>
+        <span>请稍候</span>
+      </div>
+      <div class="loading-bar">
+        <span></span>
+      </div>
     </div>
   </div>
 </template>
@@ -27,79 +29,129 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  font-size: 100px;
-  text-align: center;
-  padding-top: 200px;
-  color: #808080;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #17233d;
+  background: rgba(247, 250, 255, 0.88);
   z-index: 9999;
+  animation: loading-fade-in 0.16s ease both;
 }
-.spanner {
-  width: 100px;
-  height: 100px;
+
+.loading-panel {
+  width: 160px;
+  min-height: 142px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 22px 18px;
+  box-sizing: border-box;
+  border: 1px solid #e6eef8;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(29, 68, 130, 0.1);
+  animation: panel-in 0.24s ease-out both;
+}
+
+.loader-mark {
+  width: 46px;
+  height: 46px;
   position: relative;
-  margin: 0 auto;
-}
-.router-loading span {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
   border-radius: 50%;
-  background: #66b1ff;
-  position: absolute;
-  animation: r_load 1.04s ease infinite;
+  border: 3px solid #dce9fb;
+  border-top-color: #2487f0;
+  animation: loader-spin 0.78s linear infinite;
 }
-@keyframes r_load {
-  0% {
-    transform: scale(1.2);
+
+.loader-mark span {
+  position: absolute;
+  inset: 8px;
+  border-radius: inherit;
+  border: 2px solid #eef5ff;
+  border-bottom-color: #7db5f5;
+}
+
+.loading-copy {
+  margin-top: 14px;
+  text-align: center;
+}
+
+.loading-copy p {
+  margin: 0;
+  color: #17233d;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.loading-copy span {
+  display: block;
+  margin-top: 3px;
+  color: #8a96a8;
+  font-size: 12px;
+  line-height: 17px;
+}
+
+.loading-bar {
+  width: 96px;
+  height: 3px;
+  margin-top: 14px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #edf3fb;
+}
+
+.loading-bar span {
+  display: block;
+  width: 38%;
+  height: 100%;
+  border-radius: inherit;
+  background: #2487f0;
+  animation: loading-sweep 1.05s ease-in-out infinite;
+}
+
+@keyframes loading-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
     opacity: 1;
   }
-  100% {
-    transform: scale(0.3);
-    opacity: 0.5;
+}
+
+@keyframes panel-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 6px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
 }
-.router-loading span:nth-child(1) {
-  left: 0;
-  top: 50%;
-  margin-top: -10px;
-  animation-delay: 0.13s;
+
+@keyframes loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-.router-loading span:nth-child(2) {
-  left: 14px;
-  top: 14px;
-  animation-delay: 0.26s;
+
+@keyframes loading-sweep {
+  0% {
+    transform: translateX(-105%);
+  }
+  100% {
+    transform: translateX(270%);
+  }
 }
-.router-loading span:nth-child(3) {
-  left: 50%;
-  top: 0;
-  margin-left: -10px;
-  animation-delay: 0.39s;
-}
-.router-loading span:nth-child(4) {
-  top: 14px;
-  right: 14px;
-  animation-delay: 0.52s;
-}
-.router-loading span:nth-child(5) {
-  right: 0;
-  top: 50%;
-  margin-top: -10px;
-  animation-delay: 0.65s;
-}
-.router-loading span:nth-child(6) {
-  right: 14px;
-  bottom: 14px;
-  animation-delay: 0.78s;
-}
-.router-loading span:nth-child(7) {
-  bottom: 0;
-  left: 50%;
-  margin-left: -10px;
-  animation-delay: 0.91s;
-}
-.router-loading span:nth-child(8) {
-  bottom: 14px;
-  left: 14px;
-  animation-delay: 1.04s;
+
+@media (prefers-reduced-motion: reduce) {
+  .router-loading,
+  .loading-panel,
+  .loader-mark,
+  .loading-bar span {
+    animation: none;
+  }
 }
 </style>
diff --git a/src/components/commonManage/index.vue b/src/components/commonManage/index.vue
index bb0753f..1be4792 100644
--- a/src/components/commonManage/index.vue
+++ b/src/components/commonManage/index.vue
@@ -7,13 +7,248 @@
 
 </script>
 <style lang="less" scoped>
-.commonManage{
-    width: calc(100% - 34px);
-    height: calc(100vh - 130px) !important;
-    background-color: #fff;
-    border-radius: 8px;
+.commonManage {
+    width: calc(100% - 32px);
+    min-height: calc(100vh - 136px) !important;
+    background: rgba(255, 255, 255, 0.96);
+    border: 1px solid rgba(222, 230, 242, 0.9);
+    border-radius: 12px;
     margin: 16px;
     box-sizing: border-box;
+    overflow: hidden;
+    box-shadow: 0 12px 30px rgba(31, 52, 88, 0.08);
+}
+
+.commonManage :deep(.head) {
+    width: 100% !important;
+    min-height: 76px;
+    height: auto !important;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px 16px;
+    padding: 16px 18px 14px;
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+    border-bottom: 1px solid #edf1f7;
+}
+
+.commonManage :deep(.head .left) {
+    width: auto !important;
+    height: 36px !important;
+    display: inline-flex;
+    align-items: center;
+    margin: 0 !important;
+}
+
+.commonManage :deep(.head .desctipt) {
+    width: auto !important;
+    min-width: max-content;
+    margin: 0 8px 0 0 !important;
+    color: #344054 !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0 !important;
+}
+
+.commonManage :deep(.head .m-2),
+.commonManage :deep(.head .el-select),
+.commonManage :deep(.head .el-input),
+.commonManage :deep(.head .el-cascader) {
+    width: 190px !important;
+}
+
+.commonManage :deep(.right),
+.commonManage :deep(.rightBtn) {
+    width: auto !important;
+    min-height: 48px;
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-end !important;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 0 18px 14px;
+    box-sizing: border-box;
 }
 
-</style>
\ No newline at end of file
+.commonManage :deep(.head .right) {
+    margin-left: auto;
+    padding: 0;
+}
+
+.commonManage :deep(.Search),
+.commonManage :deep(.Add),
+.commonManage :deep(.addTeacher),
+.commonManage :deep(.Import),
+.commonManage :deep(.Export),
+.commonManage :deep(.Audit),
+.commonManage :deep(.Upload) {
+    min-width: 82px !important;
+    width: auto !important;
+    height: 34px !important;
+    margin: 0 !important;
+    padding: 0 16px !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px !important;
+    border: 1px solid transparent !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 34px !important;
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
+}
+
+.commonManage :deep(.Search),
+.commonManage :deep(.Add),
+.commonManage :deep(.addTeacher),
+.commonManage :deep(.Import),
+.commonManage :deep(.Export) {
+    color: #fff !important;
+    background: linear-gradient(135deg, #2f8dff 0%, #176be7 100%) !important;
+    box-shadow: 0 6px 14px rgba(47, 141, 255, 0.2);
+}
+
+.commonManage :deep(.Audit),
+.commonManage :deep(.Upload) {
+    color: #475467 !important;
+    background: #fff !important;
+    border-color: #d9e1ee !important;
+    box-shadow: 0 4px 10px rgba(31, 52, 88, 0.05);
+}
+
+.commonManage :deep(.Search:hover),
+.commonManage :deep(.Add:hover),
+.commonManage :deep(.addTeacher:hover),
+.commonManage :deep(.Import:hover),
+.commonManage :deep(.Export:hover),
+.commonManage :deep(.Audit:hover),
+.commonManage :deep(.Upload:hover) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(47, 141, 255, 0.24);
+}
+
+.commonManage :deep(.cont) {
+    padding: 0 0 16px;
+    box-sizing: border-box;
+}
+
+.commonManage :deep(.el-input__wrapper),
+.commonManage :deep(.el-select__wrapper) {
+    min-height: 34px;
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px #dce4f0 inset;
+    transition: box-shadow 0.18s ease, background 0.18s ease;
+}
+
+.commonManage :deep(.el-input__wrapper:hover),
+.commonManage :deep(.el-select__wrapper:hover),
+.commonManage :deep(.el-input__wrapper.is-focus),
+.commonManage :deep(.el-select__wrapper.is-focused) {
+    box-shadow: 0 0 0 1px #2f8dff inset, 0 0 0 3px rgba(47, 141, 255, 0.1);
+}
+
+.commonManage :deep(.el-table) {
+    width: calc(100% - 36px) !important;
+    margin: 16px 18px 0 !important;
+    border-radius: 10px;
+    border: 1px solid #edf1f7;
+    box-shadow: 0 8px 20px rgba(31, 52, 88, 0.05);
+    overflow: hidden;
+}
+
+.commonManage :deep(.el-table::before),
+.commonManage :deep(.el-table__inner-wrapper::before) {
+    display: none;
+}
+
+.commonManage :deep(.el-table th.el-table__cell) {
+    height: 46px !important;
+    padding: 0 !important;
+    background: #f6f9fd !important;
+    color: #344054 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+}
+
+.commonManage :deep(.el-table td.el-table__cell) {
+    height: 46px !important;
+    padding: 6px 0 !important;
+    color: #475467 !important;
+    border-bottom-color: #edf1f7 !important;
+}
+
+.commonManage :deep(.el-table__row:hover > td.el-table__cell) {
+    background: #f4f8ff !important;
+}
+
+.commonManage :deep(.el-pagination) {
+    margin: 14px 18px 0 !important;
+}
+
+.commonManage :deep(.operate) {
+    min-height: 24px !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.commonManage :deep(.operate .edit),
+.commonManage :deep(.operate .view),
+.commonManage :deep(.operate .delete),
+.commonManage :deep(.operate .toView),
+.commonManage :deep(.operate .editPassWord) {
+    width: auto !important;
+    min-width: 42px !important;
+    height: 24px !important;
+    padding: 0 8px !important;
+    margin: 0 !important;
+    border-radius: 6px;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 24px !important;
+    transition: background 0.18s ease, color 0.18s ease;
+}
+
+.commonManage :deep(.operate .edit),
+.commonManage :deep(.operate .view),
+.commonManage :deep(.operate .toView) {
+    color: #176be7 !important;
+}
+
+.commonManage :deep(.operate .delete) {
+    color: #f04438 !important;
+}
+
+.commonManage :deep(.operate .editPassWord) {
+    color: #12a87f !important;
+}
+
+.commonManage :deep(.operate .edit:hover),
+.commonManage :deep(.operate .view:hover),
+.commonManage :deep(.operate .toView:hover) {
+    background: #eaf3ff;
+}
+
+.commonManage :deep(.operate .delete:hover) {
+    background: #fff1f0;
+}
+
+.commonManage :deep(.addTeacherDrawer .title) {
+    color: #1d2939 !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+}
+
+.commonManage :deep(.footer .cancle),
+.commonManage :deep(.footer .confirm) {
+    height: 38px !important;
+    border-radius: 8px !important;
+    line-height: 38px !important;
+    font-weight: 500 !important;
+}
+</style>
diff --git a/src/components/commonTable/index.vue b/src/components/commonTable/index.vue
index 06f8d75..07bcafa 100644
--- a/src/components/commonTable/index.vue
+++ b/src/components/commonTable/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="commonTable">
-        <el-table :data="propsChannel" highlight-current-row
+        <el-table :data="propsChannel" highlight-current-row stripe
             style="width: calc(100% - 40px) ;height: calc(100vh - 250px); margin:0 20px ;" fit="true"
             @selection-change="handleSelectionChange"
             :header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }"
@@ -92,16 +92,47 @@ function goUp(row) {
 
 .commonTable {
     width: 100%;
+    padding-bottom: 16px;
+    box-sizing: border-box;
 }
 
 :deep(.el-table) {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+    width: calc(100% - 36px) !important;
+    height: calc(100vh - 270px) !important;
+    margin: 16px 18px 0 !important;
+    overflow: hidden;
+    border-radius: 10px;
+    border: 1px solid #edf1f7;
+    box-shadow: 0 8px 20px rgba(31, 52, 88, 0.05);
+}
+
+:deep(.el-table::before),
+:deep(.el-table__inner-wrapper::before) {
+    display: none;
+}
+
+:deep(.el-table th.el-table__cell) {
+    height: 46px !important;
+    padding: 0 !important;
+    background: #f6f9fd !important;
+    color: #344054 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+}
+
+:deep(.el-table td.el-table__cell) {
+    height: 46px !important;
+    padding: 6px 0 !important;
+    color: #475467;
+    border-bottom-color: #edf1f7;
+}
+
+:deep(.el-table__row:hover > td.el-table__cell) {
+    background: #f4f8ff !important;
 }
 
 :deep(.el-table__body .el-table__row) {
-    // height: 36.55px;
-    /* 设置行高 */
+    transition: background 0.18s ease;
 }
 
 :deep(.el-tabs__item) {
@@ -122,63 +153,69 @@ function goUp(row) {
 }
 
 :deep(.el-pagination) {
-    height: 20px;
-    margin-top: 15px;
-    margin-left: 20px;
+    min-height: 32px;
+    margin: 14px 18px 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+:deep(.el-pagination .btn-prev),
+:deep(.el-pagination .btn-next),
+:deep(.el-pagination .el-pager li) {
+    border-radius: 7px;
 }
 
 .operate {
-    height: 20px;
+    min-height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
 }
 
-.edit {
-    width: 50px;
-    height: 20px;
+.edit,
+.delete,
+.toView,
+.editPassWord {
+    width: auto;
+    min-width: 42px;
+    height: 24px;
+    padding: 0 8px;
     font-size: 14px;
     font-family: PingFangSC;
-    font-weight: 400;
-    color: #1890FF;
+    font-weight: 500;
     text-align: center;
-    line-height: 20px;
+    line-height: 24px;
     cursor: pointer;
+    border-radius: 6px;
+    transition: background 0.18s ease, color 0.18s ease;
+}
+
+.edit,
+.toView {
+    color: #176be7;
 }
 
 .delete {
-    width: 50px;
-    height: 20px;
-    font-size: 14px;
-    font-family: PingFangSC;
-    font-weight: 400;
-    color: #FE4C04;
-    text-align: center;
-    line-height: 20px;
-    cursor: pointer;
-}
-
-.toView {
-    width: 80px;
-    height: 20px;
-    font-size: 14px;
-    font-family: PingFangSC;
-    font-weight: 400;
-    color: #1890FF;
-    text-align: center;
-    line-height: 20px;
-    cursor: pointer;
+    color: #f04438;
 }
 
 .editPassWord {
-    width: 80px;
-    height: 20px;
-    font-size: 14px;
-    font-family: PingFangSC;
-    font-weight: 400;
-    color: #28CC96;
-    text-align: center;
-    line-height: 20px;
-    cursor: pointer;
+    color: #12a87f;
 }
-</style>
\ No newline at end of file
+
+.edit:hover,
+.toView:hover {
+    background: #eaf3ff;
+}
+
+.delete:hover {
+    background: #fff1f0;
+}
+
+.editPassWord:hover {
+    background: #eafaf5;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 3afa13f..6c9843f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -82,15 +82,11 @@
         </div>
       </div>
       <div class="vol-main" id="vol-main">
-        <el-scrollbar style="height: 100%" v-if="permissionInited">
+        <el-scrollbar :key="$route.fullPath" class="page-glide-shell" style="height: 100%" v-if="permissionInited">
           <loading v-show="$store.getters.isLoading()"></loading>
           <router-view v-if="!$route.meta ||
             ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
-          " v-slot="{ Component }">
-            <transition name="page-fade" mode="out-in">
-              <component :is="Component" :key="$route.path" />
-            </transition>
-          </router-view>
+          "></router-view>
           <router-view v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"></router-view>
         </el-scrollbar>
       </div>
@@ -120,23 +116,36 @@
 <!-- 页面切换动画：必须非 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-glide-shell {
+  min-height: 100%;
+  animation: page-glide-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: opacity, transform, filter;
+  transform-origin: 50% 28px;
+  backface-visibility: hidden;
 }
-.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;
+
+@keyframes page-glide-in {
+  0% {
+    opacity: 0;
+    filter: blur(8px) saturate(1.08);
+    transform: translate3d(0, 18px, 0) scale(0.985);
+  }
+
+  55% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    filter: blur(0) saturate(1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
 }
-.page-fade-enter-from {
-  opacity: 0;
-  transform: translateY(12px);
-}
-.page-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-6px);
+
+@media (prefers-reduced-motion: reduce) {
+  .page-glide-shell {
+    animation: none;
+  }
 }
 /* ====== 页面切换动画 END ====== */
 </style>
@@ -1106,12 +1115,12 @@ function showTime() {
 }
 .top-nav-overflow-item:hover {
   background: #f0f7ff;
-  color: #2d8cf0;
+  color: #176be7;
 }
 .top-nav-overflow-item.is-active {
-  color: #2d8cf0;
+  color: #176be7;
   font-weight: 600;
-  background: #e8f4ff;
+  background: #eef6ff;
 }
 .top-nav-more-fade-enter-active,
 .top-nav-more-fade-leave-active {
@@ -1125,34 +1134,87 @@ function showTime() {
 
 .header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item .is-icon-close{
   margin-left: 8px;
-  color: #000;
+  color: #98a2b3;
 }
 
 .header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item .is-icon-close:hover{
-  color: #fff;
+  color: #176be7;
 }
 
 /* ── 标签栏 Chrome 风格激活色（全局高优先级，压过 EP border-card 内置样式） ── */
 .header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item {
-  color: #5f6368;
+  color: #667085;
   background: transparent;
   border: none !important;
-  border-radius: 8px 8px 0 0 !important;
+  border-radius: 9px !important;
   overflow: visible !important;
 }
 .header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-  color: #2d8cf0 !important;
-  background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
-  font-weight: normal;
+  color: #176be7 !important;
+  background: #eef6ff !important;
+  font-weight: 600;
   border: none !important;
 }
 .header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-active):hover {
-  color: #2d8cf0 !important;
-  background: #ebf4ff !important;
-  border-radius: 8px !important;
+  color: #176be7 !important;
+  background: #f4f8ff !important;
+  border-radius: 9px !important;
 }
 .header-navigation.el-tabs--border-card > .el-tabs__header {
   background: #fff;
   border-bottom: none;
 }
+
+.addTeacherDrawer .el-drawer {
+  border-radius: 14px 0 0 14px;
+  overflow: hidden;
+}
+
+.addTeacherDrawer .el-drawer__header {
+  padding: 18px 22px 14px;
+  margin-bottom: 0;
+  border-bottom: 1px solid #edf1f7;
+}
+
+.addTeacherDrawer .el-drawer__body {
+  padding: 22px;
+  background: #fbfdff;
+}
+
+.addTeacherDrawer .el-drawer__footer {
+  padding: 14px 22px 18px;
+  border-top: 1px solid #edf1f7;
+  background: #fff;
+}
+
+.addTeacherDrawer .title {
+  color: #1d2939 !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+}
+
+.addTeacherDrawer .footer .cancle,
+.addTeacherDrawer .footer .confirm {
+  height: 38px !important;
+  border-radius: 8px !important;
+  line-height: 38px !important;
+  font-weight: 500 !important;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.addTeacherDrawer .footer .confirm {
+  background: linear-gradient(135deg, #2f8dff 0%, #176be7 100%) !important;
+  box-shadow: 0 6px 14px rgba(47, 141, 255, 0.2);
+}
+
+.addTeacherDrawer .footer .cancle {
+  background: #fff !important;
+  border-color: #d9e1ee !important;
+  color: #475467 !important;
+}
+
+.addTeacherDrawer .footer .cancle:hover,
+.addTeacherDrawer .footer .confirm:hover {
+  transform: translateY(-1px);
+}
 </style>
diff --git a/src/views/index/index.less b/src/views/index/index.less
index b7e9cd8..d7275df 100644
--- a/src/views/index/index.less
+++ b/src/views/index/index.less
@@ -4,7 +4,8 @@
   overflow: hidden;
   top: 54px;
   bottom: 0;
-      border-right: 1px solid #e4e4e7;
+  border-right: 1px solid #e7edf6;
+  background: #fff;
 }
 .vol-menu{
   border: 0 !important;
@@ -19,31 +20,32 @@
   display: flex;
   align-items: center;
   z-index: 200;
-  background-color: #2d8cf0;
-  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  background: linear-gradient(135deg, #176be7 0%, #2f8dff 52%, #28b4ff 100%);
+  box-shadow: 0 8px 24px rgba(23, 107, 231, 0.22);
 }
 
 .top-logo {
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  padding: 0 18px 0 16px;
   min-width: 200px;
   height: 100%;
   flex-shrink: 0;
-  border-radius: 10px;
-  // border-right: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.18);
   img {
-    height: 30px;
+    height: 32px;
     margin-right: 10px;
-    border-radius: 10px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 9px;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   }
   span {
     color: #fff;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 700;
     white-space: nowrap;
-    letter-spacing: 1px;
+    letter-spacing: 0;
     text-shadow: 0 1px 3px rgba(58, 40, 40, 0.15);
     font-family: "PingFangSC", sans-serif;
   }
@@ -54,8 +56,8 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 8px 0 16px;
-  gap: 6px;
+  padding: 0 10px 0 18px;
+  gap: 8px;
   overflow-x: auto;
   overflow-y: hidden;
   min-width: 0;
@@ -113,36 +115,37 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  height: 32px;
-  padding: 0 16px;
-  color: rgba(255, 255, 255, 0.88);
+  height: 34px;
+  padding: 0 15px;
+  color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   cursor: pointer;
   position: relative;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   white-space: nowrap;
   user-select: none;
-  border-radius: 6px;
-  letter-spacing: 0.3px;
+  border-radius: 9px;
+  letter-spacing: 0;
 
   &:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-1px);
   }
 
   &.is-active {
-    color: #2d8cf0;
+    color: #176be7;
     font-weight: 600;
-    background: #fff;
-    border-radius: 6px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 9px;
+    box-shadow: 0 8px 18px rgba(12, 64, 145, 0.22);
   }
 }
 
 .vol-top-header .header-info {
   display: flex;
   align-items: center;
-  padding-right: 20px;
+  padding-right: 18px;
   height: 100%;
   gap: 2px;
   flex-shrink: 0;
@@ -159,7 +162,7 @@
   padding: 4px 10px;
   line-height: 18px;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 9px;
   transition: background 0.2s;
   &:hover {
     background: rgba(255, 255, 255, 0.12);
@@ -183,7 +186,7 @@
     height: 36px;
     display: inline-flex;
     align-items: center;
-    border-radius: 8px;
+    border-radius: 9px;
     transition: all 0.2s;
     text-decoration: none;
     &:hover {
@@ -200,7 +203,7 @@
   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);
+  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
 }
 // ====== 顶部一级导航栏 END ======
 
@@ -208,39 +211,41 @@
 .vol-aside ::v-deep(.el-menu) {
   border-right: none !important;
   background: transparent;
-  padding: 6px 0;
+  padding: 10px 0;
 }
 .vol-aside ::v-deep(.el-menu-item) {
-  height: 40px;
-  line-height: 40px;
-  margin: 2px 8px 2px 0;
-  border-radius: 0 20px 20px 0;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 42px;
+  line-height: 42px;
+  margin: 3px 10px;
+  border-radius: 10px;
+  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   font-size: 13.5px;
-  // color: #4a5568;
+  color: #475467;
   overflow: hidden;
 }
 .vol-aside ::v-deep(.el-sub-menu__title) {
-  height: 40px;
-  line-height: 40px;
+  height: 42px;
+  line-height: 42px;
+  margin: 3px 10px;
+  border-radius: 10px;
   font-size: 13.5px;
-  color: #1a202c;
-  // font-weight: 600;
+  color: #344054;
   transition: background 0.2s;
-  letter-spacing: 0.3px;
+  letter-spacing: 0;
 }
 .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
-  background-color: #ebf4ff !important;
-  color: #2d8cf0 !important;
+  background-color: #f2f7ff !important;
+  color: #176be7 !important;
+  transform: translateX(2px);
 }
 .vol-aside ::v-deep(.el-sub-menu__title:hover) {
-  background-color: #f5f7fa !important;
+  background-color: #f6f9fd !important;
 }
 .vol-aside ::v-deep(.el-menu-item.is-active) {
-  background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
-  color: #2d8cf0 !important;
-  // font-weight: 600;
-  box-shadow: inset 3px 0 0 #2d8cf0;
+  background: linear-gradient(135deg, #eaf3ff 0%, #f6fbff 100%) !important;
+  color: #176be7 !important;
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 #2f8dff, 0 6px 14px rgba(47, 141, 255, 0.1);
 }
 // ====== 侧边栏菜单美化 END ======
 
@@ -267,8 +272,8 @@
   top: 0;
   bottom: 0;
   background: #fff;
-  border-right: 1px solid #e4e4e7 !important;
-  box-shadow: none;
+  border-right: 1px solid #e7edf6 !important;
+  box-shadow: 8px 0 20px rgba(31, 52, 88, 0.04);
 }
 
 .vol-aside .vol-menu ::v-deep(.ivu-menu) {
@@ -300,7 +305,8 @@
   width: 100%;
   display: inline-block;
   background: #fff;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid #e7edf6;
+  box-shadow: 0 2px 10px rgba(31, 52, 88, 0.04);
 }
 .vol-container .vol-path span {
   position: relative;
@@ -318,7 +324,8 @@
 .vol-main {
   position: absolute;
   width: 100%;
-  background-color: #f1f3f6;
+  background:
+    linear-gradient(180deg, rgba(244, 248, 255, 0.92) 0%, rgba(239, 244, 250, 0.96) 100%);
   bottom: 0;
   top: 38px;
   margin: 0;
@@ -397,10 +404,10 @@
   cursor: pointer;
   box-shadow: none;
   border-bottom: none;
-  height: 38px;
+  height: 40px;
   display: block;
   margin: 0;
-  padding: 0px 8px 0;
+  padding: 0 10px;
   outline: 0;
   list-style: none;
   position: relative;
@@ -410,7 +417,7 @@
 }
 .el-tabs--border-card {
   border: none;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid #e7edf6;
 }
 .header-navigation ::v-deep(.el-tabs__nav-wrap) {
   margin-bottom: 0;
@@ -428,55 +435,47 @@
   overflow: visible;
 }
 .header-navigation ::v-deep(.el-tabs__item) {
-  height: 37px;
+  height: 36px;
   font-size: 14px;
-  line-height: 30px;
+  line-height: 36px;
   padding: 0 14px !important;
-  color: #000 !important;
+  color: #667085 !important;
   position: relative;
   margin: 0 1px;
   border: none !important;
-  border-radius: 8px 8px 0 0 !important;
+  border-radius: 9px !important;
   background: transparent;
-  transition: background 0.15s ease;
+  transition: color 0.18s ease, background 0.18s ease;
   box-shadow: none;
   overflow: visible !important;
   z-index: 1;
   margin-right: 3px;
 }
 .header-navigation ::v-deep(.el-tabs__item.is-active) {
-  color: #2d8cf0 !important;
-  background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
+  color: #176be7 !important;
+  background: #eef6ff !important;
   font-weight: 600;
   box-shadow: none;
   z-index: 2;
 }
 .header-navigation ::v-deep(.el-tabs__item.is-active::before) {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: -8px;
-  width: 8px;
-  height: 8px;
-  background: transparent;
-  border-bottom-right-radius: 8px;
-  box-shadow: 3px 0 0 0 #dbeeff;
+  display: none;
 }
 .header-navigation ::v-deep(.el-tabs__item.is-active::after) {
-  content: '';
+  content: "";
   position: absolute;
-  bottom: 0;
-  right: -8px;
-  width: 8px;
-  height: 8px;
-  background: transparent;
-  border-bottom-left-radius: 8px;
-  box-shadow: -3px 0 0 0 #f0f8ff;
+  left: 12px;
+  right: 12px;
+  bottom: 3px;
+  height: 2px;
+  border-radius: 2px;
+  background: #2f8dff;
+  box-shadow: none;
 }
 .header-navigation ::v-deep(.el-tabs__item:not(.is-active):hover) {
-  color: #2d8cf0 !important;
-  background: #ebf4ff !important;
-  border-radius: 8px !important;
+  color: #176be7 !important;
+  background: #f4f8ff !important;
+  border-radius: 9px !important;
 }
 .header-navigation ::v-deep(.el-tabs__nav-prev),
 .header-navigation ::v-deep(.el-tabs__nav-next) {
@@ -910,6 +909,34 @@ color: #bababa;
 .vol-theme-dark .top-nav-item.is-active { color: #272929; }
 .vol-theme-white .top-nav-item.is-active { color: #333; }
 
+.vol-theme-blue .vol-top-header,
+.vol-theme-blue2 .vol-top-header {
+  background: linear-gradient(135deg, #176be7 0%, #2f8dff 52%, #28b4ff 100%);
+}
+
+.vol-theme-red .vol-top-header,
+.vol-theme-red2 .vol-top-header {
+  background: linear-gradient(135deg, #c92a2a 0%, #ed4014 58%, #ff7a45 100%);
+}
+
+.vol-theme-orange .vol-top-header,
+.vol-theme-orange2 .vol-top-header {
+  background: linear-gradient(135deg, #d46b08 0%, #ff9900 58%, #ffc069 100%);
+}
+
+.vol-theme-green .vol-top-header,
+.vol-theme-green2 .vol-top-header {
+  background: linear-gradient(135deg, #099268 0%, #19be6b 58%, #63e6be 100%);
+}
+
+.vol-theme-dark .vol-top-header {
+  background: linear-gradient(135deg, #111827 0%, #272929 62%, #475467 100%);
+}
+
+.vol-theme-white .vol-top-header {
+  background: linear-gradient(135deg, #353941 0%, #434956 62%, #667085 100%);
+}
+
 .theme-selector {
   .item {
     cursor: pointer;