feat: --

components.d.ts

@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElImage: typeof import('element-plus/es')['ElImage']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -31,7 +31,8 @@
     "swiper": "^11.1.15",
     "vue": "^3.5.12",
     "vue-qrcode": "^2.2.2",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue3-video-play": "^1.3.2"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
@@ -40,6 +41,7 @@
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
     "cross-env": "^7.0.3",
+    "less": "^4.2.1",
     "npm-run-all2": "^7.0.1",
     "sass": "^1.81.0",
     "typescript": "~5.6.3",

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

@@ -101,9 +101,15 @@
     align-items: center;
   }
   &-video {
+    position: relative;
     width: 100%;
     height: 100%;
     max-height: 623px;
+
+    .d-player-wrap {
+      width: 100%;
+      height: 100%;
+    }
   }
   &-img {
     display: flex;

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

@@ -26,15 +26,13 @@
       <!-- 视频页面 -->
       <div v-if="myType === 'video'" class="hotspot-page-swiper hotspot-page-video">
         <template v-for="(item, index) in curList" :key="item.url">
-          <video
+          <VideoPlay
             v-if="index === myInd"
-            id="videoID"
             class="hotspot-page-video"
-            controls
             :src="item.url"
-            autoplay
-            disablePictureInPicture
-            controlsList="nodownload noplaybackrate"
+            control
+            :volume="0.6"
+            :controlBtns="['audioTrack', 'volume', 'speedRate']"
           />
         </template>
       </div>
@@ -110,6 +108,7 @@
 <script>
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import 'swiper/css';
+  import { videoPlay as VideoPlay } from 'vue3-video-play/lib';
   import { parseUrlParams } from '@/utils';
 
   import ModelIcon from '@hotspot/assets/images/icon-model@2x.png';
@@ -128,6 +127,7 @@
     components: {
       Swiper,
       SwiperSlide,
+      VideoPlay,
     },
     data() {
       return {
@@ -188,17 +188,7 @@
       },
     },
     mounted() {
-      this.getData().then(() => {
-        this.$nextTick(() => {
-          const list = document.getElementsByTagName('video');
-          for (let i = 0; i < list.length; i++) {
-            const item = list[i];
-            item.addEventListener('contextmenu', (e) => {
-              e.preventDefault();
-            });
-          }
-        });
-      });
+      this.getData();
     },
     methods: {
       async getData() {