移动端 热点详情 不包括分享

src/views/HomeMobile.vue

@@ -1,22 +1,43 @@
 <template>
   <div class="hotspot-home">
+    <audio
+      ref="bg-audio"
+      class="bg-audio"
+      :src="bgAudioUrl"
+      loop
+      autoplay
+    />
+
     <button
       class="close"
       @click="onClickClose"
     >
       <img
-        src="@/assets/images/close-thin.png"
+        src="@/assets/images/close.png"
         alt="关闭"
         draggable="false"
       >
     </button>
 
+    <div class="title-wrapper">
+      <h1
+        :title="hotspotData.title"
+        v-html="hotspotData.title"
+      />
+      <img
+        src="@/assets/images/title-bottom-line.png"
+        alt=""
+        class="bottom-line"
+      >
+    </div>
+
     <div
       v-if="isShowVideos"
+      v-show="!isShowShare"
       class="swiper-wrapper-mine video-wrap"
     >
       <div
-        class="swiper-root swiper-root"
+        class="swiper-root"
       >
         <div
           class="swiper-wrapper"
@@ -34,39 +55,65 @@
               disablePictureInPicture
             />
           </div>
-          <!-- <div
+        </div>
+        <div class="swiper-pagination" />
+      </div>
+    </div>
+
+    <div
+      v-if="isShowModels"
+      class="swiper-wrapper-mine model-wrap"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          class="swiper-wrapper"
+        >
+          <iframe
+            v-for="(item, index) in hotspotData.model"
+            :key="index"
+            :src="item"
+            frameborder="0"
             class="swiper-slide"
-          >
-            <video
-              ref="video"
-              :src="hotspotData.video[0].url"
-              controls
-              controlslist="nodownload"
-              disablePictureInPicture
-            />
-          </div>
+          />
+        </div>
+        <div class="swiper-pagination" />
+      </div>
+    </div>
+
+    <div
+      v-if="isShowAudios"
+      v-show="!isShowShare"
+      class="swiper-wrapper-mine audio-wrap"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          class="swiper-wrapper"
+        >
           <div
+            v-for="(item, index) in hotspotData.audio"
+            :key="index"
             class="swiper-slide"
           >
-            <video
-              ref="video"
-              :src="hotspotData.video[0].url"
+            <audio
+              ref="audio"
+              :src="item.url"
               controls
               controlslist="nodownload"
               disablePictureInPicture
             />
-          </div> -->
-        </div>
-        <div class="swiper-pagination">
-          <!-- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span> -->
+          </div>
         </div>
-        <!-- <div class="swiper-button-prev" />
-        <div class="swiper-button-next" /> -->
+        <div class="swiper-pagination" />
       </div>
     </div>
 
     <div
-      v-show="isShowImages"
+      v-if="isShowImages"
+      v-show="!isShowShare"
       class="swiper-wrapper-mine image-wrap"
     >
       <div
@@ -115,34 +162,111 @@
       </div>
     </div>
 
-    <div class="title-wrap">
-      <h1
-        :title="hotspotData.title"
-        v-html="hotspotData.title"
+    <menu>
+      <button
+        v-if="bgAudioUrl"
+        @click="isBgAudioMuted = !isBgAudioMuted"
+      >
+        <img
+          v-show="isBgAudioMuted"
+          class="bg-audio-control"
+          src="@/assets/images/bg-audio-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="!isBgAudioMuted"
+          class="bg-audio-control"
+          src="@/assets/images/bg-audio-mobile-muted.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <!-- <button @click="onClickLike">
+          <img
+            class="like"
+            src="@/assets/images/like-mobile.png"
+            alt=""
+            draggable="false"
+          >
+          <transition name="bubble">
+            <div
+              v-if="isShowPlusOne"
+              class="plus-one"
+            >
+              +1
+            </div>
+          </transition>
+        </button> -->
+      <button @click="onClickShare">
+        <img
+          class="share"
+          src="@/assets/images/share-mobile.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </menu>
+
+    <div class="desc-wrap">
+      <div
+        class="place-holder"
+        @mousedown.prevent
+        @touchstart.prevent
       />
+      <div class="desc-bg-wrap">
+        <div class="top-bar" />
+        <div
+          class="desc"
+          v-html="descForShow"
+        />
+      </div>
     </div>
 
-    <p
-      class="desc"
-      v-html="descForShow"
-    />
+    <div
+      v-if="isShowShare"
+      v-click-outside.click="closeCode2d"
+      class="share-wrap"
+    >
+      <img
+        src="@/assets/images/code2d.png"
+        alt=""
+        class="code"
+        draggable="false"
+      >
+      <img
+        src="@/assets/images/share-tip.png"
+        alt=""
+        class="tip"
+        draggable="false"
+      >
+    </div>
   </div>
 </template>
 
 <script>
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
-
+import bgImg from "@/assets/images/bg.png"
 // import browser from "@/utils/browser";
 
 export default {
   data() {
     return {
       hotspotData: {}, // 热点数据
-      audioUrl: "", //背景音频url
+
+      bgAudioUrl: "", //背景音频url
+      isBgAudioMuted: false,
+
       isShowImages: false,
       isShowVideos: false,
+      isShowModels: false,
+      isShowAudios: false,
+
       currentSlideIdx: 0,
+      bgImg,
+      isShowPlusOne: false,
+      isShowShare: false,
     }
   },
   computed: {
@@ -152,10 +276,21 @@ export default {
       } else if (this.isShowVideos) {
         return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
       } else {
-        return ''
+        return this.hotspotData.content
       }
     },
   },
