修改视频主页视频

src/store/Video/index.ts

@@ -6,7 +6,8 @@ export const useVideo = defineStore("model", {
     return {
       currentBuild: {} as buildingType,
       buildList: [] as buildingType[],
-      isVideo: false
+      isVideo: false,
+      isVideoHome: true
     };
   },
   // 相当于计算属性

src/view/bldgMap/detail/index.vue

@@ -381,6 +381,7 @@ onMounted(async () => {
       letter-spacing: 2px;
       font-weight: bold;
       margin-top: 15px;
+      white-space: pre-wrap;
     }
 
     .ellipsis {

src/view/bldgVideo/index.vue

@@ -37,6 +37,7 @@ const newModelList = computed(() => {
 
 nextTick(() => {});
 onMounted(() => {
+  //视频自动播放
   currentScene.value = newModelList.value[0];
   var swiperRef = new Swiper(".main-slider", {
     slidesPerView: 1.9,
@@ -107,6 +108,9 @@ onMounted(() => {
   });
 });
 
+// home视频开关
+const isHomeVideo = ref(true);
+
 watch(currentIndex, (newVale: any) => {
   currentScene.value = newModelList.value[newVale];
   // console.log(currentScene.value.fullName);
@@ -188,6 +192,40 @@ watch(currentIndex, (newVale: any) => {
       </div>
     </div>
   </div>
+  <!-- 视频播放窗口 -->
+  <div class="video-top" v-if="isHomeVideo">
+    <video
+      id="videoHome"
+      src="https://houseoss.4dkankan.com/project/yifangyice2/video/home.mp4"
+      @ended="
+        () => {
+          isHomeVideo = false;
+        }
+      "
+      autoplay
+      controls
+    ></video>
+    <div
+      class="close-icon"
+      @click="
+        () => {
+          isHomeVideo = false;
+        }
+      "
+    >
+      跳过
+    </div>
+    <!-- <img
+      class="close-icon"
+      src="@/assets/img/map/close.png"
+      alt=""
+      @click="
+        () => {
+          isHomeVideo = false;
+        }
+      "
+    /> -->
+  </div>
   <Tabbar />
 </template>
 
@@ -385,4 +423,34 @@ watch(currentIndex, (newVale: any) => {
     }
   }
 }
+.video-top {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  video {
+    width: 100vw;
+    margin: auto auto 0 auto;
+  }
+  .close-icon {
+    border-radius: 50px;
+    border: 1px solid white;
+    color: white;
+    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15vw;
+    height: 25px;
+    margin: auto;
+    margin-top: 10px;
+  }
+}
 </style>