style:修改用户弹窗样式

src/views/system/user/comm/editInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 editInfo">
-    <el-form label-position="top" ref="userFormRef" :model="form" :rules="rules" label-width="80px">
+    <el-form label-position="top" ref="userFormRef" :model="form" :rules="rules" label-width="80px" size="large">
       <el-row>
         <el-col :span="10">
           <el-form-item label="用户昵称" prop="nickName">
@@ -70,15 +70,15 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="备注">
-            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" placeholder="请输入内容"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
-    <!-- <div class="box_submit">
+    <div class="box_submit">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button size="large" @click="cancel()">取 消</el-button>
-      <el-button @click="cancel()">取 消</el-button>
+      <el-button size="large" type="primary" @click="submitForm">确 定</el-button>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -247,12 +247,12 @@ defineExpose({ open, getInfoForm });
 </script>
 <style lang="scss" scoped>
 .editInfo {
-  position: relative;
+  display: flex;
-  height: 100%;
+  flex-direction: column;
   .box_submit {
-    position: absolute;
+    align-self: flex-end;
-    right: 10px;
+    display: flex;
-    bottom: 10px;
+    gap: 10px;
   }
 }
 </style>

src/views/system/user/comm/roleInfo.vue

@@ -11,7 +11,7 @@
         </el-table>
       </div>
     </div>
-    <div class="title_detail" style="margin-top: 20px">
+    <div class="title_detail" style="margin-top: 10px">
       <span>选择或修改当前角色信息</span>
       <div style="margin-top: 10px" class="box_detail">
         <!-- 项目列表选择区 -->
@@ -34,7 +34,7 @@
         </div>
         <!-- 角色分配区 -->
         <div class="post_list">
-          <span>关联项目角色分配</span>
+          <div class="list_title">关联项目角色分配</div>
           <div v-if="selectedProjects.length === 0" class="no-selection">请从左侧选择项目进行角色分配</div>
           <div v-for="(project, index) in selectedProjects" :key="project.id" class="project-role-container">
             <div class="project-header">
@@ -64,8 +64,8 @@
       </div>
     </div>
     <div class="box_submit">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button size="large" @click="cancel()">取 消</el-button>
-      <el-button @click="cancel()">取 消</el-button>
+      <el-button size="large" type="primary" @click="submitForm">保存角色信息</el-button>
     </div>
   </div>
 </template>
@@ -328,10 +328,12 @@ defineExpose({ open });
 
 <style lang="scss">
 .roleInfo {
-  position: relative;
   height: 100%;
   padding-bottom: 60px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 
   .title_detail {
     > span {
@@ -359,7 +361,7 @@ defineExpose({ open });
 
       .project_list {
         width: 320px;
-        background-color: #fff;
+        border: 1px solid #eee;
 
         .project-items {
           margin-top: 10px;
@@ -374,8 +376,7 @@ defineExpose({ open });
           border: 1px solid #eee;
 
           &:hover {
-            background-color: #f5f7fa;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            border-color: #e4e7ed;
           }
 
           .project-item-content {
@@ -403,7 +404,11 @@ defineExpose({ open });
 
       .post_list {
         flex: 1;
-        background-color: #fff;
+        border: 1px solid #eee;
+
+        .list_title {
+          margin-bottom: 10px;
+        }
 
         .no-selection {
           height: 100%;
@@ -417,9 +422,9 @@ defineExpose({ open });
         .project-role-container {
           padding: 15px;
           margin-bottom: 15px;
-          background-color: #f9f9f9;
+          // background-color: #f9f9f9;
           border-radius: 4px;
-          border: 1px solid #f0f0f0;
+          border: 1px solid rgb(229 231 235);
 
           .project-header {
             display: flex;
@@ -445,7 +450,9 @@ defineExpose({ open });
 
           .role-assignment {
             .role-group {
-              margin-bottom: 15px;
+              display: flex;
+              flex-direction: column;
+              margin-bottom: 10px;
 
               .role-label {
                 display: inline-block;
@@ -471,9 +478,7 @@ defineExpose({ open });
   }
 
   .box_submit {
-    position: absolute;
+    align-self: flex-end;
-    right: 20px;
-    bottom: 0px;
     display: flex;
     gap: 10px;
   }

src/views/system/user/index.vue

@@ -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>
+          <div class="tab_item" @click="onTab(1)" :class="{ active: type == 1 }">
-          <span @click="onTab(2)" :class="{ active: type == 2 }">角色信息</span>
+            <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;
+    background: #fff;
-    padding: 10px;
+    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>