|
|
@@ -0,0 +1,124 @@
|
|
|
+<template>
|
|
|
+ <div class="attraction-page">
|
|
|
+ <div class="attraction-header">
|
|
|
+ <h1>{{ form.voiceName }}</h1>
|
|
|
+ </div>
|
|
|
+ <div class="author-release">
|
|
|
+ <p>发布人：{{ form.author }}</p>
|
|
|
+ <p>发布时间：{{ form.releaseTime }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="attraction-details">
|
|
|
+ <div class="rich-content" v-html="richContent"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {getVoice} from "@/api/system/voice";
|
|
|
+import {Howl} from 'howler';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Details",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ form: {},
|
|
|
+ localIp: '',
|
|
|
+ localPort: '',
|
|
|
+ instance: null,
|
|
|
+ sound: null,
|
|
|
+ richContent: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.localIp = this.getLocalIp();
|
|
|
+ this.localPort = this.getPort()
|
|
|
+ this.id = this.$route.params.id;
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getDetails()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ playSound(val) {
|
|
|
+ console.log("val", val);
|
|
|
+ if (this.sound) {
|
|
|
+ this.sound.play();
|
|
|
+ } else {
|
|
|
+ this.sound = new Howl({
|
|
|
+ src: [val],
|
|
|
+ html5: true,
|
|
|
+ format: ['mp3']
|
|
|
+ });
|
|
|
+ this.sound.play();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getLocalIp() {
|
|
|
+ const {hostname} = window.location;
|
|
|
+ return hostname === 'localhost' || hostname === '127.0.0.1'
|
|
|
+ ? 'http://192.168.4.9'
|
|
|
+ : `http://${hostname}`;
|
|
|
+ },
|
|
|
+ getPort() {
|
|
|
+ return window.location.port ? `:${window.location.port}` : '8080';
|
|
|
+ },
|
|
|
+ getDetails() {
|
|
|
+ let that = this
|
|
|
+ getVoice(that.$route.params.id).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ this.richContent = this.form.content
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.playSound(this.localIp + ":" + this.localPort + this.form.voiceUrl)
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+/* 控制 rich-content 中 img 标签的样式 */
|
|
|
+img {
|
|
|
+ width: 100%; /* 固定宽度 */
|
|
|
+ height: auto; /* 固定高度 */
|
|
|
+ object-fit: cover; /* 保持比例，裁剪多余部分 */
|
|
|
+ display: block; /* 使图片成为块级元素 */
|
|
|
+ margin: 16px 0; /* 上下外边距 */
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.attraction-page {
|
|
|
+ width: 1000rpx;
|
|
|
+ margin: auto;
|
|
|
+ padding: 16px; /* 添加内边距 */
|
|
|
+}
|
|
|
+.attraction-header {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column; /* 垂直排列 */
|
|
|
+ align-items: center; /* 水平居中 */
|
|
|
+ text-align: center; /* 文本居中 */
|
|
|
+}
|
|
|
+.author-release {
|
|
|
+ display: flex; /* 使用 Flexbox */
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ gap: 50px; /* 设置间距 */
|
|
|
+}
|
|
|
+p {
|
|
|
+ margin: 0; /* 去掉默认的外边距 */
|
|
|
+}
|
|
|
+.attraction-details {
|
|
|
+ width: 200rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.rich-content {
|
|
|
+ max-width: 100%; /* 最大宽度为 100% */
|
|
|
+ overflow: auto; /* 允许内容溢出时滚动 */
|
|
|
+ font-size: 16px; /* 设置默认字体大小 */
|
|
|
+}
|
|
|
+/* 响应式样式 */
|
|
|
+@media (max-width: 600px) {
|
|
|
+ .rich-content {
|
|
|
+ font-size: 14px; /* 在手机端字体稍小 */
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
limeng