update

packages/pc/src/views/Home.vue

@@ -112,17 +112,17 @@
       </div>
 
       <div class="special_topic">
-        <img src="../assets/img/icon_q&a.png" alt="" @click="$router.push('/topic')"/>
-        <img src="../assets/img/icon_special_topic.png" alt=""/>
+        <img src="../assets/img/icon_q&a.png" alt="" />
+        <img src="../assets/img/icon_special_topic.png" alt="" @click="topicModalVisible =true"/>
       </div>
     </div>
     <!-- 加载中 -->
     <div
         class="homeLoading"
-        :class="{ homeLoadingNone: isLoding }"
+        :class="{ homeLoadingNone: isLoading }"
         v-loading="true"
     ></div>
-    <topic />
+    <topic :value="topicModalVisible" @close="topicModalVisible =false"/>
   </div>
 </template>
 
@@ -145,9 +145,9 @@ export default {
   data() {
     //这里存放数据
     return {
+      topicModalVisible: false,
       // 数据加载中
-      isLoding: false,
-
+      isLoading: false,
       arrowsShow: false,
       name: "",
       mainInd: 0,
@@ -156,7 +156,6 @@ export default {
       numAll: 0,
       // 今日浏览量
       numDay: 0,
-
       // 区域筛选的数据
       mapDataInd: null,
       mapData: [
@@ -489,7 +488,7 @@ export default {
         console.log("数据加载完成", event);
         this.$nextTick(() => {
           setTimeout(() => {
-            this.isLoding = true;
+            this.isLoading = true;
           }, 500);
         });
       });

packages/pc/src/views/topic/index.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="topic">
-
+  <div class="topic" v-if="visible">
+    <div class="close-btn" @click="handleModalClose"></div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
 
       <el-tab-pane :label="tab.name" :name="String(tab.id)" v-for="tab in primaryList">
-
-        <div class="card-list">
-          <div class="card-item" v-for="item in secondaryList">
-            <div class="inner_img" :style="{
+        <div class="swiper-container">
+          <div class="card-list swiper-wrapper" v-show="isLoaded">
+            <div class="card-item swiper-slide" v-for="item in secondaryList">
+              <div class="inner_img" :style="{
               backgroundImage:`url(${getImageURL(item.thumb)})`,
             }"></div>
-            <div class="inner_title">{{ item.name }}</div>
-            <div class="bg"></div>
+              <div class="inner_title">{{ item.name }}</div>
+              <div class="bg"></div>
+            </div>
           </div>
 
         </div>
@@ -24,7 +25,7 @@
 
 <script>
 import {getTopicList, getTopicSecondaryList} from "@/utils/api"
-
+import Swiper from "swiper";
 
 export default {
   computed: {
@@ -42,13 +43,24 @@ export default {
     }
 
   },
+  watch: {
+    value(val) {
+      this.visible = val
+      if (this.visible) {
+        this.handleDefaultList();
+        this.handleInitSwiper();
+
+      }
+    }
+  },
   data() {
 
     return {
       activeName: "",
       primaryList: [],
-      secondaryList: []
-
+      secondaryList: [],
+      visible: false,
+      isLoaded: false
     }
   },
 
@@ -68,10 +80,26 @@ export default {
       const res = await getTopicSecondaryList(this.activeName);
       console.log('res', res.data)
       this.secondaryList = res.data || []
+    },
+    handleModalClose() {
+      this.$emit('close')
+    },
+    handleInitSwiper() {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          new Swiper(".swiper-container", {
+            freeMode: true,
+            direction: 'horizontal',
+            observer: true,
+            observeParents: true,
+            slidesPerView: 'auto'
+          });
+          this.isLoaded = true;
+        }, 1000);
+      });
     }
   },
   mounted() {
-    this.handleDefaultList();
 
   }
 
@@ -90,6 +118,18 @@ export default {
   backdrop-filter: blur(20px);
   font-family: "思源宋体";
 
+  .close-btn {
+    cursor: pointer;
+    top: -7px;
+    right: 104px;
+    position: absolute;
+    width: 66px;
+    height: 105px;
+    z-index: 10;
+    background: url("../../assets/img/close.png");
+    background-size: 100% 100%;
+  }
+
   /deep/ .el-tabs {
     display: flex;
     flex-direction: column;
@@ -136,11 +176,17 @@ export default {
       }
     }
 
-    .el-tabs__content {
-      flex: 1
+    .el-tab-pane, .el-tabs__content {
+      flex: 1;
+      display: flex;
     }
   }
 
+  .swiper-container {
+    height: 100%;
+    width: 100%;
+  }
+
   .card-list {
     user-select: none;
     display: flex;