个人信息UI

src/components/MainLayout/MainLayout.vue

@@ -2,7 +2,24 @@
   <div class="main-layout">
     <header class="header qm-primary-text">
       <!-- TODO: avatar -->
-      <span>{{user.name}}</span>
+      <Poptip trigger="hover" width="300">
+        <span class="name-arrow">{{user.name}} &nbsp;
+          <i class="ivu-icon ivu-icon-chevron-down" style="vertical-align: middle;"></i>
+        </span>
+        <div slot="content">
+          <div class="info qm-primary-text">
+            <div>学号</div>
+            <div>{{user.stuNum || 'mock'}}</div>
+            <div>身份证号</div>
+            <div>{{user.idNum || 'mock'}}</div>
+            <div>学习中心</div>
+            <div>{{user.center || 'mock'}}</div>
+            <div style="grid-column: span 2; place-self: center; width: 100%">
+              <i-button class="qm-primary-button" long @click="goChangePwd">修改密码</i-button>
+            </div>
+          </div>
+        </div>
+      </Poptip>
       <span style="margin: auto 20px">|</span>
       <a @click="logout" class="qm-primary-text" style="display: inline-block; margin-right: 20px; text-align: center;">退出登录</a>
     </header>
@@ -39,6 +56,9 @@ export default {
     };
   },
   methods: {
+    goChangePwd() {
+      this.$router.push("/password");
+    },
     logout() {
       this.$router.push("/login");
     }
@@ -47,6 +67,26 @@ export default {
 </script>
 
 <style scoped>
+.info {
+  display: grid;
+  align-items: center;
+  grid-template-rows: repeat(4, 40px);
+  grid-template-columns: 1fr 2fr;
+  width: 260px;
+}
+
+.info div {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.info > div:nth-of-type(odd) {
+  text-align: left;
+}
+
+.info > div:nth-of-type(even) {
+  text-align: right;
+}
+
 .main-layout {
   display: grid;
   grid-template-areas: "nav header" "nav content" "nav footer";
@@ -65,6 +105,10 @@ export default {
   line-height: 50px;
 }
 
+.name-arrow:hover .ivu-icon-chevron-down::before {
+  content: "\F126";
+}
+
 .nav {
   grid-area: nav;
   background-image: url(./nav-bg.jpg);