diff --git a/css/modules.css b/css/modules.css index 6690c35..3a917cb 100644 --- a/css/modules.css +++ b/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 .toolbar{flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4}.do-mod-local .toolbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .table{overflow:auto;flex:1}.do-mod-local .table .stat{width:2.6rem;height:2.6rem;line-height:2.6rem}.do-mod-local .table .ac{text-align:center}.do-mod-local .table .active{color:#3fc2a7}.do-mod-local .table .active i{-webkit-animation:play 2s infinite linear;animation:play 2s infinite linear}.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 #e8ebf4;background:#fff;color:#dae1e9}.do-mod-search .tabbar .item.active{border-bottom-color:transparent;color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}.do-mod-search .table .active{color:#3fc2a7}.do-mod-search .table .ac{text-align:center}.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 .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:#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 .toolbar{flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4}.do-mod-local .toolbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .table{overflow:auto;flex:1}.do-mod-local .table .stat{width:2.6rem;height:2.6rem;line-height:2.6rem}.do-mod-local .table .ac{text-align:center}.do-mod-local .table .active{color:#3fc2a7}.do-mod-local .table .active i{-webkit-animation:play 2s infinite linear;animation:play 2s infinite linear}.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 #e8ebf4;background:#fff;color:#dae1e9}.do-mod-search .tabbar .item.active{border-bottom-color:transparent;color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}.do-mod-search .table .active{color:#3fc2a7}.do-mod-search .table .ac{text-align:center}.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 .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/css/modules.scss b/css/modules.scss index 60920cb..a825086 100644 --- a/css/modules.scss +++ b/css/modules.scss @@ -129,6 +129,7 @@ .label {flex:0 1 20rem;} .field {flex:1;display:flex;align-items:center;} + .do-radio {margin-right:2rem} .desc {line-height:2; p {margin-top:1.5rem;} } diff --git a/js/modules/profile.js b/js/modules/profile.js index c84103f..1bec39b 100644 --- a/js/modules/profile.js +++ b/js/modules/profile.js @@ -26,11 +26,20 @@ export default Anot({ setting: { autoPlay: appInit.autoPlay, autoLrc: appInit.autoLrc, + theme: appInit.theme || 1, musicPath: appInit.musicPath } }, + watch: { + 'setting.theme'(v) { + v = +v + this.__APP__.theme = v + } + }, methods: { - __init__() {}, + __init__() { + this.__APP__ = Anot.vmodels.app + }, openDir() { dialog.showOpenDialog( { diff --git a/views/profile.htm b/views/profile.htm index fec0f32..bb25acc 100644 --- a/views/profile.htm +++ b/views/profile.htm @@ -18,6 +18,14 @@ +
+ 主题风格 +
+ MacOS风格 + Deepin风格 +
+
+
本地音乐目录