首页推荐新增轮播图

src/main.js

@@ -26,7 +26,9 @@ import {
   GridItem,
   Icon,
   List,
-  Cell
+  Cell,
+  Swipe,
+  SwipeItem
 } from "vant";
 
 window.$_http = axios;
@@ -49,6 +51,8 @@ Vue.component("VanGridItem", GridItem);
 Vue.component("VanIcon", Icon);
 Vue.component("VanList", List);
 Vue.component("VanCell", Cell);
+Vue.component("VanSwipe", Swipe);
+Vue.component("VanSwipeItem", SwipeItem);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

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

@@ -20,7 +20,23 @@
           finished-text="没有更多了"
           @load="onLoad"
         >
-          <!-- <van-cell></van-cell> -->
+          <template v-if="isFirstGroup && tabIndex === 0">
+            <van-swipe
+              class="my-swipe"
+              :autoplay="3000"
+              indicator-color="white"
+            >
+              <van-swipe-item v-for="(item, index) in swiperList" :key="index">
+                <van-image
+                  width="100%"
+                  height="100%"
+                  fit="cover"
+                  :src="item.url"
+                  :show-error="true"
+                />
+              </van-swipe-item>
+            </van-swipe>
+          </template>
           <van-cell
             v-for="(contentItem, contentIndex) in contentList"
             :key="contentIndex"
@@ -54,6 +70,14 @@ export default {
   name: "page-learn-child",
   components: {},
   props: {
+    // 是否第一个分组
+    isFirstGroup: {
+      type: Boolean,
+      default: false
+    },
+    // 轮播图的数据
+    swiperList: null,
+    // 分组的数据列表
     learnChildList: {
       type: Array,
       default: () => []
@@ -84,6 +108,7 @@ export default {
       }
     },
     active(val, oldVal) {
+      console.log(val, oldVal);
       if (val !== oldVal) {
         this.getContentList();
       }
@@ -141,9 +166,13 @@ export default {
       align-items: center;
       color: #0088e9;
       .contentItemDescriptionTime {
-        color: #999;
+        color: #696969;
       }
     }
   }
+  .my-swipe .van-swipe-item {
+    background-color: #7cc8ff;
+    height: 10rem;
+  }
 }
 </style>

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

@@ -311,7 +311,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       .learn-content-body-time {
-        color: #666;
+        color: #696969;
       }
       .learn-content-body-collect {
         .learn-content-body-collect-div {
@@ -395,7 +395,7 @@ export default {
           }
           .learn-content-comment-item-createdtime {
             margin-top: 0.25rem;
-            color: #666;
+            color: #696969;
           }
         }
       }

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

@@ -7,7 +7,12 @@
         :key="index"
         :title="item.name"
       >
-        <PageLearnChild :learnChildList="learnChildList"> </PageLearnChild>
+        <PageLearnChild
+          :isFirstGroup="index === 0"
+          :swiperList="swiperList"
+          :learnChildList="learnChildList"
+        >
+        </PageLearnChild>
       </van-tab>
     </van-tabs>
   </div>
@@ -26,15 +31,27 @@ export default {
       active: 0,
       learnRootList: [],
       choosedRootIndex: 0,
-      learnChildList: []
+      learnChildList: [],
+      swiperList: []
     };
   },
   computed: {},
-  created() {},
+  created() {
+    this.getSwiperListDataFun();
+  },
   mounted() {
     this.getLearnRootList();
   },
   methods: {
+    // 查询轮播图数据列表
+    getSwiperListDataFun() {
+      this.swiperList = [
+        { url: require("@/assets/image/swipe/01.jpg") },
+        { url: require("@/assets/image/swipe/02.jpg") },
+        { url: require("@/assets/image/swipe/03.jpg") },
+        { url: require("@/assets/image/swipe/02.jpg") }
+      ];
+    },
     //   查询学习根目录
     getLearnRootList() {
       this.$_http

src/views/home/person/collection.vue

@@ -119,7 +119,7 @@ export default {
     }
     .contentItemDescription {
       margin-top: 0.25rem;
-      color: #afafaf;
+      color: #696969;
       span {
         margin-left: 0.5rem;
       }

src/views/home/person/exam-history.vue

@@ -124,7 +124,7 @@ export default {
     }
     .contentItemDescription {
       margin-top: 0.25rem;
-      color: #afafaf;
+      color: #696969;
       span {
         margin-left: 0.5rem;
       }

src/views/home/person/rank.vue

@@ -212,7 +212,7 @@ export default {
       }
       .contentItemTopRowChildSteps {
         font-size: 0.6rem;
-        color: #999;
+        color: #696969;
         margin-top: -0.25rem;
       }
     }
@@ -260,7 +260,7 @@ export default {
     }
     .userPonits {
       font-size: 0.6rem;
-      color: #999;
+      color: #696969;
       span {
         margin-left: 0.25rem;
       }