From a77543a24b243c3323f2775d643a26afa87e97d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 23 Jan 2019 03:45:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=A0=E4=B8=BAelecton=E7=9A=84=E4=B8=80?= =?UTF-8?q?=E4=BA=9Bbug;=E6=97=A0=E5=A5=88=E6=94=B9=E4=B8=BA=E8=87=AA?= =?UTF-8?q?=E5=BB=BAhttp=E9=9D=99=E6=80=81=E6=9C=8D=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/app.css | 2 +- src/css/app.scss | 58 ++++------------------------- src/css/common.css | 1 + src/css/common.scss | 51 +++++++++++++++++++++++++ src/css/desktop-lrc.css | 2 +- src/css/desktop-lrc.scss | 6 +-- src/css/mini-win.css | 1 + src/css/mini-win.scss | 46 +++++++++++++++++++++++ src/depends.html | 1 - src/desktop-lrc.html | 2 +- src/index.html | 12 +++--- src/js/app.js | 16 +++++++- src/js/mini-win.js | 74 +++++++++++++++++++++++++++++++++++++ src/js/modules/extra-win.js | 11 +++--- src/main.js | 39 ++++++++++--------- src/mini-win.html | 48 ++++++++++++++++++++++++ src/tools/server.js | 37 +++++++++++++++++++ 17 files changed, 315 insertions(+), 92 deletions(-) create mode 100644 src/css/common.css create mode 100644 src/css/common.scss create mode 100644 src/css/mini-win.css create mode 100644 src/css/mini-win.scss create mode 100644 src/js/mini-win.js create mode 100644 src/tools/server.js diff --git a/src/css/app.css b/src/css/app.css index e3800a9..cf967b8 100644 --- a/src/css/app.css +++ b/src/css/app.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:62.5%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;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(63,194,168,0.08)}table tbody td{padding:.9rem .8rem}::-webkit-scrollbar{width:.6rem;height:.6rem;background:none}::-webkit-scrollbar:hover{background:rgba(255,255,255,0.1)}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#dae1e9}::-webkit-scrollbar-thumb:hover{background:#3fc2a7}.do-mod-app{position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff}.do-mod-app .title-bar{position:relative;z-index:9;display:flex;flex:0 5rem}.do-mod-app .title-bar .btn-box{position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0}.do-mod-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}.do-mod-app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}.do-mod-app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}.do-mod-app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}.do-mod-app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}.do-mod-app .title-bar .btn-box-win{position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .title-bar .btn-box-win .item,.do-mod-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}.do-mod-app .title-bar .btn-box-win .item{text-align:center}.do-mod-app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}.do-mod-app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}.do-mod-app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}.do-mod-app .title-bar .btn-box-win .opt i{font-size:1.8rem}.do-mod-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}.do-mod-app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}.do-mod-app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .title-bar .holder{flex:0 22rem;height:100%;background:#f3f5fb}.do-mod-app .title-bar .tools{flex:1;padding:1rem}.do-mod-app .title-bar .tools .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .title-bar .tools .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .title-bar .tools input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main-body{flex:1;display:flex}.do-mod-app .main-body .sidebar{flex:0 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .main-body .sidebar .user-box{width:18rem;height:16.5rem;margin:0 2rem;text-align:center}.do-mod-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)}.do-mod-app .main-body .sidebar .user-box img{width:100%;height:100%}.do-mod-app .main-body .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .main-body .module{position:relative;flex:1;display:flex;flex-flow:column wrap}.do-mod-app .contrl-bar{position:relative;z-index:99;display:flex;flex:0 8rem;background:#f3f5fb}.do-mod-app .contrl-bar .play-box{flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center}.do-mod-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}.do-mod-app .contrl-bar .play-box .item:hover{color:#ffb618}.do-mod-app .contrl-bar .play-box .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .contrl-bar .play-box .play{font-size:5rem}.do-mod-app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}.do-mod-app .contrl-bar .stat-box .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-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}.do-mod-app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl:active{color:#16967a}.do-mod-app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-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)}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}.do-mod-app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}.do-mod-app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}.do-mod-app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}.do-mod-app.blur .contrl-bar{background:rgba(255,255,255,0.35)}.do-mod-app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}.do-mod-app.ktv .contrl-bar .play-box .item,.do-mod-app.ktv .contrl-bar .stat-box .ctrl{color:#fff}.do-mod-app.ktv .contrl-bar .play-box .item:hover,.do-mod-app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}.do-mod-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}.do-mod-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)}.do-mod-app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}.do-mod-app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}.do-mod-app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}.do-mod-app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}.do-mod-app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}.do-mod-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}.do-mod-app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}.do-mod-app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}.do-mod-app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}.do-mod-app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}.do-mod-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}.do-mod-app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}.do-mod-app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}.do-mod-app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}.do-mod-app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.do-mod-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)}.do-mod-app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}.do-mod-app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}.do-mod-app .ktv-box .inner-content .search-box .content .section{height:3.5rem}.do-mod-app .ktv-box .inner-content .search-box .content .section input{width:100%}.do-mod-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)}.do-mod-app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #98acae}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span{flex:1}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}.do-mod-app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}.do-mod-app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}.do-mod-app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}.do-mod-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}.do-mod-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}.do-mod-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}.do-mod-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}.do-mod-app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover}.do-mod-app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}.do-mod-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}.do-mod-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)}} +.do-mod-app{position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff}.do-mod-app .title-bar{position:relative;z-index:9;display:flex;flex:0 5rem}.do-mod-app .title-bar .btn-box{position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0}.do-mod-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}.do-mod-app .title-bar .btn-box.focus .quit{background-image:url(../images/btn-close.svg)}.do-mod-app .title-bar .btn-box.focus .min{background-image:url(../images/btn-mini.svg)}.do-mod-app .title-bar .btn-box:hover .quit{background-image:url(../images/btn-close_a.svg)}.do-mod-app .title-bar .btn-box:hover .min{background-image:url(../images/btn-mini_a.svg)}.do-mod-app .title-bar .btn-box-win{position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .title-bar .btn-box-win .item,.do-mod-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}.do-mod-app .title-bar .btn-box-win .item{text-align:center}.do-mod-app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}.do-mod-app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}.do-mod-app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}.do-mod-app .title-bar .btn-box-win .opt i{font-size:1.8rem}.do-mod-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}.do-mod-app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}.do-mod-app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .title-bar .holder{flex:0 22rem;height:100%;background:#f3f5fb}.do-mod-app .title-bar .tools{flex:1;padding:1rem}.do-mod-app .title-bar .tools .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .title-bar .tools .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .title-bar .tools input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main-body{flex:1;display:flex}.do-mod-app .main-body .sidebar{flex:0 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .main-body .sidebar .user-box{width:18rem;height:16.5rem;margin:0 2rem;text-align:center}.do-mod-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)}.do-mod-app .main-body .sidebar .user-box img{width:100%;height:100%}.do-mod-app .main-body .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .main-body .module{position:relative;flex:1;display:flex;flex-flow:column wrap}.do-mod-app .contrl-bar{position:relative;z-index:99;display:flex;flex:0 8rem;background:#f3f5fb}.do-mod-app .contrl-bar .play-box{flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center}.do-mod-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}.do-mod-app .contrl-bar .play-box .item:hover{color:#ffb618}.do-mod-app .contrl-bar .play-box .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .contrl-bar .play-box .play{font-size:5rem}.do-mod-app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}.do-mod-app .contrl-bar .stat-box .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-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}.do-mod-app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl:active{color:#16967a}.do-mod-app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-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)}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}.do-mod-app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}.do-mod-app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}.do-mod-app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}.do-mod-app.blur .contrl-bar{background:rgba(255,255,255,0.35)}.do-mod-app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}.do-mod-app.ktv .contrl-bar .play-box .item,.do-mod-app.ktv .contrl-bar .stat-box .ctrl{color:#fff}.do-mod-app.ktv .contrl-bar .play-box .item:hover,.do-mod-app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}.do-mod-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}.do-mod-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)}.do-mod-app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}.do-mod-app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}.do-mod-app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}.do-mod-app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}.do-mod-app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}.do-mod-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}.do-mod-app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}.do-mod-app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}.do-mod-app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}.do-mod-app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}.do-mod-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}.do-mod-app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}.do-mod-app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}.do-mod-app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}.do-mod-app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.do-mod-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)}.do-mod-app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}.do-mod-app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}.do-mod-app .ktv-box .inner-content .search-box .content .section{height:3.5rem}.do-mod-app .ktv-box .inner-content .search-box .content .section input{width:100%}.do-mod-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)}.do-mod-app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #98acae}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span{flex:1}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}.do-mod-app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}.do-mod-app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}.do-mod-app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}.do-mod-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}.do-mod-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}.do-mod-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}.do-mod-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}.do-mod-app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(../images/load1.png) no-repeat center center;background-size:cover}.do-mod-app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}.do-mod-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}.do-mod-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 1063507..26a6c9d 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -8,50 +8,6 @@ @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:62.5%} -body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;} - -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)} - thead th {padding:1rem .8rem;border:0;} - tbody tr {height:auto;@include ts(background, .3s); - &:hover {background:rgba(63, 194, 168, .08);} - } - tbody td {padding:.9rem .8rem} -} - -::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;} -::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);} -::-webkit-scrollbar-button {display:none;} -::-webkit-scrollbar-thumb {background:nth($cp, 3);} -::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);} - - .do-mod-app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff; // 标题栏样式 @@ -59,16 +15,16 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem; .btn-box {position:absolute;left:1.2rem;top:0;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);} - .min {background-image:url(/images/btn-mini.svg);} + .quit {background-image:url(../images/btn-close.svg);} + .min {background-image:url(../images/btn-mini.svg);} // .max {background-image:url(/images/btn-maxi.svg);} } &:hover { - .quit {background-image:url(/images/btn-close_a.svg);} - .min {background-image:url(/images/btn-mini_a.svg);} + .quit {background-image:url(../images/btn-close_a.svg);} + .min {background-image:url(../images/btn-mini_a.svg);} // .max {background-image:url(/images/btn-maxi_a.svg);} } } @@ -305,10 +261,10 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem; &:nth-child(4) {animation:load 2.5s 1.5s ease-in-out infinite;} &:nth-child(5) {animation:load 2.5s 2s ease-in-out infinite;} } - span {position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover; + span {position:absolute;width:8rem;height:8rem;background:url(../images/load1.png) no-repeat center center;background-size:cover; &:nth-child(6) {animation:play 1.5s linear infinite;} - &:nth-child(7) {background-image:url(/images/load2.png);animation:load2 2.5s linear infinite;} + &:nth-child(7) {background-image:url(../images/load2.png);animation:load2 2.5s linear infinite;} } cite {font-size:2.4rem} } diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..a5a1681 --- /dev/null +++ b/src/css/common.css @@ -0,0 +1 @@ +@font-face{font-family:"sonist font";src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAysAAsAAAAAFOAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9ikkYY21hcAAAAYAAAACpAAACRLbi0KRnbHlmAAACLAAACAwAAA0QU/XrjmhlYWQAAAo4AAAALwAAADYTt0/UaGhlYQAACmgAAAAcAAAAJAfeA5FobXR4AAAKhAAAAA8AAABAQAAAAGxvY2EAAAqUAAAAIgAAACIcSBmSbWF4cAAACrgAAAAfAAAAIAElAK5uYW1lAAAK2AAAAVAAAAKRbYZNvnBvc3QAAAwoAAAAgwAAAL22eIcreJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeizxXY27438AQw9zA0AAUZgTJAQDhxQwfeJztkcsRwkAMQ7UkhF8gFyCTQ/iTE7VQECeKoxeVEeQVZWDP2/Has5+RAEwBFOIhSiC9kRDxUjflfoFl7pd4aj9XTgC27DiMo6qtqj6qHEnzjTKqic6WeqHCTN2F7lmhxlrTRuMK/6jz+vntmlDThPbcmaz33oRXbE34xc6Ej+yN9AYPRsqDRyMPwJORG+DZhL+8GDkEXk38jjcj18C7CXc5GDRf39Ms5gAAAHiclRZbbBvHcWfveLf34JFHHo+iJFI6HnUXWzQlPkTKkkxJ1sOO3Ypx7FSGU6dw8+FXArewEyNwP+SiQIPCbSC0QeG/Bkb91SAN0jfqxA5a9KdG0aAoarQoAjQpnI8WSYD2yzx3lkdKsgMZKMGb3Z2dnZ2ZnRcRCP6ENfoT4pIFskgIlMB3J2peDCR7COz6HqjmIG3Jkp22q5V6o457gu9JcspBSlyXQJKllJWjVSdl2bNQr/nClLtavmeoF1RQLqjGvdYZKguaJohKjCqF1gU1CsHHiISsFEmmZK+wtFqGOKdX6c58AcZ1WToom9J+iWnj9HQrk9GSAqjqkFNeDd7qYRslNaWL6vS+8upSoXeEqyOFOqFqGukjBVIme8gB1MzNe7X6NFRsSxLy3oRZq1fslGlJ//8GnVszEgmDgxX8BhMJePJhTPvTz9AQDgcT90nCoDf5ZnvOSFAIse37D2DnutibW7GE0I5ul+kHZIgMo05GRC6hmPwBIummhI/j0p8lfXd4wGb9z+4+fLF/bOrA8spQ9vPLB6bL/RcP0w9ATfRn8+Zk6+LhsUN798w1j+wqPjU735w/tOvwRc6eEXL/vnAZ7TdIRkiJjJFZ8mVyljyH9+Ul2QC80m9Cowl4G67QP3BV84Aj8pJlp3NQqfOpHOEwhQR87ZagEdIm0Zm4OyEL3/ORW0eHLHi+wUksidu9IZxVNBDeXV+/JYq31hVdV67dEcU71xDqwfuKpiV0vQ0cJjQIqhw+vcjJKotLdKFSWQA4sItJUlQUFUlkLPdklcqiojvFysILzujo3tFRB17VlZD/+rsC5xXyR6joUO0y/4/CoaZc4cwXnwbd1OnCmcoCxVvAKx6IGjoVTBY3ygczQHXl34NAFwaAX7B3FEgkfDO0p41RNo7e2ERLmj3Pkl1zw6SVyCa2BBNoBIebw3XQ+2r1qsN3Ogv6hmVciVlW7DRtTc2sULoy47U/sWJ/5LgOgGuGZRnB8QfnEIG/ICaXhPYfplYAWjPTLXARk7UAkm/HkghzlvW2wTFWDCOolx9iJEnSZJU8S75CvkZeJt8jPyCvoR4OPrBp2ShbHQPEExxzBzWd1IQ93XGCUcjLE04T+J7rcCz3khCbcrm3TEOqyyO9iYHuhLNId+i7y3S1yxXXAnpfj6ixzdwXzrZ38nejf0aYCz6CdPsIVIPbgriMLqQsiwLs5/vBLzYx9EezfDYb/InvQLG7mlriSw6u68oynyOY3UB+uMx0nXH8em+zN+Mb9C1daf+mI8qMogdVqAW/PxfjzgQx0BR4hulxyj0OYoae0A0U6RoGgIEEBhXRAXGSCj2RT3EMjvPTnMHDIxE2cqBAZP6KUDXdEfz4CDfX1gL86NoaUrQJUNK+D2v8iNg593X6D5LFyJ8lRwgZkcZ4UfDyBsXYxxhuChWMcPxbIyWoNWklRy2D5j0fi0ClSWsliqQYy54BOag3kmm7Cd4YYM2g78lKwqw41XOnjjZNUPUINRef+eqlqVjD0ZTgG4PZ7ORya18jm23say3vzoztWdgzlukO8GrcdhvRkaU6azaZISjKIcWA25IQ1bN63F04VpMigirtPrHftyL9fYqq/nYAuUxu8Pyhs8kMh+CcIUojS41oIQ/7dFBMg8aoyno2uEx/SipYE79IjqP1moBOGZY3rkkWXM+gaZsnQwPccs87G5202PDqjZEKZrhKHa3ge3JeygFakB9DM/EcmbY3+PnUdk8sRAztkqpe0ozIyotfwFiU2GNZ78SUbsZ1ee75nf6EFhEAYrngm49f8FjaBKU4t7wajUOcfshPzXzJV9ImO/6dkBF87DrVKJOfkBPS52QWrcLO1ZYzYGeKZioV7zMzfemZQtyJZydzS44jJ9PMS9lg9sWDb3fIR3xmppXjVZ3JLTkhE7XrTxR9ycLKs4PsJo+TpzAbPEeef7C2+pbdzf5hTkNXMcDnEcnRwNsGE9GY2NKY+AAtaOIUU0TDxC1hCyfI+9yS9Ry2GBEJenxT9J/nmaax8/jEf9NMVTW118f3AuwdL89TOl8eLhbnR0fhavvmjjpAfQed64zt72eGAYYzdC4cpzaYtD/RI6IkwzIz5Igc/FKEsZAtrGlxDf9JxqH2V5gvl+ehA9+B0fkipvfgMt4A18ObgmM76nQWeQfHwjvgOo5Blwtyk2PiVSESM8SrNPhuyJRhfIY59hbm1z7sVipYH/ajdblVDZqyMNK6pXICjVTFiEKbuRMlTBuS1e3ReGfWkGRhoxyXQHAnJLlzIgUfvTR+dLHAhJgiiJomyvRM6xxln/atTt4DXTuvqi+o0fb40Xwx7gwnV05SenKlxeEu18rGhrQBusJ7tGFH0aiQ1DKZJ07Twf7gvfHdUNYY9mmmfFCSo+OF/Oi0RuE1erK1cgrgFDIJ7n7LVAqCpf/8gb6MazpCamSC9zBbZN7iMnIDYwU9JWy53G7/hfpiPZOSlGw0AwhfuSGKN14J4UsSA2BRxv6lxeMpdoOxG/KbAtmgvXanXdsgRvhjBR1NUhQp+Luk6Az6mC5dkeL4weRnZC6QKkq9vcx+p0fkjp330nlMFTUM8VADYXuRX0ZxOzL/V+vIy1Lx+O8eIfI7mwLjEAqrs+Au01Hkbr+x1c6VR0m81crVXpfLNdhe3rNMA9BMTbuNhdHk80fZN7RpKN/WORdzU1YDO4wB4pPHsOI89Nb+drLDr/CJbfZrhv83X9xO2vcfetS724pK/gdCdDQxeJxjYGRgYABiw9pTE+P5bb4ycLMwgMANH9bXCPr/fxYGZiYgl4MBRDIAACLTCfMAeJxjYGRgYG7438AQw8IAAkCSkQEVCAAARxYCeXicY2FgYGChAAMACMAAQQAAAAAAAGoA2AEKAbICEALsAwgDigQUBMIFNgWQBeoGQAaIAAB4nGNgZGBgEGBYxMDNAAJMQMwFhAwM/8F8BgAayQHUAHicdZDNSsNAFIVP7I+YgAvFrseNgkL6sxEKrgqt6wrdt+mkTUkyZTItdOMbuPB5fApfQJ/CvafpLZRiEzLz3XPPuRkGwBW+4WH33PDbsYeA1Y7PcA4lXKF+L1wld4Rr5GfhOvlF2McjXoUDXOONE7zqBasHfAh7aOBT+AyX+BKuUP8RrpJ/hWtoeIFwnXwr7GPkPQkHuPPe/Z7VY6enarJRSWTy2OTOL0yeFE5teahnq3RsD5QDHGlbJCZX7bB1oA50ru1+ZrGedZyLVWxNpvrs6jQ1amnNQkcunDu37DabsehhZDIesQcLjTEc1ymvdYIN1wQRDHLE5eroK0pKuDv29/qQqRlWSDnBnvD8r46Y3CaSslZoI0TrhHdAb176j89ZYM3/d6g6urcJy0xG6ktW82wpWWFZ9hZUIuoh5mVqiS6afOMjf1jeQPYH10p3s3icbYxbDoIwFAV7Cq0WUHEhLKqRG23sA/sg6upFDX45X5OTyWGcfWnYf3pwVKghILHBFgoNWnTYYY8DehxZpa1VdCvGmidFcSEds3AlmZOarH4M1qTM3VxH7a8yGX+mKBcfgxNRjyZ8NkttCn4pB0/3vPoUae5W1yX9ovcxYy/tJyzCAA==") 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:62.5%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;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(63,194,168,0.08)}table tbody td{padding:.9rem .8rem}::-webkit-scrollbar{width:.6rem;height:.6rem;background:none}::-webkit-scrollbar:hover{background:rgba(255,255,255,0.1)}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#dae1e9}::-webkit-scrollbar-thumb:hover{background:#3fc2a7} diff --git a/src/css/common.scss b/src/css/common.scss new file mode 100644 index 0000000..24d4678 --- /dev/null +++ b/src/css/common.scss @@ -0,0 +1,51 @@ +@charset "UTF-8"; +/** + * 公共样式 + * @authors yutent + * @date 2019/01/22 18:16:57 + */ + +@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:62.5%} +body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;} + +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)} + thead th {padding:1rem .8rem;border:0;} + tbody tr {height:auto;@include ts(background, .3s); + &:hover {background:rgba(63, 194, 168, .08);} + } + tbody td {padding:.9rem .8rem} +} + +::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;} +::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);} +::-webkit-scrollbar-button {display:none;} +::-webkit-scrollbar-thumb {background:nth($cp, 3);} +::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);} \ No newline at end of file diff --git a/src/css/desktop-lrc.css b/src/css/desktop-lrc.css index 1720cac..5b4c7c6 100644 --- a/src/css/desktop-lrc.css +++ b/src/css/desktop-lrc.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:62.5%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:#62778d}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .lock{right:4rem}body .lock.active{color:#dae1e9}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible} +body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .lock{right:4rem}body .lock.active{color:#dae1e9}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible} diff --git a/src/css/desktop-lrc.scss b/src/css/desktop-lrc.scss index 1c22fdf..dae0e9d 100644 --- a/src/css/desktop-lrc.scss +++ b/src/css/desktop-lrc.scss @@ -8,12 +8,8 @@ @import "./var.scss"; -.do-fn-drag {-webkit-app-region:drag;user-select: none;} -.do-fn-nodrag {-webkit-app-region:no-drag;} - -html {font-size:62.5%} -body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:nth($cd, 1); +body {background:transparent; .lrc-box {position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem; diff --git a/src/css/mini-win.css b/src/css/mini-win.css new file mode 100644 index 0000000..579f318 --- /dev/null +++ b/src/css/mini-win.css @@ -0,0 +1 @@ +.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem} diff --git a/src/css/mini-win.scss b/src/css/mini-win.scss new file mode 100644 index 0000000..acd9478 --- /dev/null +++ b/src/css/mini-win.scss @@ -0,0 +1,46 @@ +@charset "UTF-8"; +/** + * 迷你模式 + * @authors yutent + * @date 2019/01/22 18:01:58 + */ + + + @import "./var.scss"; + +// body {width:32rem;height:6rem;} + +.app {display:flex;width:100%;height:100%; + + .cover {overflow:hidden;flex:0 6rem; + + img {width:100%;} + } + .ctrl {flex:1;padding:.8rem;line-height:2.2rem; + .title {font-weight:normal;font-size:1.2rem} + .btns {font-size:2.2rem; + + span:hover {color:nth($co, 1);} + } + } + + .tools, + .actions {display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:nth($cgr, 1); + + span {margin:0 .2rem; + + &:hover {color:nth($ct, 1)} + &.close:hover {color:nth($cr, 1)} + &.active {font-weight:bold;} + } + + } + + .actions {top:auto;bottom:.5rem; + + span { + &:nth-child(1) {font-size:1.2rem} + } + } + +} \ No newline at end of file diff --git a/src/depends.html b/src/depends.html index 588f1bf..2125bae 100644 --- a/src/depends.html +++ b/src/depends.html @@ -2,7 +2,6 @@ - diff --git a/src/desktop-lrc.html b/src/desktop-lrc.html index ae10ac2..902e675 100644 --- a/src/desktop-lrc.html +++ b/src/desktop-lrc.html @@ -2,9 +2,9 @@ - + diff --git a/src/index.html b/src/index.html index e0a1a5f..6812a15 100644 --- a/src/index.html +++ b/src/index.html @@ -2,14 +2,14 @@ - + - + @@ -20,7 +20,7 @@ @@ -42,7 +42,7 @@
- 迷你模式 + 迷你模式 首选项 @@ -52,7 +52,7 @@
- + @@ -66,7 +66,7 @@
- yutent + yutent

