修改选择角色页面样式

src/components/layout/header.vue

@@ -13,7 +13,7 @@
       <el-dropdown>
         <div class="user">
           <img :src="avatar" class="user-avatar" />
-          <span class="user-name">{{ user.nickname }}</span>
+          <span class="user-name" v-if="user.nickname">{{ user.nickname }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item icon="el-icon-user" @click.native="$router.push('/account')">个人中心</el-dropdown-item>

src/pages/role/index.vue

 <template>
   <div class="app-role">
-    <el-radio-group v-model="role" @change="chooseRole">
-      <el-radio label="1" border>我是学生</el-radio>
-      <el-radio label="2" border>我是老师</el-radio>
-    </el-radio-group>
+    <app-header />
+    <div class="app-role-main">
+      <div class="app-role-item">
+        <div class="app-role-item-pic">
+          <img src="../../assets/images/role_student.png" width="172" height="140" />
+        </div>
+        <h2>我是学生</h2>
+        <el-button type="primary" @click="chooseRole(1)">以学生身份进入</el-button>
+      </div>
+      <div class="app-role-item">
+        <div class="app-role-item-pic">
+          <img src="../../assets/images/role_teacher.png" width="201" height="110" />
+        </div>
+        <h2>我是老师</h2>
+        <el-button type="primary" @click="chooseRole(2)">以老师身份进入</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import * as api from '@/api/account'
+import AppHeader from '@/components/layout/header'
 
 export default {
+  components: { AppHeader },
   data() {
-    return {
-      role: ''
-    }
+    return {}
   },
   methods: {
-    chooseRole() {
-      api.chooseRole({ role: this.role }).then(() => {
+    chooseRole(role) {
+      api.chooseRole({ role }).then(() => {
         this.$router.replace('/')
       })
     }
@@ -26,12 +39,35 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss"  scoped>
 .app-role {
   height: 100vh;
   display: flex;
+  flex-direction: column;
+}
+.app-role-main {
+  flex: 1;
+  display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+}
+.app-role-item {
+  width: 280px;
+  height: 330px;
+  background: #ffffff;
+  box-shadow: 0px 4px 10px 0px rgba(129, 112, 206, 0.1);
+  border-radius: 4px;
+  text-align: center;
+  margin: 30px;
+  h2 {
+    padding: 20px 0;
+    font-size: 24px;
+  }
+}
+.app-role-item-pic {
+  height: 190px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 190px;
 }
 </style>