From 039b70c4b610b0b1f2bf12fd821eecff5842dd3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Wed, 6 Nov 2019 00:28:28 +0800
Subject: [PATCH] update

---
 src/css/app.css      |  2 +-
 src/css/app.scss     | 37 ++++++++++++++++++++-----------------
 src/css/common.css   |  2 +-
 src/css/common.scss  |  4 ++--
 src/css/modules.css  |  2 +-
 src/css/modules.scss | 12 +++++++++---
 src/index.html       |  2 +-
 src/views/local.htm  |  4 ++--
 8 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/css/app.css b/src/css/app.css
index 20c31a7..d57868b 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1 +1 @@
-#app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, #f3f5fb)}#app .title-bar{position:relative;z-index:9;display:flex;height:5rem}#app .title-bar .btn-box{position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0}#app .title-bar .btn-box .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}#app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}#app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}#app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}#app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}#app .title-bar .btn-box-win{position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}#app .title-bar .btn-box-win .item,#app .title-bar .btn-box-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}#app .title-bar .btn-box-win .item{text-align:center}#app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}#app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}#app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}#app .title-bar .btn-box-win .opt i{font-size:1.8rem}#app .title-bar .btn-box-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}#app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}#app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}#app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem  0;border-bottom:0.1rem solid #f3f5fb}#app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}#app .title-bar .holder{width:18rem;height:100%}#app .title-bar .tools{flex:1;padding:1rem}#app .title-bar .tools .search{display:flex;width:30rem}#app .main-body{flex:1;display:flex}#app .main-body .sidebar{width:18rem;position:relative;height:100%}#app .main-body .sidebar .user-box{width:14rem;height:16.5rem;margin:0 2rem;text-align:center}#app .main-body .sidebar .user-box .avatar{overflow:hidden;width:10rem;height:10rem;margin:0 2rem;border:.5rem solid #fff;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.15)}#app .main-body .sidebar .user-box img{width:100%;height:100%}#app .main-body .sidebar .user-box .uname{line-height:2;font-weight:normal}#app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}#app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#aabac3}#app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#7e909a}#app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}#app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}#app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}#app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}#app .main-body .module{position:relative;flex:1;display:flex;flex-direction:column}#app .contrl-bar{position:relative;z-index:99;display:flex;height:6.5rem}#app .contrl-bar .play-box{display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 0.25rem 1rem rgba(0,0,0,0.075)}#app .contrl-bar .play-box .btn-bg{position:absolute;left:3.25rem;height:3.5rem;border-left:3.25rem solid #f3f5fb;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent}#app .contrl-bar .play-box .btn-bg::before{position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .btn-bg::after{position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .action{position:relative;display:flex;justify-content:center;align-items:center}#app .contrl-bar .play-box .action.play{width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.2)}#app .contrl-bar .play-box .action.next{width:2rem;height:2rem;margin-left:.75rem}#app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}#app .contrl-bar .stat-box .song-stat{flex:1;height:6.5rem;margin:0 2rem 0 0}#app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}#app .contrl-bar .stat-box .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}#app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}#app .contrl-bar .stat-box .ctrl:active{color:#16967a}#app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}#app .contrl-bar .stat-box .ctrl .volume-ctrl{display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0,0,0,0.1)}#app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}#app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}#app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}#app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}#app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}#app.blur .contrl-bar{background:rgba(255,255,255,0.35)}#app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}#app.ktv .contrl-bar .play-box .item,#app.ktv .contrl-bar .stat-box .ctrl{color:#fff}#app.ktv .contrl-bar .play-box .item:hover,#app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}#app .ktv-box{overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:#425064;background-size:cover;background-repeat:no-repeat;color:#fff}#app .ktv-box .inner-content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29,35,44,0.767);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}#app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}#app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}#app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}#app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}#app .ktv-box .inner-content .lrc-box{flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}#app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}#app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}#app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}#app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}#app .ktv-box .inner-content .tool-box{position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255,255,255,0.1);border-radius:.3rem  0 0 .3rem;opacity:.3;-webkit-transform:translateX(8.8rem);transform:translateX(8.8rem);transition:all .2s ease-in-out}#app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}#app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}#app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}#app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}#app .ktv-box .inner-content .slide-down{position:absolute;right:1rem;top:1rem;width:3rem;height:2rem;line-height:1.8rem;border:0.1rem solid #aabac3;border-radius:.3rem;text-align:center}#app .ktv-box .inner-content .slide-down i{-webkit-transform:rotate(90deg);transform:rotate(90deg)}#app .ktv-box .inner-content .search-box{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29,35,44,0.5);-webkit-backdrop-filter:blur(0.4rem);backdrop-filter:blur(0.4rem)}#app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}#app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}#app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}#app .ktv-box .inner-content .search-box .content .section{height:3.5rem}#app .ktv-box .inner-content .search-box .content .section input{width:100%}#app .ktv-box .inner-content .search-box .content .result{overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255,255,255,0.2)}#app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}#app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #aabac3}#app .ktv-box .inner-content .search-box .content .result .item span{flex:1}#app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}#app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}#app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}#app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}#app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}#app .loading .box i:nth-child(2){-webkit-animation:load 2.5s .5s ease-in-out infinite;animation:load 2.5s .5s ease-in-out infinite}#app .loading .box i:nth-child(3){-webkit-animation:load 2.5s 1s ease-in-out infinite;animation:load 2.5s 1s ease-in-out infinite}#app .loading .box i:nth-child(4){-webkit-animation:load 2.5s 1.5s ease-in-out infinite;animation:load 2.5s 1.5s ease-in-out infinite}#app .loading .box i:nth-child(5){-webkit-animation:load 2.5s 2s ease-in-out infinite;animation:load 2.5s 2s ease-in-out infinite}#app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover}#app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}#app .loading .box span:nth-child(7){background-image:url(/images/load2.png);-webkit-animation:load2 2.5s linear infinite;animation:load2 2.5s linear infinite}#app .loading .box cite{font-size:2.4rem}.do-mod-contextmenu{width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem}.do-mod-contextmenu li{overflow:hidden;width:100%;height:35px;padding:0 10px;transition:background .2s ease-in-out;cursor:default}.do-mod-contextmenu li:hover{background:#f3f5fb}.do-mod-contextmenu li i{padding:0 3px;font-size:1.6rem;vertical-align:bottom}.do-layer .layer-box.do-mod-contextmenu__fixed{padding:0}@-webkit-keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
+#app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, #f3f5fb)}#app .title-bar{position:relative;z-index:9;display:flex;height:5rem}#app .title-bar .btn-box{width:auto;height:3rem;padding:.9rem 0}#app .title-bar .btn-box .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}#app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}#app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}#app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}#app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}#app .title-bar .btn-box-win{width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}#app .title-bar .btn-box-win .item,#app .title-bar .btn-box-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}#app .title-bar .btn-box-win .item{text-align:center}#app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}#app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}#app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}#app .title-bar .btn-box-win .opt i{font-size:1.8rem}#app .title-bar .btn-box-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}#app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}#app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}#app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem  0;border-bottom:0.1rem solid #f3f5fb}#app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}#app .title-bar .holder{width:18rem;height:100%}#app .title-bar .tools{flex:1;padding:1rem}#app .title-bar .tools .search{display:flex;width:30rem}#app .main-body{overflow:hidden;flex:1;display:flex}#app .main-body .sidebar{width:18rem;position:relative;height:100%}#app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}#app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#aabac3}#app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#7e909a}#app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}#app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}#app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}#app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}#app .main-body .module{overflow:hidden;position:relative;flex:1;display:flex;height:100%}#app .contrl-bar{position:relative;z-index:99;display:flex;height:6.5rem}#app .contrl-bar .play-box{display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 0.25rem 1rem rgba(0,0,0,0.075)}#app .contrl-bar .play-box .btn-bg{position:absolute;left:3.25rem;height:3.5rem;border-left:3.25rem solid #f3f5fb;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent}#app .contrl-bar .play-box .btn-bg::before{position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .btn-bg::after{position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .action{position:relative;display:flex;justify-content:center;align-items:center}#app .contrl-bar .play-box .action.play{width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.2)}#app .contrl-bar .play-box .action.next{width:2rem;height:2rem;margin-left:.75rem}#app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}#app .contrl-bar .stat-box .song-stat{flex:1;height:6.5rem;margin:0 2rem 0 0}#app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}#app .contrl-bar .stat-box .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}#app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}#app .contrl-bar .stat-box .ctrl:active{color:#16967a}#app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}#app .contrl-bar .stat-box .ctrl .volume-ctrl{display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0,0,0,0.1)}#app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}#app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}#app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}#app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}#app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}#app.blur .contrl-bar{background:rgba(255,255,255,0.35)}#app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}#app.ktv .contrl-bar .play-box .item,#app.ktv .contrl-bar .stat-box .ctrl{color:#fff}#app.ktv .contrl-bar .play-box .item:hover,#app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}#app .ktv-box{overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background:#425064;background-size:cover;background-repeat:no-repeat;color:#fff}#app .ktv-box .inner-content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29,35,44,0.767);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}#app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}#app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}#app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}#app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}#app .ktv-box .inner-content .lrc-box{flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}#app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}#app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}#app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}#app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}#app .ktv-box .inner-content .tool-box{position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255,255,255,0.1);border-radius:.3rem  0 0 .3rem;opacity:.3;-webkit-transform:translateX(8.8rem);transform:translateX(8.8rem);transition:all .2s ease-in-out}#app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}#app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}#app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}#app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}#app .ktv-box .inner-content .slide-down{position:absolute;right:1rem;top:1rem;width:3rem;height:2rem;line-height:1.8rem;border:0.1rem solid #aabac3;border-radius:.3rem;text-align:center}#app .ktv-box .inner-content .slide-down i{-webkit-transform:rotate(90deg);transform:rotate(90deg)}#app .ktv-box .inner-content .search-box{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29,35,44,0.5);-webkit-backdrop-filter:blur(0.4rem);backdrop-filter:blur(0.4rem)}#app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}#app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}#app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}#app .ktv-box .inner-content .search-box .content .section{height:3.5rem}#app .ktv-box .inner-content .search-box .content .section input{width:100%}#app .ktv-box .inner-content .search-box .content .result{overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255,255,255,0.2)}#app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}#app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #aabac3}#app .ktv-box .inner-content .search-box .content .result .item span{flex:1}#app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}#app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}#app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}#app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}#app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}#app .loading .box i:nth-child(2){-webkit-animation:load 2.5s .5s ease-in-out infinite;animation:load 2.5s .5s ease-in-out infinite}#app .loading .box i:nth-child(3){-webkit-animation:load 2.5s 1s ease-in-out infinite;animation:load 2.5s 1s ease-in-out infinite}#app .loading .box i:nth-child(4){-webkit-animation:load 2.5s 1.5s ease-in-out infinite;animation:load 2.5s 1.5s ease-in-out infinite}#app .loading .box i:nth-child(5){-webkit-animation:load 2.5s 2s ease-in-out infinite;animation:load 2.5s 2s ease-in-out infinite}#app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover}#app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}#app .loading .box span:nth-child(7){background-image:url(/images/load2.png);-webkit-animation:load2 2.5s linear infinite;animation:load2 2.5s linear infinite}#app .loading .box cite{font-size:2.4rem}.do-mod-contextmenu{width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem}.do-mod-contextmenu li{overflow:hidden;width:100%;height:35px;padding:0 10px;transition:background .2s ease-in-out;cursor:default}.do-mod-contextmenu li:hover{background:#f3f5fb}.do-mod-contextmenu li i{padding:0 3px;font-size:1.6rem;vertical-align:bottom}.do-layer .layer-box.do-mod-contextmenu__fixed{padding:0}@-webkit-keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
diff --git a/src/css/app.scss b/src/css/app.scss
index ad32e56..c8c1711 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -8,14 +8,16 @@
 
 @import "./var.scss";
 
