src/views/UserPage/usermanage.vue

@@ -6,12 +6,12 @@
  * @Description:
 -->
 <template>
-  <div class="app-container">
+  <div class="app-container system-manage-landpage">
     <el-container>
       <el-aside>
         <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
       </el-aside>
-      <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <el-main>
         <el-form
           ref="dataForm"
           :model="dataForm"
@@ -24,7 +24,12 @@
             <span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
           </el-form-item>
           <el-form-item :label="$t('userManage.userName') + '：'" prop="name">
-            <el-input v-model="dataForm.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+            <el-input
+              v-model="dataForm.name"
+              :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
+              clearable
+              :style="{ width: '100%' }"
+            />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
@@ -47,7 +52,13 @@
             @clickBtn="handleClick"
           />
         </base-table>
-        <pagination v-show="total > 0" :total="total" :page.sync="dataForm.page" :limit.sync="dataForm.limit" @pagination="getList" />
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="dataForm.page"
+          :limit.sync="dataForm.limit"
+          @pagination="getList"
+        />
 
         <add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
         <edit-user-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @refreshDataList="getList" />
@@ -55,7 +66,6 @@
       </el-main>
     </el-container>
   </div>
-
 </template>
 
 <script>
@@ -80,30 +90,37 @@ const topBtnConfig = [
   }
 ]
 // edit here
-const tableBtn = [{
+const tableBtn = [
+  {
     type: 'edit',
     btnName: 'btn.edit'
-}, {
+  },
+  {
     type: 'EmPower',
     btnName: i18n.t('userManage.AssignRole')
-}, {
+  },
+  {
     type: 'delete',
     btnName: 'btn.delete'
-}]
+  }
+]
 // birthday
 // orgId
 // sex
 // code
 // remark
-const tableProps = [{
+const tableProps = [
+  {
     prop: 'name',
     label: i18n.t('userManage.userName'),
     align: 'center'
-}, {
+  },
+  {
     prop: 'email',
     label: i18n.t('userManage.email'),
     align: 'center'
-}, {
+  },
+  {
     prop: 'mobile',
     label: i18n.t('userManage.mobile'),
     align: 'center'
@@ -133,16 +150,19 @@ const tableProps = [{
     prop: 'code',
     label: i18n.t('userManage.code'),
     align: 'center'
-}, {
+  },
+  {
     prop: 'enabled',
     label: i18n.t('userManage.status'),
     align: 'center',
     filter: dataDict('enableState')
-}, {
+  },
+  {
     prop: 'remark',
     label: i18n.t('userManage.remark'),
     align: 'center'
-}]
+  }
+]
 export default {
   components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
   data() {
@@ -174,16 +194,20 @@ export default {
         current: 1,
         size: 20
       },
-      sexOptions: [{
-        'label': '全部',
-        'value': ''
-      }, {
-        'label': '男',
-        'value': 1
-      }, {
-        'label': '女',
-        'value': 2
-      }]
+      sexOptions: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '男',
+          value: 1
+        },
+        {
+          label: '女',
+          value: 2
+        }
+      ]
     }
   },
   created() {
@@ -274,11 +298,62 @@ export default {
 </script>
 <style scoped>
 .el-container >>> .el-aside {
-  border:2px solid #E4E4E4;
-  border-radius:10px;
-  background-color: white;
-  min-height:550px;
-  width:30%;
-  padding-top:20px
+  border-radius: 8px;
+  background-color: #fff;
+  width: 256px !important;
+  padding-top: 20px;
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.el-container >>> .el-main {
+  border-radius: 8px;
+  background-color: #fff;
+  border: unset;
+}
+.el-container >>> .el-tree-node__content {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+.el-container >>> .el-tree-node__content:hover {
+  background-color: #e3efff;
+}
+.el-container >>> .el-tree-node:focus > .el-tree-node__content {
+  background-color: #e3efff;
+}
+/* .el-container >>> .el-icon-caret-right {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  background-color: transparent;
+} */
+.el-container >>> .el-icon-caret-right::before {
+  /* content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  background-color: transparent; */
+}
+
+.system-manage-landpage {
+  background: unset;
+  padding: 0;
+  display: flex;
+}
+
+.el-container {
+  display: flex;
+  gap: 8px;
+}
+
+.el-container >>> .el-tree-node__label {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.88px;
+  color: #161616;
 }
 </style>