|
|
@@ -5,45 +5,35 @@
|
|
|
<div class="leftbox">
|
|
|
<div class="leftboxTop">个人资料</div>
|
|
|
<div class="leftboxCon">
|
|
|
- <p style="display:flex;align-items:center;justify-content:center;padding-top:18px">
|
|
|
- <img src="@/assets/imgs/add_photo_img.png" alt="" style="width:120px;height:120px;border-radius:50%">
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 18px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/imgs/add_photo_img.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 120px; height: 120px; border-radius: 50%"
|
|
|
+ />
|
|
|
</p>
|
|
|
- <div style="text-align:center;color:#337ab7;font-size:15px" ><span class="changeHead" style="cursor:pointer" @click="changeAvatar">修改头像</span> </div>
|
|
|
- <ul style="list-style:none;padding:0 25px 30px">
|
|
|
- <li style="display:flex;justify-content:space-between;height:40px;line-height:40px;border-top:1px solid #e7eaec;font-weight: 400;color:rgba(0,0,0,.85)">
|
|
|
- <div>
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
- <span>登录名称:</span>
|
|
|
- </div>
|
|
|
- <div>admin</div>
|
|
|
- </li>
|
|
|
- <li style="display:flex;justify-content:space-between;height:40px;line-height:40px;border-top:1px solid #e7eaec;font-weight: 400;color:rgba(0,0,0,.85)">
|
|
|
- <div>
|
|
|
- <i class="el-icon-phone"></i>
|
|
|
- <span>手机号码:</span>
|
|
|
- </div>
|
|
|
- <div>15638932672</div>
|
|
|
- </li>
|
|
|
- <li style="display:flex;justify-content:space-between;height:40px;line-height:40px;border-top:1px solid #e7eaec;font-weight: 400;color:rgba(0,0,0,.85)">
|
|
|
- <div>
|
|
|
- <i class="el-icon-s-shop"></i>
|
|
|
- <span>所属机构:</span>
|
|
|
- </div>
|
|
|
- <div>安徽省</div>
|
|
|
- </li>
|
|
|
- <li style="display:flex;justify-content:space-between;height:40px;line-height:40px;border-top:1px solid #e7eaec;font-weight: 400;color:rgba(0,0,0,.85)">
|
|
|
- <div>
|
|
|
- <i class="el-icon-message"></i>
|
|
|
- <span>邮箱地址:</span>
|
|
|
- </div>
|
|
|
- <div>ry@qq.com</div>
|
|
|
- </li>
|
|
|
- <li style="display:flex;justify-content:space-between;height:40px;line-height:40px;border-top:1px solid #e7eaec;font-weight: 400;color:rgba(0,0,0,.85)">
|
|
|
+ <div style="text-align: center; color: #337ab7; font-size: 15px">
|
|
|
+ <span
|
|
|
+ class="changeHead"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="changeAvatar"
|
|
|
+ >修改头像</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <ul style="list-style: none; padding: 0 25px 30px">
|
|
|
+ <li v-for="(item, index) in leftFromInfo">
|
|
|
<div>
|
|
|
- <i class="el-icon-date"></i>
|
|
|
- <span>创建时间:</span>
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{ item.infoKey }}</span>
|
|
|
</div>
|
|
|
- <div>2018-03-16</div>
|
|
|
+ <div>{{ item.infoVal }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -62,12 +52,17 @@
|
|
|
font-size: 14px;
|
|
|
border-left: 2px solid #6f63dd;
|
|
|
padding-left: 13px;
|
|
|
- margin-bottom:30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
"
|
|
|
>
|
|
|
基本资料
|
|
|
</div>
|
|
|
- <el-form ref="basicInfoForm" :model="basicInfoForm" label-width="80px" style="margin-left:60px">
|
|
|
+ <el-form
|
|
|
+ ref="basicInfoForm"
|
|
|
+ :model="basicInfoForm"
|
|
|
+ label-width="80px"
|
|
|
+ style="margin-left: 60px"
|
|
|
+ >
|
|
|
<el-form-item label="用户名称:">
|
|
|
<el-input
|
|
|
v-model="basicInfoForm.name"
|
|
|
@@ -87,21 +82,31 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="维护:">
|
|
|
- <el-radio-group v-model="basicInfoForm.safeguard ">
|
|
|
+ <el-radio-group v-model="basicInfoForm.safeguard">
|
|
|
<el-radio label="是"></el-radio>
|
|
|
<el-radio label="否"></el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="success" @click="saveInfo" icon="el-icon-check" size="small"
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ @click="saveInfo"
|
|
|
+ icon="el-icon-check"
|
|
|
+ size="small"
|
|
|
>保存</el-button
|
|
|
>
|
|
|
- <el-button type="danger" @click="closeInfo" icon="el-icon-close" size="small">关闭</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ @click="closeInfo"
|
|
|
+ icon="el-icon-close"
|
|
|
+ size="small"
|
|
|
+ >关闭</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<div class="changePass">
|
|
|
- <div
|
|
|
+ <div
|
|
|
class="header"
|
|
|
style="
|
|
|
color: #6f63dd;
|
|
|
@@ -109,12 +114,17 @@
|
|
|
font-size: 14px;
|
|
|
border-left: 2px solid #6f63dd;
|
|
|
padding-left: 13px;
|
|
|
- margin-top:15px;
|
|
|
+ margin-top: 15px;
|
|
|
"
|
|
|
>
|
|
|
修改密码
|
|
|
- </div>
|
|
|
- <el-form ref="changePassForm" :model="changePassForm" label-width="80px" style="margin-left:60px">
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="changePassForm"
|
|
|
+ :model="changePassForm"
|
|
|
+ label-width="80px"
|
|
|
+ style="margin-left: 60px"
|
|
|
+ >
|
|
|
<el-form-item label="旧密码:">
|
|
|
<el-input
|
|
|
v-model="changePassForm.oldPass"
|
|
|
@@ -126,24 +136,34 @@
|
|
|
<el-input
|
|
|
v-model="changePassForm.newPass"
|
|
|
size="small"
|
|
|
- placeholder="请输入新密码"
|
|
|
+ placeholder="请输入新密码"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="确认密码:">
|
|
|
+ <el-form-item label="确认密码:">
|
|
|
<el-input
|
|
|
v-model="changePassForm.ackNewPass"
|
|
|
size="small"
|
|
|
- placeholder="请确认密码"
|
|
|
+ placeholder="请确认密码"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="success" @click="saveChangePass" icon="el-icon-check" size="small"
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ @click="saveChangePass"
|
|
|
+ icon="el-icon-check"
|
|
|
+ size="small"
|
|
|
>保存</el-button
|
|
|
>
|
|
|
- <el-button type="danger" @click="closeChangePass" icon="el-icon-close" size="small" >关闭</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ @click="closeChangePass"
|
|
|
+ icon="el-icon-close"
|
|
|
+ size="small"
|
|
|
+ >关闭</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -161,6 +181,33 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ leftFromInfo: [
|
|
|
+ {
|
|
|
+ icon: "el-icon-user-solid",
|
|
|
+ infoKey: "登录名称:",
|
|
|
+ infoVal: "admin",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "el-icon-phone",
|
|
|
+ infoKey: "手机号码:",
|
|
|
+ infoVal: "15638932672",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "el-icon-s-shop",
|
|
|
+ infoKey: "所属机构:",
|
|
|
+ infoVal: "安徽省",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "el-icon-message",
|
|
|
+ infoKey: "邮箱地址:",
|
|
|
+ infoVal: "ry@qq.com",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "el-icon-date",
|
|
|
+ infoKey: "创建时间:",
|
|
|
+ infoVal: "2018-03-16",
|
|
|
+ },
|
|
|
+ ],
|
|
|
basicInfoForm: {
|
|
|
name: "",
|
|
|
email: "",
|
|
|
@@ -203,9 +250,6 @@ export default {
|
|
|
border: 1px solid #dddddd;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
-.personalCenterBox .left .leftbox {
|
|
|
-}
|
|
|
-
|
|
|
.personalCenterBox .left .leftbox .leftboxTop {
|
|
|
background-color: #ebeffa;
|
|
|
border-top-left-radius: 3px;
|
|
|
@@ -216,7 +260,6 @@ export default {
|
|
|
font-size: 14px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
-
|
|
|
.personalCenterBox .left .leftbox .leftboxCon {
|
|
|
background: #fff;
|
|
|
}
|
|
|
@@ -225,9 +268,6 @@ export default {
|
|
|
margin-left: 18px;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
-
|
|
|
-.personalCenterBox .right .rightbox {
|
|
|
-}
|
|
|
.personalCenterBox .right .rightbox .rightboxTop {
|
|
|
background-color: #aaaaaa;
|
|
|
border-top-left-radius: 3px;
|
|
|
@@ -245,4 +285,13 @@ export default {
|
|
|
.changeHead:hover {
|
|
|
color: rgba(0, 0, 0, 0.5) !important;
|
|
|
}
|
|
|
+.leftboxCon li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-top: 1px solid #e7eaec;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+}
|
|
|
</style>
|