yutent

diff --git a/src/js/app.js b/src/js/app.js index f097e73..fc5ad85 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -58,7 +58,15 @@ Anot.ss('app-init', appInit + '') appInit = JSON.parse(appInit) const LRC_WIN = createDesktopLrcWindow(MAIN_SCREEN) +const MINI_WIN = createMiniWindow(MAIN_SCREEN, WIN) +WIN.hide() +MINI_WIN.show() + +MINI_WIN.opener = WIN +MINI_WIN.openDevTools() + +window.MINI_WIN = MINI_WIN Anot({ $id: 'app', state: { @@ -74,6 +82,7 @@ Anot({ volume: Anot.ls('volume') || 70, curr: { id: '', + cover: '', title: '', artist: '', album: '', @@ -201,7 +210,10 @@ Anot({ minimize() { WIN.minimize() }, - maximize() {}, + change2mini() { + WIN.hide() + MINI_WIN.show() + }, activeModule(mod) { switch (mod) { @@ -276,6 +288,8 @@ Anot({ log('----- 调试模式 -----') this.searchTxt = '' WIN.openDevTools() + } else { + layer.toast('搜索功能还未开放') } } }, diff --git a/src/js/mini-win.js b/src/js/mini-win.js new file mode 100644 index 0000000..b0760b8 --- /dev/null +++ b/src/js/mini-win.js @@ -0,0 +1,74 @@ +/** + * 迷你模式 + * @author yutent + * @date 2019/01/22 17:52:23 + */ + +'use strict' + +import '/lib/anot.next.js' + +const { remote } = require('electron') + +const WIN = remote.getCurrentWindow() +const MAIN_WIN = WIN.getParentWindow() + +window.WIN = WIN +Anot({ + $id: 'mini', + state: { + isPlaying: false, + curr: { + id: '', + title: '假装不合适', + artist: '', + album: '', + time: 0, + duration: 0, + cover: '/images/album.png' + }, + pinned: true, + playMode: Anot.ls('play-mode') >>> 0 + }, + mounted() { + WIN.on('ktv-lrc', lrc => { + this.lrc = lrc + }) + }, + methods: { + play() {}, + nextSong() {}, + + handleTool(ev) { + let key = ev.target.dataset.key + switch (key) { + case 'pin': + this.pinned = !this.pinned + WIN.setAlwaysOnTop(this.pinned) + break + case 'quit': + WIN.hide() + MAIN_WIN.show() + break + default: + break + } + }, + handleAction(ev) { + let key = ev.target.dataset.key + switch (key) { + case 'lrc': + MAIN_WIN.emit('toggle-desktoplrc') + break + case 'mode': + let mod = this.playMode + mod++ + if (mod > 2) { + mod = 0 + } + this.playMode = mod + MAIN_WIN.emit('play-mode', mod) + } + } + } +}) diff --git a/src/js/modules/extra-win.js b/src/js/modules/extra-win.js index 5b16bf1..f4ee147 100644 --- a/src/js/modules/extra-win.js +++ b/src/js/modules/extra-win.js @@ -27,24 +27,25 @@ export const createDesktopLrcWindow = function(screen) { show: false }) - win.loadURL('app://sonist/desktop-lrc.html') + win.loadURL('http://127.0.0.1:10240/desktop-lrc.html') return win } -export const createMiniWindow = function(screen) { +export const createMiniWindow = function(screen, pwin) { let win = new BrowserWindow({ title: '', - width: 480, + width: 320, height: 60, frame: false, + parent: pwin, resizable: false, alwaysOnTop: true, - x: screen.size.width - 480, + x: screen.size.width - 320, y: 0, skipTaskbar: true, show: false }) - win.loadURL('app://sonist/mini-win.html') + win.loadURL('http://127.0.0.1:10240/mini-win.html') return win } diff --git a/src/main.js b/src/main.js index 602deb3..ec312f2 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,11 @@ -const { app, BrowserWindow, protocol, session, ipcMain } = require('electron') +/** + * 主入口 + * @author yutent + * @date 2019/12/13 00:37:04 + */ + +'use strict' +const { app, BrowserWindow, session } = require('electron') const path = require('path') const fs = require('iofs') const { exec } = require('child_process') @@ -6,6 +13,7 @@ const log = console.log const createTray = require('./tools/tray') const createMenu = require('./tools/menu') +const createServer = require('./tools/server') /* ******************************* */ /* **********修复环境变量*********** */ @@ -22,22 +30,13 @@ PATH_SET = null const ROOT = __dirname const HOME = app.getPath('home') -const MIME_TYPES = { - js: 'application/javascript', - html: 'text/html', - htm: 'text/html', - css: 'text/css', - jpg: 'image/jpg', - png: 'image/png', - gif: 'image/gif' -} /* ----------------------------------------------------- */ app.commandLine.appendSwitch('--lang', 'zh-CN') app.commandLine.appendSwitch('--autoplay-policy', 'no-user-gesture-required') app.setPath('appData', path.resolve(HOME, '.sonist/')) -protocol.registerStandardSchemes(['app'], { secure: true }) +// protocol.registerStandardSchemes(['app'], { secure: true }) let appPath = app.getPath('appData') if (!fs.exists(appPath)) { @@ -48,6 +47,10 @@ if (!fs.exists(appPath)) { fs.echo('[]', path.join(appPath, 'music.db')) } /* ----------------------------------------------------- */ + +createServer(ROOT) + +// throw new Error('hee') let win = null function createWindow() { @@ -67,7 +70,10 @@ function createWindow() { }) // 然后加载应用的 index.html。 - win.loadURL('app://sonist/index.html') + // win.loadURL('https://yutent.me') + win.loadURL(`http://127.0.0.1:10240/index.html`) + + // win.loadURL('app://sonist/index.html') } /* ****************************************** */ /* ************* init ******************* */ @@ -75,13 +81,6 @@ function createWindow() { // 创建窗口 app.once('ready', () => { - protocol.registerBufferProtocol('app', (req, cb) => { - let file = req.url.replace(/^app:\/\/sonist\//, '') - let ext = path.extname(req.url).slice(1) - let buf = fs.cat(path.resolve(ROOT, file)) - cb({ data: buf, mimeType: MIME_TYPES[ext] }) - }) - exec('which ffprobe', (err, res) => { if (res) { session.defaultSession.setUserAgent( @@ -108,7 +107,7 @@ app.once('ready', () => { titleBarStyle: 'hiddenInset' }) win.setMenuBarVisibility(false) - win.loadURL('app://sonist/depends.html') + win.loadURL('http://127.0.0.1:10240/depends.html') win.on('closed', _ => { app.exit() }) diff --git a/src/mini-win.html b/src/mini-win.html index e69de29..45c4900 100644 --- a/src/mini-win.html +++ b/src/mini-win.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + +
+ + + +
+

+
+ + + + + +
+
+
+ + +
+ +
+ 词 + + +
+ +
+ + \ No newline at end of file diff --git a/src/tools/server.js b/src/tools/server.js new file mode 100644 index 0000000..8d13a86 --- /dev/null +++ b/src/tools/server.js @@ -0,0 +1,37 @@ +/** + * 内置HTTP静态服务 + * @author yutent + * @date 2019/01/23 02:43:03 + */ + +'use strict' + +const http = require('http') +const path = require('path') +const fs = require('iofs') + +const MIME_TYPES = { + '.js': 'text/javascript; charset=utf-8', + '.html': 'text/html; charset=utf-8', + '.htm': 'text/html; charset=utf-8', + '.css': 'text/css; charset=utf-8', + '.jpg': 'image/jpg', + '.png': 'image/png', + '.gif': 'image/gif', + '.svg': 'image/svg', + '.ico': 'image/ico' +} + +module.exports = function(root) { + http + .createServer((req, res) => { + let { ext } = path.parse(req.url) + let file = path.resolve(root, req.url.slice(1)) + let buff = fs.cat(file) + res.writeHead(200, { + 'Content-Type': MIME_TYPES[ext] || MIME_TYPES['.html'] + }) + res.end(buff) + }) + .listen(10240) +}