错误页面完成

components/pc/emptyCard.vue

+<template>
+  <div class="empty-card__warp" :style="{height: lineHeight, lineHeight: lineHeight}">
+    <div class="empty-card">
+      <img src="../../assets/svg/null.svg" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "emptyCard",
+  props: {
+    lineHeight: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-card__warp{
+  background-color: #fff;
+  .empty-card{
+    text-align: center;
+    img{
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+</style>

components/pc/errorCard.vue

 <template>
-  
+  <div class="error-card-notfound">
+    <div class="not-found">
+      <img src="../../assets/svg/four.jpg" alt="">
+      <img src="../../assets/svg/zero.jpg" alt="">
+      <img class="rotating" src="../../assets/svg/four.jpg" alt="">
+      <p class="not-found-content">加载失败，请重新尝试</p>
+      <button class="reload" @click="reload">刷新页面</button>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "errorCard"
+  name: "errorCard",
+  methods:{
+    reload(){
+      location.reload()
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.error-card-notfound{
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  margin: 0 auto;
+  .not-found{
+    text-align: center;
+    img{
+      display: inline-block;
+    }
+    .rotating{
+      transform: rotate(25deg);
+      margin-top: 25*$length;
+    }
+    .not-found-content{
+      padding-top: 20*$length;
+      padding-bottom: 47*$length;
+      @include fontStyle(16,22,500,#333,center);
+    }
+    .reload{
+      display: block;
+      margin: 0 auto;
+      width: 148*$length;
+      height: 48*$length;
+      line-height: 48*$length;
+      font-size: 14*$length;
+      color: #fff;
+      background-color: #75D098;
+      @include border-radius(4*$length);
+      cursor: pointer;
+      border: none;
+      @extend %animate-transition;
+      &:hover{
+        background-color: #7f828b;
+      }
+    }
+  }
+}
 </style>

layouts/blank.vue

+<template>
+  <nuxt/>
+</template>
+
+<script>
+export default {
+  name: "blank.vue"
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

layouts/error.vue

+<template>
+  <div class="error-card__wrap">
+    <div class="error-card" v-if="error.statusCode !== 404">
+      <img src="../assets/svg/500.svg" alt="">
+      <p class="error-card-content">服务器连接异常，请稍后重试</p>
+      <button class="error-card-close" @click="close">关闭页面</button>
+    </div>
+      <error-card v-if="error.statusCode === 404"></error-card>
+  </div>
+</template>
+
+<script>
+import ErrorCard from '../components/pc/errorCard';
+export default {
+  props: ['error'],
+  layout: 'blank',
+  components: {
+    ErrorCard
+  },
+  methods:{
+    close(){
+      window.opener = null;
+      window.open("http://www.baidu.com", "_self");
+      window.close();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.error-card__wrap{
+  position: fixed;
+  top: 50%;
+  transform: translateY(-55%);
+  width: 100%;
+  text-align: center;
+  .error-card{
+    margin: 0 auto;
+    img{
+      display: inline-block;
+    }
+    .error-card-content{
+      padding-top: 37*$length;
+      padding-bottom: 47*$length;
+      @include fontStyle(16,22,500,#333,center);
+    }
+    .error-card-close{
+      display: inline-block;
+      width: 148*$length;
+      height: 48*$length;
+      line-height: 48*$length;
+      font-size: 14*$length;
+      color: #fff;
+      background-color: #75D098;
+      @include border-radius(4*$length);
+      cursor: pointer;
+      border: none;
+      @extend %animate-transition;
+      &:hover{
+        background-color: #7f828b;
+      }
+    }
+  }
+}
+</style>

pages/index.vue

@@ -28,6 +28,8 @@
       <nav-wrap></nav-wrap>
       <alerts-card></alerts-card>
       <topic-card></topic-card>
+      <error-card></error-card>
+      <empty-card lineHeight="690px"></empty-card>
       <h2 class="subtitle" @click="showAlert">
         beyond-clouds project
       </h2>
@@ -51,6 +53,8 @@ import CardContainer from '../components/pc/cardContainer';
 import NavWrap from '../components/pc/nav/navWrap';
 import AlertsCard from '../components/pc/altersMessage/alertsCard';
 import TopicCard from '../components/pc/topicCard';
+import ErrorCard from '../components/pc/errorCard';
+import EmptyCard from "../components/pc/emptyCard";
 
 export default {
 
@@ -61,7 +65,7 @@ export default {
   },
   components:{
     Banner,ProjectCard,Pagination,Avatar,CommentCard,FanCard,AnswerCard,MyAnswer,TopicListCard,
-    CardContainer,NavWrap,AlertsCard,TopicCard
+    CardContainer,NavWrap,AlertsCard,TopicCard,ErrorCard,EmptyCard
 
   },