feats

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="./fonts/iconfont.css">
     <link rel="stylesheet" href="./fonts/STXINGKA.css">
     <script src="./wx/jweixin-1.6.0.js"></script>
+    <script src="./qrcode.min.js"></script>
     <script src="./config.js"></script>
     <title>和“宁好”一起，跟着诗歌游南京</title>
   </head>

src/App.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 import Loader from '@/components/Loader.vue';
 import ScrollDown from '@/components/ScrollDown.vue';
 import Image from '@/components/Image.vue';
+import QrCode from './components/QrCode.vue';
 import { preload } from '@/utils/preload';
 import scroll from '@/utils/scroll'
 
@@ -44,6 +45,7 @@ onMounted(() => {
 <template>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
+  <QrCode />
   <Image v-for="(res, index) in resources" :key="res.image" :resource="res" :index="index"></Image>
   <img :src="fixedLogo" alt="" class="fixed-log" :class="{ 'hidden': fixedLogoHidden }" @click="onClick">
 </template>

src/components/CoverBtn.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="cover-btn"
+    @click="onClick"
+    :style="styleRef"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+  const props = defineProps({
+    center: {
+      type: Array,
+      default: [],
+    },
+    width: Number,
+    height: Number,
+  });
+
+  const emit = defineEmits(['click']);
+
+  const styleRef = computed(() => {
+    return {
+      left: `${props.center[0] - props.width / 2}px`,
+      top: `${props.center[1] - props.height / 2}px`,
+      width: `${props.width}px`,
+      height: `${props.height}px`,
+    }
+  })
+
+  const onClick = e => emit('click', e);
+</script>
+
+<style lang="less" scoped>
+.cover-btn {
+  position: absolute;
+  // background: rgba(255, 0, 0, 0.5);
+  z-index: 10;
+}
+</style>

src/components/Image.vue

@@ -1,71 +1,40 @@
 <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
+    <!-- 导航地图 -->
+    <NaviMap
       v-if="resource.showMapBtn"
-      class="showmapbtn"
-      :style="mapBtnStyle"
-      @click="onShowMapBtn"
-    ></div>
-    <div
-      v-if="resource.infoIcon"
-      class="info"
-      :style="infoStyle"
-      @click="onShowInfoBtn"
-    >
-      <i class="iconfont icon-info"></i>
-    </div>
+      :center="mapCenter"
+      :image="resource.mapImage"
+    />
 
-    <div v-if="resource.showMapBtn">
-      <div
-        v-show="false"
-        ref="mapImageRef"
-        v-viewer="{
-          toolbar: false,
-          navbar:false,
-          title: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>
-
-    <div
+    <!-- 配音 -->
+    <ScenicAudio
       v-if="resource.playBtn"
-      class="paybtn"
-      :style="btnStyle"
-      @click="onPlayBtn"
-    >
-      <AudioPlayingVue :style="iconStyle" />
-      <audio
-        :src="resource.audio"
-        preload="auto"
-        ref="audioRef"
-        @ended="onEnded"
-      ></audio>
-    </div>
-
-    <PopUpVue :show="showInfo" :info="resource.infoIcon" :onClose="onCloseInfoBtn" />
+      :center="playerCenter"
+      :audio="resource.audio"
+      :show-gesture="resource.showGesture"
+    />
+
+    <template v-if="resource.infoIcon">
+      <ScenicDetail
+        v-for="(info, inx) in resource.infoIcon"
+        :key="`info-${inx}`"
+        :center="infoCenters[inx]"
+        :info="info"
+      />
+    </template>
   </div>
 </template>
 
 <script setup>
 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");
+import CoverBtn from "./CoverBtn.vue";
+import NaviMap from "./NaviMap.vue";
+import ScenicAudio from "./ScenicAudio.vue";
+import ScenicDetail from "./ScenicDetail.vue";
 
 const props = defineProps({
   resource: {
@@ -78,123 +47,31 @@ const props = defineProps({
   index: Number,
 });
 
-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,
-}));
+const mapCenter = ref([]);
+const playerCenter = ref([]);
+const infoCenters = ref([]);
 
-const playAudio = () => {
-  audioRef.value.play();
-  playState.value = 1;
-  updateCurrent(props.resource.audio);
-
-  // 播放一次, 立即消失
-  if (showGesture.value) {
-    showGesture.value = false;
-  }
-};
-
-const stopAudio = () => {
-  audioRef.value.pause();
-  playState.value = 0;
-};
-
-// 监控全局, 如果非当前播放器, 则停止播放
-watch(current, (nw) => {
-  if (nw !== props.resource.audio && playState.value === 1) {
-    stopAudio();
-  }
-});
 
-// 点击播放
-const onPlayBtn = () => {
-  if (playState.value) {
-    stopAudio();
-  } else {
-    playAudio();
-  }
-};
+// 图片加载完成, 设置播放器
+const onLoad = (e) => {
+  const { width, height, naturalHeight, naturalWidth } = e.target;
+  const xRate = width / naturalWidth;
+  const yRate = height / naturalHeight;
 
-//显示地图
-const onShowMapBtn = () => {
   if (props.resource.showMapBtn) {
-    mapImageRef.value && mapImageRef.value.$viewer.show();
+    const { pos } = props.resource.showMapBtn;
+    mapCenter.value = [xRate * pos[0], yRate * pos[1]];
   }
-};
-
-// 显示详情介绍
-const onShowInfoBtn = () => {
-  showInfo.value=true
-};
-
-const onCloseInfoBtn = () => {
-  showInfo.value=false
-};
-
 
-
-// 播放完成
-const onEnded = () => {
-  stopAudio();
-};
-
-// 图片加载完成, 设置播放器
-const onLoad = (e) => {
   if (props.resource.playBtn) {
     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 x = centerX - d;
-    const y = centerY - d;
-    btnStyle.value = { left: `${x}px`, top: `${y}px` };
-    const d2 = 12; // 字体大小一半
-    // 如果显示引导手势, 那么计算坐标
-    if (showGesture.value) {
-      gestureStyle.value = {
-        left: `${x + d2 * 1.5}px`,
-        top: `${centerY - d2 * 6}px`,
-      };
-    }
-
-    if (props.resource.infoIcon) {
-      const pos = props.resource.infoIcon.pos || 'left';
-      switch (pos) {
-        case 'right':
-          infoStyle.value = { left: `${x + d2 * 6}px`, top: `${centerY - d2}px` };
-          break;
-        case 'top':
-          infoStyle.value = { left: `${x + d2}px`, top: `${centerY - d2 * 6}px` };
-          break;
-        case 'bottom':
-          infoStyle.value = { left: `${x + d2}px`, top: `${centerY + d2 * 4}px` };
-          break;
-        case 'left':
-        default:
-          infoStyle.value = { left: `${x - d2 * 4}px`, top: `${centerY - d2}px` };
-          break;
-      }
-    }
+    playerCenter.value = [xRate * pos[0], yRate * pos[1]];
   }
 
-  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 x = centerX - d;
-    const y = centerY - d;
-    mapBtnStyle.value = { left: `${x}px`, top: `${y}px` };
+  if (props.resource.infoIcon) {
+    infoCenters.value = props.resource.infoIcon.map(info => {
+      return [xRate * info.pos[0], yRate * info.pos[1]];
+    })
   }
 };
 </script>
@@ -204,61 +81,6 @@ const onLoad = (e) => {
   margin-top: -0.5px; // 解决 iphone13 白边问题
   position: relative;
 
-  .gesture {
-    position: absolute;
-    z-index: 9;
-    animation: gestureAnimation 1.6s ease-in-out infinite;
-
-    .iconfont {
-      font-size: 24px;
-    }
-  }
-
-  .info {
-    position: absolute;
-    z-index: 9;
-    .iconfont {
-      color: #333;
-      font-size: 40px;
-    }
-  }
-
-  @keyframes gestureAnimation {
-    from {
-      opacity: 0;
-      transform: translateY(0) rotate(90deg);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(12px) rotate(90deg);
-    }
-  }
-
-  .showmapbtn {
-    position: absolute;
-    width: 170px;
-    height: 70px;
-    // background: rgba(255, 0, 0, 0.5);
-    z-index: 10;
-  }
-
-  .paybtn {
-    position: absolute;
-    width: 64px;
-    height: 64px;
-    // background: rgba(255, 0, 0, 0.5);
-    z-index: 10;
-
-    & > audio {
-      max-width: 1px;
-      max-height: 1px;
-    }
-
-    .iconfont {
-      color: #fff;
-    }
-  }
-
   img {
     display: block;
     width: 100vw;

src/components/NaviMap.vue

@@ -0,0 +1,46 @@
+<template>
+  <CoverBtn
+    :center="center"
+    :width="width"
+    :height="height"
+    @click="onShow"
+  />
+  <div
+    v-show="false"
+    ref="elRef"
+    v-viewer="{
+      toolbar: false,
+      navbar:false,
+      title:false,
+      url: 'data-source',
+    }"
+    class="images clearfix"
+  >
+    <img class="image" :src="image" :data-source="image" />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
+import CoverBtn from "./CoverBtn.vue";
+
+const props = defineProps({
+  center: Array,
+  // image: String,
+})
+
+const elRef = ref()
+const width = ref(170)
+const height = ref(70)
+
+const [image] = useModel("mapImage");
+
+const onShow = () => {
+    elRef.value.$viewer.show()
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/PopUp.vue

@@ -69,7 +69,7 @@ watch(() => props.show, (val) => {
       padding: 0 20px;
       font-size: 20px;
       text-indent: 42px;
-      margin-top: 50px;
+      margin-top: 30px;
       color: #fff;
     }
   }

src/components/QrCode.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="qrcode-box">
+    <div id="qrcode" class="qrcode"></div>
+    <canvas class="map-canvas" ref="cvsRef"></canvas>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
+import { map } from '../utils/resources';
+
+const [,changeImage] = useModel("mapImage");
+const cvsRef = ref();
+
+onMounted(() => {
+  const qrcode = new QRCode("qrcode");
+  qrcode.makeCode(location.origin + origin.path);
+
+  const qrImage = document.querySelector('#qrcode img');
+  const canvas = cvsRef.value;
+  
+  // 绘制地图 + 二维码
+  const mapImage = new Image();
+  mapImage.onload = (e) => {
+    const { width, height, naturalHeight, naturalWidth } = e.target;
+    canvas.width = naturalWidth;
+    canvas.height = naturalHeight;
+    const ctx = canvas.getContext('2d');
+
+    // 绘制地图
+    ctx.drawImage(mapImage,0,0);
+    // 绘制二维码, 160 是二维码的大小
+    ctx.drawImage(qrImage, 1000, 2620, 160, 160);
+    // 保存到 store
+    changeImage(canvas.toDataURL('image/png', 0.9));
+  };
+  mapImage.src = map;
+    
+})
+</script>
+
+<style lang="less" scoped>
+.qrcode-box {
+  position: absolute;
+  max-width: 1px;
+  max-height: 1px;
+  overflow: hidden;
+
+  .qrcode {
+    width:160px;
+    height:160px;
+  }
+}
+</style>

src/components/ScenicAudio.vue

@@ -0,0 +1,128 @@
+<template>
+  <CoverBtn
+    :center="center"
+    :width="width"
+    :height="height"
+    @click="onPlayBtn"
+  >
+    <AudioPlaying :style="iconStyle" />
+    <audio
+      class="spots-audio"
+      :src="audio"
+      preload="auto"
+      ref="audioRef"
+      @ended="onEnded"
+    ></audio>
+  </CoverBtn>
+  <div v-if="showGesture" class="gesture" :class="{ hidden: gestureHide }" :style="gestureStyle">
+    <i class="iconfont icon-cc-pointer-right"></i>
+  </div>
+</template>
+
+<script setup>
+  import { computed, watch, ref } from 'vue';
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
+  import CoverBtn from "./CoverBtn.vue";
+  import AudioPlaying from "./AudioPlaying.vue";
+
+  const props = defineProps({
+    center: Array,
+    audio: String,
+    showGesture: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emit = defineEmits(['play', 'stop'])
+
+  const [current, updateCurrent] = useModel("audio");
+  
+  const width = ref(64);
+  const height = ref(64);
+  const audioRef = ref();
+  const playState = ref(0);
+  const gestureHide = ref(false);
+  
+  const iconStyle = computed(() => ({
+    opacity: playState.value,
+  }));
+
+  const gestureStyle = computed(() => {
+    if (props.center && props.center.length > 1) {
+      return {
+        left: `${props.center[0] - width.value}px`,
+        top: `${props.center[1] - 12}px`
+      }
+    } else {
+      return {};
+    }
+  });
+  
+  const playAudio = () => {
+    audioRef.value.play();
+    playState.value = 1;
+    updateCurrent(props.audio);
+    emit('play');
+    gestureHide.value = true;
+  };
+
+  const stopAudio = () => {
+    audioRef.value.pause();
+    playState.value = 0;
+    emit('stop')
+  };
+
+  // 监控全局, 如果非当前播放器, 则停止播放
+  watch(current, (nw) => {
+    if (nw !== props.audio && playState.value === 1) {
+      stopAudio();
+    }
+  });
+
+  // 点击播放
+  const onPlayBtn = () => {
+    if (playState.value) {
+      stopAudio();
+    } else {
+      playAudio();
+    }
+  };
+  
+  // 播放完成
+  const onEnded = () => {
+    stopAudio();
+  };
+</script>
+
+<style lang="less" scoped>
+  .spots-audio {
+    max-width: 1px;
+    max-height: 1px;
+  }
+
+  .gesture {
+    position: absolute;
+    z-index: 9;
+    animation: gestureAnimation 1.6s ease-in-out infinite;
+
+    .iconfont {
+      font-size: 24px;
+    }
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  @keyframes gestureAnimation {
+    from {
+      opacity: 0;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(12px);
+    }
+  }
+</style>

src/components/ScenicDetail.vue

@@ -0,0 +1,36 @@
+<template>
+  <CoverBtn
+    :center="center"
+    :width="width"
+    :height="height"
+    @click="onShowInfoBtn"
+  />
+  <PopUpVue :show="showInfo" :info="info" :onClose="onCloseInfoBtn" />
+</template>
+
+<script setup>  
+import { computed, ref, watch } from "vue";
+  import CoverBtn from "./CoverBtn.vue";
+import PopUpVue from "./PopUp.vue";
+
+const props = defineProps({
+  center: Array,
+  info: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const showInfo = ref(false)
+const width = ref(50);
+const height = ref(120);
+
+// 显示详情介绍
+const onShowInfoBtn = () => {
+  showInfo.value=true
+};
+
+const onCloseInfoBtn = () => {
+  showInfo.value=false
+};
+</script>

src/store/index.js

@@ -14,6 +14,16 @@ const useAudio = () => {
   ]
 };
 
-const store = createStore({ audio: useAudio });
+const useMapImage = () => {
+  const image = ref();
+  
+  const changeImage = (val) => {
+    image.value = val;
+  }
+
+  return [image, changeImage];
+}
+
+const store = createStore({ audio: useAudio, mapImage: useMapImage });
 
 export default store;

src/utils/resources.js

@@ -1,44 +1,8 @@
-// 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";
 
-// import img1 from '@/assets/images/1.jpg';
-// import img2 from '@/assets/images/2.jpg';
-// import img3 from '@/assets/images/3.jpg';
-// import img4 from '@/assets/images/4.jpg';
-// import img5_1 from '@/assets/images/5-1.jpg';
-// import img5_2 from '@/assets/images/5-2.jpg';
-// import img5 from '@/assets/images/5.jpg';
-// import img6 from '@/assets/images/6.jpg';
-// import img7 from '@/assets/images/7.jpg';
-// import img8_1 from '@/assets/images/8-1.jpg';
-// import img8_2 from '@/assets/images/8-2.jpg';
-// import img8 from '@/assets/images/8.jpg';
-// import img9 from '@/assets/images/9.jpg';
-// import img10_1 from '@/assets/images/10-1.jpg';
-// import img10_2 from '@/assets/images/10-2.jpg';
-// import img10 from '@/assets/images/10.jpg';
-// import img11 from '@/assets/images/11.jpg';
-// import img12 from '@/assets/images/12.jpg';
-// import img13 from '@/assets/images/13.jpg';
-// import img14 from '@/assets/images/14.jpg';
-// import img15_1 from '@/assets/images/15-1.jpg';
-// import img15_2 from '@/assets/images/15-2.jpg';
-// import img15 from '@/assets/images/15.jpg';
-// import img16 from '@/assets/images/16.jpg';
-// import img17 from '@/assets/images/17.jpg';
-// import img18 from '@/assets/images/18.jpg';
-// import img19_1 from '@/assets/images/19-1.jpg';
-// import img19_2 from '@/assets/images/19-2.jpg';
-// import img19 from '@/assets/images/19.jpg';
-// import img20 from '@/assets/images/20.jpg';
-// import img21 from '@/assets/images/21.jpg';
-// import img22 from '@/assets/images/22.jpg';
-// import img23 from '@/assets/images/23.jpg';
-
 const infoImage = [
   "./infoimage/1长江大桥.jpg",
   "./infoimage/2阅江楼.jpg",
@@ -134,33 +98,6 @@ const images = [
   "./images/23.jpg",
 ];
 
-// import audio1 from '@/assets/audios/1南京长江大桥.mp3';
-// import audio2 from '@/assets/audios/2阅江楼.mp3';
-// import audio3 from '@/assets/audios/3秦淮河.mp3';
-// import audio4 from '@/assets/audios/4乌衣巷.mp3';
-// import audio5 from '@/assets/audios/5燕子矶.mp3';
-// import audio6 from '@/assets/audios/6栖霞山.mp3';
-// import audio7 from '@/assets/audios/7朝天宫.mp3';
-// import audio8 from '@/assets/audios/8梁洲.mp3';
-// import audio9 from '@/assets/audios/9后湖映月.mp3';
-// import audio10 from '@/assets/audios/10台城.mp3';
-// import audio11 from '@/assets/audios/11十里堤.mp3';
-// import audio12 from '@/assets/audios/12石头城.mp3';
-// import audio13 from '@/assets/audios/13莫愁湖公园.mp3';
-// import audio14 from '@/assets/audios/14赏心亭.mp3';
-// import audio15 from '@/assets/audios/15长干里.mp3';
-// import audio16 from '@/assets/audios/16大报恩寺.mp3';
-// import audio17 from '@/assets/audios/17凤凰台.mp3';
-// import audio18 from '@/assets/audios/18桃叶渡.mp3';
-// import audio19 from '@/assets/audios/19雨花台.mp3';
-// import audio20 from '@/assets/audios/20牛首山.mp3';
-// import audio21 from '@/assets/audios/21石臼湖.mp3';
-// import audio22 from '@/assets/audios/22东山.mp3';
-// import audio23 from '@/assets/audios/23瞻园.mp3';
-// import audio24 from '@/assets/audios/24白鹭洲.mp3';
-// import audio25 from '@/assets/audios/25随园.mp3';
-// import audio26 from '@/assets/audios/26世界文学客厅.mp3';
-
 const audios = [
   './audios/1南京长江大桥.mp3',
   './audios/2阅江楼.mp3',
@@ -211,9 +148,9 @@ export const resources = [
   {
     image: images[1],
     showMapBtn: {
-      pos: [280, 1250],
+      pos: [380, 1265],
     },
-    mapImage: [map],
+    mapImage: map,
   },
   {
     image: infoImage[0],
@@ -225,11 +162,12 @@ export const resources = [
       pos: [616, 932],
     },
     showGesture: true,
-    infoIcon: {
+    audio: audios[0],
+    infoIcon: [{
+      pos: [264, 697],
       image: infoImage[0],
       content: infoTexts[0],
-    },
-    audio: audios[0],
+    }],
   },
   {
     image: images[3],
@@ -237,11 +175,11 @@ export const resources = [
       pos: [100, 406],
     },
     audio: audios[1],
-    infoIcon: {
+    infoIcon: [{
+      pos: [480, 216],
       image: infoImage[1],
       content: infoTexts[1],
-      pos: 'top',
-    },
+    }],
   },
   {
     image: images[4],
@@ -249,11 +187,11 @@ export const resources = [
       pos: [650, 172],
     },
     audio: audios[2],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[2],
       content: infoTexts[2],
-      pos: 'bottom',
-    },
+      pos: [85, 49],
+    }],
   },
   {
     image: images[5],
@@ -261,11 +199,11 @@ export const resources = [
       pos: [652, 773],
     },
     audio: audios[3],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[3],
       content: infoTexts[3],
-      pos: 'bottom',
-    },
+      pos: [94, 634],
+    }],
   },
   // {
   //   image: img5,
@@ -276,10 +214,11 @@ export const resources = [
       pos: [624, 890],
     },
     audio: audios[4],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[4],
       content: infoTexts[4],
-    },
+      pos: [522, 352],
+    }],
   },
   {
     image: images[7],
@@ -287,10 +226,11 @@ export const resources = [
       pos: [612, 486],
     },
     audio: audios[5],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[5],
       content: infoTexts[5],
-    },
+      pos: [183, 223],
+    }],
   },
   {
     image: images[8],
@@ -298,11 +238,11 @@ export const resources = [
       pos: [93, 557],
     },
     audio: audios[6],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[6],
       content: infoTexts[6],
-      pos: 'right',
-    },
+      pos: [616, 118],
+    }],
   },
   {
     image: images[9],
@@ -310,11 +250,11 @@ export const resources = [
       pos: [163, 224],
     },
     audio: audios[7],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[7],
       content: infoTexts[7],
-      pos: 'right',
-    },
+      pos: [582, 348],
+    }],
   },
   // {
   //   image: img8,
