fix

src/components/Image.vue

@@ -1,91 +1,116 @@
 <template>
   <div class="img-wrapper">
-    <img :src="resource.img.src" @load="onLoad" alt="">
-    <div v-if="showGesture" class="gesture" :style="gestureStyle"><i class="iconfont icon-cc-pointer-right"></i></div>
-    <div v-if="resource.showMapBtn" class="showmapbtn" :style="mapBtnStyle" @click="onShowMapBtn"></div>
-    <div v-if="resource.showMapBtn">
-      <div
-      v-show="false"
-      ref="mapImageRef"
-      v-viewer="{
-        toolbar: false,
-        url: 'data-source',
-      }"
-      class="images clearfix"
+    <img :src="resource.img.src" @load="onLoad" alt="" />
+    <div v-if="showGesture" class="gesture" :style="gestureStyle">
+      <i class="iconfont icon-cc-pointer-right"></i>
+    </div>
+
+    <div
+      v-if="resource.showMapBtn"
+      class="showmapbtn"
+      :style="mapBtnStyle"
+      @click="onShowMapBtn"
+    ></div>
+    <div
+      v-if="resource.infoIcon"
+      class="info"
+      :style="infoStyle"
+      @click="onShowInfoBtn"
     >
-      <template v-for="img in resource.mapImage" :key="img">
-        <img
-          class="image"
-          :src="img"
-          :data-source="img"
-        >
-      </template>
+      <i class="iconfont icon-info"></i>
     </div>
+
+    <div v-if="resource.infoIcon">
+      <div
+        v-show="false"
+        ref="mapImageRef"
+        v-viewer="{
+          toolbar: false,
+          url: 'data-source',
+        }"
+        class="images clearfix"
+      >
+        <template v-for="img in resource.mapImage" :key="img">
+          <img class="image" :src="img" :data-source="img" />
+        </template>
+      </div>
     </div>
-   
 
-    <!-- <viewer v-if="mapImageRef" :images="mapImageRef">
-      <img v-for="src in mapImageRef" :key="src" :src="src">
-    </viewer> -->
-    <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
-   
+    <div
+      v-if="resource.playBtn"
+      class="paybtn"
+      :style="btnStyle"
+      @click="onPlayBtn"
+    >
       <AudioPlayingVue :style="iconStyle" />
-      <audio :src="resource.audio" preload="auto" ref="audioRef" @ended="onEnded"></audio>
+      <audio
+        :src="resource.audio"
+        preload="auto"
+        ref="audioRef"
+        @ended="onEnded"
+      ></audio>
     </div>
+
+    <PopUpVue :show="showInfo" :info="resource.infoIcon" :onClose="onCloseInfoBtn" />
   </div>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
-import { useModel } from '@zjxpcyc/vue-tiny-store';
-import AudioPlayingVue from './AudioPlaying.vue';
-import 'viewerjs/dist/viewer.css'
-import { directive as viewer } from "v-viewer"
+import { computed, ref, watch } from "vue";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
+import PopUpVue from "./PopUp.vue";
+import AudioPlayingVue from "./AudioPlaying.vue";
+import "viewerjs/dist/viewer.css";
+import { directive as viewer } from "v-viewer";
 
-const [current, updateCurrent] = useModel('audio');
+const [current, updateCurrent] = useModel("audio");
 
 const props = defineProps({
   resource: {
     type: Object,
-    default: () => ({})
+    default: () => ({
+      infoIcon:Object,
+    }),
   },
   showFog: Boolean,
   index: Number,
 });
 
-const mapImageRef = ref()
-const mapBtnStyle = ref({})
+const showInfo = ref(false)
+const mapImageRef = ref();
+const mapBtnStyle = ref({});
 const btnStyle = ref({});
 const gestureStyle = ref({});