+  watch: {
+    isBgAudioMuted: {
+      handler(vNew) {
+        if (vNew) {
+          this.$refs['bg-audio'].pause() // or toggle静音？
+        } else {
+          this.$refs['bg-audio'].play() // or toggle静音？
+        }
+      }
+    }
+  },
   async mounted() {
     await this.getData()
     this.$nextTick(() => {
@@ -164,10 +299,6 @@ export default {
         pagination: {
           el: '.swiper-pagination',
         },
-        // navigation: {
-        //   nextEl: '.swiper-button-next',
-        //   prevEl: '.swiper-button-prev',
-        // },
 
         on: {
           // 自动播放
@@ -177,11 +308,11 @@ export default {
                 that.$refs.video[0].play()
               })
             }
-            // if (that.typesForShow[vNew].key === 'audio') {
-            //   that.$nextTick(() => {
-            //     that.$refs['audio-comp'][0].play()
-            //   })
-            // }
+            if (that.isShowAudios) {
+              that.$nextTick(() => {
+                that.$refs.audio[0].play()
+              })
+            }
           },
           slideChange: function(e) {
             that.currentSlideIdx = e.activeIndex
@@ -196,15 +327,15 @@ export default {
                 }
               }
             }
-            // if (that.typesForShow[vNew].key === 'audio') {
-            //   for (let index = 0; index < that.$refs['audio-comp'].length; index++) {
-            //     if (index !== that.currentSlideIdx) {
-            //       that.$refs['audio-comp'][index].pause()
-            //     } else {
-            //       that.$refs['audio-comp'][index].play()
-            //     }
-            //   }
-            // }
+            if (that.isShowAudios) {
+              for (let index = 0; index < that.$refs.audio.length; index++) {
+                if (index !== that.currentSlideIdx) {
+                  that.$refs.audio[index].pause()
+                } else {
+                  that.$refs.audio[index].play()
+                }
+              }
+            }
           }
         }
       })
@@ -220,44 +351,110 @@ export default {
       }
       console.log('热点数据：', this.hotspotData)
 
-      this.audioUrl = this.hotspotData["backgroundMusic"]
+      // this.bgAudioUrl = this.hotspotData.backgroundMusic
 
       if (this.hotspotData.images && this.hotspotData.images.length) {
         this.isShowImages = true
       } else if (this.hotspotData.video && this.hotspotData.video.length) {
         this.isShowVideos = true
+      } else if (this.hotspotData.model && this.hotspotData.model.length) {
+        this.isShowModels = true
+      } else if (this.hotspotData.backgroundMusic) {
+        this.isShowAudios = true
+        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
       }
     },
     onClickClose() {
       window.parent.document.getElementById('closepop').click()
     },
