style:修改用户弹窗样式

This commit is contained in:
shi
2025-09-05 17:28:00 +08:00
parent 78dd437746
commit db20b45f78
3 changed files with 60 additions and 36 deletions

View File

@ -154,11 +154,17 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog draggable ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="1300px" append-to-body @close="closeDialog">
<el-dialog draggable ref="formDialogRef" style="background: rgb(249,250,251);" v-model="dialog.visible" :title="dialog.title" width="1300px" append-to-body @close="closeDialog">
<div class="boxDetial">
<div class="tab_info">
<span @click="onTab(1)" :class="{ active: type == 1 }">基本资料</span>
<span @click="onTab(2)" :class="{ active: type == 2 }">角色信息</span>
<div class="tab_item" @click="onTab(1)" :class="{ active: type == 1 }">
<Avatar style="width: 1em; height: 1em; margin-right: 8px" :style="{color: type == 1 ? '#1890ff' : '#000'}" />
<span>基本资料</span>
</div>
<div class="tab_item" @click="onTab(2)" :class="{ active: type == 2 }">
<Key style="width: 1em; height: 1em; margin-right: 8px" :style="{color: type == 2 ? '#1890ff' : '#000'}" />
<span>角色信息</span>
</div>
</div>
<div class="tab_content" v-show="type == 1">
<editInfo ref="editInfoRef" @close="dialog.visible = false" @submit="getList" @setDeptId="setDeptId"></editInfo>
@ -232,6 +238,7 @@ import ShuttleFrame from '../../project/projectRelevancy/component/ShuttleFrame.
import { listProject } from '@/api/project/project';
import editInfo from './comm/editInfo.vue';
import roleInfo from './comm/roleInfo.vue';
import { color } from 'echarts';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
@ -690,7 +697,7 @@ const uploadCert = async () => {
certDialog.value = false;
proxy?.$modal.msgSuccess('上传证书目录成功');
};
const onTab = (val) => {
const onTab = (val: number) => {
type.value = val;
if (val == 2) {
let obj = editInfoRef.value?.getInfoForm();
@ -706,21 +713,32 @@ const onTab = (val) => {
.boxDetial {
display: flex;
justify-content: space-between;
align-items: center;
align-items: start;
height: 680px;
gap: 20px;
.tab_info {
height: 100%;
height: 40%;
width: 200px;
background: #f0f2f5;
padding: 10px;
background: #fff;
padding: 30px 10px;
text-align: center;
display: flex;
flex-direction: column;
border-radius: 0.5rem;
font-size: 18px;
> span {
.tab_item {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
padding: 5px 0;
cursor: pointer;
}
.tab_item:hover {
background-color: rgb(249, 250, 251);
}
.active {
color: #1890ff;
}
@ -729,7 +747,8 @@ const onTab = (val) => {
height: 100%;
width: calc(100% - 200px);
padding: 20px 10px;
background: #ccc;
background: #fff;
border-radius: 0.5rem;
}
}
</style>