C端数字史馆：1.优化右下角按钮UI，删除相关的无用资源文件；2.背景音乐播放按钮功能开发，按钮UI与换肤同步。

web/public/static/css/main.css

@@ -3729,17 +3729,13 @@ a.hasHover:hover, a:active {
 }
 
 .pinBottom.right .ui-icon {
-  width: 50px;
-  height: 50px;
-  background: rgba(0, 0, 0, 0.39);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
+  margin-right: 23px;
+  margin-bottom: 17px;
 }
 
 .pinBottom.right .ui-icon img {
-  width: 22px;
-  height: 22px;
+  width: 50px;
+  height: 50px;
 }
 
 #volume>a, #gui-fullscreen>a, #gui-fullscreen-exit>a {

web/public/static/js/manage.js

@@ -125,12 +125,25 @@ Manage.prototype.loadAudio = function() {
     this.switchBgmState(true);
   });
 
-  $("#volume")
-    .find("a")
+  window.addEventListener('themechange', (e) => {
+    if ($("#bg-music-btn")[0].src.indexOf(`bgm_off_`) > -1) {
+      setTimeout(() => {
+        let theme = ''
+        if($('#app')[0]) {
+          theme = $('#app')[0].className.substring(5)
+        } else {
+          theme = 'huyangjin'
+        }
+        $("#bg-music-btn").attr("src", `../static/images/bgm_off_${theme}.png`);
+      }, 0);
+    }
+  })
+  
+  $("#bg-music-btn")
     .on("click", () => {
-      if ($("#volume img")[0].src.indexOf("btn_on.png") > -1) {
+      if ($("#bg-music-btn")[0].src.indexOf("bgm_on.png") > -1) {
         this.switchBgmState(true);
-      } else if ($("#volume img")[0].src.indexOf("btn_off.png") > -1) {
+      } else if ($("#bg-music-btn")[0].src.indexOf(`bgm_off_`) > -1) {
         this.switchBgmState(false);
       }
     });
@@ -140,18 +153,25 @@ Manage.prototype.switchBgmState = function(state) {
   if (!g_bgAudio || !g_bgAudio.src) return;
 
   var played = function() {
-    console.log("begin play bgm");
     g_play = 1;
     g_playAudio = g_bgAudio;
-    $("#volume a img").attr("src", "./images/Volume btn_off.png");
-    $("#volume").attr("title", "关闭声音");
+    
+    let theme = ''
+    if($('#app')[0]) {
+      theme = $('#app')[0].className.substring(5)
+    } else {
+      theme = 'huyangjin'
+    }
+
+    $("#bg-music-btn").attr("src", `../static/images/bgm_off_${theme}.png`);
+    $("#bg-music-btn").attr("title", "关闭声音");
     g_tourAudio && g_tourAudio.pause();
   };
   var paused = function() {
     g_play = 0;
     g_playAudio == g_bgAudio && (g_playAudio = null);
-    $("#volume a img").attr("src", "./images/Volume btn_on.png");
-    $("#volume").attr("title", "打开声音");
+    $("#bg-music-btn").attr("src", "../static/images/bgm_on.png");
+    $("#bg-music-btn").attr("title", "打开声音");
   };
 
   if (state) {

web/src/views/layout/header.vue

@@ -205,6 +205,7 @@ export default {
     changeColor(id) {
       this.$store.dispatch("changeTheme", id);
       document.getElementById("app").className = "theme" + id;
+      document.getElementsByTagName('iframe')[0].contentWindow.dispatchEvent(new Event('themechange'))
     },
     navigateTo(item) {
       this.activeIdx = item.id;

web/src/views/scene/gui/menu.vue

@@ -188,10 +188,10 @@
               :src="require(`@/assets/images/btnlist/${item.id}${btnlistActive==item.id?`_${theme}`:''}.png`)"
             />
           </li>
-          <li @click="isBgm=!isBgm">
+          <li>
             <img
-              title="音乐"
-              :src="require(`@/assets/images/btnlist/bgm${isBgm?`_${theme}`:''}.png`)"
+              id="bg-music-btn"
+              :src="require(`@/assets/images/btnlist/bgm_on.png`)"
             />
           </li>
         </ul>
@@ -225,7 +225,7 @@
         <div id="volume" class="ui-icon wide">
           <a>
             <img
-              :src="require('@/assets/images/btnlist/Volume btn_on.png')"
+              :src="require('@/assets/images/btnlist/解说-打开.png')"
               width="24"
               height="24"
             />
@@ -257,7 +257,7 @@
           title="{[{ VIEW_FULLSCREEN }]}"
         >
           <a title="全屏">
-            <img class="icon icon-fullscreen" :src="require('@/assets/images/展开全屏@2x.png')"/>
+            <img class="icon icon-fullscreen" :src="require('@/assets/images/btnlist/大场景-展开.png')"/>
           </a>
         </div>
         <div
@@ -269,7 +269,7 @@
           style="display: none"
         >
           <a title="退出全屏">
-            <img title="退出全屏" :src="require('@/assets/images/退出全屏@2x.png')"/>
+            <img class="icon-fullscreen-exit" :src="require('@/assets/images/btnlist/大场景-缩小.png')"/>
           </a>
         </div>
         <div class="pull-right terms terms2">
@@ -384,7 +384,6 @@ export default {
       conLi,
       showAutoList: false,
       btnlistActive:this.itemctive,
-      isBgm:false,
       isShowGood:false,
       likeNum:0
     };
@@ -414,7 +413,7 @@ export default {
       getStar(res=>{
         this.likeNum = res.data
       })
-    }
+    },
   },
   mounted(){
     this.$bus.$on('resetbtnactive',()=>{