huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

重构工作台的样式

milestone-20250917-重构工作台
zhangrenyuan 3 weeks ago
parent
a698ca67af
commit
feea4e4f0c
3 changed files with 129 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/utils/menuTreePermission.js
  2. 2
      src/utils/menuUtils.js
  3. 179
      src/views/home.vue

10
src/utils/menuTreePermission.js
View File

@ -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, // 金豆审核已通过

2
src/utils/menuUtils.js
View File

@ -43,7 +43,7 @@ export const getRoutePath = (menu) => {
// 路由映射表：key为接口menuName，value为对应路由路径
const routeMap = {
'工作台展示': '/workbench',
'工作台查看': '/workbench',
'金币管理': '/goldManage',
'现金管理': '/moneyManage',

179
src/views/home.vue
View File

@ -93,12 +93,13 @@ 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="glass-container">
<el-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,65 +142,97 @@ function logout() {
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container style="margin-left: 15vw;">
<el-header class="header">
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
<el-sub-menu index="1">
<template #title>
<el-image :src="imgrule1" style="width: 50px; height: 50px" />
<span style="margin-left: 10px">{{ adminData.name }}</span>
</template>
<el-menu-item @click="message()">查看个人信息</el-menu-item>
<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-aside>
<el-container style="margin-left: 15vw;">
<el-header class="header">
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
<el-sub-menu index="1">
<template #title>
<el-image :src="imgrule1" style="width: 50px; height: 50px" />
<span style="margin-left: 10px">{{ adminData.name }}</span>
</template>
<el-menu-item @click="message()">查看个人信息</el-menu-item>
<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>
</el-container>
<!-- 查看个人信息 -->
<el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
<el-form :model="adminData">
<el-form-item label="用户姓名" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.adminName }}</span>
</el-form-item>
<el-form-item label="精网号" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.account }}</span>
</el-form-item>
<el-form-item label="地区" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.markets }}</span>
</el-form-item>
<el-form-item label="注册时间" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.createTime }}</span>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button text @click="closeMessage()">关闭</el-button>
</div>
</template>
</el-dialog>
<!-- 自定义密码修改弹窗组件 -->
<el-dialog v-model="showPasswordDialog" :center="true" width="470px" @closed="onPwdDialogClosed">
<ChangePassword ref="pwdRef" @confirm="showPasswordDialog = false" />
</el-dialog>
<!-- 查看个人信息 -->
<el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
<el-form :model="adminData">
<el-form-item label="用户姓名" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.adminName }}</span>
</el-form-item>
<el-form-item label="精网号" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.account }}</span>
</el-form-item>
<el-form-item label="地区" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.markets }}</span>
</el-form-item>
<el-form-item label="注册时间" label-width="100px" label-position="left">
<span class="message-font">{{ adminData.createTime }}</span>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button text @click="closeMessage()">关闭</el-button>
</div>
</template>
</el-dialog>
<!-- 自定义密码修改弹窗组件 -->
<el-dialog v-model="showPasswordDialog" :center="true" width="470px" @closed="onPwdDialogClosed">
<ChangePassword ref="pwdRef" @confirm="showPasswordDialog = false" />
</el-dialog>
</div>
</div>
</template>
<style scoped>
.header {
/* 主容器，设置背景图并居中 */
.main-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('@/assets/background.jpg'); /* 请将图片放在assets目录下并修改路径 */
background-size: cover;
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); /* 统一的毛玻璃效果 */
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
position: fixed;
right: 2.5vw;
top: 2.5vh;
z-index: 80;
background: white;
height: 8vh;
width: calc(80vw - 5vh);
}
.message-font {
@ -212,6 +245,8 @@ function logout() {
position: fixed;
z-index: 100;
height: 90vh;
top: 2.5vh;
left: 2.5vw;
}
.logo {
@ -225,5 +260,37 @@ 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;
}
/* 侧边栏菜单样式优化 */
.el-menu {
background: transparent !important;
}
/* 弹窗背景设置为半透明 */
:deep(.el-dialog__wrapper .el-dialog) {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
/* 确保el-container适应毛玻璃容器 */
:deep(.el-container) {
min-height: 100%;
width: 100%;
}
:deep(.el-container .el-container) {
background: transparent;
position: relative;
}
</style>
Write Preview
Loading…
Cancel
Save