solidate body width

assets/css/home.scss

@@ -37,5 +37,7 @@ a{
   flex-wrap: nowrap;
   align-items: flex-end;
   justify-content: space-between;
-  padding: 30px 50px;
+  padding: 30px 0;
+  width: 1200px;
+  margin: 0 auto;
 }

assets/css/main.scss

@@ -29,17 +29,23 @@ body{
 
 .nav{
   width: 100%;
-  display: flex;
   position: sticky;
-  padding: 0 50px;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
   height: 60px;
   background-color: white;
   border: 1px solid #ebeef5;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   top: 0;
+  z-index: 100;
+
+  &__body{
+    display: flex;
+    margin: 0 auto;
+    width: 1200px;
+    height: 60px;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 
   &__logo{
     height: 36px;
@@ -91,18 +97,19 @@ body{
   width: 100%;
   background-color: white;
   color: $common-color;
-  padding: 30px 50px 0 50px;
+  padding: 30px 0 0 0;
   border: 1px solid #ebeef5;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   margin-top: 50px;
 
   &__main{
-    width: 100%;
+    width: 1200px;
     height: 180px;
     border-bottom: 0.5px white solid;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin: auto;
   }
 
   &__logo{

assets/css/person.scss

@@ -0,0 +1,15 @@
+.person-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin: 50px 50px;
+}
+
+.side-bar{
+  width: 200px;
+}
+
+.main-card{
+  width: 800px;
+  min-height:500px;
+}

components/Navi.vue

@@ -1,18 +1,20 @@
 <template>
   <nav class="nav">
-    <router-link to="/"><img src="/image/seec-logo--full.png" class="nav__logo" /></router-link>
-    <ul class="nav__list nav__list-left">
-      <li class="nav__item nav__item-left"><a href="http://helper.seecoder.cn" target="_self">HELPER</a></li>
-      <li class="nav__item nav__item-left"><a href="http://mooc.seecoder.cn" target="_self">MOOC</a></li>
-      <li class="nav__item nav__item-left"><a href="http://seec.seecoder.cn" target="_self">SEEC</a></li>
-    </ul>
-    <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">
-      <li class="nav__item"><router-link to="/login">登录</router-link></li>
-      <li class="nav__item"><router-link to="/register">注册</router-link></li>
-    </ul>
+    <div class="nav__body">
+      <router-link to="/"><img src="/image/seec-logo--full.png" class="nav__logo" /></router-link>
+      <ul class="nav__list nav__list-left">
+        <li class="nav__item nav__item-left"><a href="http://helper.seecoder.cn" target="_self">HELPER</a></li>
+        <li class="nav__item nav__item-left"><a href="http://mooc.seecoder.cn" target="_self">MOOC</a></li>
+        <li class="nav__item nav__item-left"><a href="http://seec.seecoder.cn" target="_self">SEEC</a></li>
+      </ul>
+      <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">
+        <li class="nav__item"><router-link to="/login">登录</router-link></li>
+        <li class="nav__item"><router-link to="/register">注册</router-link></li>
+      </ul>
+    </div>
   </nav>
 </template>
 

layouts/error.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="container">
+    <h1 v-if="error.statusCode === 404">页面不存在</h1>
+    <h1 v-else>应用发生错误异常</h1>
+    <nuxt-link to="/">首 页</nuxt-link>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['error'],
+    layout: 'blank' // 你可以为错误页面指定自定义的布局
+  }
+</script>

layouts/person.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <navi></navi>
+    <div class="person-container">
+      <el-menu
+        default-active="1"
+        class="el-menu-vertical-demo side-bar">
+        <el-menu-item index="1">
+          <i class="el-icon-menu"></i>
+          <span slot="title">导航二</span>
+        </el-menu-item>
+        <el-menu-item index="2" disabled>
+          <i class="el-icon-document"></i>
+          <span slot="title">导航三</span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <i class="el-icon-setting"></i>
+          <span slot="title">导航四</span>
+        </el-menu-item>
+      </el-menu>
+      <el-card class="main-card">
+        <nuxt />
+      </el-card>
+    </div>
+    <foot></foot>
+  </div>
+</template>
+
+<script>
+  import Navi from "~/components/Navi";
+  import Foot from "~/components/Foot";
+
+  export default{
+    components: {Navi, Foot}
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '~/assets/css/person.scss';
+</style>

pages/personal-info.vue

@@ -0,0 +1,14 @@
+<template>
+
+</template>
+
+<script>
+  export default {
+    name: "personal-info",
+    layout: 'person'
+  };
+</script>
+
+<style scoped>
+
+</style>