完成答题主页面的静态内容，及点击闯关答题进入二级页面

src/main.js

@@ -10,7 +10,9 @@ import * as filters from "./filters";
 // 设置字体大小
 import "@/utils/rem";
 import "@/common/permission";
-import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab, Grid, GridItem } from "vant";
+// 全局css
+import "@/styles/index.scss";
+import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab, Grid, GridItem, Icon } from "vant";
 
 window.$_http = axios;
 // event Bus 用于无关系组件间的通信。
@@ -28,6 +30,7 @@ Vue.component("VanTabs", Tabs);
 Vue.component("VanTab", Tab);
 Vue.component("VanGrid", Grid);
 Vue.component("VanGridItem", GridItem);
+Vue.component("VanIcon", Icon);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/router/index.js

@@ -1,16 +1,22 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "@/views/home";
+import answerRecruit from "@/views/home/answer/page-answer-recruit.vue";
 
 Vue.use(Router);
 
 let routes = [
   {
     alias: "/",
-    path: "/home", // 专家门诊
+    path: "/Home", // 专家门诊
     name: "home",
-    // meta: { keepAlive: true }
+    meta: { keepAlive: true },
     component: Home
+  },
+  {
+    path: "/Answer-Recruit", // 专家门诊
+    name: "answer-recruit",
+    component: answerRecruit
   }
 ];
 

src/styles/vant.scss

@@ -16,3 +16,17 @@
   width: 100%;
   height: 100%;
 }
+
+// 修改导航相关样式
+.van-nav-bar {
+  background-color: #FE6347;
+  .van-nav-bar__left {
+    .van-icon {
+      color: #fff;
+    }
+  }
+  .van-nav-bar__title {
+    // font-weight: bolder;
+    color: #fff;
+  }
+}