@@ -325,10 +265,11 @@ export const resources = [
       pos: [152, 782],
     },
     audio: audios[8],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[8],
       content: infoTexts[8],
-    },
+      pos: [612, 540],
+    }],
   },
   {
     image: images[11],
@@ -336,11 +277,11 @@ export const resources = [
       pos: [662, 380],
     },
     audio: audios[9],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[9],
       content: infoTexts[9],
-      pos: 'top',
-    },
+      pos: [145, 137],
+    }],
   },
   {
     image: images[12],
@@ -348,10 +289,11 @@ export const resources = [
       pos: [646, 225],
     },
     audio: audios[10],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[10],
       content: infoTexts[10],
-    },
+      pos: [86, 496],
+    }],
   },
   // {
   //   image: img10,
@@ -362,11 +304,11 @@ export const resources = [
       pos: [574, 1074],
     },
     audio: audios[11],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[11],
       content: infoTexts[11],
-      pos: 'bottom',
-    },
+      pos: [699, 610],
+    }],
   },
   {
     image: images[14],
@@ -374,11 +316,11 @@ export const resources = [
       pos: [132, 550],
     },
     audio: audios[12],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[12],
       content: infoTexts[12],
-      pos: 'bottom',
-    },
+      pos: [593, 574],
+    }],
   },
   {
     image: images[15],
@@ -386,10 +328,15 @@ export const resources = [
       pos: [642, 310],
     },
     audio: audios[13],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[13],
       content: infoTexts[13],
-    },
+      pos: [66, 140],
+    },{
+      image: infoImage[14],
+      content: infoTexts[14],
+      pos: [253, 1161],
+    }]
   },
   {
     image: images[16],
@@ -397,11 +344,16 @@ export const resources = [
       pos: [92, 80],
     },
     audio: audios[14],
-    infoIcon: {
-      image: infoImage[14],
-      content: infoTexts[14],
-      pos: 'bottom',
-    },
+    // infoIcon: {
+    //   image: infoImage[14],
+    //   content: infoTexts[14],
+    //   pos: 'bottom',
+    // },
+    infoIcon: [{
+      image: infoImage[15],
+      content: infoTexts[15],
+      pos: [657, 948],
+    }],
   },
   {
     image: images[17],
@@ -409,11 +361,11 @@ export const resources = [
       pos: [652, 31],
     },
     audio: audios[15],
-    infoIcon: {
-      image: infoImage[15],
-      content: infoTexts[15],
-      pos: 'bottom',
-    },
+    // infoIcon: {
+    //   image: infoImage[15],
+    //   content: infoTexts[15],
+    //   pos: [657, 948],
+    // },
   },
   {
     image: images[18],
@@ -421,11 +373,11 @@ export const resources = [
       pos: [652, 353],
     },
     audio: audios[16],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[16],
       content: infoTexts[16],
-      pos: 'bottom',
-    },
+      pos: [347, 610],
+    }],
   },
   // {
   //   image: img15,
