diff --git a/src/css/app.css b/src/css/app.css
index c270438..20c31a7 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:#fff}#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{flex:0 22rem;height:100%;background:#f3f5fb}#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%;background:#f3f5fb}#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:12rem;height:12rem;margin:0 3rem;border:.6rem 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;background:#f3f5fb}#app .contrl-bar .play-box{width:18rem;display:flex;justify-content:center;align-items:center;height:6.5rem;padding:.75rem 1.5rem;text-align:center}#app .contrl-bar .play-box .item{flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:#19b491;transition:all .2s ease-in-out}#app .contrl-bar .play-box .item:hover{color:#ffb618}#app .contrl-bar .play-box .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}#app .contrl-bar .play-box .play{font-size:5rem}#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:8rem;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{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)}}
diff --git a/src/css/app.scss b/src/css/app.scss
index 75206ba..ad32e56 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -8,7 +8,7 @@
@import "./var.scss";
-#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:#fff;
+#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;
@@ -54,7 +54,7 @@
}
// 工具栏
- .holder {flex:0 22rem;height:100%;background:nth($cp, 1);}
+ .holder {width:18rem;height:100%;}
.tools {flex:1;padding:1rem;
@@ -67,12 +67,12 @@
.main-body {flex:1;display:flex;
// 侧边栏
- .sidebar {width:18rem;position:relative;height:100%;background:nth($cp, 1);
+ .sidebar {width:18rem;position:relative;height:100%;
// 用户信息
.user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
- .avatar {overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
+ .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;}
}
@@ -98,23 +98,36 @@
}
- .contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem;background:nth($cp, 1);
+ .contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem;
// 播放控制按钮
- .play-box {width:18rem;display:flex;justify-content:center;align-items:center;height:6.5rem;padding:.75rem 1.5rem;text-align:center;
+ .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 .25rem 1rem rgba(0, 0, 0, .075);
- .item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts();
-
- &:hover {color:nth($co, 1)}
- &:active {color:nth($ct, 1);transform:scale(1.1)}
+
+ .btn-bg {
+ position:absolute;
+ left:3.25rem;
+ height: 3.5rem;
+ border-left: 3.25rem solid nth($cp, 1);
+ border-top: .25rem solid transparent;
+ border-bottom: .25rem solid transparent;
+
+ &::before {position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:nth($cp, 1);content:""}
+ &::after {position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:nth($cp, 1);content:""}
+ }
+
+ .action {position:relative;display:flex;justify-content:center;align-items:center;
+
+ &.play {width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 .25rem .5rem rgba(0, 0, 0, .2)}
+ &.next {width:2rem;height:2rem;margin-left:.75rem}
}
- .play {font-size:5rem;}
}
// 播放条
.stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
- .song-stat {flex:1;height:8rem;margin:0 2rem 0 0;
+ .song-stat {flex:1;height:6.5rem;margin:0 2rem 0 0;
canvas {display:flex;width:100%;height:100%;}
}
diff --git a/src/css/common.css b/src/css/common.css
index 86d88f3..bc622ae 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -1 +1 @@
-@font-face{font-family:"sonist font";src:url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff")}[class^="s-icon-"],[class*=" s-icon-"]{display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.s-icon-all:before{content:"\e714"}.s-icon-eq:before{content:"\e715"}.s-icon-heart:before{content:"\e716"}.s-icon-music:before{content:"\e717"}.s-icon-play-list:before{content:"\e719"}.s-icon-mv:before{content:"\e71d"}.s-icon-rank:before{content:"\e71e"}.s-icon-singer:before{content:"\e71f"}.s-icon-random:before{content:"\e720"}.s-icon-radio:before{content:"\e721"}.s-icon-single:before{content:"\e722"}.s-icon-next:before{content:"\e723"}.s-icon-prev:before{content:"\e724"}.s-icon-pause:before{content:"\e725"}.s-icon-play:before{content:"\e726"}.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;background:#fff;font-size:1.25rem;color:#62778d;background-size:cover;background-repeat:no-repeat}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: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}
diff --git a/src/css/common.scss b/src/css/common.scss
index b27a227..73136a8 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -7,33 +7,12 @@
@import "./var.scss";
-@font-face {font-family: "sonist font";
- src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
-}
-
-[class^="s-icon-"], [class*=" s-icon-"] {display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-
-.s-icon-all:before { content: "\e714"; }
-.s-icon-eq:before { content: "\e715"; }
-.s-icon-heart:before { content: "\e716"; }
-.s-icon-music:before { content: "\e717"; }
-.s-icon-play-list:before { content: "\e719"; }
-.s-icon-mv:before { content: "\e71d"; }
-.s-icon-rank:before { content: "\e71e"; }
-.s-icon-singer:before { content: "\e71f"; }
-.s-icon-random:before { content: "\e720"; }
-.s-icon-radio:before { content: "\e721"; }
-.s-icon-single:before { content: "\e722"; }
-.s-icon-next:before { content: "\e723"; }
-.s-icon-prev:before { content: "\e724"; }
-.s-icon-pause:before { content: "\e725"; }
-.s-icon-play:before { content: "\e726"; }
.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;background:#fff;font-size:1.25rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;}
+body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;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/index.html b/src/index.html
index 7ddc217..0e7b439 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,9 +8,12 @@
-
-
-