add person-center and modify navi

assets/css/main.scss

@@ -49,6 +49,7 @@ body{
 
   &__logo{
     height: 36px;
+    margin-right: 20px;
   }
 
   &__list{
@@ -56,24 +57,32 @@ body{
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    justify-content: space-between;
     list-style:none;
+    padding: 0;
 
     &-left{
       width: 360px;
+      justify-content: flex-start;
     }
 
     &-right{
-      width: 160px;
-      justify-content: space-between;
+      width: 300px;
+      justify-content: flex-end;
+
+      & .nav__item{
+        text-align: right;
+      }
     }
   }
 
   &__search{
-    width: 200px;
+    width: 240px;
   }
 
   &__item{
+    width: 100px;
+    text-align: center;
+
     & a{
       text-decoration: none;
       color: $common-color;
@@ -91,6 +100,14 @@ body{
       }
     }
   }
+
+  &__photo{
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    border: 1px solid #ebeef5;
+
+  }
 }
 
 .foot{

assets/css/person.scss

@@ -2,14 +2,22 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin: 50px 50px;
+  margin: 50px auto;
+  width: 1100px;
 }
 
+//.person-body{
+//  display: flex;
+//  justify-content: space-between;
+//  align-items: flex-start;
+//  margin: 50px 0;
+//}
+
 .side-bar{
-  width: 200px;
+  width: 20%;
 }
 
 .main-card{
-  width: 800px;
-  min-height:500px;
+  width: 70%;
+  min-height: 600px;
 }

components/Navi.vue

@@ -10,7 +10,11 @@
       <el-input placeholder="搜索课程" class="nav__search" disabled>
         <el-button slot="append" icon="el-icon-search" disabled></el-button>
       </el-input>
-      <ul class="nav__list nav__list-right">
+      <ul class="nav__list nav__list-right" v-if="isLogin">
+        <li class="nav__item"><router-link to="/person/info">个人中心</router-link></li>
+        <li class="nav__item"><img class="nav__photo" src="/image/default-photo.jpg"/></li>
+      </ul>
+      <ul class="nav__list nav__list-right" v-else>
         <li class="nav__item"><router-link to="/login">登录</router-link></li>
         <li class="nav__item"><router-link to="/register">注册</router-link></li>
       </ul>
@@ -19,8 +23,14 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex'
   export default {
-    name: "Navi"
+    name: "Navi",
+    data(){
+      return{
+        isLogin: !!this.$store.state.token
+      }
+    }
   };
 </script>