feat:新增10个建筑资料

src/components/Music.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useVideo } from "@/store/Video/index";
-const router = useRouter();
 const store = useVideo();
 
 const stateAu = ref(false);
+const isShow = ref(true)
 
 store.$subscribe((mutation: any, state: any) => {
   var audio = document.getElementById("music1");
@@ -14,6 +14,22 @@ store.$subscribe((mutation: any, state: any) => {
     stateAu.value = true;
     audio.play();
   }
+  if (!state.isShowBGM) {
+    isShow.value = false
+    stateAu.value = false;
+    audio.pause();
+  } else if (state.isShowBGM) {
+    isShow.value = true
+    if (state.isVideo) {
+      stateAu.value = true;
+      audio.play();
+    } else {
+      stateAu.value = false;
+      audio.pause();
+    }
+  }
+
+
 });
 
 const getAssetURL = (image: string) => {
@@ -22,37 +38,25 @@ const getAssetURL = (image: string) => {
 
 const onChange = () => {
   stateAu.value = !stateAu.value;
+  store.isVideo = stateAu.value
   var audio = document.getElementById("music1");
   if (stateAu.value) {
-    // // console.log("play");
     audio.play();
   } else {
-    // // console.log("pause");
     audio.pause();
   }
 };
 
-// onMounted(() => {
-//   if (audio && audio.paused) {
-//     audio.play();
-//   }
-// });
+onMounted(() => {
+
+
+});
 </script>
 
 <template>
-  <div class="music" @click="onChange">
-    <audio
-      src="./audio/黄扬苏幕 - 鸠兹春盛.mp3"
-      controls
-      loop
-      id="music1"
-      hidden
-      playsinline
-    ></audio>
-    <img
-      :src="stateAu ? getAssetURL('play.png') : getAssetURL('pause.png')"
-      alt=""
-    />
+  <div class="music" @click="onChange" v-show="isShow">
+    <audio src="./audio/黄扬苏幕 - 鸠兹春盛.mp3" controls loop id="music1" hidden playsinline></audio>
+    <img :src="stateAu ? getAssetURL('play.png') : getAssetURL('pause.png')" alt="" />
   </div>
 </template>
 
@@ -62,9 +66,11 @@ const onChange = () => {
   position: fixed;
   top: 10px;
   right: 10px;
+
   .audio-box {
     // display:;
   }
+
   img {
     width: 10vw;
     height: 10vw;

src/store/Video/index.ts

@@ -7,7 +7,8 @@ export const useVideo = defineStore("model", {
       currentBuild: {} as buildingType,
       buildList: [] as buildingType[],
       isVideo: false,
-      isVideoHome: true
+      isVideoHome: true,
+      isShowBGM: true,
     };
   },
   // 相当于计算属性
@@ -18,7 +19,7 @@ export const useVideo = defineStore("model", {
       this.currentBuild = building;
     },
     setBuildList(list: buildingType[]) {
-        this.buildList = list
-    }
+      this.buildList = list;
+    },
   },
 });

src/view/bldgMap/detail/index.vue

@@ -6,12 +6,14 @@ import restaurantList, { hotelList } from "@/assets/data/recommend/index";
 import Swiper from "swiper";
 import "swiper/swiper-bundle.css";
 import { nextTick } from "vue";
-const currentScene = ref({} as ModelType);
+const currentScene = ref({} as any);
 const route = useRoute();
 const router = useRouter();
 
 const isShow = ref(false);
 
+const isExplain = ref(false)
+
 const goVr = (code: string) => {
   // console.log(code);
   router.push({
@@ -28,7 +30,7 @@ const recommendFoods = ref([]);
 const recommendHotels = ref([]);
 
 const lastY = ref(0);
-const bottomHeight = ref("50%");
+const bottomHeight = ref("52%");
 // 手指滑动
 const touchMove = (event: any) => {
   // 左右切换为 X 即可
@@ -38,7 +40,7 @@ const touchMove = (event: any) => {
     bottomHeight.value = 97 + "%";
     return;
   } else if (ty > 20) {
-    bottomHeight.value = 50 + "%";
+    bottomHeight.value = 52 + "%";
     return;
   }
 };
@@ -70,6 +72,7 @@ const itRecommend = () => {
         return item.id == currentScene.value.recommend.food[index];
       });
       recommendFoods.value.push(res);
+
     });
     // 获取推荐信息——酒店
     recommendHotelIndexs.forEach((index: number) => {
@@ -78,16 +81,35 @@ const itRecommend = () => {
       });
       recommendHotels.value.push(res);
     });
+
+    console.log('推荐信息', recommendFoods.value, recommendHotels.value)
   }
   // console.log(recommendFoods.value, recommendHotels.value);
 };
 
