增加背景音乐、更换场景链接等

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Music: typeof import('./src/components/Music.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Tabbar: typeof import('./src/components/Tabbar.vue')['default']

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Music from "@/components/Music.vue";
 onMounted(() => {
   //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
   let vh = window.innerHeight * 0.01;
@@ -18,6 +19,8 @@ onMounted(() => {
   <div class="all">
     <router-view />
     <!-- <Tabbar /> -->
+    <Music />
+    <!-- <audio id="bgMusic" src="/public/audio/黄扬苏幕 - 鸠兹春盛.mp3" autoplay></audio> -->
   </div>
 </template>
 

src/components/Music.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useVideo } from "@/store/Video/index";
+const router = useRouter();
+const store = useVideo();
+
+const stateAu = ref(false);
+
+store.$subscribe((mutation: any, state: any) => {
+  var audio = document.getElementById("music1");
+  if (state.isVideo) {
+    stateAu.value = false;
+    audio.pause();
+  } else {
+    stateAu.value = true;
+    audio.play();
+  }
+});
+
+const getAssetURL = (image: string) => {
+  return new URL(`../assets/icon/${image}`, import.meta.url).href;
+};
+
+const onChange = () => {
+  stateAu.value = !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();
+//   }
+// });
+</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>
+</template>
+
+<style lang="less" scoped>
+.music {
+  z-index: 1000;
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  .audio-box {
+    // display:;
+  }
+  img {
+    width: 10vw;
+    height: 10vw;
+  }
+}
+</style>

src/data/home/index.ts

@@ -1,41 +1,21 @@
 const imageList = [
-  // 老海关
-  {
-    upCoverageURL: "img-up3.png",
-    downCoverageURL: "haiguan.jpg",
-    left: 0,
-  },
-  // 广济寺塔
-  {
-    upCoverageURL: "img-up2.png",
-    downCoverageURL: "guangjita.jpg",
-    left: 0,
-  },
-
   // 天主堂
   {
-    upCoverageURL: "img-up2.png",
+    upCoverageURL: "img-up3.png",
     downCoverageURL: "tianzhutang.jpg",
     left: 0,
   },
-  // 博仁堂
-  {
-    upCoverageURL: "img-up2.png",
-    downCoverageURL: "borentang.jpg",
-    left: 0,
-
-  },
-  // 洋员帮办
+  // 老海关
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "yangyuan.jpg",
-    left: -55,
+    downCoverageURL: "haiguan.jpg",
+    left: 0,
   },
-  // 天主教公署
+  // 英驻芜领事官邸
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "jiaogonshu.jpg",
-    left: -51,
+    downCoverageURL: "guandi.jpg",
+    left: -58,
   },
   // 英驻芜领事署
   {
@@ -43,18 +23,17 @@ const imageList = [
     downCoverageURL: "lingshishu.jpg",
     left: -59,
   },
-  // 内....
+  // 总税务司
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "neixiu.jpg",
-    left: -61,
+    downCoverageURL: "zongshuiwu.jpg",
+    left: -51,
   },
-
-  // 英驻芜领事官邸
+  // 洋员帮办
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "guandi.jpg",
-    left: -58,
+    downCoverageURL: "yangyuan.jpg",
+    left: -55,
   },
   // 神父楼
   {
@@ -62,37 +41,54 @@ const imageList = [
     downCoverageURL: "shenfu.jpg",
     left: -51,
   },
-  // 总税务司
+  // 天主教公署
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "zongshuiwu.jpg",
+    downCoverageURL: "jiaogonshu.jpg",
     left: -51,
   },
-  // 义德tang
+  // 圣母院
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "shengmuyuan.jpg",
+    left: -182,
+  },
+  // 修士楼
   {
     upCoverageURL: "img-up1.png",
     downCoverageURL: "xiushilou.jpg",
     left: -58,
   },
-  // 义德tang
+  // 内....
   {
     upCoverageURL: "img-up1.png",
-    downCoverageURL: "jingfangtang.jpg",
-    left: -59,
+    downCoverageURL: "neixiu.jpg",
+    left: -61,
   },
-  // 圣母院
+  // 博仁堂
   {
-    upCoverageURL: "img-up1.png",
-    downCoverageURL: "shengmuyuan.jpg",
-    left: -186,
+    upCoverageURL: "img-up2.png",
+    downCoverageURL: "borentang.jpg",
+    left: 0,
   },
-
   // 义德tang
   {
     upCoverageURL: "img-up1.png",
     downCoverageURL: "yidetang.jpg",
     left: -58,
   },
+  // 义德tang
+  {
+    upCoverageURL: "img-up1.png",
+    downCoverageURL: "jingfangtang.jpg",
+    left: -59,
+  },
+  // 广济寺塔
+  {
+    upCoverageURL: "img-up2.png",
+    downCoverageURL: "guangjita.jpg",
+    left: 0,
+  },
 ];
 
 export default imageList;

src/store/Video/index.ts

@@ -1,11 +1,12 @@
 import { buildingType } from "@/types";
 import { defineStore } from "pinia";
-export const useModel = defineStore("model", {
+export const useVideo = defineStore("model", {
   // 相当于data
   state: () => {
     return {
       currentBuild: {} as buildingType,
       buildList: [] as buildingType[],
+      isVideo: false
     };
   },
   // 相当于计算属性

src/view/bldgMap/detail/index.vue

@@ -110,7 +110,7 @@ onMounted(async () => {
   <div class="detail">
     <div class="top">
       <!-- <img
-        src="/public/image/swiperImage/天主堂/DJI_0312.JPG"
+        src="/public/image/swiperImage/天主堂/DJI_0312.jpg"
         alt=""
       /> -->
       <div class="swiper mySwiper">

src/view/bldgMap/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import "swiper/swiper-bundle.css";
 import Tabbar from "@/components/Tabbar.vue";
+// import Music from "@/components/Music.vue";
 import ModelList, { baseURL } from "@/assets/data/Model";
 import Swiper from "swiper";
 // import { baseURL } from "@/assets/data/Model";
@@ -176,6 +177,7 @@ onMounted(() => {
     /> -->
   </div>
   <Tabbar />
+  <!-- <Music /> -->
 </template>
 
 <style lang="less" scoped>

src/view/bldgModel/index.vue

@@ -48,7 +48,7 @@ onMounted(() => {
 <template>
   <div class="model">
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
-    <img class="model-bg" :src="baseImageUrl + 'home.jpg'" alt="" />
+    <img class="model-bg" :src="baseImageUrl + 'home.jpg'" alt="" rel="preload" />
     <!-- 点击位置 -->
     <!-- 大教堂 -->
     <div

src/view/bldgPanorama/detail/index.vue

@@ -72,7 +72,7 @@ onMounted(() => {
     <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
     <iframe
       class="ifr"
-      :src="`https://zzbbh.4dage.com/SWKK/show.html?id=${currentScene.birdId}`"
+      :src="`https://www.4dkankan.com/panorama/showMobile.html?id=${currentScene.birdId}`"
       frameborder="0"
     ></iframe>
     <div class="mini-tabbar">

src/view/bldgPanorama/index.vue

@@ -2,6 +2,7 @@
 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(0);
 const router = useRouter();
@@ -30,7 +31,9 @@ watch(currentIndex, (newVale: any) => {
 });
 
 onMounted(() => {
-  currentIndex.value = store.currentIndex;
+  // if(store.currentIndex != 0) {
+  //   currentIndex.value = store.currentIndex
+  // }
 });
 </script>
 

src/view/bldgVideo/detail/index.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { baseURL } from '@/assets/data/Model';
+import { baseURL } from "@/assets/data/Model";
+import { useVideo } from "@/store/Video/index";
 const route = useRoute();
 const currentVedioName = ref("");
+const store = useVideo();
+
+const handlePlayVideo = () => {
+  store.isVideo = true;
+};
+const handlePauseVideo = (data: any) => {
+  store.isVideo = false;
+};
+
 onMounted(() => {
   currentVedioName.value = route.query.name;
 });
@@ -12,6 +22,9 @@ onMounted(() => {
     <video
       class="vedio"
       :src="`${baseURL}/audio/${currentVedioName}.mp4`"
+      @play="handlePlayVideo"
+      @pause="handlePauseVideo"
+      preload
       controls
     ></video>
   </div>

src/view/bldgVideo/index.vue

@@ -29,6 +29,12 @@ const getAssetURL = (image: string) => {
   return new URL(`../../assets/img/map/nornal/${image}`, import.meta.url).href;
 };
 
+const newModelList = computed(() => {
+  return ModelList.filter((item: any) => {
+    return item.videoName !=''
+  });
+});
+
 nextTick(() => {});
 onMounted(() => {
   var swiperRef = new Swiper(".main-slider", {
@@ -101,7 +107,7 @@ onMounted(() => {
 });
 
 watch(currentIndex, (newVale: any) => {
-  currentScene.value = ModelList[newVale];
+  currentScene.value = newModelList.value[newVale];
 });
 </script>
 
@@ -126,7 +132,7 @@ watch(currentIndex, (newVale: any) => {
           <div class="swiper-wrapper">
             <div
               class="swiper-slide option-item"
-              v-for="(item, index) in ModelList"
+              v-for="(item, index) in newModelList"
               :key="index"
               @click="goToVodio(item.name)"
             >
@@ -155,7 +161,7 @@ watch(currentIndex, (newVale: any) => {
         </div>
       </div>
       <div class="pagination">
-        <div v-for="(item, index) in ModelList" :key="index">
+        <div v-for="(item, index) in newModelList" :key="index">
           <img :src="index === currentIndex ? PageAc : Page" alt="" />
         </div>
       </div>
@@ -164,7 +170,7 @@ watch(currentIndex, (newVale: any) => {
           <div class="swiper-wrapper">
             <div
               class="swiper-slide option-item active"
-              v-for="(item, index) in ModelList"
+              v-for="(item, index) in newModelList"
               :key="index"
               :style="{
                 background: 'none',
@@ -173,10 +179,7 @@ watch(currentIndex, (newVale: any) => {
                 justifyContent: 'center',
               }"
             >
-              <img
-                :src="`${baseURL}/image/module/${item.code}.png`"
-                alt=""
-              />
+              <img :src="`${baseURL}/image/module/${item.code}.png`" alt="" />
             </div>
           </div>
         </div>

src/view/home/index.vue

@@ -3,6 +3,7 @@ import imageList from "@/data/home/index";
 import { useHome } from "@/store/Home/index";
 import Tabbar from "@/components/Tabbar.vue";
 import { baseURL } from "@/assets/data/Model";
+import { setActivePinia } from "pinia";
 
 const store = useHome();
 const animageList = ref([] as any);
@@ -47,12 +48,20 @@ const transformLeft = ref(`translate3d(-230px, 0, 0)`);
 
 // 手指滑动
 const touchMove = (event: any) => {
+  const dowmImage = document.getElementById("downImg");
+  console.log(dowmImage!.offsetWidth);
+  const vw = window.innerWidth / 100;
   let moveEndX = event.changedTouches[0].pageX;
   let X = moveEndX - startX.value; //如果值为正,则代表手指右滑,反则则为左滑,为0则表示点击
-  console.log(X);
+  console.log(X, position.value);
   if (X > 0) {
     if (position.value < 0) {
-      position.value += 1;
+      position.value += 10;
+      transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
+    }
+  } else if (X < 0) {
+    if (position.value > -(dowmImage!.offsetWidth - 60 * vw)) {
+      position.value -= 10;
       transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
     }
   }
@@ -64,21 +73,58 @@ const handletouchstart = (event: any) => {
   startY.value = event.changedTouches[0].pageY;
 };
 
+const downImageShow = ref(false);
+const upImageShow = ref(false);
+const textImageShow = ref(false);
+
 store.$subscribe((mutation: any, state: any) => {
   console.log("当前需要滚动滚动条", imageList, state.currentIndex);
+  downImageShow.value = false;
+  // position.value = imageList[state.currentIndex].left
+  // transformLeft.value = `translate3d(${position.value}%, 0, 0)`;
   // // 实现滚动条居中
   // const downImage = document.querySelector("#downImg");
-  setTimeout(() => {
-    const dowmImage = document.getElementById("downImg");
-    console.log(dowmImage!.offsetWidth);
-    const imageavg = dowmImage!.offsetWidth / 2;
-    const viewavg = window.innerWidth / 2;
-    const vw = window.innerWidth / 100;
-    console.log(imageavg, viewavg, vw);
-    position.value = Math.floor(-(imageavg + vw * 30 - viewavg));
-    // position.value = Math.floor(-(dowmImage!.offsetWidth - window.innerWidth) / 2);
-    transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
-  }, 2000);
+  // 加载底层图片
+  var img = new Image();
+  img.src = baseImageUrl.value + imageList[state.currentIndex].downCoverageURL;
+  img.onload = () => {
+    // 建筑图片加载完成后执行
+    downImageShow.value = true;
+    setTimeout(() => {
+      const dowmImage = document.getElementById("downImg");
+      console.log(dowmImage!.offsetWidth);
+      const imageavg = dowmImage!.offsetWidth / 2;
+      const viewavg = window.innerWidth / 2;
+      const vw = window.innerWidth / 100;
+      console.log(imageavg, viewavg, vw);
+      position.value = Math.floor(-(imageavg + vw * 30 - viewavg));
+      // position.value = Math.floor(-(dowmImage!.offsetWidth - window.innerWidth) / 2);
+      // position.value = imageList[state.currentIndex].left
+      transformLeft.value = `translate3d(${position.value}px, 0, 0)`;
+    });
+  };
+
+  if (imageList[state.currentIndex].upCoverageURL != "img-up3.png") {
+    // 加载上层图片
+    var imgUp = new Image();
+    imgUp.src =
+      baseImageUrl.value + imageList[state.currentIndex].upCoverageURL;
+    imgUp.onload = () => {
+      // 上层图片加载完成后执行
+      upImageShow.value = true;
+    };
+  } else {
+    upImageShow.value = true;
+  }
+
+  // 加载文字层图片
+  var imgText = new Image();
+  imgText.src = baseImageUrl.value + `text.png`;
+  imgText.onload = () => {
+    // 上层图片加载完成后执行
+    textImageShow.value = true;
+  };
+
   // if (imageList[state.currentIndex].upCoverageURL == "img-up1.png") {
   // }
 });
@@ -94,7 +140,12 @@ onMounted(() => {
 
 <template>
   <div class="home" id="homeid" v-if="imageOver">
-    <img class="text-coverage" src="@/assets/img/home/text.png" alt="" />
+    <img
+      v-show="textImageShow"
+      class="text-coverage"
+      :src="baseImageUrl + `text.png`"
+      alt=""
+    />
 
     <!-- <img
       
@@ -115,11 +166,13 @@ onMounted(() => {
         "
         class="up-box2"
         :src="baseImageUrl + item.upCoverageURL"
+        v-show="upImageShow"
       />
       <div
         :class="item.upCoverageURL == 'img-up1.png' ? 'down-boxs' : ''"
         @touchmove="touchMove"
         @touchstart="handletouchstart"
+        v-show="downImageShow && upImageShow"
       >
         <img
           id="downImg"
@@ -153,11 +206,14 @@ onMounted(() => {
 ::-webkit-scrollbar-track {
   background: #f1f1f1;
 }
+
 $imgCount: 44;
+
 .home {
   max-width: 100%;
   max-height: 100%;
-  overflow: auto;
+  overflow: hidden;
+
   // text-align: center;
   // display: flex;
   // justify-content: center;
@@ -172,6 +228,7 @@ $imgCount: 44;
       pointer-events: none;
       margin: auto;
     }
+
     .up-box {
       width: 100vw;
       height: 100vh;
@@ -239,12 +296,15 @@ $imgCount: 44;
 
     @keyframes fadenum {
       from {
-        transform: scale(1.05); /*放大1.1倍*/
+        transform: scale(1.05);
+        /*放大1.1倍*/
         object-fit: cover;
         opacity: 0.5;
       }
+
       to {
-        transform: scale(1.17); /*放大1.1倍*/
+        transform: scale(1.17);
+        /*放大1.1倍*/
         object-fit: cover;
         opacity: 1;
       }
@@ -252,12 +312,15 @@ $imgCount: 44;
 
     @keyframes fadenumOut {
       from {
-        transform: scale(1.05); /*放大1.1倍*/
+        transform: scale(1.05);
+        /*放大1.1倍*/
         object-fit: cover;
         opacity: 1;
       }
+
       to {
-        transform: scale(1.17); /*放大1.1倍*/
+        transform: scale(1.17);
+        /*放大1.1倍*/
         object-fit: cover;
         opacity: 0.5;
       }