新增 个性化设置

css/mobile.css

@@ -177,7 +177,7 @@
 
     span.link-name {
         display: block !important;
-        font-size: 0.95rem;
+        font-size: 0.85rem;
     }
 
     span.line-text,

css/style.css

@@ -546,13 +546,13 @@ i.iconfont.icon-z_shangpinheji {
     margin: 1rem 0rem 0.5rem 0rem;
 }
 
-/*更多页面链接*/
+/*其他链接*/
 
 .mores .link-card {
     height: 48px !important;
 }
 
-/*box*/
+/*更多页面*/
 .box-left {
     flex: 0 44%;
     min-width: 400px;
@@ -589,17 +589,55 @@ i.iconfont.icon-z_shangpinheji {
     justify-content: space-between;
 }
 
-.upnote {
+#accordion {
-    margin-top: 1rem;
+    min-width: 360px;
-    margin-left: 2rem;
+    margin-right: 40px;
-    display: flex;
+    margin-top: 20px;
-    flex-direction: column;
+    margin-left: 14px;
-    line-height: 40px;
+    border-radius: 8px;
-    font-size: 1.10rem;
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 10%);
 }
 
-.uptext i {
+.accordion-item {
-    font-size: 1.25rem;
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.accordion-item:first-of-type .accordion-button {
+    border-radius: 8px;
+}
+
+.accordion-button {
+    color: white !important;
+    background-color: transparent;
+    transition: 0.3s;
+
+}
+
+.accordion-button:focus {
+    border-color: #ffffff26 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+    transition: 0.3s;
+}
+
+.accordion-button:not(.collapsed) {
+    background-color: #ffffff26;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.accordion-button::after {
+    border-radius: 8px;
+    background-image: none !important;
+}
+
+.accordion-body {
+    padding: 1rem 0rem !important;
+    background-color: #ffffff10;
 }
 
 .closebox {
@@ -617,6 +655,58 @@ i.iconfont.icon-github1 {
     font-size: 1.45rem;
 }
 
+/*个性设置*/
+.set {
+    display: flex;
+    flex-direction: column;
+    padding: 0rem 1.5rem;
+}
+
+.set-text {
+    text-align: center;
+}
+
+.btn-group,
+.btn-group-vertical {
+    margin-top: 10px;
+}
+
+.btn-outline-primary {
+    color: #eeeeee !important;
+    border-color: #ffffff26 !important;
+}
+
+.btn-outline-primary:hover {
+    background-color: #ffffff26 !important;
+    border-color: #eeeeee !important;
+}
+
+.btn-check:focus+.btn, .btn:focus {
+    box-shadow: none !important;
+}
+
+.btn-check:active+.btn-outline-primary,
+.btn-check:checked+.btn-outline-primary,
+.btn-outline-primary.active,
+.btn-outline-primary.dropdown-toggle.show,
+.btn-outline-primary:active {
+    background-color: #ffffff26 !important;
+    border-color: #eeeeee !important;
+}
+
+/*更新日志*/
+.upnote {
+    display: flex;
+    flex-direction: column;
+    padding: 0rem 1.5rem;
+    height: 156px;
+    overflow-y: auto;
+}
+
+.uptext {
+    line-height: 32px;
+}
+
 /*Aplayer*/
 .box-right {
     flex: 0 54%;
@@ -652,6 +742,10 @@ i.iconfont.icon-github1 {
 }
 
 /*音乐列表*/
+.aplayer.aplayer-withlist .aplayer-list {
+    margin-top: 6px;
+}
+
 .aplayer .aplayer-list ol li.aplayer-list-light {
     background: #ffffff26 !important;
     border-radius: 6px !important;
@@ -783,4 +877,16 @@ footer {
 .iziToast>.iziToast-close {
     background: url(https://cdn.jsdelivr.net/gh/imsyy/file/pic/close.png) no-repeat 50% 50% !important;
     background-size: 8px !important;
+}
+
+/*滚动条样式*/
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #eeeeee;
 }

index.html

@@ -343,26 +343,82 @@
                         <div class="closebox fixed-top" id="closemore">
                             <i class="iconfont icon-close"></i>
                         </div>
-                        <!--更新日志-->
+                        <!--左侧内容-->
                         <div class="box-left">
                             <div class="img-title">
                                 <span class="img-title">imsyy</span>
                                 <span class="img-text">.top</span><br />
-                                <span class="img-text">&nbsp;&nbsp;v&nbsp;1.6</span>
+                                <span class="img-text">&nbsp;&nbsp;v&nbsp;2.2</span>
                                 <a href="https://github.com/imsyy/home" target="_blank"><i
                                         class="iconfont icon-github1"></i></a>
                             </div>
-                            <div class="upnote">
+                            <!--更多内容-->
-                                <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
+                            <div class="accordion" id="accordion">
-                                <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
+                                <div class="accordion-item">
-                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复 CDN 加载缓慢</span>
+                                    <h2 class="accordion-header" id="headingOne">
-                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
+                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
+                                            data-bs-target="#collapseOne" aria-expanded="true"
-                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为 Iconfont</span>
+                                            aria-controls="collapseOne">
-                                <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
+                                            个性设置 - 尚未实现
-                                        style="color:#efefef">点击此处返回旧版站点</a></span>
+                                        </button>
+                                    </h2>
+                                    <div id="collapseOne" class="accordion-collapse collapse show"
+                                        aria-labelledby="headingOne" data-bs-parent="#accordion">
+                                        <div class="accordion-body">
+                                            <div class="set">
+                                                <div class="set-text">壁纸个性化</div>
+                                                <div class="btn-group" role="group"
+                                                    aria-label="Basic radio toggle button group">
+                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
+                                                        autocomplete="off" checked>
+                                                    <label class="btn btn-outline-primary" for="btnradio1">默认壁纸</label>
+
+                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio2"
+                                                        autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="btnradio2">每日一图</label>
+
+                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio3"
+                                                        autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="btnradio3">随机动漫</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!--更新日志-->
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header" id="headingTwo">
+                                        <button class="accordion-button collapsed" type="button"
+                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+                                            aria-expanded="false" aria-controls="collapseTwo">
+                                            更新日志
+                                        </button>
+                                    </h2>
+                                    <div id="collapseTwo" class="accordion-collapse collapse"
+                                        aria-labelledby="headingTwo" data-bs-parent="#accordion">
+                                        <div class="accordion-body">
+                                            <div class="upnote">
+                                                <span class="uptext"><i
+                                                        class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
+                                                <span class="uptext"><i
+                                                        class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
+                                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复
+                                                    CDN 加载缓慢</span>
+                                                <span class="uptext"><i
+                                                        class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
+                                                <span class="uptext"><i
+                                                        class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
+                                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为
+                                                    Iconfont</span>
+                                                <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a
+                                                        href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
+                        <!--Aplayer-->
                         <div class="box-right">
                             <div id="aplayer"></div>
                         </div>

js/main.js

@@ -323,8 +323,8 @@ var title2 = `
 |_____|_|  |_|_____/   |_|      |_|                                                     
 `
 var content = `
-版 本 号：1.6
+版 本 号：2.2
-更新日期：2022-01-30
+更新日期：2022-04-12
 
 更新说明：
 1. 新增 音乐播放器支持音量控制

js/music.js

@@ -306,9 +306,9 @@ const ap = new APlayer({
         {
             name: "有何不可",
             artist: "许嵩",
-            url: "https://drive.imsyy.top/api?path=/%E9%9F%B3%E4%B9%90/%E6%96%87%E4%BB%B6%E5%BC%95%E7%94%A8/%E8%AE%B8%E5%B5%A9-%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF.mp3&raw=true",
+            url: "https://drive.imsyy.top/api/raw/?path=/音乐/华语音乐/许嵩/许嵩%20-%20有何不可%20-%20独白版.mp3",
             cover: "https://y.qq.com/music/photo_new/T002R300x300M000002KSDg90IaScI_1.jpg?max_age=2592000",
-            lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E8%AE%B8%E5%B5%A9-%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF.lrc",
+            lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E8%AE%B8%E5%B5%A9%20-%20%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF%20-%20%E7%8B%AC%E7%99%BD%E7%89%88.lrc",
             theme: "#edbe76"
         },
         {