@@ -436,11 +388,11 @@ export const resources = [
       pos: [166, 600],
     },
     audio: audios[17],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[17],
       content: infoTexts[17],
-      pos: 'right',
-    },
+      pos: [668, 553],
+    }],
   },
   {
     image: images[20],
@@ -448,11 +400,11 @@ export const resources = [
       pos: [364, 606],
     },
     audio: audios[18],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[18],
       content: infoTexts[18],
-      pos: 'top',
-    },
+      pos: [123, 529],
+    }],
   },
   {
     image: images[21],
@@ -460,11 +412,15 @@ export const resources = [
       pos: [386, 472],
     },
     audio: audios[19],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[19],
       content: infoTexts[19],
-      pos: 'bottom',
-    },
+      pos: [151, 251],
+    },{
+      image: infoImage[20],
+      content: infoTexts[20],
+      pos: [160, 1244],
+    }]
   },
   {
     image: images[22],
@@ -472,11 +428,11 @@ export const resources = [
       pos: [132, 367],
     },
     audio: audios[20],
-    infoIcon: {
-      image: infoImage[20],
-      content: infoTexts[20],
-      pos: 'bottom',
-    },
+    // infoIcon: {
+    //   image: infoImage[20],
+    //   content: infoTexts[20],
+    //   pos: 'bottom',
+    // },
   },
   {
     image: images[23],
@@ -484,10 +440,11 @@ export const resources = [
       pos: [250, 699],
     },
     audio: audios[21],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[21],
       content: infoTexts[21],
-    },
+      pos: [690, 423],
+    }],
   },
   // {
   //   image: img19,
@@ -498,11 +455,11 @@ export const resources = [
       pos: [152, 1040],
     },
     audio: audios[22],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[22],
       content: infoTexts[22],
-      pos: 'right',
-    },
+      pos: [142, 852],
+    }],
   },
   {
     image: images[25],
@@ -510,11 +467,11 @@ export const resources = [
       pos: [172, 835],
     },
     audio: audios[23],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[23],
       content: infoTexts[23],
-      pos: 'right',
-    },
+      pos: [169, 627],
+    }],
   },
   {
     image: images[26],
@@ -522,11 +479,11 @@ export const resources = [
       pos: [98, 196],
     },
     audio: audios[24],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[24],
       content: infoTexts[24],
-      pos: 'right',
-    },
+      pos: [93, 494],
+    }],
   },
   {
     image: images[27],
@@ -534,9 +491,10 @@ export const resources = [
       pos: [160, 64],
     },
     audio: audios[25],
-    infoIcon: {
+    infoIcon: [{
       image: infoImage[25],
       content: infoTexts[25],
-    },
+      pos: [586, 285],
+    }],
   },
 ];