添加背景音乐功能

src/components/Information/View.Mobile.vue

@@ -1,12 +1,16 @@
 <template>
     <div class="header" @touchmove.prevent>
-        <div class="left" :class="{ show: player.showVR }">
-            <div v-show="mode != 'panorama' && !isApp && player.showWidgets" class="back-pano" @click="onChangeMode">
+        <div class="left" :class="{ show: showMusic }">
+            <div class="music" @click.stop="onMenuClick('music')">
+                <img :src="require(`@/assets/images/icon/${showMusicPlaying?'music_on@2x':'music_off@2x'}.png`)" alt="" />
+            </div>
+
+            <!-- <div v-show="mode != 'panorama' && !isApp && player.showWidgets" class="back-pano" @click="onChangeMode">
                 <ui-icon type="show_back"></ui-icon>
             </div>
             <div v-show="mode == 'panorama'" class="back" @click="onBack">
                 <ui-icon type="_back"></ui-icon>
-            </div>
+            </div> -->
         </div>
         <div class="title" :class="{ up: player.showDescription, drak: mode != 'panorama', empty: !description }" @click="onShowDescription" v-show="player.showWidgets">
             <div>
@@ -191,12 +195,12 @@ const onMusicClick = () => {
     showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
 }
 const onMenuClick = name => {
-    store.commit('SetPlayerOptions', {
-        showMore: false,
-        showDescription: false,
-        showMap: true,
-        showToolbar: true,
-    })
+    // store.commit('SetPlayerOptions', {
+    //     showMore: false,
+    //     showDescription: false,
+    //     showMap: true,
+    //     showToolbar: true,
+    // })
 
     nextTick(() => {
         if (name == 'music') {
@@ -206,17 +210,19 @@ const onMenuClick = name => {
             // } else {
             //     musicPlayer.play()
             // }
-        } else if (name == 'share') {
-            if (isApp.value) {
-                showShare.value = true
-            } else {
-                showCopy.value = true
-            }
-        } else if (name === 'measure') {
-            this.$bus.emit('measure/Handle', 'start')
-        } else if (name == 'vr') {
-            store.commit('showVR')
-        }
+        } 
+        
+        // else if (name == 'share') {
+        //     if (isApp.value) {
+        //         showShare.value = true
+        //     } else {
+        //         showCopy.value = true
+        //     }
+        // } else if (name === 'measure') {
+        //     this.$bus.emit('measure/Handle', 'start')
+        // } else if (name == 'vr') {
+        //     store.commit('showVR')
+        // }
     })
 }
 const onShare = name => {
@@ -255,47 +261,36 @@ const onChangeMode = () => {
         top: 1rem;
     }
     .left {
-        width: 1rem;
+        width: 1.28rem;
         height: 100%;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
+        pointer-events: none;
+
         &.show {
             visibility: visible;
             pointer-events: auto;
-            .back {
+            .music {
                 visibility: visible;
             }
         }
-        .back {
-            width: 0.78rem;
-            height: 0.78rem;
-            border-radius: 50%;
-            background-color: rgba(0, 0, 0, 0.3);
+       
+        .music {
+            width: 0.50rem;
+            height: 0.50rem;
             display: flex;
             align-items: center;
             justify-content: center;
             visibility: hidden;
             position: relative;
-            i {
-                font-size: 0.3rem;
-                width: auto;
-                position: static;
-            }
-        }
-        .back-pano {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            // padding-left: 15px;
-            position: relative;
-            i {
-                font-size: 0.6rem;
+            >img {
+                width: 100%;
+                height: auto;
                 position: static;
             }
         }
+       
     }
     .right {
         position: relative;