增加背景音乐自动播放

web/src/pages/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="parent-body">
+  <div class="parent-body" @click="musicOne">
     <!-- 热点 -->
     <!-- <hot/> -->
     <!-- 热点弹出框 -->
@@ -8,7 +8,7 @@
     <div id="gui-thumb"></div>
 
     <!-- 主容器 -->
-    <div id="player"></div>
+    <div id="player" @touchstart="musicPlay"></div>
     <div id="gui-parent">
       <!-- 进度条加载 -->
       <gui-loading />
@@ -116,10 +116,22 @@ export default {
       showWelcome: true,
       hotspots: "",
       loading: true,
+      // 控制背景音乐
+      musicFlag: 1,
     };
   },
 
   methods: {
+    musicOne() {
+      this.musicFlag++;
+      this.musicPlay();
+    },
+    // 自动播放音乐
+    musicPlay() {
+      if (this.musicFlag > 5) return;
+      if (this.musicFlag <= 2) window.manage.switchBgmState(true);
+      this.musicFlag++;
+    },
     meanMHide() {
       this.$refs.vMenuRef.mobilShowHide();
     },

web/src/views/gui/component/browse.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="browse">
     <div>
-      <img class="logo" src="@/assets/img/logo.png" alt="" />
+      <img class="logo" src="@/assets/img/logo.png" @click="toHome" alt="" />
       <span class="line"></span>
       <div class="right">
         <img src="@/assets/img/eye.png" alt="" />
@@ -28,7 +28,13 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    toHome() {
+      window.location.href =
+        window.location.origin + window.location.pathname + `#/`;
+      location.reload(true);
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -43,7 +49,7 @@ export default {
       fetch("http://47.112.166.173:8109/api/count/detail/" + 1171)
         .then((response) => response.json())
         .then((data) => {
-          this.myMoods = data.data.visitSum
+          this.myMoods = data.data.visitSum;
         });
     }
   },

web/src/views/gui/menu.vue

@@ -136,12 +136,7 @@
               />
             </div>
 
-            <div
-              @click="switchBGM"
-              id="myMoMu"
-              data-original-title="音乐"
-              v-if="0"
-            >
+            <div @click="switchBGM" id="myMoMu" data-original-title="音乐">
               <img
                 class="icon icon-inside"
                 :src="
@@ -346,6 +341,17 @@
           @click="isIssue = true"
           :src="require(`@/assets/img/${isGame ? 'game_active' : 'game'}.png`)"
         />
+        <!-- 音乐 -->
+        <div @click="switchBGM" id="myMoMu" data-original-title="音乐">
+          <img
+            class="icon icon-inside"
+            :src="
+              require(`@/assets/images/icon/${
+                bgmPlay ? 'musicon' : 'musicoff'
+              }.png`)
+            "
+          />
+        </div>
       </div>
     </div>
 
@@ -387,26 +393,34 @@ export default {
     };
   },
   computed: {},
-  watch:{
-    mobilShow(val){
-      if(val) {
-        this.$emit('mapHide')
+  watch: {
+    mobilShow(val) {
+      if (val) {
+        this.$emit("mapHide");
       }
-    }
+    },
   },
   mounted() {
     this.getlikeCon("detail/");
   },
   methods: {
-    mobilShowHide(){
-      this.mobilShow=false
+    mobilShowHide() {
+      this.mobilShow = false;
     },
     // 封装一个移动端菜单隐藏的方法，让父组件调用 ↑
     // 切换语言
     langueCut() {
       if (window.location.href.indexOf("_1") > -1) {
-        window.location.href = window.location.origin +window.location.pathname+ window.location.hash.slice(0, -2);
-      } else window.location.href = window.location.origin +window.location.pathname+window.location.hash+'_1';
+        window.location.href =
+          window.location.origin +
+          window.location.pathname +
+          window.location.hash.slice(0, -2);
+      } else
+        window.location.href =
+          window.location.origin +
+          window.location.pathname +
+          window.location.hash +
+          "_1";
       location.reload(true);
     },
     // 封装点赞的接口
@@ -693,5 +707,13 @@ export default {
       margin-bottom: 8px;
     }
   }
+  #myMoMu {
+    display: block !important;
+    width: 38px;
+    & > img {
+      width: 38px;
+      margin-left: 0px;
+    }
+  }
 }
 </style>