+const infoStyle = ref({});
 const audioRef = ref();
 const playState = ref(0);
 const showGesture = ref(props.resource.showGesture);
 const iconStyle = computed(() => ({
-  opacity: playState.value
+  opacity: playState.value,
 }));
 
 const playAudio = () => {
-    audioRef.value.play();
-    playState.value = 1;
-    updateCurrent(props.resource.audio);
+  audioRef.value.play();
+  playState.value = 1;
+  updateCurrent(props.resource.audio);
 
-    // 播放一次, 立即消失
-    if (showGesture.value) {
-      showGesture.value = false;
-    }
-}
+  // 播放一次, 立即消失
+  if (showGesture.value) {
+    showGesture.value = false;
+  }
+};
 
 const stopAudio = () => {
-    audioRef.value.pause();
-    playState.value = 0;
-}
+  audioRef.value.pause();
+  playState.value = 0;
+};
 
 // 监控全局, 如果非当前播放器, 则停止播放
 watch(current, (nw) => {
   if (nw !== props.resource.audio && playState.value === 1) {
     stopAudio();
   }
-})
+});
 
 // 点击播放
 const onPlayBtn = () => {
@@ -94,24 +119,36 @@ const onPlayBtn = () => {
   } else {
     playAudio();
   }
-}
+};
 
 //显示地图
 const onShowMapBtn = () => {
-  window.console.log('---')
-  if(props.resource.showMapBtn){
-  
-    window.console.log(props.resource.mapImage,'---')
-    mapImageRef.value && mapImageRef.value.$viewer.show()
+  window.console.log("---");
+  if (props.resource.showMapBtn) {
+    window.console.log(props.resource.mapImage, "---");
+    mapImageRef.value && mapImageRef.value.$viewer.show();
   }
-}
+};
+
+// 显示详情介绍
+const onShowInfoBtn = () => {
+  window.console.log(showInfo,"---");
+  
+  showInfo.value=true
+};
+
+const onCloseInfoBtn = () => {
+  window.console.log("---");
+  
+  showInfo.value=false
+};
 
 
 
 // 播放完成
 const onEnded = () => {
   stopAudio();
-}
+};
 
 // 图片加载完成, 设置播放器
 const onLoad = (e) => {
@@ -119,30 +156,36 @@ const onLoad = (e) => {
     const { pos } = props.resource.playBtn;
     const { width, height, naturalHeight, naturalWidth } = e.target;
     const d = 32; // 宽度一半
-    const centerX = width * pos[0] / naturalWidth;
-    const centerY = height * pos[1] / naturalHeight;
+    const centerX = (width * pos[0]) / naturalWidth;
+    const centerY = (height * pos[1]) / naturalHeight;
     const x = centerX - d;
     const y = centerY - d;
-    btnStyle.value = { left: `${x}px`, top: `${y}px` }
-
+    btnStyle.value = { left: `${x}px`, top: `${y}px` };
+    const d2 = 12; // 字体大小一半
     // 如果显示引导手势, 那么计算坐标
     if (showGesture.value) {
-      const d2 = 12 // 字体大小一半
-      gestureStyle.value = { left: `${x - d2 * 2}px`, top: `${centerY - d2}px` }
+      gestureStyle.value = {
+        left: `${x + d2 * 1.5}px`,
+        top: `${centerY - d2 * 6}px`,
+      };
     }
+
+    // if (showGesture.value) {
+
+    infoStyle.value = { left: `${x - d2 * 2}px`, top: `${centerY - d2}px` };
+    // }
   }
-  if(props.resource.showMapBtn){
+  if (props.resource.showMapBtn) {
     const { pos } = props.resource.showMapBtn;
     const { width, height, naturalHeight, naturalWidth } = e.target;
     const d = 32; // 宽度一半
-    const centerX = width * pos[0] / naturalWidth;
-    const centerY = height * pos[1] / naturalHeight;
+    const centerX = (width * pos[0]) / naturalWidth;
+    const centerY = (height * pos[1]) / naturalHeight;
     const x = centerX - d;
     const y = centerY - d;
-    mapBtnStyle.value = { left: `${x}px`, top: `${y}px` }
+    mapBtnStyle.value = { left: `${x}px`, top: `${y}px` };
   }
-}
-
+};
 </script>
 
 <style lang="less" scoped>