+    // onClickLike() {
+    //   const res = globalApi.like()
+    //   if (res && res.then) {
+    //   res.then(() => {
+    //   this.isShowPlusOne = true
+    //   setTimeout(() => {
+    //     this.isShowPlusOne = false
+    //   }, 1000)
+    //   })
+    //   }
+    // },
+    onClickShare() {
+      setTimeout(() => {
+        this.isShowShare = true
+      }, 200)
+    },
+    closeCode2d() {
+      if (this.isShowShare) {
+        this.isShowShare = false
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .hotspot-home {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
+  color: #F1F3F4;
+  z-index: 0;
+  > .bg-audio {
+    display: none;
+  }
+
   > button.close {
     position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 28px;
-    height: 28px;
+    top: 20px;
+    right: 30px;
+    width: 33.5px;
+    height: 33.5px;
+    z-index: 1;
     > img {
       width: 100%;
       height: 100%;
     }
   }
 
+  > .title-wrapper {
+    position: absolute;
+    top: 62px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    z-index: 1;
+    > h1 {
+      width: 100%;
+      font-size: 27.5px;
+      line-height: 1.2em;
+      font-size: 27.5px;
+      font-family: DFLiShuW7;
+      letter-spacing: 2px;
+      text-align: center;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+    > .bottom-line {
+      position: absolute;
+      top: 100%;
+      left: calc(50% + 10px);
+      transform: translateX(-50%);
+      width: 174px;
+      height: 9.5px;
+    }
+  }
+
   .swiper-wrapper-mine {
     position: absolute;
-    left: 0;
-    top: 25%;
+    top: 150px;
+    left: 0px;
     width: 100%;
-    height: 35.6%;
+    height: 250px;
+    z-index: 1;
     .swiper-root {
       overflow: hidden;
       height: 100%;
@@ -269,27 +466,11 @@ export default {
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
+        font-size: 1.33rem;
+        font-family: Inter-Regular, Inter;
+        .cur {
+        }
       }
-      // .swiper-button-prev {
-      //   left: calc(-1.67rem - 1.83rem);
-      //   width: 1.83rem;
-      //   height: 3.58rem;
-      //   background-image: url(../assets/images/arrow-left.png);
-      //   background-size: contain;
-      //   &::after {
-      //     content: '';
-      //   }
-      // }
-      // .swiper-button-next {
-      //   right: calc(-1.67rem - 1.83rem);
-      //   width: 1.83rem;
-      //   height: 3.58rem;
-      //   background-image: url(../assets/images/arrow-right.png);
-      //   background-size: contain;
-      //   &::after {
-      //     content: '';
-      //   }
-      // }
     }
   }
   .swiper-wrapper-mine.video-wrap {
@@ -305,25 +486,27 @@ export default {
       }
     }
   }
-  // .swiper-wrapper-mine.model-wrap {
-  //   .swiper-root {
-  //     .swiper-wrapper {
-  //     }
-  //   }
-  // }
-  // .swiper-wrapper-mine.audio-wrap {
-  //   width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
-  //   height: 30rem;
-  //   position: absolute;
-  //   left: 50%;
-  //   top: 50%;
-  //   transform: translate(-50%, -70%);
-  //   .swiper-root {
-  //     width: 100%;
-  //     .swiper-wrapper {
-  //     }
-  //   }
-  // }
+  .swiper-wrapper-mine.model-wrap {
+    .swiper-root {
+      .swiper-wrapper {
+      }
+    }
+  }
+  .swiper-wrapper-mine.audio-wrap {
+    .swiper-root {
+      .swiper-wrapper {
+        .swiper-slide {
+          > audio {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 80%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+  }
   .swiper-wrapper-mine.image-wrap {
     .swiper-root {
       .swiper-wrapper {
@@ -336,38 +519,125 @@ export default {
     }
   }
 
-  > .title-wrap {
+  > menu {
     position: absolute;
-    width: 100%;
-    overflow: auto;
-    top: 66%;
-    > h1 {
-      padding: 0 26px;
-      white-space: pre;
-      font-size: 24px;
-      font-weight: bold;
-      color: #FFFFFF;
+    top: 415px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    > button {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin-right: 38.5px;
+      position: relative;
+      &:last-of-type{
+        margin-right: initial;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      // .plus-one {
+      //   position: absolute;
+      //   top: 0;
+      //   right: 0;
+      //   transform: translate(50%, -50%);
+      // }
     }
   }
-  .desc {
+
+  > .desc-wrap {
     position: absolute;
-    left: 24px;
-    right: 24px;
-    bottom: 30px;
-    height: 22%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     overflow: auto;
-    font-size: 16px;
-    color: #FFFFFF;
-    line-height: 19px;
-    padding-right: 10px;
+    > .place-holder {
+      width: 100%;
+      height: 450px;
+    }
+    > .desc-bg-wrap {
+      z-index: 2;
+      position: absolute;
+      top: 450px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: calc(100vw - 11px * 2);
+      height: calc((100vw - 11px * 2) * 1.7);
+      background-image: url(@/assets/images/bg-mobile.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      > .top-bar {
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 127px;
+        height: 4px;
+        background: #F4D49F;
+        border-radius: 2px;
+      }
+      > .desc {
+        position: absolute;
+        font-size: 16px;
+        line-height: 26px;
+        font-family: Adobe Heiti Std;
+        top: 77px;
+        left: 26px;
+        right: 26px;
+        width: calc(100% - 26px * 2);
+      }
+    }
   }
-}
 
-/deep/.swiper-pagination-bullet {
-  opacity: 1;
-  background: #666;
+  .share-wrap {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 244px;
+    > img.code {
+      width: 300px;
+      height: 300px;
+    }
+    > img.tip {
+      position: absolute;
+      left: 50%;
+      top: calc(100% + 10px);
+      transform: translateX(-50%);
+      width: 150px;
+    }
+  }
 }
+
 /deep/.swiper-pagination-bullet-active {
   background: #a10e0c;
 }
+
+// .bubble-enter {
+//   opacity: 0;
+//   top: 1rem !important;
+// }
+// .bubble-enter-to {
+//   opacity: 1;
+//   top: 0 !important;
+// }
+// .bubble-enter-active {
+//   transition: all 0.5s;
+// }
+// .bubble-leave {
+//   opacity: 1;
+//   top: 0 !important;
+// }
+// .bubble-leave-to {
+//   opacity: 0;
+//   top: -1rem !important;
+// }
+// .bubble-leave-active {
+//   transition: all 0.5s;
+// }
+
+::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
 </style>