src/views/home/answer/page-answer-recruit.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <van-nav-bar title="答题" left-arrow @click-left="onClickLeft"
+      />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "page-answer-recruit",
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    onClickLeft() {
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/home/answer/page-answer.vue

@@ -1,14 +1,40 @@
 <template>
-  <div class="scroll">
-    <van-nav-bar
-      title="京铁学堂"
-      left-text=""
-      right-text=""
-      bind:click-left=""
-      bind:click-right=""
-    />
-    <div class="contentBody">
-      <span>page-answer</span>
+  <div class="page-answer-box">
+    <!-- 答题练习 -->
+    <div class="answer-practice">
+      <div class="answer-practice-title">答题练习</div>
+      <div class="answer-practice-describe">坚持练习掌握优质内容</div>
+      <div class="answer-practice-list">
+        <div
+          class="answer-practice-item"
+          v-for="(item, index) in answerPracticeList"
+          :key="index"
+          @click="handleClickAnswerPracticeFun(item)"
+        >
+          <div class="answer-practice-item-img">
+            <van-image width="100%" height="100%" :src="item.url" fit="cover" />
+          </div>
+          <div class="answer-practice-item-title">
+            <div>{{ item.title[0] }}</div>
+            <div>{{ item.title[1] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 竞赛答题 -->
+    <div class="answer-race">
+      <div class="answer-race-title">竞赛答题</div>
+      <div class="answer-race-list">
+        <div
+          class="answer-race-item"
+          v-for="(item, index) in answerRaceList"
+          :key="index"
+          @click="handleClickAnswerRaceFun(item)"
+        >
+          <div class="answer-race-item-title">{{ item.title }}</div>
+          <div class="answer-race-item-describe">{{ item.describe }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -18,12 +44,148 @@ export default {
   name: "page-answer",
   components: {},
   data() {
-    return {};
+    return {
+      answerPracticeList: [
+        {
+          id: 1,
+          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          title: ["不积跬步", "无以至千里"]
+        },
+        {
+          id: 2,
+          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          title: ["周而复始", "方得始终"]
+        },
+        {
+          id: 3,
+          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          title: ["闻道有先后", "术业有专攻"]
+        }
+      ], // 答题练习的列表数据
+      answerRaceList: [
+        {
+          id: 1,
+          title: "闯关答题",
+          describe: "5题一关，答对继续，答错出局"
+        },
+        {
+          id: 2,
+          title: "双人PK",
+          describe: "两两PK，舍我其谁"
+        }
+      ] // 竞赛答题的列表数据
+    };
   },
   computed: {},
-  methods: {}
+  methods: {
+    // 操作：点击了答题练习中的某个
+    handleClickAnswerPracticeFun(item) {
+      switch (item.id) {
+        case this.answerPracticeList[0].id:
+          console.log(this.answerPracticeList[0].title);
+          break;
+        case this.answerPracticeList[1].id:
+          console.log(this.answerPracticeList[1].title);
+          break;
+        case this.answerPracticeList[2].id:
+          console.log(this.answerPracticeList[2].title);
+          break;
+        default:
+          break;
+      }
+    },
+    // 操作：点击了竞赛答题中的某个
+    handleClickAnswerRaceFun(item) {
+      switch (item.id) {
+        case this.answerRaceList[0].id:
+          console.log(this.answerRaceList[0].title);
+          this.$router.push({ name: "answer-recruit", query: { } });
+          break;
+        case this.answerRaceList[1].id:
+          console.log(this.answerRaceList[1].title);
+          break;
+        default:
+          break;
+      }
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
+.page-answer-box {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  background-color: #f7f5f6;
+  font-size: 0.6rem;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  .answer-practice {
+    padding: 0.5rem 0.5rem;
+    border-bottom: 2px solid #e6e6e6;
+    .answer-practice-title {
+      padding-bottom: 0.5rem;
+      font-size: 0.7rem;
+      color: #000;
+      font-weight: bold;
+    }
+    .answer-practice-describe {
+      margin-bottom: 0.5rem;
+      font-size: 0.65rem;
+      color: #8d8d8d;
+    }
+    .answer-practice-list {
+      display: flex;
+      justify-content: space-between;
+      .answer-practice-item {
+        width: 31%;
+        padding: 0.5rem 0.5rem;
+        border: 1px solid #e4e8eb;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 4px;
+        .answer-practice-item-img {
+          width: 3.5rem;
+          height: 3.5rem;
+          overflow: hidden;
+        }
+        .answer-practice-item-title {
+          font-size: 0.6rem;
+          margin-top: 0.25rem;
+        }
+      }
+    }
+  }
+  .answer-race {
+    padding: 0.5rem 0.5rem;
+    .answer-race-title {
+      padding-bottom: 0.5rem;
+      font-size: 0.7rem;
+      color: #000;
+      font-weight: bold;
+    }
+    .answer-race-item {
+      padding: 0 0.5rem 0.5rem;
+      border-radius: 4px;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      margin-bottom: 0.7rem;
+      .answer-race-item-title {
+        height: 2rem;
+        border-bottom: 1px solid #e4e8eb;
+        line-height: 2rem;
+        text-align: center;
+        font-size: 0.65rem;
+        color: #000;
+      }
+      .answer-race-item-describe {
+        height: 2rem;
+        line-height: 2rem;
+      }
+    }
+  }
+}
 </style>

src/views/home/exam/page-exam.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="scroll">
-    <van-nav-bar
-      title="京铁学堂"
-      left-text=""
-      right-text=""
-      bind:click-left=""
-      bind:click-right=""
-    />
     <div class="contentBody">
       <span>page-exam</span>
     </div>

src/views/home/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="home">
+  <div class="home-box">
+    <van-nav-bar
+      title="京铁学堂"
+      left-text=""
+      right-text=""
+      bind:click-left=""
+      bind:click-right=""
+    />
     <transition name="tab" mode="out-in">
       <component :is="currentComponents" class="page" />
     </transition>
@@ -59,7 +66,10 @@ export default {
       ]
     };
   },
-  created() {},
+  created() {
+    this.activeTabName = 1;
+    this.currentComponents = this.tabbars[this.activeTabName].pageName;
+  },
   methods: {
     onChange(index) {
       this.currentComponents = this.tabbars[this.activeTabName].pageName;
@@ -73,7 +83,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.home {
-  height: 100vh;
+.home-box {
+  height: 100%; // 不要设置vh，手机浏览器计算问题
+  padding-bottom: 2rem; // 多2em，避免tab栏挡住内容
 }
 </style>

src/views/home/learn/page-learn.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="scroll">
-    <van-nav-bar
-      title="京铁学堂"
-      left-text=""
-      right-text=""
-      bind:click-left=""
-      bind:click-right=""
-    />
     <div>
       <van-tabs :active="active" bind:change="onChange">
         <van-tab

src/views/home/person/page-person.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="scroll">
-    <van-nav-bar
-      title="京铁学堂"
-      left-text=""
-      right-text=""
-      bind:click-left=""
-      bind:click-right=""
-    />
     <div class="contentBody">
       <div class="user-box">
         <!-- 头像 -->