@@ -154,7 +197,15 @@ const onLoad = (e) => {
     position: absolute;
     z-index: 9;
     animation: gestureAnimation 1.6s ease-in-out infinite;
-    
+
+    .iconfont {
+      font-size: 24px;
+    }
+  }
+
+  .info {
+    position: absolute;
+    z-index: 9;
     .iconfont {
       font-size: 24px;
     }
@@ -163,19 +214,19 @@ const onLoad = (e) => {
   @keyframes gestureAnimation {
     from {
       opacity: 0;
-      transform: translateX(0);
+      transform: translateY(0) rotate(90deg);
     }
     to {
       opacity: 1;
-      transform: translateX(12px);
+      transform: translateY(12px) rotate(90deg);
     }
   }
 
-  .showmapbtn{
+  .showmapbtn {
     position: absolute;
     width: 170px;
     height: 70px;
-    background: rgba(255, 0, 0, .5);
+    background: rgba(255, 0, 0, 0.5);
     z-index: 10;
   }
 
@@ -183,7 +234,7 @@ const onLoad = (e) => {
     position: absolute;
     width: 64px;
     height: 64px;
-    background: rgba(255, 0, 0, .5);
+    background: rgba(255, 0, 0, 0.5);
     z-index: 10;
 
     & > audio {
@@ -203,4 +254,3 @@ const onLoad = (e) => {
   }
 }
 </style>
-

src/components/PopUp.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    v-if="show"
+    class="overlay"
+    @touchmove.prevent
+    @mousewheel.prevent
+    @click="onClose"
+  >
+    <div class="warp">
+      <img :src="info.image" @click.stop class="image" alt="" />
+      <div class="text" @click.stop>
+        {{ info.content }}
+      </div>
+    </div>
+
+    <!-- <div class="loader-section section-top"></div>
+    <div class="loader-section section-bottom"></div>     -->
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: Boolean,
+  info: Object,
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  // onClose:()=>{}
+});
+
+// const elRef = ref();
+// const maskRef = ref();
+// const progressStyle = computed(() => ({ width: `${props.percent}%` }));
+// const visibleStyle = ref({  })
+// const onEnd = () => {
+//   visibleStyle.value = { display: 'none' }
+// }
+
+const onTouchMove = (e) => {
+  // 禁止滚动
+  e.preventDefault();
+};
+
+// watch(() => props.loading, (newVal, oldVal) => {
+//   window.console.log(show,'showshow')
+// })
+</script>
+
+<style lang="less" scoped>
+// @bg-color: #D7DDD3;
+// @tip-color: #933D33;
+// @text-color: #fff;
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.5);
+  .warp {
+    margin: 0 auto;
+    width: 80%;
+    height: 100%;
+    // background: fff;
+    .image {
+      width: 100%;
+      margin-top: 100px;
+    }
+    .text {
+      line-height: 1.6em;
+      padding: 0 20px;
+      font-size: 20px;
+      text-indent: 32.4px;
+      margin-top: 50px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/utils/resources.js

@@ -1,11 +1,9 @@
-
-
 // import index from '@/assets/index.jpg';
 // import mask from '@/assets/mask.png';
 
-export const index = './index.jpg';
-export const mask = './mask.png';
-export const map = './map.png';
+export const index = "./index.jpg";
+export const mask = "./mask.png";
+export const map = "./map.png";
 
 // import img1 from '@/assets/images/1.jpg';
 // import img2 from '@/assets/images/2.jpg';
@@ -41,41 +39,43 @@ export const map = './map.png';
 // import img22 from '@/assets/images/22.jpg';
 // import img23 from '@/assets/images/23.jpg';
 
+const infoImage = ["./infoimage/1长江大桥.jpg"];
+
 const images = [
-  './images/1.jpg',
-  './images/2.jpg',
-  './images/3.jpg',
-  './images/4.jpg',
-  './images/5-1.jpg',
-  './images/5-2.jpg',
+  "./images/1.jpg",
+  "./images/2.jpg",
+  "./images/3.jpg",
+  "./images/4.jpg",
+  "./images/5-1.jpg",
+  "./images/5-2.jpg",
   // './images/5.jpg',
-  './images/6.jpg',
-  './images/7.jpg',
-  './images/8-1.jpg',
-  './images/8-2.jpg',
+  "./images/6.jpg",
+  "./images/7.jpg",
+  "./images/8-1.jpg",
+  "./images/8-2.jpg",
   // './images/8.jpg',
-  './images/9.jpg',
-  './images/10-1.jpg',
-  './images/10-2.jpg',
+  "./images/9.jpg",
+  "./images/10-1.jpg",
+  "./images/10-2.jpg",
   // './images/10.jpg',
-  './images/11.jpg',
-  './images/12.jpg',
-  './images/13.jpg',
-  './images/14.jpg',
-  './images/15-1.jpg',
-  './images/15-2.jpg',
+  "./images/11.jpg",
+  "./images/12.jpg",
+  "./images/13.jpg",
+  "./images/14.jpg",
+  "./images/15-1.jpg",
+  "./images/15-2.jpg",
   // './images/15.jpg',
-  './images/16.jpg',
-  './images/17.jpg',
-  './images/18.jpg',
-  './images/19-1.jpg',
-  './images/19-2.jpg',
+  "./images/16.jpg",
+  "./images/17.jpg",
+  "./images/18.jpg",
+  "./images/19-1.jpg",
+  "./images/19-2.jpg",
   // './images/19.jpg',
-  './images/20.jpg',
-  './images/21.jpg',
-  './images/22.jpg',
-  './images/23.jpg',
-]
+  "./images/20.jpg",
+  "./images/21.jpg",
+  "./images/22.jpg",
+  "./images/23.jpg",
+];
 
 // import audio1 from '@/assets/audios/1南京长江大桥.mp3';
 // import audio2 from '@/assets/audios/2阅江楼.mp3';
@@ -105,255 +105,266 @@ const images = [
 // import audio26 from '@/assets/audios/26世界文学客厅.mp3';
 
 const audios = [
-  './audios/1南京长江大桥.mp3',
-  './audios/2阅江楼.mp3',
-  './audios/3秦淮河.mp3',
-  './audios/4乌衣巷.mp3',
-  './audios/5燕子矶.mp3',
-  './audios/6栖霞山.mp3',
-  './audios/7朝天宫.mp3',
-  './audios/8梁洲.mp3',
-  './audios/9后湖映月.mp3',
-  './audios/10台城.mp3',
-  './audios/11十里堤.mp3',
-  './audios/12石头城.mp3',
-  './audios/13莫愁湖公园.mp3',
-  './audios/14赏心亭.mp3',
-  './audios/15长干里.mp3',
-  './audios/16大报恩寺.mp3',
-  './audios/17凤凰台.mp3',
-  './audios/18桃叶渡.mp3',
-  './audios/19雨花台.mp3',
-  './audios/20牛首山.mp3',
-  './audios/21石臼湖.mp3',
-  './audios/22东山.mp3',
-  './audios/23瞻园.mp3',
-  './audios/24白鹭洲.mp3',
-  './audios/25随园.mp3',
-  './audios/26世界文学客厅.mp3',
+  "./audios/1南京长江大桥.mp3",
+  "./audios/2阅江楼.mp3",
+  "./audios/3秦淮河.mp3",
+  "./audios/4乌衣巷.mp3",
+  "./audios/5燕子矶.mp3",
+  "./audios/6栖霞山.mp3",
+  "./audios/7朝天宫.mp3",
+  "./audios/8梁洲.mp3",
+  "./audios/9后湖映月.mp3",
+  "./audios/10台城.mp3",
+  "./audios/11十里堤.mp3",
+  "./audios/12石头城.mp3",
+  "./audios/13莫愁湖公园.mp3",
+  "./audios/14赏心亭.mp3",
+  "./audios/15长干里.mp3",
+  "./audios/16大报恩寺.mp3",
+  "./audios/17凤凰台.mp3",
+  "./audios/18桃叶渡.mp3",
+  "./audios/19雨花台.mp3",
+  "./audios/20牛首山.mp3",
+  "./audios/21石臼湖.mp3",
+  "./audios/22东山.mp3",
+  "./audios/23瞻园.mp3",
+  "./audios/24白鹭洲.mp3",
+  "./audios/25随园.mp3",
+  "./audios/26世界文学客厅.mp3",
 ];
 
 // 预加载资源
 export const resources = [
-  { 
+  {
     image: index,
     hidden: true,
   },
-  { 
+  {
     image: mask,
     hidden: true,
   },
   {
-    image:map,
+    image: map,
     hidden: true,
   },
-  { 
+  {
     image: images[0],
   },
-  { 
+
+  {
     image: images[1],
-    showMapBtn:{
+    showMapBtn: {
       pos: [280, 1250],
     },
-    mapImage:[map]
-    // mapkey:'map',
+    mapImage: [map],
   },
-  { 
+  {
+    image: infoImage[0],
+    hidden: true,
+  },
+  {
     image: images[2],
     playBtn: {
       pos: [616, 932],
     },
     showGesture: true,
+    infoIcon: {
+      image: infoImage[0],
+      content:
+        "南京长江大桥位于南京市鼓楼区下关和浦口区桥北之间，是长江上第一座由中国自行设计和建造的双层式铁路、公路两用桥梁，具有极大的经济意义、政治意义和战略意义，有“争气桥”之称。大桥由正桥、南北桥头堡和南北引桥组成，正桥分上下两层，上层为公路桥，正桥长1577米，4车道的宽度，车行道宽15米，可容4辆大型汽车并行，两侧人行道各宽2.25米。下层为铁路桥，全长6772米，宽14米，铺设双轨，两列火车可同时对开。正桥长1576米，其余为引桥，公路引桥长3012米，宽19.5米。",
+      position: "left",
+    },
     audio: audios[0],
   },
-  { 
+  {
     image: images[3],
     playBtn: {
       pos: [100, 406],
     },
     audio: audios[1],
   },
-  { 
+  {
     image: images[4],
     playBtn: {
       pos: [650, 172],
     },
+
     audio: audios[2],
   },
-  { 
+  {
     image: images[5],
     playBtn: {
       pos: [652, 773],
     },
     audio: audios[3],
   },
-  // { 
+  // {
   //   image: img5,
   // },
-  { 
+  {
     image: images[6],
     playBtn: {
       pos: [624, 890],
     },
     audio: audios[4],
   },
-  { 
+  {
     image: images[7],
     playBtn: {
       pos: [612, 486],
     },
     audio: audios[5],
   },
-  { 
+  {
     image: images[8],
     playBtn: {
       pos: [93, 557],
     },
     audio: audios[6],
   },
-  { 
+  {
     image: images[9],
     playBtn: {
       pos: [163, 224],
     },
     audio: audios[7],
   },
-  // { 
+  // {
   //   image: img8,
   // },
-  { 
+  {
     image: images[10],
     playBtn: {
       pos: [152, 782],
     },
     audio: audios[8],
   },
-  { 
+  {
     image: images[11],
     playBtn: {
       pos: [662, 380],
     },
     audio: audios[9],
   },
-  { 
+  {
     image: images[12],
     playBtn: {
       pos: [646, 225],
     },
     audio: audios[10],
   },
-  // { 
+  // {
   //   image: img10,
   // },
-  { 
+  {
     image: images[13],
     playBtn: {
       pos: [574, 1074],
     },
     audio: audios[11],
   },
-  { 
+  {
     image: images[14],
     playBtn: {
       pos: [132, 550],
     },
     audio: audios[12],
   },
-  { 
+  {
     image: images[15],
     playBtn: {
       pos: [642, 310],
     },
     audio: audios[13],
   },
-  { 
+  {
     image: images[16],
     playBtn: {
       pos: [92, 80],
     },
     audio: audios[14],
   },
-  { 
+  {
     image: images[17],
     playBtn: {
       pos: [652, 31],
     },
     audio: audios[15],
   },
-  { 
+  {
     image: images[18],
     playBtn: {
       pos: [652, 353],
     },
     audio: audios[16],
   },
-  // { 
+  // {
   //   image: img15,
   // },
-  { 
+  {
     image: images[19],
     playBtn: {
       pos: [166, 600],
     },
     audio: audios[17],
   },
-  { 
+  {
     image: images[20],
     playBtn: {
       pos: [364, 606],
     },
     audio: audios[18],
   },
-  { 
+  {
     image: images[21],
     playBtn: {
       pos: [386, 472],
     },
     audio: audios[19],
   },
-  { 
+  {
     image: images[22],
     playBtn: {
       pos: [132, 367],
     },
     audio: audios[20],
   },
-  { 
+  {
     image: images[23],
     playBtn: {
       pos: [250, 699],
     },
     audio: audios[21],
   },
-  // { 
+  // {
   //   image: img19,
   // },
-  { 
+  {
     image: images[24],
     playBtn: {
       pos: [152, 1040],
     },
     audio: audios[22],
   },
-  { 
+  {
     image: images[25],
     playBtn: {
       pos: [172, 835],
     },
     audio: audios[23],
   },
-  { 
+  {
     image: images[26],
     playBtn: {
       pos: [98, 196],
     },
     audio: audios[24],
   },
-  { 
+  {
     image: images[27],
     playBtn: {
       pos: [160, 64],
     },
     audio: audios[25],
   },
-]
+];