样式重构全局

src/utils/menuTreePermission.js

@@ -4,7 +4,7 @@ export const permissionMapping = {
     system:1,                      // 总系统
     workbench: 2,                  // 工作台
     goldManage:3,                  // 金币管理
-    monerManage:4,                 // 现金管理
+    moneyManage:4,                 // 现金管理
 
     // 模块，2级
     financialAudit:5,              // 财务审核
@@ -40,14 +40,14 @@ export const permissionMapping = {
     rechargeReject:31,             // 充值审核已驳回
     rechargeWait:32,               // 充值审核待审核
     rechargeWaitShow:33,           // 充值审核待审核查看
-    rechargeWaitThough:34,         // 充值审核通过
-    rechargeWaitReject:35,         // 充值审核驳回
+    rechargeWaitThough:34,         // 充值审核等待通过
+    rechargeWaitReject:35,         // 充值审核等待驳回
     refundThrough:36,              // 退款审核已通过
     refundReject:37,               // 退款审核已驳回
     refundWait:38,                 // 退款审核待审核
     refundWaitShow:39,             // 退款审核待审核查看
-    refundWaitThough:40,           // 退款审核通过
-    refundWaitReject:41,           // 退款审核驳回
+    refundWaitThough:40,           // 退款审核等待通过
+    refundWaitReject:41,           // 退款审核等待驳回
 
     beanWait:42,                   // 金豆审核待审核
     beanWaitThough:43,             // 金豆审核已通过

src/views/home.vue

@@ -93,12 +93,15 @@ function logout() {
 </script>
 
 <template>
-  <div>
-    <el-container>
-      <el-aside >
-        <div class="logo">
-          <img src="../assets/新logo.png" alt="logo" style="width: 9vh; height: 9vh" />
-        </div>
+  <div class="main-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" />
+          </div>
           <el-menu :router="true" :default-active="activeMenu" style="min-height: 80vh;border:none;">
             <!-- 递归渲染菜单层级 -->
             <template v-for="menu in menuList" :key="menu.id">
@@ -141,8 +144,12 @@ function logout() {
               </el-menu-item>
             </template>
           </el-menu>
-      </el-aside>
-      <el-container style="margin-left: 15vw;">
+        </el-aside>
+      </div>
+      
+      <!-- 右侧内容区域 -->
+      <div class="content-container">
+        <!-- 头部 -->
         <el-header class="header">
           <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
             <el-sub-menu index="1">
@@ -154,14 +161,17 @@ function logout() {
               <el-menu-item @click="openChangePassword">修改密码</el-menu-item>
               <el-menu-item @click="logout">退出登录</el-menu-item>
             </el-sub-menu>
-
           </el-menu>
         </el-header>
-        <el-main style="margin-top: 6vh;height: auto;">
-          <router-view></router-view>
-        </el-main>
-      </el-container>
-    </el-container>
+        
+        <!-- 主内容区域 -->
+        <div class="main-area">
+          <el-main>
+            <router-view></router-view>
+          </el-main>
+        </div>
+      </div>
+    </div>
 
     <!-- 查看个人信息 -->
     <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
@@ -194,24 +204,92 @@ function logout() {
 </template>
 
 <style scoped>
-.header {
+/* 主容器，设置背景图并居中 */
+.main-container {
   position: fixed;
+  top: 0;
+  left: 0;
   right: 0;
-  z-index: 80;
-  background: white;
-  height: 8vh;
+  bottom: 0;
+  background-image: url('@/assets/background.jpg'); /* 请将图片放在assets目录下并修改路径 */
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
 
-.message-font {
-  font-size: 16px;
-  font-weight: bold;
+/* 背景毛玻璃层（作为内容容器） */
+.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;
+}
+
+/* 侧边栏容器 */
+.sidebar-container {
+  flex-shrink: 0;
 }
 
 .el-aside {
   width: 15vw;
-  position: fixed;
-  z-index: 100;
-  height: 90vh;
+  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 {
+  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
+  backdrop-filter: blur(5px); /* 毛玻璃效果 */
+  height: 8vh;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
+  z-index: 80;
+}
+
+/* 主内容区域容器 */
+.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-main {
+  height: 100%;
+  padding: 20px;
+  background: transparent;
+  overflow-y: auto;
+  /* 应用自定义滚动条 */
 }
 
 .logo {
@@ -225,5 +303,34 @@ function logout() {
   border: none;
   padding: 0;
   float: right;
+  background: transparent !important; /* 最高优先级的透明 */
+}
+
+/* 侧边栏菜单样式优化 */
+.el-menu {
+  background: transparent !important;
+}
+
+.message-font { /* 个人信息字体样式 */
+  font-size: 16px;
+  font-weight: bold;
+}
+
+
+
+/* 确保el-container适应容器 */
+:deep(.el-container) { /* vue3的深度选择器，用于覆盖element-plus的默认样式 */
+  min-height: 100%;
+  width: 100%;
+  background: transparent;
+}
+
+
+
+/* 为侧边栏和主内容区域添加滚动条样式 */
+.el-aside,
+.el-main {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.2); /* Firefox滑块和轨道颜色 */
 }
 </style>

src/views/usergold/gold/clientCountBalance.vue

@@ -422,7 +422,7 @@ const format3 = (num) => {
         </div>
         <!-- 设置表格容器的高度和滚动样式 -->
         <div style="height: 60vh; overflow-y: auto">
-          <el-table :data="tableData" @cellClick="cellClick" style="width: 82vw;"height="60vh"
+          <el-table :data="tableData" @cellClick="cellClick" style="width: 82vw; height:60vh"
                     @sort-change="handleSortChange">
             <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">

src/views/workspace/index.vue

@@ -806,7 +806,7 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .top {
   height: 5.5vh;
   width: 80vw;