移动端没有背景音乐不显示音乐按钮/切换文物回到顶部

web/src/views/gui/compomemt/antique.vue

@@ -62,17 +62,21 @@
     <!-- 模型和图片 -->
     <div class="model" v-if="modelShow">
       <div class="ifrCon" ref="ifrCon">
-        <img :src="baseURL + txtInfo.thumb" alt="" v-if="txtInfo.type==='img'">
+        <img
+          :src="baseURL + txtInfo.thumb"
+          alt=""
+          v-if="txtInfo.type === 'img'"
+        />
         <iframe :src="mySrc" frameborder="0" v-else></iframe>
         <!-- 全屏按钮 -->
-        <div class="full" @click="screen" v-if="txtInfo.type==='model'">
+        <div class="full" @click="screen" v-if="txtInfo.type === 'model'">
           <img src="@/assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
           <img src="@/assets/img/tab3Full.png" alt="" v-else />
         </div>
       </div>
       <div class="rightTxt">
         <h3>{{ txtInfo.name }}</h3>
-        <p v-html="txtInfo.description"></p>
+        <p class="ppov" v-html="txtInfo.description"></p>
       </div>
       <!-- 返回按钮 -->
       <div class="close el-icon-arrow-left" @click="modelShow = false"></div>
@@ -154,10 +158,10 @@ export default {
       this.fullscreen = !this.fullscreen;
     },
     lookInfo(item) {
-        this.txtInfo = item;
-        // 三维模型
-        this.mySrc ="4dage/Model.html?m=" + item.filePath;
-        this.modelShow = true;
+      this.txtInfo = item;
+      // 三维模型
+      this.mySrc = "4dage/Model.html?m=" + item.filePath;
+      this.modelShow = true;
     },
     mySearch() {
       this.formData.pageNum = 1;
@@ -193,7 +197,7 @@ export default {
     this.baseURL = axios.defaults.baseURL;
     this.goodList(this.formData);
     // 设置一个全局变量控制空格建的监听
-    window.myKeyBlank =true
+    window.myKeyBlank = true;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -202,7 +206,7 @@ export default {
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {
-    window.myKeyBlank =false
+    window.myKeyBlank = false;
   }, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
@@ -371,13 +375,13 @@ export default {
         width: 100%;
         height: 100%;
       }
-      &>img{
+      & > img {
         max-width: 100%;
         max-height: 100%;
         position: absolute;
         left: 50%;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
       }
       .full {
         width: 30px;
@@ -402,17 +406,25 @@ export default {
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      &>h3{
+      & > h3 {
         width: 100%;
-        word-break:break-all;
+        word-break: break-all;
         font-size: 30px;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
       }
-      &>P{
+      & > P {
+        padding-right: 15px;
+        max-height: calc(100% - 60px);
+        overflow-y: auto;
+        line-height: 24px;
         width: 100%;
-        word-break:break-all;
-        color: #CC946D;
-        font-size: 14px;
+        word-break: break-all;
+        color: #cc946d;
+        font-size: 16px;
+      }
+
+      .ppov::-webkit-scrollbar-thumb {
+        outline: 2px solid #cc946d;
       }
     }
   }

webM/public/static/css/main.css

@@ -4260,6 +4260,9 @@ a.tag-link {
     align-items: center;
 }
 
+#volume {
+    display: none;
+}
 
 #view-controllers {
     color: rgba(255, 255, 255, .5);

webM/src/views/gui/component/antique.vue

@@ -173,6 +173,9 @@ export default {
       this.formData.type = type;
       this.formData.pageNum = 1;
       this.goodList(this.formData);
+      // 回到顶部
+      let dom = document.querySelector(".contenBox");
+      dom.scrollTo({ top: 0 });
     },
     // 封装获取列表函数
     async goodList(data) {
@@ -294,6 +297,7 @@ export default {
         font-size: 20px;
       }
       & > div {
+        line-height: 20px;
         margin-top: 5px;
         padding: 0 15px;
         word-break: break-all;
@@ -485,7 +489,7 @@ export default {
     .contenBox {
       width: 100% !important;
       justify-content: center;
-      .row{
+      .row {
         margin-right: 0 !important;
       }
     }