修改学习页面

src/components/loading.vue

@@ -1,75 +0,0 @@
-<template>
-  <transition name="loading" mode="out-in">
-    <div v-show="visible" class="mask flex-column" :style="loadingStyle">
-      <van-image :src="imgLoading" class="loading" />
-      <p class="loading-text">拼命加载中</p>
-    </div>
-  </transition>
-</template>
-<script>
-import imgLoading from "@/assets/image/loading.png";
-export default {
-  props: {
-    // 是否全屏加载中
-    fullscreen: {
-      type: Boolean,
-      default: true
-    },
-    // 是否处于加载中
-    visible: Boolean
-  },
-  data() {
-    return {
-      imgLoading
-    };
-  },
-  computed: {
-    loadingStyle() {
-      return this.fullscreen
-        ? {
-          position: "fixed",
-          left: 0,
-          top: 0,
-          right: 0
-        }
-        : {};
-    }
-  }
-};
-</script>
-<style scoped>
-.loading-enter-active,
-.loading-leave-active {
-  transition: opacity 0.3s;
-}
-.loading-enter,
-.loading-leave-to {
-  opacity: 0;
-}
-.mask {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-.loading {
-  width: 1rem;
-  height: 1rem;
-  opacity: 1;
-  animation: loading 0.2s linear infinite;
-}
-@keyframes loading {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(45deg);
-  }
-}
-.loading-text {
-  font-size: 0.5rem;
-  color: #0581fd;
-}
-</style>

