From 9001f0506f4fb0938d4237e4fa4ae8634952f98c Mon Sep 17 00:00:00 2001
From: stonewu <me@stonewu.com>
Date: Wed, 9 Aug 2023 10:30:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=9F=B3=E4=B9=90=E9=A6=86?=
 =?UTF-8?q?=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E8=A7=A3=E5=86=B3mask=E9=81=AE?=
 =?UTF-8?q?=E6=8C=A1=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/assets/js/heo.js              | 11 +++++------
 templates/assets/libs/aplayer/music.css | 23 +++++++++++++++++++++--
 templates/music.html                    |  2 +-
 3 files changed, 27 insertions(+), 9 deletions(-)

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>