diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js
index 2a0386bf..ca79c3dc 100644
--- a/templates/assets/js/heo.js
+++ b/templates/assets/js/heo.js
@@ -550,14 +550,13 @@ var heo = {
         });
 
         aplayerIconMenu.addEventListener("click", function () {
-            document.getElementById("menu-mask").style.display = "block";
-            document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show";
+            $(".music-mask").css("display","block")
+            $(".music-mask").css("animation","0.5s ease 0s 1 normal none running to_show")
         });
-
-        document.getElementById("menu-mask").addEventListener("click", function () {
-            if (window.location.pathname != "/music") return;
+        $(".music-mask").click(function(){
             anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
-        });
+            $(".music-mask").hide();
+        })
     },
 
 };
diff --git a/templates/assets/libs/aplayer/music.css b/templates/assets/libs/aplayer/music.css
index a2023487..72809ed7 100644
--- a/templates/assets/libs/aplayer/music.css
+++ b/templates/assets/libs/aplayer/music.css
@@ -34,6 +34,10 @@ body {
     display: block;
 }
 
+body#htmlType-music .music-mask{
+    display: none;
+}
+
 body#htmlType-music #web_bg {
     display: none;
 }
@@ -397,6 +401,7 @@ body#htmlType-music #nav-music {
 }
 
 @media screen and (max-width: 768px) {
+
     body[data-type=music] #rightside {
         display: none
     }
@@ -408,7 +413,7 @@ body#htmlType-music #nav-music {
 
     #anMusic-page meting-js .aplayer .aplayer-list {
         position: fixed;
-        z-index: 1002;
+        z-index: 100;
         width: 100%;
         bottom: -88%;
         left: 0;
@@ -560,7 +565,7 @@ body#htmlType-music #nav-music {
 
     #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-loop {
         position: absolute;
-        right: 25px
+        right: 10px
     }
 
     #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
@@ -569,4 +574,18 @@ body#htmlType-music #nav-music {
         right: 25px;
         top: -90px
     }
+    body#htmlType-music .music-mask{
+        position: fixed;
+        z-index: 10;
+        display: none;
+        width: 100%;
+        height: 100%;
+        background: var(--heo-maskbg);
+        backdrop-filter: saturate(180%) blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        transform: translateZ(0);
+        animation: 0.6s ease 0s 1 normal none running to_show;
+        left: 0;
+        top: 0;
+    }
 }
\ No newline at end of file
diff --git a/templates/music.html b/templates/music.html
index 48a58612..a626bee7 100644
--- a/templates/music.html
+++ b/templates/music.html
@@ -5,13 +5,13 @@
 <th:block th:fragment="content">
 
     <div class="page" id="body-wrap">
-
         <!-- 头部导航栏 -->
         <header class="not-top-img" id="page-header">
             <nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
+                <div class="music-mask"></div>
                 <h1 class="page-title">音乐馆</h1>
                 <div id="anMusic-page">
                     <!-- <div id="anMusicBtnGetSong"><i class="anzhiyufont anzhiyu-icon-shuffle"></i></div>