-#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));
+#app {
+  position:relative;display:flex;flex-direction:column;
+  width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));
 
   // 标题栏样式
   .title-bar {position:relative;z-index:9;display:flex;height:5rem;
     
-    .btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
+    .btn-box {width:auto;height:3rem;padding:.9rem 0;
   
-      .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;}
+      .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;}
   
       &.focus {
         .quit {background-image:url(/images/btn-close.svg);}
@@ -29,7 +31,8 @@
       }
     }
   
-    .btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
+    .btn-box-win {
+      width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
   
       .item,
       .opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem;
@@ -64,19 +67,11 @@
 
 
   // 主体样式
-  .main-body {flex:1;display:flex;
+  .main-body {overflow:hidden;;flex:1;display:flex;
   
     // 侧边栏
     .sidebar {width:18rem;position:relative;height:100%;
   
-      // 用户信息
-      .user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
-      
-        .avatar {overflow:hidden;width:10rem;height:10rem;margin:0 2rem;border:.5rem solid #fff;border-radius:50%;box-shadow:0 .5rem  1.5rem rgba(0, 0, 0, .15);}
-        img {width:100%;height:100%;}
-        .uname {line-height:2;font-weight:normal;}
-      }
-  
       // 功能菜单导航
       .music-box {width:100%;height:auto;padding:0 1.5rem;
   
@@ -94,7 +89,7 @@
     }
 
     // 功能模块
-    .module {position:relative;flex:1;display:flex;flex-direction:column;}
+    .module {overflow:hidden;position:relative;flex:1;display:flex;height:100%;}
   }
 
 
@@ -185,9 +180,14 @@
   }
 
 
-  .ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff;
+  .ktv-box {
+    overflow:hidden;position:absolute;z-index:80;left:0;top:0;
+    width:100%;height:100%;
+    background:nth($cd, 3);background-size:cover;background-repeat:no-repeat;
+    color:#fff;
   
-    .inner-content  {display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
+    .inner-content  {
+      display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
     
       .info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2;
 
@@ -265,7 +265,10 @@
   }
 
 
-  .loading {position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
+  .loading {
+    position:fixed;left:0;top:0;z-index:65536;
+    display:flex;justify-content:center;align-items:center;
+    width:100%;height:100%;
   
     .box {position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem;
       
diff --git a/src/css/common.css b/src/css/common.css
index bc622ae..e92ccc2 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -1 +1 @@
-.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:75%}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid rgba(200,200,200,0.15)}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:rgba(29,35,44,0.08)}table tbody td{padding:.9rem .8rem}table .ac{text-align:center}table .idx{color:#dae1e9;text-shadow:0 0.1rem 0 rgba(255,255,255,0.6)}table .active{color:#3fc2a7;background:rgba(255,255,255,0.6);font-weight:bold}
+.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:1vw}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid rgba(200,200,200,0.15)}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:rgba(29,35,44,0.08)}table tbody td{padding:.9rem .8rem}table .ac{text-align:center}table .idx{color:#dae1e9;text-shadow:0 0.1rem 0 rgba(255,255,255,0.6)}table .active{color:#3fc2a7;background:rgba(255,255,255,0.6);font-weight:bold}
diff --git a/src/css/common.scss b/src/css/common.scss
index 73136a8..40393c6 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -11,8 +11,8 @@
 .do-fn-drag {-webkit-app-region:drag;user-select: none;}
 .do-fn-nodrag {-webkit-app-region:no-drag;}
 
-html {font-size:75%}
-body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:nth($cd, 1);}
+html {font-size:1vw}
+body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:nth($cd, 1);}
 
 table {overflow:auto;display:table;width:100%;line-height:2.5rem;
   thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
diff --git a/src/css/modules.css b/src/css/modules.css
index e6e464f..d1636ba 100644
--- a/src/css/modules.css
+++ b/src/css/modules.css
@@ -1 +1 @@
-.do-mod-artist{position:relative;display:flex;width:100%;height:100%}.do-mod-artist .filter-box{flex:0 1 12rem;border-right:0.1rem solid #f3f5fb;text-align:right}.do-mod-artist .filter-box .item{width:100%;height:2.4rem;padding:0 1.2rem;line-height:2.4rem;color:#98acae}.do-mod-artist .filter-box .item.active{color:#3fc2a7;font-weight:bold}.do-mod-artist .filter-box .item:hover{padding-right:1.3rem;color:#3fc2a7}.do-mod-artist .filter-box .pipe{display:block;width:100%;height:.7rem}.do-mod-artist .list-box{overflow-y:auto;display:flex;flex-flow:row wrap;flex:1;padding:0 1rem}.do-mod-artist .list-box .item{display:flex;justify-content:center;align-items:center;flex:45%;height:7rem;margin:1rem 2.5%;padding:.5rem;background:#f3f5fb}.do-mod-artist .list-box .item img{flex:0 1 6rem;height:6rem}.do-mod-artist .list-box .item summary{flex:2;padding:0 1rem}.do-mod-artist .list-box .item strong{font-size:1.6rem}.do-mod-artist .list-box .item p{font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box{position:absolute;left:0;top:0;z-index:9;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}.do-mod-artist .artist-box .content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding:1.5rem 2.5rem;background:linear-gradient(to bottom, #fff 2%, rgba(255,255,255,0.75), #fff 98%);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-artist .artist-box .content .name{flex:0 1 3.6rem;font-size:1.4rem;font-style:italic;font-weight:normal}.do-mod-artist .artist-box .content .name a{text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .name i{color:#98acae}.do-mod-artist .artist-box .content .desc{flex:0 1 3rem;font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box .content .desc span{padding:0 .5rem;text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .song-album{flex:1;display:flex;flex-flow:column wrap}.do-mod-artist .artist-box .content .tab{flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-artist .artist-box .content .tab .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem}.do-mod-artist .artist-box .content .tab .item.active{border-bottom:0.2rem solid #3fc2a7;color:#3fc2a7}.do-mod-artist .artist-box .content .tab .item.disabled{opacity:.25}.do-mod-local{flex:1;display:flex;flex-flow:column wrap}.do-mod-local .tabbar{flex:0 1  3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid rgba(200,200,200,0.3)}.do-mod-local .tabbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .tabbar .refresh:hover{color:#ffb618}.do-mod-local .tabbar .refresh:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-local .table{overflow:auto;flex:1}.do-mod-local .edit-form{position:absolute;left:0;top:0;z-index:90;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-local .edit-form .form{position:relative;display:flex;flex-flow:column wrap;flex:0 40rem;width:5rem;height:auto;padding:.5rem 4rem 2rem;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.2)}.do-mod-local .edit-form .form .section{display:flex;flex:1;justify-content:center;align-items:center;margin:1rem 0}.do-mod-local .edit-form .form .section.title{line-height:2;font-size:1.6rem}.do-mod-local .edit-form .form .section.title i{position:absolute;right:1rem;top:1rem;color:#ff5061}.do-mod-local .edit-form .form .section.title i:hover{-webkit-transform:scale(1.2);transform:scale(1.2);font-weight:bold}.do-mod-local .edit-form .form .section .label{flex:0 5rem;padding-right:2rem;color:#98acae;text-align:right}.do-mod-local .edit-form .form .section .field{flex:1}.do-mod-local .edit-form .form .section .field.path{border:0;font-size:1.3rem;color:#526273}.do-mod-search{flex:1;display:flex;flex-flow:column wrap}.do-mod-search .tabbar{flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-search .tabbar .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:0.1rem solid rgba(200,200,200,0.3);border-bottom:0;color:#dae1e9}.do-mod-search .tabbar .item.active{color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}#app.blur .do-mod-search .tabbar .item{border-color:#dae1e9;color:#f3f5fb}#app.blur .do-mod-search .tabbar .item.active{color:#62778d}.do-mod-profile{overflow-y:auto;padding:0 3rem}.do-mod-profile .title{position:relative;width:100%;height:6rem;line-height:6rem;border-bottom:0.1rem solid #dae1e9;font-size:1.8rem}.do-mod-profile .title .save{position:absolute;bottom:.3rem;right:0}.do-mod-profile .block{display:flex;justify-content:center;align-items:center;width:100%;padding:2rem  0;border-bottom:0.1rem solid #f3f5fb}.do-mod-profile .block .label{flex:0 1 20rem}.do-mod-profile .block .field{flex:1;display:flex;align-items:center}.do-mod-profile .block .path-holder{max-width:26rem;padding:0 1.5rem 0 .5rem;border-bottom:0.1rem solid #98acae;color:#98acae}.do-mod-profile .block .do-radio{margin-right:2rem}.do-mod-profile .block .desc{line-height:2}.do-mod-profile .block .desc p{margin-top:1.5rem}.artist-desc-layer{width:60rem;height:30rem}.artist-desc-layer .layer-content{overflow-y:auto;height:85% !important;padding:1rem;line-height:2;text-indent:2em}
+.do-mod-artist{position:relative;display:flex;width:100%;height:100%}.do-mod-artist .filter-box{flex:0 1 12rem;border-right:0.1rem solid #f3f5fb;text-align:right}.do-mod-artist .filter-box .item{width:100%;height:2.4rem;padding:0 1.2rem;line-height:2.4rem;color:#aabac3}.do-mod-artist .filter-box .item.active{color:#3fc2a7;font-weight:bold}.do-mod-artist .filter-box .item:hover{padding-right:1.3rem;color:#3fc2a7}.do-mod-artist .filter-box .pipe{display:block;width:100%;height:.7rem}.do-mod-artist .list-box{overflow-y:auto;display:flex;flex-flow:row wrap;flex:1;padding:0 1rem}.do-mod-artist .list-box .item{display:flex;justify-content:center;align-items:center;flex:45%;height:7rem;margin:1rem 2.5%;padding:.5rem;background:#f3f5fb}.do-mod-artist .list-box .item img{flex:0 1 6rem;height:6rem}.do-mod-artist .list-box .item summary{flex:2;padding:0 1rem}.do-mod-artist .list-box .item strong{font-size:1.6rem}.do-mod-artist .list-box .item p{font-size:1.2rem;color:#aabac3}.do-mod-artist .artist-box{position:absolute;left:0;top:0;z-index:9;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}.do-mod-artist .artist-box .content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding:1.5rem 2.5rem;background:linear-gradient(to bottom, #fff 2%, rgba(255,255,255,0.75), #fff 98%);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-artist .artist-box .content .name{flex:0 1 3.6rem;font-size:1.4rem;font-style:italic;font-weight:normal}.do-mod-artist .artist-box .content .name a{text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .name i{color:#aabac3}.do-mod-artist .artist-box .content .desc{flex:0 1 3rem;font-size:1.2rem;color:#aabac3}.do-mod-artist .artist-box .content .desc span{padding:0 .5rem;text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .song-album{flex:1;display:flex;flex-flow:column wrap}.do-mod-artist .artist-box .content .tab{flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-artist .artist-box .content .tab .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem}.do-mod-artist .artist-box .content .tab .item.active{border-bottom:0.2rem solid #3fc2a7;color:#3fc2a7}.do-mod-artist .artist-box .content .tab .item.disabled{opacity:.25}.do-mod-local{flex:1;display:flex;flex-flow:column wrap}.do-mod-local .tabbar{flex:0 1  3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid rgba(200,200,200,0.3)}.do-mod-local .tabbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .tabbar .refresh:hover{color:#ffb618}.do-mod-local .tabbar .refresh:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-local .table{flex:1}.do-mod-local .edit-form{position:absolute;left:0;top:0;z-index:90;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-local .edit-form .form{position:relative;display:flex;flex-flow:column wrap;flex:0 40rem;width:5rem;height:auto;padding:.5rem 4rem 2rem;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.2)}.do-mod-local .edit-form .form .section{display:flex;flex:1;justify-content:center;align-items:center;margin:1rem 0}.do-mod-local .edit-form .form .section.title{line-height:2;font-size:1.6rem}.do-mod-local .edit-form .form .section.title i{position:absolute;right:1rem;top:1rem;color:#ff5061}.do-mod-local .edit-form .form .section.title i:hover{-webkit-transform:scale(1.2);transform:scale(1.2);font-weight:bold}.do-mod-local .edit-form .form .section .label{flex:0 5rem;padding-right:2rem;color:#aabac3;text-align:right}.do-mod-local .edit-form .form .section .field{flex:1}.do-mod-local .edit-form .form .section .field.path{border:0;font-size:1.3rem;color:#526273}.do-mod-search{flex:1;display:flex;flex-flow:column wrap}.do-mod-search .tabbar{flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-search .tabbar .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:0.1rem solid rgba(200,200,200,0.3);border-bottom:0;color:#dae1e9}.do-mod-search .tabbar .item.active{color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}#app.blur .do-mod-search .tabbar .item{border-color:#dae1e9;color:#f3f5fb}#app.blur .do-mod-search .tabbar .item.active{color:#62778d}.do-mod-profile{overflow-y:auto;padding:0 3rem}.do-mod-profile .title{position:relative;width:100%;height:6rem;line-height:6rem;border-bottom:0.1rem solid #dae1e9;font-size:1.8rem}.do-mod-profile .title .save{position:absolute;bottom:.3rem;right:0}.do-mod-profile .block{display:flex;justify-content:center;align-items:center;width:100%;padding:2rem  0;border-bottom:0.1rem solid #f3f5fb}.do-mod-profile .block .label{flex:0 1 20rem}.do-mod-profile .block .field{flex:1;display:flex;align-items:center}.do-mod-profile .block .path-holder{max-width:26rem;padding:0 1.5rem 0 .5rem;border-bottom:0.1rem solid #aabac3;color:#aabac3}.do-mod-profile .block .do-radio{margin-right:2rem}.do-mod-profile .block .desc{line-height:2}.do-mod-profile .block .desc p{margin-top:1.5rem}.artist-desc-layer{width:60rem;height:30rem}.artist-desc-layer .layer-content{overflow-y:auto;height:85% !important;padding:1rem;line-height:2;text-indent:2em}
diff --git a/src/css/modules.scss b/src/css/modules.scss
index 686e0cc..a54a5fa 100644
--- a/src/css/modules.scss
+++ b/src/css/modules.scss
@@ -74,7 +74,10 @@
 // 本地音乐模块
 .do-mod-local {flex:1;display:flex;flex-flow:column wrap;
     
-  .tabbar {flex:0 1  3rem;padding:0 1rem;line-height:2.9rem;border-bottom:.1rem solid rgba(200, 200, 200, .3);
+  .tabbar {
+    flex:0 1  3rem;
+    padding:0 1rem;line-height:2.9rem;
+    border-bottom:.1rem solid rgba(200, 200, 200, .3);
   
     .refresh {margin-left:1rem;color:nth($ct, 1);text-decoration:underline;
       
@@ -83,10 +86,13 @@
     }
   }
 
-  .table {overflow:auto;flex:1;}
+  .table {flex:1;}
 
 
-  .edit-form {position:absolute;left:0;top:0;z-index:90;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
+  .edit-form {
+    position:absolute;left:0;top:0;z-index:90;
+    display:flex;justify-content:center;align-items:center;
+    width:100%;height:100%;
   
   
     .form {position:relative;display:flex;flex-flow:column wrap;flex:0 40rem;width:5rem;height:auto;padding:.5rem 4rem 2rem;background:#fff;box-shadow:0 .5rem  2rem rgba(0, 0, 0, .2);
diff --git a/src/index.html b/src/index.html
index 0e7b439..cf56552 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
 
 
     <!-- 背景点位标签 -->
-    <div class="holder"></div>
+
     <div class="tools do-fn-drag">
       <wc-input 
         class="search do-fn-nodrag" 
diff --git a/src/views/local.htm b/src/views/local.htm
index c867441..fe31ab0 100644
--- a/src/views/local.htm
+++ b/src/views/local.htm
@@ -3,7 +3,7 @@
     本地音乐({{list.length}}首)<span class="refresh" @click="refresh">重新扫描</span>
   </div>
 
-  <div class="table">
+  <wc-scroll class="table">
     <table>
       <thead>
         <tr>
@@ -28,7 +28,7 @@
         </tr>
       </tbody>
     </table>
-  </div>
+  </wc-scroll>
 
   <div class="edit-form" :if="editMode">
     <div class="form"  :keyup="closeEditByEnter">