样式重构全局

src/views/home.vue

@@ -94,8 +94,10 @@ function logout() {
 
 <template>
   <div class="main-container">
-    <div class="glass-container">
-      <el-container>
+    <!-- 背景毛玻璃层（作为内容容器） -->
+    <div class="background-glass">
+      <!-- 侧边栏 -->
+      <div class="sidebar-container">
         <el-aside>
           <div class="logo">
             <img src="../assets/新logo.png" alt="logo" style="width: 9vh; height: 9vh" />
@@ -143,7 +145,11 @@ function logout() {
             </template>
           </el-menu>
         </el-aside>
-        <el-container style="margin-left: 15vw;">
+      </div>
+      
+      <!-- 右侧内容区域 -->
+      <div class="content-container">
+        <!-- 头部 -->
         <el-header class="header">
           <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
             <el-sub-menu index="1">
@@ -157,11 +163,15 @@ function logout() {
             </el-sub-menu>
           </el-menu>
         </el-header>
-          <el-main style="margin-top: 6vh;height: auto;">
+        
+        <!-- 主内容区域 -->
+        <div class="main-area">
+          <el-main>
             <router-view></router-view>
           </el-main>
-        </el-container>
-      </el-container>
+        </div>
+      </div>
+    </div>
 
     <!-- 查看个人信息 -->
     <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
@@ -191,7 +201,6 @@ function logout() {
       <ChangePassword ref="pwdRef" @confirm="showPasswordDialog = false" />
     </el-dialog>
   </div>
-  </div>
 </template>
 
 <style scoped>
@@ -204,49 +213,83 @@ function logout() {
   bottom: 0;
   background-image: url('@/assets/background.jpg'); /* 请将图片放在assets目录下并修改路径 */
   background-size: cover;
-  background-position: center center; /* 背景图居中 */
+  background-position: center center;
   background-repeat: no-repeat;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   overflow: hidden;
 }
 
-/* 统一的毛玻璃容器 */
-.glass-container {
-  position: relative;
-  width: 95%;
-  height: 95vh;
-  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
-  backdrop-filter: blur(5px); /* 统一的毛玻璃效果 */
+/* 背景毛玻璃层（作为内容容器） */
+.background-glass {
+  position: absolute;
+  top: 1vh;
+  left: 1vh;
+  right: 1vh;
+  bottom: 1vh;
+  background: rgba(255, 255, 255, 0.3); /* 更透明的背景 */
+  backdrop-filter: blur(10px); /* 毛玻璃效果 */
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
   border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+}
+
+/* 侧边栏容器 */
+.sidebar-container {
+  flex-shrink: 0;
+}
+
+.el-aside {
+  width: 15vw;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
+  backdrop-filter: blur(5px); /* 毛玻璃效果 */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
+  border-radius: 12px;
+  overflow-y: auto;
+  /* 应用自定义滚动条 */
+}
+
+/* 内容区域容器 */
+.content-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  margin-left: 5px;
+  gap: 5px;
+  height: 100%;
+  overflow: hidden;
 }
 
+/* 头部样式 */
 .header {
-  position: fixed;
-  right: 2.5vw;
-  top: 2.5vh;
-  z-index: 80;
+  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
+  backdrop-filter: blur(5px); /* 毛玻璃效果 */
   height: 8vh;
-  width: calc(80vw - 5vh);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
+  z-index: 80;
 }
 
-.message-font {
-  font-size: 16px;
-  font-weight: bold;
+/* 主内容区域容器 */
+.main-area {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
+  backdrop-filter: blur(5px); /* 毛玻璃效果 */
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.el-aside {
-  width: 15vw;
-  position: fixed;
-  z-index: 100;
-  height: 90vh;
-  top: 2.5vh;
-  left: 2.5vw;
+/* 主内容区域样式 */
+.el-main {
+  height: 100%;
+  padding: 20px;
+  background: transparent;
+  overflow-y: auto;
+  /* 应用自定义滚动条 */
 }
 
 .logo {
@@ -260,16 +303,7 @@ function logout() {
   border: none;
   padding: 0;
   float: right;
-  background: transparent !important;
-}
-
-/* 主内容区域样式 */
-.el-main {
-  margin-top: 16vh;
-  height: auto;
-  padding: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
+  background: transparent !important; /* 最高优先级的透明 */
 }
 
 /* 侧边栏菜单样式优化 */
@@ -277,20 +311,26 @@ function logout() {
   background: transparent !important;
 }
 
-/* 弹窗背景设置为半透明 */
-:deep(.el-dialog__wrapper .el-dialog) {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
+.message-font { /* 个人信息字体样式 */
+  font-size: 16px;
+  font-weight: bold;
 }
 
-/* 确保el-container适应毛玻璃容器 */
-:deep(.el-container) {
+
+
+/* 确保el-container适应容器 */
+:deep(.el-container) { /* vue3的深度选择器，用于覆盖element-plus的默认样式 */
   min-height: 100%;
   width: 100%;
+  background: transparent;
 }
 
-:deep(.el-container .el-container) {
-  background: transparent;
-  position: relative;
+
+
+/* 为侧边栏和主内容区域添加滚动条样式 */
+.el-aside,
+.el-main {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.2); /* Firefox滑块和轨道颜色 */
 }
 </style>