Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/hotspot

src/views/About.vue

@@ -1,5 +1,30 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div class="About">
+    <button @click="src='/index.html#/?m=kHmozE403325&time=1704175752215&id=1384'">点我</button>
+    <iframe v-if="src" :src="src" frameborder="0"></iframe>
   </div>
 </template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      src: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped></style>

src/views/Home.vue

@@ -55,11 +55,10 @@
               alt=""
             />
             <video
+              class="videoDom"
               v-else-if="active === 'video'"
               :src="fixUrl(item.url)"
               controls
-              autoplay
-              muted
             ></video>
             <iframe
               @click="colseParent(item)"
@@ -194,9 +193,27 @@ export default {
     };
   },
   watch: {
+    myInd: {
+      handler(newv) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.active == "video") {
+              // 控制当前选中的视频播放
+              let videoDoms = document.querySelectorAll(".videoDom");
+              videoDoms.forEach((v, i) => {
+                if (i === newv) v.play();
+                else v.pause();
+              });
+            }
+          }, 500);
+        });
+      },
+      immediate: true,
+    },
+
     active(newVal) {
-      let AcDataLength = this.data[newVal].length-1
-      if(this.myInd>AcDataLength) this.myInd = AcDataLength
+      let AcDataLength = this.data[newVal].length - 1;
+      if (this.myInd > AcDataLength) this.myInd = AcDataLength;
 
       // 判断是否只有一张图片或者视频，ifrm   lengthShow
       let tempType = this.data[newVal];
@@ -217,6 +234,12 @@ export default {
             this.$refs.musicBg.pause();
           }
         }
+        // 控制当前选中的视频播放
+        let videoDoms = document.querySelectorAll(".videoDom");
+        videoDoms.forEach((v, i) => {
+          if (i === this.myInd) v.play();
+          else v.pause();
+        });
       }, 500);
     },
   },
@@ -284,7 +307,15 @@ export default {
           item.display = true;
         }
         // 如果有音频
-        if (item.id === "audio" && this.audio) item.display = true;
+        if (item.id === "audio" && this.audio) {
+          item.display = true;
+
+          // 初始播放音频
+          this.$nextTick(() => {
+            this.$refs.musicBg.play();
+            if (!this.$refs.musicBg.paused) this.audioAc(true);
+          });
+        }
       });
     },
 
@@ -347,6 +378,8 @@ export default {
 .mb-intro {
   color: #fff;
   padding: 10px;
+  height: calc(100% - 30px);
+  overflow-y: auto;
   > p {
     line-height: 1.5;
     letter-spacing: 1px;
@@ -442,6 +475,23 @@ export default {
       font-size: 16px;
       text-indent: 32px;
     }
+    &::-webkit-scrollbar {
+      /*滚动条整体样式*/
+      width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 5px transparent;
+      background: #fff;
+    }
+    &::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      -webkit-box-shadow: inset 0 0 5px transparent;
+      border-radius: 10px;
+      background: transparent;
+    }
   }
   .ismtop {
     max-height: 65%;
@@ -590,4 +640,4 @@ export default {
     width: 100%;
   }
 }
-</style>
+</style>