+const explainAudioChange = () => {
+  isExplain.value = !isExplain.value
+  const audioDom = document.getElementById('explainAudio')
+  if (isExplain.value) {
+    audioDom ? audioDom.play() : ''
+  } else {
+    audioDom ? audioDom.pause() : ''
+  }
+
+}
+
+const isShowRecommend = ref(false)
+
 onMounted(async () => {
   await nextTick(() => {
     currentScene.value = ModelList.find((item: ModelType) => {
       return item.code === route.query.code;
     });
-    itRecommend();
+    console.log(currentScene.value)
+    if (currentScene.value.recommend.food.length > 0 || currentScene.value.recommend.hotel.length > 0) {
+      isShowRecommend.value = true
+      itRecommend();
+    }
   });
 
   var swiper = new Swiper(".mySwiper", {
@@ -108,60 +130,47 @@ onMounted(async () => {
 
 <template>
   <div class="detail">
+    <audio v-show="false" id="explainAudio"
+      :src="`${baseURL}/image/service/explanatoryAudio/${currentScene.name}.mp3`"></audio>
     <div class="top">
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <div
-            class="swiper-slide"
-            v-for="(item, index) in currentScene.swiperImage"
-            :key="index"
-          >
+          <div class="swiper-slide" v-for="(item, index) in currentScene.swiperImage" :key="index">
             <img :src="item" alt="" />
           </div>
         </div>
         <div class="swiper-pagination" slot="pagination"></div>
       </div>
-      <div
-        class="viewBig"
-        @click="
-          () => {
-            isShow = true;
-          }
-        "
-      >
+      <div class="viewBig" @click="() => {
+        isShow = true;
+      }
+        ">
         <div>查看</div>
         <div>大图</div>
       </div>
+      <div class="explainBtn" @click="() => {
+        explainAudioChange()
+      }
+        ">
+        <div>{{ isExplain ? '关闭' : '播放' }}</div>
+        <div>讲解</div>
+      </div>
     </div>
-    <div
-      class="bottom"
-      :style="{
-        height: bottomHeight,
-        overflow: bottomHeight === '97%' ? 'auto' : '',
-      }"
-    >
-      <div
-        class="bottom-top"
-        @touchmove="touchMove"
-        @touchstart="handletouchstart"
-      >
+    <div class="bottom" :style="{
+      height: bottomHeight,
+      overflow: bottomHeight === '97%' ? 'auto' : '',
+    }">
+      <div class="bottom-top" @touchmove="touchMove" @touchstart="handletouchstart">
         <div class="bottom-line"></div>
       </div>
-      <div
-        class="bottom-name"
-        @touchmove="touchMove"
-        @touchstart="handletouchstart"
-      >
+      <div class="bottom-name" @touchmove="touchMove" @touchstart="handletouchstart">
         <!-- 拼音 -->
         <div class="bottom-name-pinyin">{{ currentScene.pinyin }}</div>
         <!-- 汉字 -->
         <div class="bottom-name-name">
           {{ currentScene.fullName }}
-          <div
-            class="bg"
-            v-if="Object.keys(currentScene).length > 0"
-            :style="{ width: currentScene.fullName.length * 1.5 + 'rem' }"
-          ></div>
+          <div class="bg" v-if="Object.keys(currentScene).length > 0"
+            :style="{ width: currentScene.fullName.length * 1.5 + 'rem' }"></div>
         </div>
       </div>
 
@@ -174,64 +183,35 @@ onMounted(async () => {
       <div class="bottom-disc">
         {{ "简介:" + currentScene.disc }}
       </div>
-      <div class="bottom-recommend">
+      <div class="bottom-recommend" v-if="isShowRecommend">
         <div class="bottom-recommend-top">周边推荐</div>
         <div class="bottom-recommend-content">
           <!-- 食物 -->
           <div class="content-item">
-            <div
-              class="item"
-              v-for="(item, index) in recommendFoods"
-              :key="item.id"
-            >
-              <img
-                :src="baseURL + '/image/service/food/' + item.coverName"
-                alt=""
-              />
+            <div class="item" v-for="(item, index) in recommendFoods" :key="item.id">
+              <img :src="baseURL + '/image/service/food/' + item.coverName" alt="" />
               <div>{{ item.name }}</div>
             </div>
           </div>
           <!-- 酒店 -->
           <div class="content-item">
-            <div
-              class="item"
-              v-for="(item, index) in recommendHotels"
-              :key="item.id"
-            >
-              <img
-                :src="baseURL + '/image/service/hotel/' + item.coverImg"
-                alt=""
-              />
+            <div class="item" v-for="(item, index) in recommendHotels" :key="item.id">
+              <img :src="baseURL + '/image/service/hotel/' + item.coverImg" alt="" />
               <div>{{ item.name }}</div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <img
-      v-if="currentScene.sceneId != ''"
-      class="go-vr"
-      src="@/assets/img/map/goVr.png"
-      alt=""
-      @click="goVr(currentScene.sceneId)"
-    />
+    <img v-if="currentScene.sceneId != ''" class="go-vr" src="@/assets/img/map/goVr.png" alt=""
+      @click="goVr(currentScene.sceneId)" />
     <div class="big-img-box" v-if="isShow">
       <div class="img-box">
-        <img
-          class="content-img"
-          :src="currentScene.swiperImage[swiperActiveIndex]"
-          alt=""
-        />
-        <img
-          class="close-icon"
-          src="@/assets/img/map/close.png"
-          alt=""
-          @click="
-            () => {
-              isShow = false;
-            }
-          "
-        />
+        <img class="content-img" :src="currentScene.swiperImage[swiperActiveIndex]" alt="" />
+        <img class="close-icon" src="@/assets/img/map/close.png" alt="" @click="() => {
+          isShow = false;
+        }
+          " />
       </div>
     </div>
   </div>
@@ -246,6 +226,8 @@ onMounted(async () => {
   .top {
     width: 100%;
     height: 50vh;
+    position: relative;
+
     .swiper {
       width: 100%;
       height: 100%;
@@ -277,16 +259,39 @@ onMounted(async () => {
       height: 100%;
       object-fit: cover;
     }
+
     img {
       width: 100%;
       height: 50vh;
       object-fit: cover;
     }
+
     .viewBig {
       position: absolute;
       border-radius: 50%;
-      width: 18vw;
-      height: 18vw;
+      width: 14vw;
+      height: 14vw;
+      border: 1px solid white;
+      background: #515151;
+      font-size: 1.1rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      line-height: 110%;
+      letter-spacing: 2px;
+      color: white;
+      bottom: 25%;
+      right: 5vw;
+      z-index: 2;
+      font-size: 14px;
+    }
+
+    .explainBtn {
+      position: absolute;
+      border-radius: 50%;
+      width: 14vw;
+      height: 14vw;
       border: 1px solid white;
       background: #515151;
       font-size: 1.1rem;
@@ -297,11 +302,13 @@ onMounted(async () => {
       line-height: 110%;
       letter-spacing: 2px;
       color: white;
-      top: 33vh;
+      bottom: 7%;
       right: 5vw;
       z-index: 2;
+      font-size: 14px;
     }
   }
+
   .bottom {
     width: 100%;
     background: var(--color-bg);
@@ -318,12 +325,14 @@ onMounted(async () => {
     transition-duration: 0.2s;
     transition-timing-function: ease-in;
     transition-delay: 0.2s;
+
     .bottom-top {
       width: 100%;
       height: 10px;
       background: rgba(0, 128, 0, 0);
       display: flex;
       justify-content: center;
+
       .bottom-line {
         width: 25%;
         height: 5px;
@@ -338,10 +347,12 @@ onMounted(async () => {
       width: auto;
       margin-top: 10px;
       margin-bottom: 5px;
+
       &-pinyin {
         font-size: 0.6rem;
         width: inherit;
       }
+
       &-name {
         width: inherit;
         font-size: 1.3rem;
@@ -352,6 +363,7 @@ onMounted(async () => {
         position: relative;
         z-index: 2;
       }
+
       .bg {
         height: 2vh;
         position: absolute;
@@ -360,20 +372,24 @@ onMounted(async () => {
         z-index: -1;
       }
     }
+
     &-other {
       font-size: 0.85rem;
       font-weight: bold;
       color: #665e4a;
+
       div {
         margin-top: 10px;
         letter-spacing: 2px;
       }
+
       div:before {
         content: "●";
         margin-right: 5px;
         color: #666;
       }
     }
+
     &-disc {
       font-size: 0.8rem;
       color: #918a6f;
@@ -394,6 +410,7 @@ onMounted(async () => {
       -webkit-line-clamp: 4;
       letter-spacing: 2px;
     }
+
     .bottom-recommend {
       &-top {
         width: 100%;
@@ -402,9 +419,11 @@ onMounted(async () => {
         font-weight: bold;
         margin-top: 20px;
       }
+
       &-content {
         width: 100%;
         margin-top: 10px;
+
         .content-item {
           width: 100%;
           display: flex;
@@ -413,11 +432,13 @@ onMounted(async () => {
           .item {
             width: 43%;
             height: 20vh;
+
             img {
               width: 100%;
               height: 80%;
               object-fit: cover;
             }
+
             div {
               width: 100%;
               font-size: 0.8rem;
@@ -434,6 +455,7 @@ onMounted(async () => {
       }
     }
   }
+
   .go-vr {
     width: 60%;
     height: 50px;
@@ -444,6 +466,7 @@ onMounted(async () => {
     transform: translateX(-50%);
     z-index: 3;
   }
+
   .big-img-box {
     position: absolute;
     z-index: 3;
@@ -452,6 +475,7 @@ onMounted(async () => {
     top: 0;
     left: 0;
     background: #666666db;
+
     .img-box {
       position: absolute;
       width: 80%;
@@ -461,9 +485,11 @@ onMounted(async () => {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .content-img {
         width: 100%;
       }
+
       .close-icon {
         width: 10%;
         margin: auto;

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

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-const sceneId = ref("");
+import { useVideo } from '@/store/Video';
+
+const sceneId = ref("" as any);
 const route = useRoute();
+const baseURL = ref('' as any)
+const store = useVideo();
 onMounted(() => {
   sceneId.value = route.query.code;
-  // console.log(sceneId.value);
+  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}`
+  }
+  store.isShowBGM = false
 });
+onUnmounted(()=> {
+  store.isShowBGM = true
+})
 </script>
 
 <template>
   <div class="scene">
     <iframe
       class="irf"
-      :src="`https://www.4dmodel.com/SuperTwo/index.html?m=${sceneId}`"
+      :src="`${baseURL}`"
       frameborder="0"
     ></iframe>
   </div>

src/view/bldgMap/index.vue

@@ -189,7 +189,7 @@ onMounted(() => {
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   background-image: url(../../assets/img/map/home/mapBg2.jpg);
-  background-size: 200%;
+  background-size: 450%;
   // background-position: 20% 0%;
   overflow: hidden;
   position: relative;

src/view/bldgModel/change/index.vue

@@ -3,8 +3,8 @@ import ModelList from "@/assets/data/Model/index";
 import { ModelType } from "@/types/Model/index";
 const route = useRoute();
 const router = useRouter();
-const showList = ref([]);
-const code = ref("");
+const showList = ref([] as any);
+const code = ref("" as any);
 
 const getData = () => {
   // 处理数据
@@ -23,8 +23,6 @@ const getData = () => {
       list: list,
     });
   });
-
-  // console.log(showList.value, code.value);
 };
 
 // 跳转到模型详情页
@@ -80,24 +78,15 @@ onMounted(() => {
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
     <img class="change-top" src="@/assets/img/model/changebg.png" alt="" />
     <div class="change-bottom">
-      <div
-        class="change-bottom-item"
-        v-for="(item, index) in showList"
-        :key="index"
-      >
+      <div class="change-bottom-item" v-for="(item, index) in showList" :key="index">
         <div class="item-top" @click="goback(item.area)">
           <div class="title">{{ item.area }}</div>
           <div class="line"></div>
           <img src="@/assets/img/model/show.png" alt="" />
         </div>
         <div class="item-bottom">
-          <div
-            class="item-bottom-item"
-            :class="code == item1.code ? 'active' : ''"
-            v-for="(item1, index1) in item.list"
-            :key="index1"
-            @click="goDetail(item1.code)"
-          >
+          <div class="item-bottom-item" :class="code == item1.code ? 'active' : ''" v-for="(item1, index1) in item.list"
+            :key="index1" @click="goDetail(item1.code)">
             {{ item1.fullName }}
           </div>
         </div>
@@ -115,7 +104,8 @@ onMounted(() => {
   // overflow: auto;
 
   ::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
   }
 
   .map-top {
@@ -129,10 +119,12 @@ onMounted(() => {
     color: #4d4d4d;
     position: absolute;
   }
+
   &-top {
     width: 100%;
     border-radius: 30px 30px 0 0;
   }
+
   &-bottom {
     background: #fffff7;
     width: 100%;
@@ -142,8 +134,10 @@ onMounted(() => {
     padding: 15px 25px;
     box-sizing: border-box;
     overflow: auto;
+
     &-item {
       margin-bottom: 25px;
+
       .item-top {
         width: 100%;
         display: flex;
@@ -151,6 +145,7 @@ onMounted(() => {
         align-items: center;
         position: relative;
         z-index: 2;
+
         .title {
           font-size: 1.4rem;
           font-weight: bold;
@@ -159,9 +154,11 @@ onMounted(() => {
           position: relative;
           z-index: 2;
         }
+
         img {
           width: 1.2rem;
         }
+
         .line {
           position: absolute;
           width: 25%;
@@ -172,6 +169,7 @@ onMounted(() => {
           z-index: 1;
         }
       }
+
       .item-bottom {
         &-item {
           font-size: 0.95rem;

src/view/bldgModel/detail/index.vue

@@ -66,8 +66,9 @@ const goChange = () => {
   }
 
   .btn {
+    white-space: nowrap;
     position: absolute;
-    width: 50%;
+    // width: 50%;
     bottom: 3.5rem;
     left: 50%;
     transform: translateX(-50%);

src/view/bldgModel/index.vue

@@ -50,7 +50,7 @@ onMounted(() => {
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
     <img
       class="model-bg"
-      :src="baseImageUrl + 'home.jpg'"
+      :src="baseImageUrl + 'home.png'"
       alt=""
       rel="preload"
     />