fix：细节修改

src/App.vue

@@ -25,6 +25,20 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+
+@font-face {
+  font-family: "sanjicusongpinyinti";
+  /* 字体名称 */
+  src: url("../src/assets/fonts/sanjicusongpinyinti.ttf");
+  /* 字体文件相对路径 */
+}
+
+@font-face {
+  font-family: "heitipinyin";
+  /* 字体名称 */
+  src: url("../src/assets/fonts/heitipinyin.ttf");
+  /* 字体文件相对路径 */
+}
 .all {
   width: 100%;
   height: 100%;
@@ -32,5 +46,7 @@ onMounted(() => {
   ::-webkit-scrollbar {
     display: none; /* Chrome Safari */
   }
+
+
 }
 </style>

src/components/Music.vue

@@ -5,25 +5,34 @@ const store = useVideo();
 const stateAu = ref(false);
 const isShow = ref(true)
 
+const lastState = ref(false)
+
+
 store.$subscribe((mutation: any, state: any) => {
-  var audio = document.getElementById("music1");
 
-  if (!state.isShowBGM) {
-    isShow.value = false
-    stateAu.value = false;
-    audio.pause();
-  } else if (state.isShowBGM) {
-    isShow.value = true
-    if (state.isVideo) {
+  if (state.currentIndex == store.currentIndex) {
+    var audio = document.getElementById("music1");
+    if (!state.isShowBGM) {
+      isShow.value = false
       stateAu.value = false;
       audio.pause();
-    } else {
-      stateAu.value = true;
-      audio.play();
+    } else if (state.isShowBGM) {
+      isShow.value = true
+      console.log('是否播视频', state.isVideo)
+
+      if (state.isVideo) {
+        stateAu.value = false;
+        audio.pause();
+      } else {
+        console.log('不播视频')
+        if (lastState.value) {
+          stateAu.value = true;
+          audio.play();
+        }
+      }
     }
   }
 
-
 });
 
 const getAssetURL = (image: string) => {
@@ -32,12 +41,14 @@ const getAssetURL = (image: string) => {
 
 const onChange = () => {
   stateAu.value = !stateAu.value;
-  store.isVideo = stateAu.value
+  // store.isVideo = stateAu.value
   var audio = document.getElementById("music1");
   if (stateAu.value) {
     audio.play();
+    lastState.value = true
   } else {
     audio.pause();
+    lastState.value = false
   }
 };
 

src/store/Map/index.ts

@@ -5,7 +5,8 @@ export const useMap = defineStore("map", {
   state: () => {
     return {
       buildingList:  [] as buildingType[],
-      currentScene: {}
+      currentScene: {},
+      currentIndex: 0,
     };
   },
   // 相当于计算属性

src/store/Video/index.ts

@@ -9,6 +9,7 @@ export const useVideo = defineStore("model", {
       isVideo: false,
       isVideoHome: true,
       isShowBGM: true,
+      currentIndex:null
     };
   },
   // 相当于计算属性

src/view/bldgMap/detail/index.vue

@@ -14,12 +14,13 @@ const isShow = ref(false);
 
 const isExplain = ref(false)
 
-const goVr = (code: string) => {
+const goVr = (code: string, is4dkk: string) => {
   // console.log(code);
   router.push({
     path: "/bldgMap/detail/scene",
     query: {
       code: code,
+      is4dkk: is4dkk
     },
   });
 };
@@ -165,7 +166,7 @@ onMounted(async () => {
       </div>
       <div class="bottom-name" @touchmove="touchMove" @touchstart="handletouchstart">
         <!-- 拼音 -->
-        <div class="bottom-name-pinyin">{{ currentScene.pinyin }}</div>
+        <!-- <div class="bottom-name-pinyin">{{ currentScene.pinyin }}</div> -->
         <!-- 汉字 -->
         <div class="bottom-name-name">
           {{ currentScene.fullName }}
@@ -204,7 +205,7 @@ onMounted(async () => {
       </div>
     </div>
     <img v-if="currentScene.sceneId != ''" class="go-vr" src="@/assets/img/map/goVr.png" alt=""
-      @click="goVr(currentScene.sceneId)" />
+      @click="goVr(currentScene.sceneId, currentScene.is4dkk)" />
     <div class="big-img-box" v-if="isShow">
       <div class="img-box">
         <img class="content-img" :src="currentScene.swiperImage[swiperActiveIndex]" alt="" />
@@ -362,6 +363,7 @@ onMounted(async () => {
         font-weight: bold;
         position: relative;
         z-index: 2;
+        font-family: 'sanjicusongpinyinti';
       }
 
       .bg {

src/view/bldgMap/detail/scene/index.vue

@@ -7,25 +7,21 @@ const baseURL = ref('' as any)
 const store = useVideo();
 onMounted(() => {
   sceneId.value = route.query.code;
-  if(sceneId.value.includes('KJ-')){
-    baseURL.value =`https://www.4dkankan.com/spg.html?m=${sceneId.value}&lang=zh`
-  }else {
-    baseURL.value =`https://www.4dmodel.com/SuperTwo/index.html?m=${sceneId.value}`
+  if (route.query.is4dkk) {
+    baseURL.value = `https://www.4dkankan.com/spg.html?m=${sceneId.value}&lang=zh`
+  } else {
+    baseURL.value = `https://www.4dmodel.com/SuperTwo/index.html?m=${sceneId.value}`
   }
   store.isShowBGM = false
 });
-onUnmounted(()=> {
+onUnmounted(() => {
   store.isShowBGM = true
 })
 </script>
 
 <template>
   <div class="scene">
-    <iframe
-      class="irf"
-      :src="`${baseURL}`"
-      frameborder="0"
-    ></iframe>
+    <iframe class="irf" :src="`${baseURL}`" frameborder="0"></iframe>
   </div>
 </template>
 
@@ -34,6 +30,7 @@ onUnmounted(()=> {
   width: 100%;
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
+
   .irf {
     width: 100%;
     height: 100%;

src/view/bldgMap/index.vue

@@ -8,10 +8,12 @@ import Swiper from "swiper";
 
 import DownIcon from "@/assets/img/map/down.png";
 import UpIcon from "@/assets/img/map/up.png";
+import { useMap } from "@/store/Map";
 
 const route = useRoute();
 // 隐藏轮播
 const isShow = ref(true);
+const store = useMap()
 
 const swiperRef = ref({});
 
@@ -85,6 +87,7 @@ onMounted(() => {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
     },
+    initialSlide: store.currentIndex ? store.currentIndex : 0,
     pagination: {
       el: ".swiper-pagination",
       clickable: true,
@@ -93,6 +96,7 @@ onMounted(() => {
       slideChange: function (swiper: any) {
         nextTick(() => {
           currentScene.value = ModelList[swiper.activeIndex];
+          store.currentIndex = swiper.activeIndex;
           viewTop.value = currentScene.value.viewTop;
           viewLeft.value = currentScene.value.viewLeft;
         });
@@ -110,15 +114,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    id="background"
-    class="map"
-    :style="{
-      backgroundPosition: `${viewTop} ${viewLeft}`,
-    }"
-    @touchmove="touchMove"
-    @touchstart="handletouchstart"
-  >
+  <div id="background" class="map" :style="{
+    backgroundPosition: `${viewTop} ${viewLeft}`,
+  }" @touchmove="touchMove" @touchstart="handletouchstart">
     <!-- 头部 -->
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
     <!-- 行政区选择 -->
@@ -130,24 +128,12 @@ onMounted(() => {
     <div class="swiper-box" v-show="isShow">
       <div class="swiper-container" ref="swiperRef">
         <div class="swiper-wrapper">
-          <div
-            class="swiper-slide option-item"
-            v-for="(item, index) in ModelList"
-            :key="index"
-            @click="goDetail(item.code)"
-          >
+          <div class="swiper-slide option-item" v-for="(item, index) in ModelList" :key="index"
+            @click="goDetail(item.code)">
             <!-- 边框图片 -->
-            <img
-              class="border-img"
-              :src="`${baseURL}/thumbnail/border.png`"
-              alt=""
-            />
+            <img class="border-img" :src="`${baseURL}/thumbnail/border.png`" alt="" />
             <!-- 普通图片 -->
-            <img
-              class="nornal-img"
-              :src="getAssetURL(`${item.name}.png`)"
-              alt=""
-            />
+            <img class="nornal-img" :src="getAssetURL(`${item.name}.png`)" alt="" />
             <div class="disc-box">
               <div class="disc-box-title">
                 <span>·</span>{{ item.fullName }}
@@ -158,16 +144,10 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <img
-      class="img-icon"
-      :src="isShow ? DownIcon : UpIcon"
-      alt=""
-      @click="
-        () => {
-          isShow = !isShow;
-        }
-      "
-    />
+    <img class="img-icon" :src="isShow ? DownIcon : UpIcon" alt="" @click="() => {
+        isShow = !isShow;
+      }
+      " />
     <!-- 建筑列表 -->
     <!-- <img
       class="architecture-img"
@@ -217,6 +197,7 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
+
     &-name {
       font-size: 0.9rem;
       font-weight: bold;
@@ -224,6 +205,7 @@ onMounted(() => {
       margin-right: 5px;
       letter-spacing: 2px;
     }
+
     &-dics {
       font-size: 0.6rem;
       color: #948973;
@@ -252,6 +234,7 @@ onMounted(() => {
       height: 100%;
       z-index: 2;
     }
+
     .nornal-img {
       border-radius: 40px;
     }
@@ -264,14 +247,17 @@ onMounted(() => {
       font-size: 0.6rem;
       bottom: 5vw;
       left: 8%;
+
       &-title {
         font-weight: bold;
         font-size: 1rem;
+
         span {
           font-size: 1.5rem;
           margin-right: 5px;
         }
       }
+
       // &-title:before {
       //   content: "";
       //   position: absolute;
@@ -290,7 +276,8 @@ onMounted(() => {
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4; /* 这里是超出几行省略 */
+        -webkit-line-clamp: 4;
+        /* 这里是超出几行省略 */
         letter-spacing: 2px;
       }
     }
@@ -305,6 +292,7 @@ onMounted(() => {
     transform: translateX(-50%);
   }
 }
+
 .architecture-img {
   width: 20%;
   position: relative;

src/view/bldgPanorama/detail/index.vue

@@ -35,7 +35,7 @@ const getData = () => {
     currentScene.value = ModelList.find((item: any) => {
       return route.query.name === item.name;
     });
-    currentArea.value = showList.value.find((item:any) => {
+    currentArea.value = showList.value.find((item: any) => {
       return item.area === currentScene.value.region
     })
   } else {
@@ -43,13 +43,6 @@ const getData = () => {
     currentScene.value = currentArea.value.list[0];
   }
 
-  console.log(
-    showList.value,
-    newDataList,
-    route.query.name,
-    currentArea.value,
-    currentScene.value
-  );
 };
 
 const currentAreaChange = (item: any) => {
@@ -64,51 +57,31 @@ const isShow = ref(true);
 
 onMounted(() => {
   getData();
+
 });
 </script>
 
 <template>
   <div class="detail">
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
-    <iframe
-      class="ifr"
-      :src="`https://www.4dkankan.com/panorama/showMobile.html?id=${currentScene.birdId}`"
-      frameborder="0"
-    ></iframe>
+    <iframe class="ifr" :src="`https://www.4dkankan.com/panorama/showMobile.html?id=${currentScene.birdId}`"
+      frameborder="0"></iframe>
     <div class="mini-tabbar">
       <div class="mini-tabbar-top">
         <div class="top-left">
-          <div
-            class="top-item"
-            v-for="(item, index) in showList"
-            :key="index"
-            @click="currentAreaChange(item)"
-          >
+          <div class="top-item" v-for="(item, index) in showList" :key="index" @click="currentAreaChange(item)">
             {{ item.area }}
           </div>
         </div>
-        <img
-          :src="isShow ? DownIcon : UpIcon"
-          alt=""
-          @click="
-            () => {
-              isShow = !isShow;
-            }
-          "
-        />
+        <img :src="isShow ? DownIcon : UpIcon" alt="" @click="() => {
+            isShow = !isShow;
+          }
+          " />
       </div>
       <div class="mini-tabbar-bottom" v-show="isShow">
-        <div
-          class="bottom-item"
-          v-for="(item, index) in currentArea.list"
-          :key="index"
-          v-show="item.birdId != ''"
-          @click="sceneChange(item)"
-        >
-          <img
-            :src="item.swiperImage[0]"
-            alt=""
-          />
+        <div class="bottom-item" v-for="(item, index) in currentArea.list" :key="index" v-show="item.birdId != ''"
+          @click="sceneChange(item)">
+          <img :src="item.swiperImage[0]" alt="" />
           <div class="item-name">{{ item.fullName }}</div>
         </div>
       </div>
@@ -123,6 +96,7 @@ onMounted(() => {
   height: calc(var(--vh, 1vh) * 100);
   position: relative;
   overflow: hidden;
+
   .map-top {
     width: 100%;
     height: 8vh;
@@ -133,10 +107,12 @@ onMounted(() => {
     letter-spacing: 3px;
     color: #4d4d4d;
   }
+
   .ifr {
     width: 100%;
     height: 100%;
   }
+
   .mini-tabbar {
     width: 100%;
     // height: 22vh;
@@ -145,7 +121,7 @@ onMounted(() => {
     bottom: 0;
     // border: 1px dotted white;
     box-sizing: border-box;
-    padding: 10px 15px;
+    padding: 5px 15px;
 
     transition: height 2s;
 
@@ -153,6 +129,7 @@ onMounted(() => {
       width: 100%;
       display: flex;
       align-items: center;
+
       .top-left {
         max-width: 90%;
         overflow: auto;
@@ -162,25 +139,27 @@ onMounted(() => {
         .top-item {
           font-size: 0.9rem;
           width: 21%;
-          height: 30px;
+          height: 25px;
           background: url(/src\assets\img\panorama\areabg.png);
           background-size: 100% 100%;
           text-align: center;
-          line-height: 30px;
+          line-height: 25px;
           color: #685e47;
           margin-right: 10px;
           font-weight: bold;
         }
       }
+
       img {
-        width: 20px;
-        height: 20px;
+        width: 15px;
+        margin-left: 2%;
       }
     }
 
     &-bottom {
       white-space: nowrap;
       overflow-x: scroll;
+
       // 隐藏滚动条
       &::-webkit-scrollbar {
         display: none;
@@ -193,18 +172,22 @@ onMounted(() => {
         width: 23%;
         height: 18vh;
         margin-top: 10px;
+
         img {
           width: 100%;
           height: 85%;
           object-fit: cover;
         }
+
         .item-name {
           width: 100%;
           text-align: center;
           font-size: 0.7rem;
 
-          text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
-          white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
+          text-overflow: ellipsis;
+          /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
+          white-space: nowrap;
+          /* nowrap:规定段落中的文本不进行换行   */
           overflow: hidden;
           color: white;
         }

src/view/bldgPanorama/index.vue

@@ -2,9 +2,8 @@
 import Tabbar from "@/components/Tabbar.vue";
 import { countyMapData } from "@/assets/data/Model";
 import { usePanorama } from "@/store/Panorama/index";
-import { copyFileSync } from "fs";
 
-const currentIndex = ref(3);
+const currentIndex = ref(0);
 const router = useRouter();
 const store = usePanorama();
 const goDetail = (param: string | number) => {
@@ -19,7 +18,6 @@ const goDetail = (param: string | number) => {
       },
     });
   }
-  // console.log(currentIndex.value);
 };
 
 const getAssetURL = (image: string) => {
@@ -31,6 +29,8 @@ watch(currentIndex, (newVale: any) => {
 });
 
 onMounted(() => {
+  console.log(store.currentIndex)
+  currentIndex.value = store.currentIndex == null ? 0 : store.currentIndex;
 });
 </script>
 
@@ -40,26 +40,17 @@ onMounted(() => {
     <div v-for="(item, index) in countyMapData" :key="index">
       <div v-if="index === currentIndex">
         <img :src="getAssetURL(item.bgImg)" alt="" id="box" />
-        <div
-          class="box-1"
-          v-for="(label, index2) in item.labels"
-          :key="index2"
-          :style="{
-            top: label.top,
-            left: label.left,
-            height: label.height ? label.height : '10rem',
-            width: label.width ? label.width : 'auto',
-          }"
-        >
-          <div
-            class="title"
-            @click="goDetail(currentIndex === 0 ? index2 : label.name)"
-            :style="{
-              transform: label.width
-                ? `translate(${label.width},-50%)`
-                : 'translate(-50%,-50%)',
-            }"
-          >
+        <div class="box-1" v-for="(label, index2) in item.labels" :key="index2" :style="{
+          top: label.top,
+          left: label.left,
+          height: label.height ? label.height : '10rem',
+          width: label.width ? label.width : 'auto',
+        }">
+          <div class="title" @click="goDetail(label.name)" :style="{
+            transform: label.width
+              ? `translate(${label.width},-50%)`
+              : 'translate(-50%,-50%)',
+          }">
             {{ `${label.fullName ? label.fullName : label.name}` }}
           </div>
           <div class="dian-small"></div>
@@ -67,22 +58,13 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="option-box" v-show="false">
-      <div
-        v-for="(item, index) in countyMapData"
-        :key="index"
-        class="btn"
-        :style="{ background: index == currentIndex ? '#fff' : '#767265' }"
-        @click="
-          () => {
-            currentIndex = index;
-          }
-        "
-      >
-        <div
-          class="circle"
-          :class="{ 'circle-active': index === currentIndex }"
-        >
+    <div class="option-box">
+      <div v-for="(item, index) in countyMapData" :key="index" class="btn"
+        :style="{ background: index == currentIndex ? '#fff' : '#767265' }" @click="() => {
+          currentIndex = index;
+        }
+          ">
+        <div class="circle" :class="{ 'circle-active': index === currentIndex }">
           {{ item.name }}
         </div>
       </div>
@@ -97,6 +79,7 @@ onMounted(() => {
   height: 100%;
   overflow: auto;
   position: relative;
+
   img {
     width: 100%;
     height: 100%;
@@ -119,11 +102,13 @@ onMounted(() => {
       background-image: url(/src\assets\img\map\regionBg.jpg);
       background-size: 100% 100%;
       padding: 8px 10px;
-      font-size: 1rem;
+      font-size: 0.8rem;
       white-space: nowrap;
       position: absolute;
       transform: translate(-50%, -50%);
+      z-index: 2;
     }
+
     .dian-small {
       width: 8px;
       height: 8px;
@@ -151,11 +136,14 @@ onMounted(() => {
 
     @keyframes fadenum {
       from {
-        transform: scale(0.8); /*放大1.1倍*/
+        transform: scale(0.8);
+        /*放大1.1倍*/
         opacity: 0.5;
       }
+
       to {
-        transform: scale(1); /*放大1.1倍*/
+        transform: scale(1);
+        /*放大1.1倍*/
         opacity: 1;
       }
     }
@@ -198,13 +186,13 @@ onMounted(() => {
     bottom: 0;
     background: rgba(83, 83, 83, 0.384);
     display: flex;
-    justify-content: space-between;
+    justify-content: left;
     padding: 10px 10px 50px 10px;
     box-sizing: border-box;
 
     .btn {
       border: 2px solid white;
-      width: 4rem;
+      width: 6rem;
       text-align: center;
       line-height: 2rem;
       height: 2rem;
@@ -215,21 +203,27 @@ onMounted(() => {
       position: relative;
       overflow: hidden;
       box-shadow: 0 0 10px #767265;
+      margin-right: 10px;
+
 
       .circle {
-        width: 3.8rem;
-        height: 3.8rem;
+        width: 5.8rem;
+        height: 5.8rem;
         background: white;
         border-radius: 50%;
-        line-height: 3.8rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
       }
+
       .btn-active {
         background: white !important;
       }
+
       .circle-active {
         background: #767265;
         color: white;

src/view/bldgVideo/detail/index.vue

@@ -16,21 +16,15 @@ onMounted(() => {
   currentVedioName.value = route.query.name;
   store.isShowBGM = false
 });
-onUnmounted(()=> {
+onUnmounted(() => {
   store.isShowBGM = true
 })
 </script>
 
 <template>
   <div class="detail">
-    <video
-      class="vedio"
-      :src="`${baseURL}/audio/${currentVedioName}.mp4`"
-      @play="handlePlayVideo"
-      @pause="handlePauseVideo"
-      preload
-      controls
-    ></video>
+    <video class="vedio" :src="`${baseURL}/audio/${currentVedioName}`" @play="handlePlayVideo" @pause="handlePauseVideo"
+      playsinline="true" x5-video-player-type="h5" preload controls></video>
   </div>
 </template>
 
@@ -41,6 +35,7 @@ onUnmounted(()=> {
   height: calc(var(--vh, 1vh) * 100);
   background: black;
   display: flex;
+
   .vedio {
     width: 100%;
   }

src/view/bldgVideo/index.vue

@@ -6,9 +6,13 @@ import ModelList, { baseURL } from "@/assets/data/Model";
 
 import Page from "@/assets/img/map/page.png";
 import PageAc from "@/assets/img/map/pageAc.png";
+import { useVideo } from '@/store/Video';
+
 
 const router = useRouter();
 
+const store = useVideo();
+
 const currentScene = ref({
   name: "义德堂",
   adress: "芜湖市新芜区滨江北路",
@@ -35,7 +39,7 @@ const newModelList = computed(() => {
   });
 });
 
-nextTick(() => {});
+nextTick(() => { });
 onMounted(() => {
   //视频自动播放
   currentScene.value = newModelList.value[0];
@@ -55,6 +59,7 @@ onMounted(() => {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
     },
+    // initialSlide: store.currentIndex == null ? 0 : store.currentIndex,
     // 到分页器
     pagination: {
       el: ".swiper-pagination",
@@ -69,6 +74,7 @@ onMounted(() => {
       slideChange: function (swiper: any) {
         nextTick(() => {
           const index = swiper.activeIndex;
+          store.currentIndex = index
           currentIndex.value = index;
           swiperRef2.slideTo(index); // 这里就报错 没有swiper2这个东西
         });
@@ -80,6 +86,7 @@ onMounted(() => {
     spaceBetween: 30,
     effect: "coverflow",
     centeredSlides: true,
+    // initialSlide: store.currentIndex == null ? 0 : store.currentIndex,
     coverflowEffect: {
       rotate: 50,
       stretch: 10,
@@ -109,7 +116,7 @@ onMounted(() => {
 });
 
 // home视频开关
-const isHomeVideo = ref(true);
+const isHomeVideo = ref(store.currentIndex == null ? true : false);
 
 watch(currentIndex, (newVale: any) => {
   currentScene.value = newModelList.value[newVale];
@@ -125,7 +132,7 @@ watch(currentIndex, (newVale: any) => {
     <div class="content">
       <div class="info">
         <!-- currentIndex在这里试 -->
-        <div class="info-title" v-if="currentIndex >= 0">
+        <div class="info-title" v-show="currentIndex >= 0">
           {{ currentScene.fullName }}
         </div>
         <div class="info-adresss">
@@ -136,30 +143,14 @@ watch(currentIndex, (newVale: any) => {
       <div class="option-box">
         <div class="swiper-container main-slider" ref="swiperRef">
           <div class="swiper-wrapper">
-            <div
-              class="swiper-slide option-item"
-              v-for="(item, index) in newModelList"
-              :key="index"
-              @click="goToVodio(item.name)"
-            >
+            <div class="swiper-slide option-item" v-for="(item, index) in newModelList" :key="index"
+              @click="goToVodio(item.videoName)">
               <!-- 边框图片 -->
-              <img
-                class="border-img"
-                :src="`${baseURL}/thumbnail/border.png`"
-                alt=""
-              />
+              <img class="border-img" :src="`${baseURL}/thumbnail/border.png`" alt="" />
               <!-- 普通图片 -->
-              <img
-                class="nornal-img"
-                :src="getAssetURL(`${item.name}.png`)"
-                alt=""
-              />
+              <img class="nornal-img" :src="getAssetURL(`${item.name}.png`)" alt="" />
               <!-- 播放图片 -->
-              <img
-                class="play-icon"
-                src="../../assets/img/video/play.png"
-                alt=""
-              />
+              <img class="play-icon" src="../../assets/img/video/play.png" alt="" />
             </div>
           </div>
           <!-- 分页器-->
@@ -174,17 +165,12 @@ watch(currentIndex, (newVale: any) => {
       <div class="module-box">
         <div class="swiper-container sub-slider" ref="swiperRef2">
           <div class="swiper-wrapper">
-            <div
-              class="swiper-slide option-item active"
-              v-for="(item, index) in newModelList"
-              :key="index"
-              :style="{
-                background: 'none',
-                boxShadow: 'none',
-                display: 'flex',
-                justifyContent: 'center',
-              }"
-            >
+            <div class="swiper-slide option-item active" v-for="(item, index) in newModelList" :key="index" :style="{
+              background: 'none',
+              boxShadow: 'none',
+              display: 'flex',
+              justifyContent: 'center',
+            }">
               <img :src="`${baseURL}/image/module/${item.code}.png`" alt="" />
             </div>
           </div>
@@ -194,25 +180,15 @@ watch(currentIndex, (newVale: any) => {
   </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;
-        }
-      "
-    >
+    <video id="videoHome" playsinline="true" x5-video-player-type="h5"
+      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
@@ -294,6 +270,7 @@ watch(currentIndex, (newVale: any) => {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+
   .map-top {
     width: 100%;
     height: 8vh;
@@ -305,17 +282,20 @@ watch(currentIndex, (newVale: any) => {
     color: #4d4d4d;
     // position: absolute;
   }
+
   .bg-top {
     height: 40vh;
     width: 100%;
     background: linear-gradient(to bottom, #484848 80%, #464646ab);
   }
+
   .bg-bottom {
     height: calc(100% - 40vh);
     width: 100%;
     // background: green;
     background: #fffff7;
   }
+
   .content {
     position: absolute;
     top: 0;
@@ -326,15 +306,18 @@ watch(currentIndex, (newVale: any) => {
     max-width: 100vw;
     max-height: 100vh;
     overflow: hidden;
+
     // background: rgba(255, 0, 0, 0.199);
     .info {
       margin-top: 30px;
       margin-left: 15px;
+
       &-title {
         font-size: 1.4rem;
         font-weight: 800;
         letter-spacing: 4px;
       }
+
       &-adresss {
         font-size: 0.8rem;
         font-weight: 400;
@@ -358,6 +341,7 @@ watch(currentIndex, (newVale: any) => {
 
     .option-box {
       margin-top: 3vh;
+
       .option-item {
         color: black;
         // background: url(/src\assets\img\video\itembg.png);
@@ -384,6 +368,7 @@ watch(currentIndex, (newVale: any) => {
           height: 100%;
           z-index: 2;
         }
+
         .nornal-img {
           // border-radius: 40px;
           // mask-image: linear-gradient(
@@ -392,6 +377,7 @@ watch(currentIndex, (newVale: any) => {
           //   rgba(0, 0, 0, 0) 50%
           // );
         }
+
         .play-icon {
           width: 20vw;
           height: 20vw;
@@ -401,8 +387,10 @@ watch(currentIndex, (newVale: any) => {
         }
       }
     }
+
     .module-box {
       margin-top: -16%;
+
       img {
         height: 72%;
       }
@@ -412,10 +400,12 @@ watch(currentIndex, (newVale: any) => {
         transform: translate3d(0, 20px, 0);
       }
     }
+
     .pagination {
       max-width: 100%;
       display: flex;
       justify-content: center;
+
       img {
         width: 10px;
         margin-right: 3px;
@@ -423,6 +413,7 @@ watch(currentIndex, (newVale: any) => {
     }
   }
 }
+
 .video-top {
   width: 100%;
   height: 100%;
@@ -435,10 +426,12 @@ watch(currentIndex, (newVale: any) => {
   position: absolute;
   top: 0;
   left: 0;
+
   video {
     width: 100vw;
     margin: auto auto 0 auto;
   }
+
   .close-icon {
     border-radius: 50px;
     border: 1px solid white;