feats

src/components/Mask.vue

 
 <script setup>
   import { onMounted, ref } from 'vue';
-  import indexImage from '@/assets/index.jpg';
-  import maskImage from '@/assets/mask.png';
-
+  import { index as indexImage, mask as maskImage } from '@/utils/resources'
+  
   // const props = defineProps({
   //   img: {
   //     type: Object,

src/utils/resources.js

 
 
-import index from '@/assets/index.jpg';
-import mask from '@/assets/mask.png';
+// import index from '@/assets/index.jpg';
+// import mask from '@/assets/mask.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';
+export const index = './index.jpg';
+export const mask = './mask.png';
 
-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';
+// 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 images = [
+  './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/8.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/15.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',
+]
+
+// 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',
+  './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 = [
     hidden: true,
   },
   { 
-    image: img1,
+    image: images[0],
   },
   { 
-    image: img2,
+    image: images[1],
   },
   { 
-    image: img3,
+    image: images[2],
     playBtn: {
       pos: [616, 932],
     },
-    audio: audio1,
+    audio: audios[0],
   },
   { 
-    image: img4,
+    image: images[3],
     playBtn: {
       pos: [100, 406],
     },
-    audio: audio2,
+    audio: audios[1],
   },
   { 
-    image: img5_1,
+    image: images[4],
     playBtn: {
       pos: [650, 172],
     },
-    audio: audio3,
+    audio: audios[2],
   },
   { 
-    image: img5_2,
+    image: images[5],
     playBtn: {
       pos: [652, 773],
     },
-    audio: audio4,
+    audio: audios[3],
   },
   // { 
   //   image: img5,
   // },
   { 
-    image: img6,
+    image: images[6],
     playBtn: {
       pos: [624, 890],
     },
-    audio: audio5,
+    audio: audios[4],
   },
   { 
-    image: img7,
+    image: images[7],
     playBtn: {
       pos: [612, 486],
     },
-    audio: audio6,
+    audio: audios[5],
   },
   { 
-    image: img8_1,
+    image: images[8],
     playBtn: {
       pos: [93, 557],
     },
-    audio: audio7,
+    audio: audios[6],
   },
   { 
-    image: img8_2,
+    image: images[9],
     playBtn: {
       pos: [163, 224],
     },
-    audio: audio8,
+    audio: audios[7],
   },
   // { 
   //   image: img8,
   // },
   { 
-    image: img9,
+    image: images[10],
     playBtn: {
       pos: [152, 782],
     },
-    audio: audio9,
+    audio: audios[8],
   },
   { 
-    image: img10_1,
+    image: images[11],
     playBtn: {
       pos: [659, 368],
     },
-    audio: audio10,
+    audio: audios[9],
   },
   { 
-    image: img10_2,
+    image: images[12],
     playBtn: {
       pos: [646, 217],
     },
-    audio: audio11,
+    audio: audios[10],
   },
   // { 
   //   image: img10,
   // },
   { 
-    image: img11,
+    image: images[13],
     playBtn: {
       pos: [574, 1074],
     },
-    audio: audio12,
+    audio: audios[11],
   },
   { 
-    image: img12,
+    image: images[14],
     playBtn: {
       pos: [132, 550],
     },
-    audio: audio13,
+    audio: audios[12],
   },
   { 
-    image: img13,
+    image: images[15],
     playBtn: {
       pos: [642, 310],
     },
-    audio: audio14,
+    audio: audios[13],
   },
   { 
-    image: img14,
+    image: images[16],
     playBtn: {
       pos: [92, 80],
     },
-    audio: audio15,
+    audio: audios[14],
   },
   { 
-    image: img15_1,
+    image: images[17],
     playBtn: {
       pos: [652, 31],
     },
-    audio: audio16,
+    audio: audios[15],
   },
   { 
-    image: img15_2,
+    image: images[18],
     playBtn: {
       pos: [652, 353],
     },
-    audio: audio17,
+    audio: audios[16],
   },
   // { 
   //   image: img15,
   // },
   { 
-    image: img16,
+    image: images[19],
     playBtn: {
       pos: [166, 600],
     },
-    audio: audio18,
+    audio: audios[17],
   },
   { 
-    image: img17,
+    image: images[20],
     playBtn: {
       pos: [364, 606],
     },
-    audio: audio19,
+    audio: audios[18],
   },
   { 
-    image: img18,
+    image: images[21],
     playBtn: {
       pos: [386, 472],
     },
-    audio: audio20,
+    audio: audios[19],
   },
   { 
-    image: img19_1,
+    image: images[22],
     playBtn: {
       pos: [132, 367],
     },
-    audio: audio21,
+    audio: audios[20],
   },
   { 
-    image: img19_2,
+    image: images[23],
     playBtn: {
       pos: [250, 699],
     },
-    audio: audio22,
+    audio: audios[21],
   },
   // { 
   //   image: img19,
   // },
   { 
-    image: img20,
+    image: images[24],
     playBtn: {
       pos: [152, 1040],
     },
-    audio: audio23,
+    audio: audios[22],
   },
   { 
-    image: img21,
+    image: images[25],
     playBtn: {
       pos: [654, 886],
     },
-    audio: audio24,
+    audio: audios[23],
   },
   { 
-    image: img22,
+    image: images[26],
     playBtn: {
       pos: [98, 196],
     },
-    audio: audio25,
+    audio: audios[24],
   },
   { 
-    image: img23,
+    image: images[27],
     playBtn: {
       pos: [160, 64],
     },
-    audio: audio26,
+    audio: audios[25],
   },
 ]