feat: audio

src/views/home/components/menu/index.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
                 <img class="w52" src="./images/icon-home@2x-min.png" />
               </a>
             </div>
-            <div id="volume" class="ui-icon wide">
+            <div id="volume" class="ui-icon wide" style="display: none;">
               <a>
                 <img class="w52" src="./images/Volume btn_on.png" />
               </a>

src/views/hotspot/index.scss

@@ -7,14 +7,25 @@
   background: rgba(255, 252, 247, 0.8);
   z-index: var(--z-index-popper);
 
+  .audioIcon {
+    position: absolute;
+    top: 40px;
+    right: 128px;
+
+    img {
+      width: 52px;
+      height: 52px;
+      cursor: pointer;
+    }
+  }
   &-info {
     position: absolute;
     top: 42px;
     left: 40px;
+    max-width: 50%;
 
     h3 {
       margin-bottom: 14px;
-      max-width: 50%;
       color: #c41800;
       font-size: 24px;
       line-height: 28px;
@@ -41,12 +52,13 @@
 
   &-main {
     position: absolute;
-    top: 45%;
+    top: 50%;
     left: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1100px;
+    max-width: 1100px;
+    width: calc(100vw - 548px);
     transform: translate(-50%, -50%);
   }
   &-swiper {
@@ -61,11 +73,11 @@
       z-index: 1;
     }
     &__left {
-      left: -50px;
+      left: -70px;
       background: url('@/assets/images/icon-previous@2x-min.png') no-repeat center / contain;
     }
     &__right {
-      right: -50px;
+      right: -70px;
       background: url('@/assets/images/icon-next@2x-min.png') no-repeat center / contain;
     }
   }
@@ -79,7 +91,7 @@
     }
   }
   &-video {
-    width: 900px;
+    width: 100%;
     height: 561px;
     object-fit: cover;
   }

src/views/hotspot/index.vue

@@ -5,7 +5,27 @@
       <p>{{ myTxt }}</p>
     </div>
 
+    <!-- 音频图标 -->
+    <div
+      v-if="audio && !isOneAduio"
+      class="audioIcon"
+      :title="audioSta ? '关闭音频' : '打开音频'"
+      @click="audioSta = !audioSta"
+    >
+      <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
+    </div>
+
     <div class="hotspot-page-main">
+      <!-- 音频播放器 -->
+      <audio
+        id="myAudio"
+        v-if="audio"
+        ref="volumeRef"
+        v-show="isOneAduio"
+        :src="audio"
+        controls
+      ></audio>
+
       <!-- 模型页面 -->
       <Swiper
         v-if="myType === 'model'"
@@ -87,6 +107,8 @@
   import AcImageIcon from '@/assets/images/icon-image-1@2x.png';
   import VideoIcon from '@/assets/images/icon-video@2x.png';
   import AcVideoIcon from '@/assets/images/icon-video-1@2x.png';
+  import VolumeOn from '@/assets/images/Volume-on.png';
+  import VolumeOff from '@/assets/images/Volume-off.png';
 
   export default {
     name: 'hotspot',
@@ -96,6 +118,8 @@
     },
     data() {
       return {
+        VolumeOn,
+        VolumeOff,
         m: this.$route.query.m,
         id: this.$route.query.id,
         // 音频地址
@@ -139,6 +163,17 @@
         return this.data[this.myType] || [];
       },
     },
+    watch: {
+      audioSta(val) {
+        if (val) {
+          this.$refs.volumeRef.play();
+          this.$refs.volumeRef.onended = () => {
+            // console.log("----音频播放完毕");
+            this.audioSta = false;
+          };
+        } else this.$refs.volumeRef.pause();
+      },
+    },
     mounted() {
       this.getData();
     },
@@ -165,6 +200,11 @@
           if (resData.video) {
             obj.video = resData.video;
             arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon, acIcon: AcVideoIcon });
+          } else {
+            this.$nextTick(() => {
+              this.audioSta = true;
+              this.$refs.volumeRef.play();
+            });
           }
           if (resData.images) {
             obj.img = resData.images;