热点信息中展示多个条目

src/views/HomeMobile.vue

@@ -21,8 +21,8 @@
 
     <div class="title-wrapper">
       <h1
-        :title="hotspotData.title"
-        v-html="hotspotData.title"
+        :title="hotspotTextInfo.title"
+        v-html="hotspotTextInfo.title"
       />
       <img
         src="@/assets/images/title-bottom-line.png"
@@ -219,9 +219,30 @@
       <div class="desc-bg-wrap">
         <div class="top-bar" />
         <div
-          class="desc"
-          v-html="descForShow"
-        />
+          class="textInfo"
+        >
+          <ul>
+            <li>
+              <span class="key">时代：</span>
+              <span class="value">{{ hotspotTextInfo.age }}</span>
+            </li>
+            <li>
+              <span class="key">出土地：</span>
+              <span class="value">{{ hotspotTextInfo.position }}</span>
+            </li>
+            <li>
+              <span class="key">尺寸：</span>
+              <span class="value">{{ hotspotTextInfo.size }}</span>
+            </li>
+            <li>
+              <span class="key">介绍：</span>
+              <span
+                class="value"
+                v-html="hotspotTextInfo.desc"
+              />
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
 
@@ -246,6 +267,7 @@ import 'swiper/swiper-bundle.css'
 import bgImg from "@/assets/images/bg.png"
 import { deepProcess } from "@/utils/other.js"
 // import browser from "@/utils/browser";
+import hotspotData from "@/assets/data/hotspotData.js"
 
 export default {
   data() {
@@ -267,14 +289,11 @@ export default {
     }
   },
   computed: {
-    descForShow() {
-      if (this.isShowImages) {
-        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else if (this.isShowVideos) {
-        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else {
-        return this.hotspotData.content
-      }
+    hotspotTextInfo() {
+      const ret = hotspotData.find((item) => {
+        return item.id === this.$route.query.m
+      })
+      return ret
     },
   },
   watch: {
@@ -608,17 +627,38 @@ export default {
         background: #F4D49F;
         border-radius: 2px;
       }
-      > .desc {
+      > .textInfo {
         position: absolute;
-        font-size: 16px;
-        line-height: 26px;
-        font-family: Adobe Heiti Std;
         top: 77px;
         bottom: 40px;
         left: 26px;
         right: 26px;
-        width: calc(100% - 26px * 2);
+        font-size: 16px;
+        line-height: 26px;
+        font-family: Adobe Heiti Std;
         overflow: auto;
+        padding-right: 10px;
+        &::-webkit-scrollbar { width: 5px; height: 5px; }
+        > ul {
+          > li {
+            display: block;
+            margin-bottom: 0.5em;
+            margin-left: 31px;
+            position: relative;
+            white-space: pre-wrap;
+            &::before {
+              position: absolute;
+              left: -24px;
+              top: 6px;
+              content: '';
+              background-color: #F1F3F4;
+              display: inline-block;
+              width: 12px;
+              height: 12px;
+              border-radius: 6px;
+            }
+          }
+        }
       }
     }
   }

src/views/HomeWeb.vue

@@ -28,16 +28,37 @@
       }"
     >
       <h1
-        :title="hotspotData.title"
+        :title="hotspotTextInfo.title"
         :style="{
           backgroundImage: `url(${titleBottomLine})`,
         }"
-        v-html="hotspotData.title"
+        v-html="hotspotTextInfo.title"
       />
       <div
-        class="desc"
-        v-html="descForShow"
-      />
+        class="textInfo"
+      >
+        <ul>
+          <li>
+            <span class="key">时代：</span>
+            <span class="value">{{ hotspotTextInfo.age }}</span>
+          </li>
+          <li>
+            <span class="key">出土地：</span>
+            <span class="value">{{ hotspotTextInfo.position }}</span>
+          </li>
+          <li>
+            <span class="key">尺寸：</span>
+            <span class="value">{{ hotspotTextInfo.size }}</span>
+          </li>
+          <li>
+            <span class="key">介绍：</span>
+            <span
+              class="value"
+              v-html="hotspotTextInfo.desc"
+            />
+          </li>
+        </ul>
+      </div>
       <menu>
         <button
           v-if="bgAudioUrl"
@@ -250,6 +271,7 @@ import bgImg from "@/assets/images/bg.png"
 import titleBottomLine from "@/assets/images/title-bottom-line.png"
 import { deepProcess } from "@/utils/other.js"
 // import browser from "@/utils/browser";
+import hotspotData from "@/assets/data/hotspotData.js"
 
 export default {
   data() {
@@ -272,14 +294,11 @@ export default {
     }
   },
   computed: {
-    descForShow() {
-      if (this.isShowImages) {
-        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else if (this.isShowVideos) {
-        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else {
-        return this.hotspotData.content
-      }
+    hotspotTextInfo() {
+      const ret = hotspotData.find((item) => {
+        return item.id === this.$route.query.m
+      })
+      return ret
     },
   },
   watch: {
@@ -366,6 +385,7 @@ export default {
       let url = `${process.env.VUE_APP_G_PREFIX}/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
       let result = (await this.$http.get(url)).data
 
+      // 打印所有热点中的感兴趣的字段
       // console.log(result)
       // for (const key in result) {
       //   if (Object.hasOwnProperty.call(result, key)) {
@@ -459,7 +479,7 @@ export default {
       top: 211px;
       left: 44px;
       max-width: 418px;
-      font-size: 28px;
+      font-size: 38px;
       font-family: DFLiShuW7;
       overflow: hidden;
       white-space: pre;
@@ -472,16 +492,37 @@ export default {
       background-repeat: no-repeat;
       background-position: center bottom;
     }
-    > .desc {
+    > .textInfo {
       position: absolute;
       top: 347px;
       left: 55px;
-      width: 390px;
+      width: 400px;
       font-size: 16px;
       line-height: 26px;
       font-family: Adobe Heiti Std;
       overflow: auto;
       height: 300px;
+      padding-right: 10px;
+      > ul {
+        > li {
+          display: block;
+          margin-bottom: 0.5em;
+          margin-left: 31px;
+          position: relative;
+          white-space: pre-wrap;
+          &::before {
+            position: absolute;
+            left: -24px;
+            top: 6px;
+            content: '';
+            background-color: #F1F3F4;
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 6px;
+          }
+        }
+      }
     }
     > menu {
       position: absolute;