|
@@ -3,17 +3,27 @@
|
|
<header class="header qm-primary-text">
|
|
<header class="header qm-primary-text">
|
|
<Poptip trigger="hover" width="300">
|
|
<Poptip trigger="hover" width="300">
|
|
<span class="name-arrow">{{user.displayName}}
|
|
<span class="name-arrow">{{user.displayName}}
|
|
- <i class="ivu-icon ivu-icon-chevron-down" style="vertical-align: middle;"></i>
|
|
|
|
|
|
+ <i class="ivu-icon ivu-icon-md-arrow-dropdown" style="vertical-align: middle;"></i>
|
|
</span>
|
|
</span>
|
|
<div slot="content">
|
|
<div slot="content">
|
|
<div class="info qm-primary-text">
|
|
<div class="info qm-primary-text">
|
|
- <div>学号</div>
|
|
|
|
- <div>{{user.studentCode}}</div>
|
|
|
|
- <div>身份证号</div>
|
|
|
|
- <div>{{user.identityNumber}}</div>
|
|
|
|
- <div>学习中心</div>
|
|
|
|
- <div>{{user.orgName}}</div>
|
|
|
|
- <div style="grid-column: span 2; place-self: center; width: 100%">
|
|
|
|
|
|
+ <div class="hr info-row">
|
|
|
|
+ <div>底照</div>
|
|
|
|
+ <div><img class="user-avatar" :src="user.photoPath" alt="无底照" /></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hr info-row">
|
|
|
|
+ <div>学号</div>
|
|
|
|
+ <div>{{user.studentCode}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hr info-row">
|
|
|
|
+ <div>身份证号</div>
|
|
|
|
+ <div>{{user.identityNumber}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hr info-row">
|
|
|
|
+ <div>学习中心</div>
|
|
|
|
+ <div>{{user.orgName}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="grid-column: span 2; place-self: center; width: 100%; padding-top: 10px">
|
|
<i-button class="qm-primary-button" long @click="goChangePwd">修改密码</i-button>
|
|
<i-button class="qm-primary-button" long @click="goChangePwd">修改密码</i-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -86,28 +96,39 @@ export default {
|
|
line-height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.user-avatar {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 80px;
|
|
|
|
+ object-fit: contain;
|
|
|
|
+}
|
|
|
|
+
|
|
.info {
|
|
.info {
|
|
- display: grid;
|
|
|
|
- align-items: center;
|
|
|
|
- grid-template-rows: repeat(4, 40px);
|
|
|
|
- grid-template-columns: 1fr 2fr;
|
|
|
|
width: 260px;
|
|
width: 260px;
|
|
}
|
|
}
|
|
|
|
|
|
-.info div {
|
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
|
|
|
+.info > div {
|
|
|
|
+ min-height: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
-.info > div:nth-of-type(odd) {
|
|
|
|
- text-align: left;
|
|
|
|
|
|
+.hr {
|
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
|
+}
|
|
|
|
+.info-row {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: 1fr 2fr;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+.info-row > div:nth-of-type(odd) {
|
|
|
|
+ justify-self: left;
|
|
}
|
|
}
|
|
|
|
|
|
-.info > div:nth-of-type(even) {
|
|
|
|
- text-align: right;
|
|
|
|
|
|
+.info-row > div:nth-of-type(even) {
|
|
|
|
+ justify-self: right;
|
|
}
|
|
}
|
|
|
|
|
|
-.name-arrow:hover .ivu-icon-chevron-down::before {
|
|
|
|
- content: "\F126";
|
|
|
|
|
|
+.name-arrow:hover .ivu-icon-md-arrow-dropdown::before {
|
|
|
|
+ content: "\F343";
|
|
}
|
|
}
|
|
|
|
|
|
.nav {
|
|
.nav {
|