src/components/navigationBar.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="navigationBarAll">
-    <div class="navigationBarBox" :style="styles">
-      <div>
-        <div class="titleDiv" style="text-align: center;">{{title}}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "navigationBar",
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    styles: {
-      type: Object,
-      required: false
-    },
-    isHome: {
-      type: Boolean,
-      required: false
-    },
-    isHaveHome: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  data() {
-    return {
-    };
-  },
-  methods: {
-    navBackFun() {
-      this.$router.back();
-    },
-    navBackHomeFun() {
-      this.$router.push({
-        name: "home-index"
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.navigationBarAll {
-  min-height: calc(1.7rem + 2px);
-}
-.navigationBarBox {
-  width: 100%;
-  padding: 0.25rem 0.5rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 2;
-  background-color: #fff;
-  color: black;
-  min-height: calc(1.7rem + 2px);
-  .backHomeDiv {
-    position: relative;
-    z-index: 2;
-    width: 3.5rem;
-    padding: 0.2rem 0.5rem;
-    border: 1px solid #E1E4E9;
-    border-radius: 1rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .backHomeDivHome {
-    position: relative;
-    z-index: 2;
-    width: 1.3rem;
-    padding: 0.2rem 0.2rem;
-    border: 1px solid #E1E4E9;
-    border-radius: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .iconBox {
-    width: 0.8rem;
-    height: 0.8rem;
-    .icon {
-      width: 0.8rem;
-      height: 0.8rem;
-      display: block;
-    }
-  }
-  .lineDiv {
-    height: 0.8rem;
-    width: 1px;
-    border-right: 1px solid #E1E4E9;
-  }
-  .titleDiv {
-    width: 100%;
-    position: absolute;
-    font-size: 0.7rem;
-    line-height: 1.2rem;
-    left: 0;
-    top: 0.25rem;
-  }
-}
-</style>

src/main.js

@@ -10,7 +10,7 @@ import * as filters from "./filters";
 // 设置字体大小
 import "@/utils/rem";
 import "@/common/permission";
-import { Button, Image, Dialog } from "vant";
+import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab } from "vant";
 
 window.$_http = axios;
 // event Bus 用于无关系组件间的通信。
@@ -21,6 +21,11 @@ Vue.prototype.$_API = API;
 Vue.component("VanButton", Button);
 Vue.component("VanImage", Image);
 Vue.component("VanDialog", Dialog);
+Vue.component("VanNavBar", NavBar);
+Vue.component("VanTabbar", Tabbar);
+Vue.component("VanTabbarItem", TabbarItem);
+Vue.component("VanTabs", Tabs);
+Vue.component("VanTab", Tab);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/router/index.js

@@ -6,6 +6,7 @@ Vue.use(Router);
 
 let routes = [
   {
+    alias: "/",
     path: "/home", // 专家门诊
     name: "home",
     // meta: { keepAlive: true }

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

@@ -1,9 +1,11 @@
 <template>
   <div class="scroll">
-    <navigation-bar
-      :isHome="true"
+    <van-nav-bar
       title="京铁学堂"
-      style="text-align: center"
+      left-text=""
+      right-text=""
+      bind:click-left=""
+      bind:click-right=""
     />
     <div class="contentBody">
       <span>page-answer</span>
@@ -12,12 +14,9 @@
 </template>
 
 <script>
-import navigationBar from "@/components/navigationBar";
 export default {
   name: "page-answer",
-  components: {
-    navigationBar
-  },
+  components: {},
   data() {
     return {};
   },

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

@@ -1,9 +1,11 @@
 <template>
   <div class="scroll">
-    <navigation-bar
-      :isHome="true"
+    <van-nav-bar
       title="京铁学堂"
-      style="text-align: center"
+      left-text=""
+      right-text=""
+      bind:click-left=""
+      bind:click-right=""
     />
     <div class="contentBody">
       <span>page-exam</span>
@@ -12,12 +14,9 @@
 </template>
 
 <script>
-import navigationBar from "@/components/navigationBar";
 export default {
   name: "page-exam",
-  components: {
-    navigationBar
-  },
+  components: {},
   data() {
     return {};
   },

src/views/home/index.vue

@@ -1,46 +1,18 @@
 <template>
-  <div class="home flex-column">
+  <div class="home">
     <transition name="tab" mode="out-in">
       <component :is="current" class="page" />
     </transition>
-    <footer class="footer">
-      <div class="btnDiv" @click="handleGoPage('page-learn')">
-        <!-- <img class="btnImg" :src="current === 'page-home' ? homeSelected: homeNormal" /> -->
-        <button
-          class="btn"
-          :class="[current === 'page-learn' ? 'page-select' : '']"
-        >
-          学习
-        </button>
-      </div>
-      <div class="btnDiv" @click="handleGoPage('page-answer')">
-        <!-- <img class="btnImg" :src="current === 'page-home' ? homeSelected: homeNormal" /> -->
-        <button
-          class="btn"
-          :class="[current === 'page-answer' ? 'page-select' : '']"
-        >
-          答题
-        </button>
-      </div>
-      <div class="btnDiv" @click="handleGoPage('page-exam')">
-        <!-- <img class="btnImg" :src="current === 'page-home' ? homeSelected: homeNormal" /> -->
-        <button
-          class="btn"
-          :class="[current === 'page-exam' ? 'page-select' : '']"
-        >
-          考试
-        </button>
-      </div>
-      <div class="btnDiv" @click="handleGoPage('page-person')">
-        <!-- <img class="btnImg" :src="current === 'page-personal-center' ? personalSelected: personalNormal" /> -->
-        <button
-          class="btn"
-          :class="[current === 'page-personal' ? 'page-select' : '']"
-        >
-          我的
-        </button>
-      </div>
-    </footer>
+    <van-tabbar :active="active" @change="onChange">
+      <van-tabbar-item
+        v-for="(item, index) in tabbars"
+        :key="index"
+        :icon="item.icon"
+        @click="tab(index, item)"
+      >
+        <span>{{ item.title }}</span>
+      </van-tabbar-item>
+    </van-tabbar>
   </div>
 </template>
 
@@ -54,13 +26,38 @@ export default {
   components: { PageLearn, PageAnswer, PageExam, PagePerson },
   data() {
     return {
-      current: "page-learn"
+      active: 0,
+      current: "page-learn",
+      pageList: ["page-learn", "page-answer", "page-exam", "page-person"],
+      tabbars: [
+        { title: "学习", icon: "home-o", pageName: "page-learn" },
+        { title: "答题", icon: "search", pageName: "page-answer" },
+        { title: "考试", icon: "setting-o", pageName: "page-exam" },
+        { title: "我的", icon: "friends-o", pageName: "page-person" }
+      ]
     };
   },
+  created() {
+    this.tab(0, this.tabbars[0]);
+  },
   methods: {
-    handleGoPage(name) {
-      this.current = name;
-      this.$router.replace({ name: "home", query: { page: name } });
+    onChange(event) {
+      console.log("---" + event);
+      this.active = event;
+      let pageName = this.pageList[this.active];
+      if (this.current !== pageName) {
+        this.current = pageName;
+        this.$router.replace({ name: "home", query: { page: pageName } });
+      }
+    },
+    tab(index, tabbar) {
+      this.active = index;
+      console.log("---index" + index + "---" + JSON.stringify(tabbar));
+      let pageName = tabbar.pageName;
+      if (this.current !== pageName) {
+        this.current = pageName;
+        this.$router.replace({ name: "home", query: { page: pageName } });
+      }
     }
   }
 };
@@ -70,53 +67,4 @@ export default {
 .home {
   height: 100vh;
 }
-.tab-leave-active,
-.tab-enter-active {
-  transition: all 0.3s;
-}
-.tab-enter {
-  opacity: 0;
-  transform: translateX(-1.25rem);
-}
-.tab-leave-to {
-  opacity: 0;
-  transform: translateX(1.25rem);
-}
-.page {
-  width: 100%;
-  height: calc(100vh - 2.5rem);
-  flex: 1;
-}
-.footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 10;
-  height: 2.5rem;
-  display: flex;
-  justify-content: space-around;
-  border-top: 1px solid #f7f5f6;
-  background-color: #fff;
-}
-.btnDiv {
-  width: 25%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  .btnImg {
-    width: 1rem;
-    height: 1rem;
-  }
-  .btn {
-    border: none;
-    font-size: 0.7rem;
-    background-color: white;
-  }
-}
-.page-select {
-  color: #438bef;
-}
 </style>

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

@@ -1,25 +1,45 @@
 <template>
   <div class="scroll">
-    <navigation-bar
-      :isHome="true"
+    <van-nav-bar
       title="京铁学堂"
-      style="text-align: center"
+      left-text=""
+      right-text=""
+      bind:click-left=""
+      bind:click-right=""
     />
-    <div class="contentBody">
-        <span>page-learn</span>
+    <div>
+      <van-tabs :active="active" bind:change="onChange">
+        <van-tab
+          v-for="(item, index) in learnModuleList"
+          :key="index"
+          :title="item.title"
+        >
+          {{ item.content }}
+        </van-tab>
+      </van-tabs>
     </div>
   </div>
 </template>
 
 <script>
-import navigationBar from "@/components/navigationBar";
 export default {
   name: "page-learn",
-  components: {
-    navigationBar
-  },
+  components: {},
   data() {
-    return {};
+    return {
+      active: 1,
+      learnModuleList: [
+        { title: "推荐", code: "recommend", content: "内容1" },
+        { title: "实践", code: "practice", content: "内容2" },
+        { title: "百科", code: "encyclopedia", content: "内容3" },
+        { title: "推荐", code: "recommend", content: "内容1" },
+        { title: "实践", code: "practice", content: "内容2" },
+        { title: "百科", code: "encyclopedia", content: "内容3" },
+        { title: "推荐", code: "recommend", content: "内容1" },
+        { title: "实践", code: "practice", content: "内容2" },
+        { title: "百科", code: "encyclopedia", content: "内容3" }
+      ]
+    };
   },
   computed: {},
   created() {
@@ -36,15 +56,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/styles/mixin";
-.scroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  background-color: #f7f5f6;
-  font-size: 0.6rem;
-  width: 100%;
-  padding-bottom: 3rem;
-}
 .contentBody {
   background-color: #fff;
 }

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

@@ -1,9 +1,11 @@
 <template>
   <div class="scroll">
-    <navigation-bar
-      :isHome="true"
+    <van-nav-bar
       title="京铁学堂"
-      style="text-align: center"
+      left-text=""
+      right-text=""
+      bind:click-left=""
+      bind:click-right=""
     />
     <div class="contentBody">
       <span>page-person-center</span>
@@ -12,12 +14,9 @@
 </template>
 
 <script>
-import navigationBar from "@/components/navigationBar";
 export default {
   name: "page-personal-center",
-  components: {
-    navigationBar
-  },
+  components: {},
   data() {
     return {};
   },