|
@@ -25,27 +25,6 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <button
|
|
|
- v-show="!isAudioPlaying"
|
|
|
- class="audio-control"
|
|
|
- @click="playAudio"
|
|
|
- >
|
|
|
- 开
|
|
|
- </button>
|
|
|
- <button
|
|
|
- v-show="isAudioPlaying"
|
|
|
- class="audio-control"
|
|
|
- @click="pauseAudio"
|
|
|
- >
|
|
|
- 关
|
|
|
- </button>
|
|
|
- <audio
|
|
|
- ref="audio"
|
|
|
- loop
|
|
|
- src="@/assets/中秋对歌会.mp3"
|
|
|
- @play="isAudioPlaying = true"
|
|
|
- @pause="isAudioPlaying = false"
|
|
|
- />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -53,25 +32,12 @@
|
|
|
import { goodsData } from "@/assets/data/data.js"
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isAudioPlaying: false,
|
|
|
- }
|
|
|
- },
|
|
|
computed: {
|
|
|
relicInfo() {
|
|
|
return goodsData.find((item) => {
|
|
|
return item.id === Number(this.$route.query.id)
|
|
|
})
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- playAudio() {
|
|
|
- this.$refs.audio.play()
|
|
|
- },
|
|
|
- pauseAudio() {
|
|
|
- this.$refs.audio.pause()
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -150,14 +116,5 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- button.audio-control {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- audio {
|
|
|
- display: none;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|