Prechádzať zdrojové kódy

个人中心页面样式调整

zhanglb 3 rokov pred
rodič
commit
37b04f8363

BIN
front-vue/src/assets/images/personalCenter/icon_department.png


BIN
front-vue/src/assets/images/personalCenter/icon_usercalendar.png


BIN
front-vue/src/assets/images/personalCenter/icon_usercompany.png


BIN
front-vue/src/assets/images/personalCenter/icon_usermail.png


BIN
front-vue/src/assets/images/personalCenter/icon_username.png


BIN
front-vue/src/assets/images/personalCenter/icon_userrole.png


+ 6 - 0
front-vue/src/assets/styles/element-ui.scss

@@ -143,4 +143,10 @@
 }
 .el-button--medium.WIDTH64{
   min-width: 64px !important;
+}
+
+
+.el-menu-item .el-menu-item::hover{
+  color: #ffffff !important;
+  background-color: #4280F2 !important;
 }

+ 2 - 2
front-vue/src/assets/styles/huyi.scss

@@ -144,11 +144,11 @@
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
+	border-bottom: 1px solid #EBEBEB;
 	margin-bottom: -1px;
 	padding: 11px 0px;
 	font-size: 14px;
+	color: #999999;
 }
 
 .pull-right {

+ 21 - 19
front-vue/src/views/system/user/profile/index.vue

@@ -1,54 +1,50 @@
 <template>
-  <div class="app-container">
+  <div class="app-container zap-main">
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>个人信息</span>
-          </div>
+        <div class="box-card zap-bg" style="padding: 48px 20px 210px;">
           <div>
-            <div class="text-center">
+            <div class="text-center" style="padding-bottom: 66px;">
               <userAvatar :user="user" />
             </div>
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
-                <svg-icon icon-class="user" />登录名
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_username.png" alt="">登录名
                 <el-tooltip placement="top">
                   <div slot="content">{{ user.userName }}</div>
                   <div class="pulll-right">{{ user.userName }}</div>
                 </el-tooltip>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="email" />用户邮箱
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_usermail.png" alt="">用户邮箱
                 <el-tooltip placement="top">
                   <div slot="content">{{ user.email }}</div>
                   <div class="pulll-right">{{ user.email }}</div>
                 </el-tooltip>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="company" />所属企业
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_usercompany.png" alt="">所属企业
                 <el-tooltip placement="top">
                   <div slot="content">{{ company.scyName }}</div>
                   <div class="pulll-right">{{ company.scyName }}</div>
                 </el-tooltip>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="tree" />所属部门
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_department.png" alt="">所属部门
                 <el-tooltip placement="top" v-if="user.dept">
                   <div slot="content" >{{ user.dept.deptName }}</div>
                   <div class="pulll-right">{{ user.dept.deptName }}</div>
                 </el-tooltip>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="peoples" />所属角色
-                <!-- <div class="pull-right" :show-overflow-tooltip="true" width="50" ></div> -->
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_userrole.png" alt="">所属角色
                 <el-tooltip placement="top">
                   <div slot="content">{{ roleGroup }}</div>
                   <div class="pulll-right">{{ roleGroup }}</div>
                 </el-tooltip>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="date" />创建日期
+                <img class="zap-icon-personal-center" src="../../../../assets/images/personalCenter/icon_usercalendar.png" alt="">创建日期
                 <el-tooltip placement="top">
                   <div slot="content">{{ user.createTime }}</div>
                   <div class="pull-right">{{ user.createTime }}</div>
@@ -56,13 +52,10 @@
               </li>
             </ul>
           </div>
-        </el-card>
+        </div>
       </el-col>
       <el-col :span="18" :xs="24">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>基本资料</span>
-          </div>
+        <div class="zap-content">
           <el-tabs v-model="activeTab">
             <el-tab-pane label="基本资料" name="userinfo">
               <userInfo :user="user" />
@@ -74,7 +67,7 @@
               <bindOff/>
             </el-tab-pane> -->
           </el-tabs>
-        </el-card>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -120,3 +113,12 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+.zap-icon-personal-center{
+  width: 16px;
+  height: 16px;
+  margin-right: 16px;
+  vertical-align: middle;
+}
+</style>

+ 3 - 3
front-vue/src/views/system/user/profile/resetPwd.vue

@@ -1,12 +1,12 @@
 <template>
   <el-form ref="form" :model="user" :rules="rules" label-width="80px">
-    <el-form-item label="旧密码" prop="oldPassword">
+    <el-form-item label="旧密码" prop="oldPassword" style="width: 360px;">
       <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" autocomplete="new-password"/>
     </el-form-item>
-    <el-form-item label="新密码" prop="newPassword">
+    <el-form-item label="新密码" prop="newPassword" style="width: 360px;">
       <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" autocomplete="new-password"/>
     </el-form-item>
-    <el-form-item label="确认密码" prop="confirmPassword">
+    <el-form-item label="确认密码" prop="confirmPassword" style="width: 360px;">
       <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" autocomplete="new-password"/>
     </el-form-item>
     <el-form-item>

+ 1 - 2
front-vue/src/views/system/user/profile/userAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle" style="width: 80px;height: 80px;" /></div>
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
       <el-row>
         <el-col :xs="24" :md="12" :style="{height: '350px'}">
@@ -145,7 +145,6 @@ export default {
 .user-info-head {
   position: relative;
   display: inline-block;
-  height: 120px;
 }
 
 .user-info-head:hover:after {

+ 3 - 3
front-vue/src/views/system/user/profile/userInfo.vue

@@ -1,12 +1,12 @@
 <template>
   <el-form ref="form" :model="user" label-width="80px">
-    <el-form-item label="用户姓名" prop="nickName">
+    <el-form-item label="用户姓名" prop="nickName" style="width: 360px;">
       <el-input v-model="user.nickName" maxlength="20" :disabled="true"/>
     </el-form-item>
-    <el-form-item label="手机号码" prop="phonenumber">
+    <el-form-item label="手机号码" prop="phonenumber" style="width: 360px;">
       <el-input v-model="user.userName" :disabled="true" />
     </el-form-item>
-    <el-form-item label="邮箱" prop="email">
+    <el-form-item label="邮箱" prop="email" style="width: 360px;">
       <el-input v-model="user.email" maxlength="50" :disabled="true"/>
     </el-form-item>
     <!-- <el-form-item label="性别">