feat: replace the guide with video

src/hotspot/views/hotspot/index.syjy.scss

@@ -13,8 +13,9 @@
 
   .audioIcon {
     position: absolute;
-    right: 20px;
-    bottom: 5px;
+    top: 0;
+    right: 0;
+    z-index: 1;
 
     img {
       width: 57px;
@@ -23,15 +24,18 @@
     }
   }
   &-info {
+    position: relative;
+    padding: 20px 0;
     color: #333333;
 
     h3 {
+      padding-right: 57px;
       margin-bottom: 18px;
       font-size: 18px;
       font-weight: 700;
       color: #9d222d;
     }
-    div {
+    &__content {
       font-size: 18px;
       line-height: 32px;
       text-indent: 2em;
@@ -44,7 +48,7 @@
     padding-right: 20px;
     min-width: 230px;
     max-width: 700px;
-    height: 600px;
+    height: 640px;
   }
 
   &-container {
@@ -174,6 +178,7 @@ span.el-image-viewer__close {
 
     .el-scrollbar {
       flex: 1;
+      padding: 0;
       width: 100% !important;
       height: 0 !important;
       background: #9d222d;
@@ -190,10 +195,11 @@ span.el-image-viewer__close {
 
       h3 {
         margin: 13px 0 8px;
+        padding-right: 30px;
         color: inherit;
         text-align: left;
       }
-      div {
+      &__content {
         width: 100%;
         font-size: 14px;
       }
@@ -228,8 +234,8 @@ span.el-image-viewer__close {
       }
     }
     .audioIcon {
-      right: 35px;
-      bottom: 1px;
+      top: -14px;
+      right: 5px;
 
       img {
         width: 48px;

src/hotspot/views/hotspot/index.syjy.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="hotspot-page">
-    <div v-if="myType !== 'text'" class="hotspot-page-container">
-      <!-- 音频播放器 -->
-      <audio
-        id="myAudio"
-        v-if="audio"
-        ref="volumeRef"
-        v-show="isOneAduio"
-        :src="audio"
-        controls
-      ></audio>
+    <!-- 音频播放器 -->
+    <audio
+      id="myAudio"
+      v-if="audio"
+      ref="volumeRef"
+      v-show="isOneAduio"
+      :src="audio"
+      controls
+    ></audio>
 
+    <div v-if="myType !== 'text'" class="hotspot-page-container">
       <!-- 模型页面 -->
       <Swiper
         v-if="myType === 'model'"
@@ -81,16 +81,6 @@
           {{ item.type === 'img' ? `${myInd + 1}/${data.img.length}` : '' }} -->
         </div>
       </div>
-
-      <!-- 音频图标 -->
-      <div
-        v-if="audio && !isOneAduio"
-        class="audioIcon"
-        :title="audioSta ? '关闭音频' : '打开音频'"
-        @click="audioSta = !audioSta"
-      >
-        <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
-      </div>
     </div>
 
     <el-scrollbar
@@ -99,7 +89,17 @@
     >
       <div class="hotspot-page-info">
         <h3>{{ myTitle }}</h3>
-        <div v-html="myTxt" />
+        <div v-html="myTxt" class="hotspot-page-info__content" />
+
+        <!-- 音频图标 -->
+        <div
+          v-if="audio && !isOneAduio"
+          class="audioIcon"
+          :title="audioSta ? '关闭音频' : '打开音频'"
+          @click="audioSta = !audioSta"
+        >
+          <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
+        </div>
       </div>
     </el-scrollbar>
   </div>
@@ -199,10 +199,6 @@
         console.log('----', resData);
         if (resData) {
           this.audio = resData.backgroundMusic;
-          // 只有单独的音频上传
-          if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
-            this.isOneAduio = true;
-          }
           // 底部的tab
           const arr = [];
           const obj = {};
@@ -247,6 +243,17 @@
           if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
             this.oneTxt = true;
           }
+
+          // 只有单独的音频上传
+          if (
+            resData.backgroundMusic &&
+            !resData.model &&
+            !resData.video &&
+            !resData.images &&
+            this.myType !== 'text'
+          ) {
+            this.isOneAduio = true;
+          }
         }
       },
 

src/index/components/VideoPopup/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog class="video-popup" v-model="show" append-to-body :with-header="false">
+    <VideoPlay
+      ref="video"
+      width="100%"
+      height="100%"
+      :src="src"
+      :controlBtns="['audioTrack', 'quality', 'speedRate', 'volume']"
+    />
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, nextTick } from 'vue';
+  import { videoPlay as VideoPlay } from 'vue3-video-play/lib';
+
+  const props = defineProps<{
+    visible: boolean;
+    src: string;
+  }>();
+  const emits = defineEmits(['update:visible']);
+  const video = ref(null);
+
+  const show = computed({
+    get() {
+      return props.visible;
+    },
+    set(v) {
+      emits('update:visible', v);
+    },
+  });
+
+  watch(
+    () => props.visible,
+    (v) => {
+      if (v) {
+        nextTick(() => {
+          // @ts-ignore
+          video.value?.play();
+        });
+      } else {
+        nextTick(() => {
+          // @ts-ignore
+          video.value?.pause();
+        });
+      }
+    }
+  );
+</script>
+
+<style lang="scss">
+  .video-popup.el-dialog {
+    --el-dialog-width: 100%;
+    --el-bg-color: transparent;
+    --el-dialog-padding-primary: 0;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+
+    .el-dialog__body {
+      width: 100%;
+      height: 100%;
+    }
+    .el-dialog__headerbtn {
+      --el-message-close-size: 20px;
+      z-index: 9;
+    }
+  }
+</style>

src/index/views/home/components/menu/index.syjy.scss

@@ -49,6 +49,7 @@
 }
 
 #play,
+.play,
 #pause {
   cursor: pointer;
 

src/index/views/home/components/menu/index.syjy.vue

@@ -7,7 +7,12 @@
             <img :src="PauseIcon" width="24" height="24" data-original-title="播放" />
           </a>
         </div>
-        <div id="play" class="ui-icon" data-original-title="播放">
+        <div id="play" class="ui-icon hidden" data-original-title="播放">
+          <a>
+            <img :src="PauseIcon" width="24" height="24" title="播放" />
+          </a>
+        </div>
+        <div class="ui-icon play" data-original-title="播放" @click="videoVisible = true">
           <a>
             <img :src="PauseIcon" width="24" height="24" title="播放" />
           </a>
@@ -83,6 +88,7 @@
   </div>
 
   <share-popup v-model:visible="shareVisible" />
+  <video-popup v-model:visible="videoVisible" :src="guideVideo" />
 </template>
 
 <script setup lang="ts">
@@ -91,10 +97,13 @@
   import PlayIcon from '@/assets/images/syjy/icon-manyou-min.png';
   import { homeApi } from '@/api';
   import SharePopup from '../share-popup/index.vue';
+  import VideoPopup from '@/components/VideoPopup/index.vue';
+  import guideVideo from '@/assets/videos/syjy/guide.mp4';
 
   let helperVisible = false;
   const starSum = ref(0);
   const shareVisible = ref(false);
+  const videoVisible = ref(false);
 
   const closeHelper = () => {
     window.$('#interaction-modal').removeClass('fadeIn');