pc端热点详情-视频热点专用

src/components/HotspotDetail.vue

@@ -399,7 +399,6 @@ export default {
   height: 100%;
   background: rgba(20, 20, 20, 0.70);
   backdrop-filter: blur(4px);
-  z-index: 11;
   > .wrapper {
     position: absolute;
     left: 50%;

src/components/HotspotDetailVideo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="hotspot-detail-video">
+    <button
+      class="close"
+      @click="$emit('close')"
+    >
+      <img
+        class=""
+        src="@/assets/images/close-white.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
+    <h1 :title="title">
+      {{ title }}
+    </h1>
+
+    <video
+      :src="url"
+      controls
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'title',
+    },
+    url: {
+      type: String,
+      default: require('@/assets/videos/swkk-fade-in-video.mp4'),
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(20, 20, 20, 0.70);
+  backdrop-filter: blur(4px);
+  > button.close {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    top: 44px;
+    right: 44px;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > h1 {
+    position: absolute;
+    top: 95px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 100%;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+    font-size: 32px;
+    color: #E5DFCD;
+  }
+  > video {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 1138px;
+    height: 651px;
+    background: #E5DFCD;
+    border-top: solid 6px #A10E0C;
+    border-bottom: solid 6px #A10E0C;
+  }
+}
+</style>

src/views/SwkkView.vue

@@ -245,6 +245,12 @@
       :scene-code="sceneCode"
       @close="isShowDetail = false"
     />
+    <HotspotDetailVideo
+      class="hotspot-detail"
+      :style="{
+        zIndex: $globalConfig.zIndex.swkkHotspotDetail.self
+      }"
+    />
 
     <HotspotList
       v-if="isShowHotspotList"
@@ -261,6 +267,7 @@
 
 <script>
 import HotspotDetail from "@/components/HotspotDetail.vue"
+import HotspotDetailVideo from "@/components/HotspotDetailVideo.vue"
 import HotspotList from "@/components/HotspotList.vue"
 
 import Swiper from 'swiper/swiper-bundle.esm.js'
@@ -270,6 +277,7 @@ export default {
   components: {
     HotspotDetail,
     HotspotList,
+    HotspotDetailVideo,
   },
   data() {
     return {