热点列表不再reverse；热点详情添加文字描述

src/components/HotspotDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="hotspot-detail">
-    <!-- <button
+    <button
+      v-show="descForShow"
       class="desc"
       @click="isShowDesc = true"
     >
@@ -9,7 +10,7 @@
         alt="详情"
         draggable="false"
       >
-    </button> -->
+    </button>
 
     <h1 v-html="titleForShow" />
 
@@ -168,6 +169,13 @@
         <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
       </button>
     </div>
+
+    <MyDesc
+      v-show="isShowDesc"
+      :title="titleForShow"
+      :desc="descForShow"
+      @close="isShowDesc = false"
+    />
   </div>
 </template>
 
@@ -175,10 +183,12 @@
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
 import Audio from "@/components/Audio.vue"
+import MyDesc from "@/components/HotspotDetailDesc.vue"
 
 export default {
   components: {
     Audio,
+    MyDesc,
   },
   props: {
     hotspotList: {
@@ -271,6 +281,7 @@ export default {
           targetTypeItem.list.push({
             title: /* hotspot.content || */hotspot.title.split('&')[0],
             url: mediaItem.src,
+            desc: hotspot.content,
           })
         }
       }
@@ -283,6 +294,13 @@ export default {
         return ''
       }
     },
+    descForShow() {
+      try {
+        return this.typesForShow[this.currentTabIdx].list[this.currentSlideIdx].desc
+      } catch (error) {
+        return ''
+      }
+    },
     typesForShow() {
       return this.types.filter((item) => {
         return item.list.length

src/components/HotspotDetailDesc.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="hotspot-detail-desc-wrap">
+    <article
+      class="hotspot-detail-desc"
+    >
+      <button
+        class="close-btn"
+        @click="$emit('close')"
+      >
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
+      <h1>{{ title }}</h1>
+      <div
+        class="desc"
+        v-html="desc"
+      />
+    </article>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    desc: {
+      type: String,
+      require: true,
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-desc-wrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 251, 245, 0.95);
+  z-index: 10;
+  .hotspot-detail-desc {
+    position: absolute;
+    left: 4.7rem;
+    right: 4.7rem;
+    top: 9.75rem;
+    bottom: 14rem;
+    background: #930909;
+    border-top: solid 0.78rem #CEA763;
+    border-bottom: solid 0.78rem #CEA763;
+    padding: 2.92rem 3rem;
+    .close-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6.25rem;
+      height: 6.25rem;
+      transform: translate(50%, -50%);
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > h1 {
+      margin-top: 2.29rem;
+      font-size: 2rem;
+      font-weight: bold;
+      color: #CEA763;
+      line-height: 2.34rem;
+      margin-bottom: 2.13rem;
+    }
+    > .desc {
+      font-size: 1.67rem;
+      color: #FFFFFF;
+      line-height: 2.92rem;
+    }
+  }
+}
+</style>

src/views/SwkkView.vue

@@ -355,7 +355,7 @@ export default {
 
     // 全部热点数据
     kankan.store.on("tags", (tags) => {
-      this.baseHotData = tags.tags.reverse()
+      this.baseHotData = tags.tags
       console.log('baseHotData: ', this.baseHotData)
     })