配置文件

zhjq-ui/src/views/system/voice/details/details.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="attraction-page">
-    <div class="attraction-header">
-      <h1>{{ form.voiceName }}</h1>
+    <div v-show="tip" class="tips">
+      <span>即将跳转该景点沉浸式体验页面，为保证体验效果最佳，请调整您的手机音量。</span>
+      <button @click="show" class="but">同意并继续</button>
     </div>
-    <div class="author-release">
-      <p>发布人：{{ form.author }}</p>
-      <p>发布时间：{{ form.releaseTime }}</p>
-    </div>
-    <div style="display: flex; align-items: center;">
-<!--      <p style="margin-right: 10px;">语音介绍:</p>-->
-      <video class="videoStyle" id="video_1" :src="form.voiceUrl" autobuffer controls></video>
-    </div>
-    <div class="attraction-details">
-      <div class="rich-content" v-html="richContent"></div>
+    <div v-show="content" class="shipin-cont">
+      <div class="attraction-header">
+        <h1>{{ form.voiceName }}</h1>
+      </div>
+      <div class="author-release">
+        <p>发布人：{{ form.author }}</p>
+        <p>发布时间：{{ form.releaseTime }}</p>
+      </div>
+      <div style="display: flex; align-items: center;">
+        <audio class="videoStyle" id="myAudio" :src="form.voiceUrl" loop controls></audio>
+      </div>
+      <div class="attraction-details">
+        <div class="rich-content" v-html="richContent"></div>
+      </div>
     </div>
+
   </div>
 </template>
 <script>
@@ -33,7 +39,9 @@ export default {
       richContent: "",
       serverUrl: null,
       showDiv:false,
-      videoSrc: ''
+      videoSrc: '',
+      tip:true,
+      content:false
     };
   },
 
@@ -47,18 +55,12 @@ export default {
     });
   },
   methods: {
-    // playSound(val) {
-    //   if (this.sound) {
-    //     this.sound.play();
-    //   } else {
-    //     this.sound = new Howl({
-    //       src: [val],
-    //       html5: true,
-    //       format: ['mp3']
-    //     });
-    //     this.sound.play();
-    //   }
-    // },
+    show(){
+      this.tip = false;
+      this.content = true;
+      let audio = document.getElementById("myAudio");
+      audio.play();
+    },
     getDetails() {
       let that = this
       getAppInfo(that.$route.query.id).then(response => {
@@ -66,9 +68,6 @@ export default {
         this.richContent = this.form.content
         this.videoSrc = this.form.voiceUrl;
       });
-      // setTimeout(() => {
-        // this.playSound(this.form.voiceUrl)
-      // }, 1000);
     }
   }
 };
@@ -93,7 +92,8 @@ video {
 .attraction-page {
   width: 100%;
   margin: auto;
-  padding: 16px; /* 添加内边距 */
+  height: 100%;
+
 }
 
 .attraction-header {
@@ -102,12 +102,15 @@ video {
   flex-direction: column; /* 垂直排列 */
   align-items: center; /* 水平居中 */
   text-align: center; /* 文本居中 */
+  font-size: 18px;
 }
 
 .author-release {
   display: flex; /* 使用 Flexbox */
   justify-content: center; /* 水平居中 */
   gap: 50px; /* 设置间距 */
+  font-size: 14px;
+  color: #666;
 }
 
 p {
@@ -115,8 +118,10 @@ p {
 }
 
 .attraction-details {
-  width: 200rpx;
-  margin-bottom: 20rpx;
+  font-size: 16px;
+  line-height: 1.8em;
+  color: #333;
+  text-indent: 2em;
 }
 
 .rich-content {
@@ -129,6 +134,31 @@ p {
   width: 100%;
   height: 70px; /* 固定高度 */
 }
+.tips {
+  width: 100%;
+  padding: 77% 6%;
+  font-size: 18px;
+  line-height: 2em;
+  color: #152c61;
+  text-align: justify;
+  background: url(/static/img/tip-image.972efe50.png);
+  background-size: 100% auto;
+}
+.tips .but{
+  background: linear-gradient(60deg, #708ad5, #1c4ce0);
+  display: block;
+  width: 60%;
+  height: 3em;
+  border: none;
+  color: #fff;
+  margin: 50px auto;
+  border-radius: 5px;
+  box-shadow: 0px 0 4px #507ee5;
+}
+.shipin-cont{
+  padding: 0 6%;
+  text-align: justify;
+}
 /* 响应式样式 */
 @media (max-width: 600px) {
   .rich-content {