bug fix: 大屏：音乐按钮也放在底部菜单中

src/components/UIGather/mobile/control.pano_js.vue

@@ -1,27 +1,34 @@
 <template>
   <ul class="control-pano" :style="injectStyle">
-    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
+    <img v-if="isLargeScreen" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
     <li @click="onIsAutoRotate">
       <img :src="require(`@/assets/images/js_icon/${isAutoRotate ? 'auto_active.png' : 'auto.png'}`)"
         alt=""
       />
       <div>[自动漫游]</div>
     </li>
-    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
+    <img v-if="isLargeScreen" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
     <li @click="onIsShowList" v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
       <img :src="require(`@/assets/images/js_icon/${isShowScenesList ? 'daolan_active.png' : 'daolan.png'}`)"
         alt="" 
       />
       <div>[导览列表]</div>
     </li>
-    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
+    <img v-if="isLargeScreen" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
     <li @click="onIsShowHotspotList">
       <img :src="require(`@/assets/images/js_icon/${isShowHotspotList ? 'hotspot_active.png' : 'hotspot.png'}`)"
         alt="" 
       />
       <div>[热点列表]</div>
     </li>
-    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    
+    <img v-if="isLargeScreen" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
     
     <li @click="onVR"
      v-if="currentScene.type == 'pano' || (fdkkCurrentVersion == 'v3') || (currentScene.type == '4dkk' && (fdkkmetadata.controls && fdkkmetadata.controls.showVR))">
@@ -30,7 +37,19 @@
       />
       <div>[VR可视]</div>
     </li>
-    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+
+    <img v-if="isLargeScreen" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+
+    <li
+      v-if="isLargeScreen && metadata.backgroundMusic && metadata.backgroundMusic.id"
+      @click="onIsBGM"
+    >
+      <img :src="require(`@/assets/images/js_icon/${!showMusicPlaying ? 'music_active.png' : 'music.png'}`)" alt="" />
+      <div v-show="!showMusicPlaying">[打开音乐]</div>
+      <div v-show="showMusicPlaying">[关闭音乐]</div>
+    </li>
+    
+    <img v-if="isLargeScreen" class="splitter music-inline-splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
   </ul>
 
   <teleport to='body'>
@@ -125,7 +144,7 @@ const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
-const isShowSplitter = ref(window.innerWidth > 1750)
+const isLargeScreen = ref(window.innerWidth > 1750)
 
 const showMusicPlaying = ref(musicPlayer.isPlay)
 
@@ -353,8 +372,7 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
 }
 @media only screen and (min-width: 1750px){
     .musicfix {
-      width: 118px;
-      top: 60%;
+      display: none;
     }
   }
 </style>