新手指引替换活动数据

src/views/home/index.vue

@@ -449,20 +449,14 @@
     <div class="section-block section-block-7" v-if="isLogin">
       <h1>新手指引</h1>
       <div style="color: #6A6E74;">即刻开始</div>
-      <div class="d-flex mt-3 mb-4"><div class="label-1">购买既出售数字货币</div><div class="label-1">探索币安交易</div><div class="label-1">挖矿产品教程</div></div>
+      <div class="d-flex mt-3 mb-4">
+          <div class="label-1" v-for="itemV in itemList" :class="itemV.id == cid ? 'de' : 'in'" @click="routerLink(itemV.id)">{{itemV.label}}</div>
+      </div>
       <div class="d-flex justify-content-between">
-        <div class="img-box">
+          <div class="img-box" v-for="item in articleList">
-          <img src="../../../static/images/illustration-8.png" alt="" >
+              <img :src="item.full_cover" alt="" >
-          <div>3分钟极速了解法币交易</div>
+              <div>{{ item.title }}</div>
-        </div>
+          </div>
-        <div class="img-box">
-          <img src="../../../static/images/illustration-9.png" alt="" >
-          <div>如何购买数字货币</div>
-        </div>
-        <div class="img-box">
-          <img src="../../../static/images/illustration-10.png" alt="" >
-          <div>如何出售数字货币</div>
-        </div>
       </div>
     </div>
     <div class="section-block section-block-8" v-if="!isLogin">
@@ -1201,6 +1195,8 @@ export default {
       noticeList: [],
       data: [99, 71, 78, 25, 36, 92],
       line: "",
+      itemList: [],
+      cid: '',
     };
   },
   methods: {
@@ -1403,6 +1399,30 @@ export default {
       let _time = new Date(str);
       return _time.getMonth() + 1 + "-" + _time.getDate();
     },
+    getArticleListItem() {
+      College.getArticleList(this.cid).then(data => {
+
+          this.articleList = data.splice(0, 3);
+      }).catch();
+    },
+    getCollegeLinks() {
+      College.getCategoryList().then(list => {
+          list.forEach(item => {
+              if (this.cid === '') this.cid = item.id;
+              this.itemList.push({
+                  url : `/college/list/${item.id}`,
+                  label : item.name,
+                  value : item.name,
+                  id : item.id
+              })
+          })
+          this.getArticleListItem();
+      }).catch(err => {});
+    },
+    routerLink(e){
+      this.cid = e;
+      this.getArticleListItem();
+    }
   },
   created() {
     this.indexList();
@@ -1413,7 +1433,7 @@ export default {
       this.getCollect();
     }
     this.indexMarketList();
-    this.getArticleList();
+    this.getCollegeLinks();
     /*
      * swiper 轮播图效果
      */
@@ -2527,6 +2547,12 @@ path {
       margin-bottom: 0.5rem;
     }
   }
+  .de{
+      background: #F7D558;
+  }
+  .in{
+      background: #F5F5F6;
+  }
 }
 .section-block-8{