需求变更：改场景入口顺序和封面图；更新文物数据；添加文物音频

src/views/gui/EntryList.vue

@@ -35,6 +35,12 @@ export default {
     return {
       entryList: [
         {
+          bgImgUrl: require('@/assets/images/entries/zhu-ti.png'),
+          title: '仡佬·务川主题展厅',
+          sceneCode: 'KJ-vTmFlWyrzlK',
+          shabiUrl: 'https://www.4dkankan.com/spg.html?m=KJ-vTmFlWyrzlK&lang=zh',
+        },
+        {
           bgImgUrl: require('@/assets/images/entries/wen-wu.png'),
           title: '精品文物展厅',
           sceneCode: 'KJ-ztJ9nPQyf64',
@@ -47,12 +53,6 @@ export default {
           shabiUrl: 'https://www.4dkankan.com/spg.html?m=KJ-wlpyvYdFNXN&lang=zh',
         },
         {
-          bgImgUrl: require('@/assets/images/entries/zhu-ti.png'),
-          title: '仡佬·务川主题展厅',
-          sceneCode: 'KJ-vTmFlWyrzlK',
-          shabiUrl: 'https://www.4dkankan.com/spg.html?m=KJ-vTmFlWyrzlK&lang=zh',
-        },
-        {
           bgImgUrl: require('@/assets/images/entries/wen-hua.png'),
           title: '中国仡佬族民族文化展厅',
           sceneCode: 'KJ-Rytmid9ku2a',

src/views/gui/RelicDetail.vue

@@ -5,19 +5,26 @@
       frameborder="0"
     />
     <div class="desc-wrapper">
+      <button
+        class="audio-switch"
+        @click="onSwitchAudio"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/music-relics${isPlayingAudio ? '-mute' :''}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
       <h1>{{ relicInfo.name }}</h1>
       <ul>
         <li>
-          <h2>类别</h2>
-          <span>{{ relicInfo.sort }}</span>
-        </li>
-        <li>
           <h2>年代</h2>
           <span>{{ relicInfo.age }}</span>
         </li>
         <li>
-          <h2>尺寸</h2>
-          <span>{{ relicInfo.size }}</span>
+          <h2>材质</h2>
+          <span>{{ relicInfo.material }}</span>
         </li>
         <li>
           <h2>简介</h2>
@@ -25,6 +32,14 @@
         </li>
       </ul>
     </div>
+    <audio
+      v-show="false"
+      ref="audio"
+      :src="require(`@/assets/audios/${relicInfo.id}-wc.mp3`)"
+      @play="onAudioPlay"
+      @pause="onAudioPause"
+      @ended="onAudioEnded"
+    />
   </div>
 </template>
 
@@ -32,11 +47,39 @@
 import { goodsData } from "@/assets/data/data.js"
 
 export default {
+  data() {
+    return {
+      isPlayingAudio: false,
+      audio: null,
+    }
+  },
   computed: {
     relicInfo() {
       return goodsData.find((item) => {
         return item.id === Number(this.$route.query.id)
       })
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    onSwitchAudio() {
+      // console.log(this.$refs.audio.paused)
+      // console.log(this.$refs.audio.ended)
+      if (this.$refs.audio.paused || this.$refs.audio.ended) {
+        this.$refs.audio.play()
+      } else {
+        this.$refs.audio.pause()
+      }
+    },
+    onAudioPlay() {
+      this.isPlayingAudio = true
+    },
+    onAudioPause() {
+      this.isPlayingAudio = false
+    },
+    onAudioEnded() {
+      this.isPlayingAudio = false
     }
   }
 }
@@ -70,6 +113,20 @@ export default {
     display: flex;
     flex-direction: column;
     padding-top: 6.4vw;
+    position: relative;
+    > button.audio-switch {
+      position: absolute;
+      top: 5.3vw;
+      right: 4.4vw;
+      width: 7.1vw;
+      height: 7.1vw;
+      font-size: 0;
+      z-index: 1;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
     > h1 {
       flex: 0 0 auto;
       font-size: 5vw;