diff --git a/Readme.md b/Readme.md index eaa631e..4899a55 100644 --- a/Readme.md +++ b/Readme.md @@ -18,20 +18,20 @@ - [x] 设置本地音乐目录 - [x] 缓存歌词 - [x] 自动获取专辑封面和歌词,自动更新ID3信息 -- [ ] 酷狗音乐排行榜 -- [x] 酷狗歌手列表(完成20%) -- [ ] 酷狗音乐MV -- [ ] 试听列表 - [x] 本地音乐 - [x] 设置界面 +- [x] KTV模式 +- [x] 歌曲ID3信息修改 +- [x] 酷狗歌手列表(完成20%) +- [ ] 酷狗音乐排行榜 +- [ ] 酷狗音乐MV +- [ ] 试听列表 - [ ] 均衡器 - [ ] 桌面歌词 - [ ] 迷你模式 -- [ ] KTV模式 - [ ] 多媒体快捷键 - [ ] 酷狗账号直接登录(犹豫中) - [ ] 铃声制作(犹豫中) -- [x] 歌曲ID3信息修改 - [ ] 用户评论/点赞(取决于登陆功能是否开发) - [ ] 试听下载 - [ ] 歌曲质量选择 diff --git a/css/app.css b/css/app.css index 0e7706e..4e71110 100644 --- a/css/app.css +++ b/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:8px;height:8px;background:none}::-webkit-scrollbar:hover{background:#f3f5fb}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#dae1e9}::-webkit-scrollbar-thumb:hover{background:#3fc2a7}.do-mod-app{display:flex;width:100%;height:100%;background:#fff}.do-mod-app .menubar{position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0}.do-mod-app .menubar .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 .menubar.focus .quit{background-image:url(/images/btn-close.svg)}.do-mod-app .menubar.focus .min{background-image:url(/images/btn-mini.svg)}.do-mod-app .menubar.focus .max{background-image:url(/images/btn-maxi.svg)}.do-mod-app .menubar:hover .quit{background-image:url(/images/btn-close_a.svg)}.do-mod-app .menubar:hover .min{background-image:url(/images/btn-mini_a.svg)}.do-mod-app .menubar:hover .max{background-image:url(/images/btn-maxi_a.svg)}.do-mod-app .menubar-win{position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .menubar-win .item,.do-mod-app .menubar-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 .menubar-win .item:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .menubar-win .opt i{font-size:1.8rem}.do-mod-app .menubar-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 .menubar-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .menubar-win .opt-list span i{padding-right:.8rem}.do-mod-app .menubar-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .menubar-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .sidebar{flex:0 1 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .sidebar .user-box{width:18rem;height:16.5rem;margin:4rem 2rem 0;text-align:center}.do-mod-app .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 .sidebar .user-box img{width:100%;height:100%}.do-mod-app .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .sidebar .play-contrl{position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,0.3)}.do-mod-app .sidebar .play-contrl .item{position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:#19b491;transition:all .2s ease-in-out}.do-mod-app .sidebar .play-contrl .item:hover{color:#dae1e9}.do-mod-app .sidebar .play-contrl .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .sidebar .play-contrl .prev{left:2.5rem}.do-mod-app .sidebar .play-contrl .play{left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem}.do-mod-app .sidebar .play-contrl .next{right:2.5rem}.do-mod-app .main{flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .tool-bar{flex:0 1 5rem;padding:1rem}.do-mod-app .main .tool-bar .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .main .tool-bar .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .main .tool-bar input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main .module{position:relative;flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .play-bar{position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc}.do-mod-app .main .play-bar .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .main .play-bar .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-app .main .play-bar .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}.do-mod-app .main .play-bar .ctrl:hover{color:#3fc2a7}.do-mod-app .main .play-bar .ctrl:active{color:#16967a}.do-mod-app .main .play-bar .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-app .main .play-bar .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 .main .play-bar .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .main .play-bar .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 .sidebar{background:rgba(255,255,255,0.3)}.do-mod-app.blur .sidebar .play-contrl{background:transparent}.do-mod-app.blur .main .play-bar{background:rgba(255,255,255,0.35)}.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 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)}} +@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:8px;height:8px;background:none}::-webkit-scrollbar:hover{background:#f3f5fb}::-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.focus .max{background-image:url(/images/btn-maxi.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:hover .max{background-image:url(/images/btn-maxi_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:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.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:#58d68d}.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-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;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.5;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;padding:0 10rem;line-height:2;text-align:center}.do-mod-app .ktv-box .inner-content .info img{display:block;width:100%;height:auto}.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:3.5}.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 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/css/app.scss b/css/app.scss index 5daf619..8b0d0d1 100644 --- a/css/app.scss +++ b/css/app.scss @@ -52,107 +52,107 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem; ::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);} -.do-mod-app {display:flex;width:100%;height:100%;background:#fff; +.do-mod-app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff; - - - - .menubar {position:absolute;left:1.2rem;top:0;z-index:99;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;} - - &.focus { - .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);} - .max {background-image:url(/images/btn-maxi_a.svg);} - } - } - - .menubar-win {position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem; - - .item,.opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem; - } - .item:hover {transform:scale(1.1)} - - .opt i {font-size:1.8rem;} - - .opt-list {position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 .5rem 2rem rgba(0, 0, 0, .1);font-size:1.4rem; - span {display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem; - - i {padding-right:.8rem;} - &.pipe {height:.1rem;margin:.5rem 0;border-bottom:.1rem solid nth($cp, 1)} - &:hover {background:nth($cp, 1)} - } - } - } - - - - - - .sidebar {flex:0 1 22rem;position:relative;height:100%;background:nth($cp, 1); - - // 用户信息 - .user-box {width:18rem;height:16.5rem;margin:4rem 2rem 0;text-align:center; + // 标题栏样式 + .title-bar {position:relative;z-index:9;display:flex;flex:0 5rem; - .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);} - img {width:100%;height:100%;} - .uname {line-height:2;font-weight:normal;} - } - - // 音乐菜单 - .music-box {width:100%;height:auto;padding:0 1.5rem; - - dt.title {line-height:4rem;color:nth($cgr, 1)} - dd.item {height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:nth($cgr, 3); - - .icon {float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem;} - &:hover {padding-left:.9rem;color:nth($ct, 1);} - &.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;} - &.disabled {opacity:.25} - } - } - - // 播放控制按钮 - .play-contrl {position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,.3); - - .item {position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:nth($ct, 2);@include ts(); - - &:hover {color:nth($cp, 3)} - &:active {color:nth($ct, 1);transform:scale(1.1)} - } - .prev {left:2.5rem;} - .play {left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem;} - .next {right:2.5rem;} - } - } - - - - - // 主体样式 - .main {flex:1;display:flex;flex-flow:column wrap; + .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;} + + &.focus { + .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);} + .max {background-image:url(/images/btn-maxi_a.svg);} + } + } + + .btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem; + + .item,.opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem; + } + .item:hover {transform:scale(1.1)} + + .opt i {font-size:1.8rem;} + + .opt-list {position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 .5rem 2rem rgba(0, 0, 0, .1);font-size:1.4rem; + span {display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem; + + i {padding-right:.8rem;} + &.pipe {height:.1rem;margin:.5rem 0;border-bottom:.1rem solid nth($cp, 1)} + &:hover {background:nth($cp, 1)} + } + } + } + // 工具栏 - .tool-bar {flex:0 1 5rem;padding:1rem; + .holder {flex:0 22rem;height:100%;background:nth($cp, 1);} + + .tools {flex:1;padding:1rem; .search {position:relative;display:inline-block;line-height:3rem;} .icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;} input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;} } + } + + + // 主体样式 + .main-body {flex:1;display:flex; + + // 侧边栏 + .sidebar {flex:0 22rem;position:relative;height:100%;background:nth($cp, 1); + + // 用户信息 + .user-box {width:18rem;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);} + img {width:100%;height:100%;} + .uname {line-height:2;font-weight:normal;} + } + + // 功能菜单导航 + .music-box {width:100%;height:auto;padding:0 1.5rem; + + dt.title {line-height:4rem;color:nth($cgr, 1)} + dd.item {height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:nth($cgr, 3); + + .icon {float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem;} + &:hover {padding-left:.9rem;color:nth($ct, 1);} + &.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;} + &.disabled {opacity:.25} + } + } + + + } // 功能模块 .module {position:relative;flex:1;display:flex;flex-flow:column wrap;} + } - + + .contrl-bar {position:relative;z-index:99;display:flex;flex:0 8rem;background:nth($cp, 1); + + // 播放控制按钮 + .play-box {flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center; + + .item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts(); + + &:hover {color:nth($cg, 1)} + &:active {color:nth($ct, 1);transform:scale(1.1)} + } + .play {font-size:5rem;} + } // 播放条 - .play-bar {position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc; + .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; @@ -178,15 +178,47 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem; } + + + // 播放状态下的 模糊特效 &.blur {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem); + + + .title-bar { + .holder {background:rgba(255, 255, 255, .3);} + .tools input {background:rgba(255, 255, 255, .8);} + } - .sidebar {background:rgba(255, 255, 255, .3); - - .play-contrl {background:transparent} + .main-body { + + .sidebar {background:rgba(255, 255, 255, .3);} } - .main { - .play-bar {background:rgba(255, 255, 255, .35)} + .contrl-bar {background:rgba(255, 255, 255, .35)} + + + } + + // ktv状态下的 模糊特效 + &.ktv { + .contrl-bar {background:rgba(233, 233, 233, .1); + + .play-box .item, + .stat-box .ctrl {color:#fff;} + } + } + + + .ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff; + + .inner-content {display:flex;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem); + + .info {flex:1.5;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;padding:0 10rem;line-height:2;text-align:center; + + img {display:block;width:100%;height:auto} + h3 {line-height:3;font-size:1.8rem;} + } + .lrc-box {flex:3.5;} } } diff --git a/index.html b/index.html index e3765b6..33fdabf 100644 --- a/index.html +++ b/index.html @@ -11,79 +11,126 @@ - + -
+
- +
- + - - - - -
- -
- -
- - - - - - - - -
+
diff --git a/js/app.js b/js/app.js index 3ad726a..9131885 100644 --- a/js/app.js +++ b/js/app.js @@ -31,6 +31,21 @@ const PLAY_MODE = { 1: 'single', 2: 'random' } +const COLORS = [ + { + title: '#62778d', + lrc: '#98acae', + bar1: '#dae1e9', + bar2: '#3fc2a7' + }, + { + title: '#fff', + lrc: '#d7d8db', + bar1: '#454545', + bar2: '#fff' + } +] + const FONTS_NAME = ' Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif' @@ -53,6 +68,7 @@ Anot({ winFocus: false, mod: 'local', playMode: Anot.ls('play-mode') >>> 0, // 0:all | 1:single | 2:random + ktvMode: 0, isPlaying: false, optBoxShow: false, volumeCtrlShow: false, @@ -73,6 +89,13 @@ Anot({ return } return '/views/' + this.mod + '.htm' + }, + coverBG() { + if (this.curr.cover) { + return `url(${this.curr.cover})` + } else { + return 'none' + } } }, watch: { @@ -103,6 +126,10 @@ Anot({ let ay = ev.pageY - rect.top log(aw, ax, ay) + if (ax < 80 && this.curr.id) { + this.ktvMode = this.ktvMode ^ 1 + return + } if (ax > 124 && ay > 55 && ay < 64) { let pp = (ax - 124) / (aw - 124) this.curr.time = pp * this.curr.duration @@ -217,6 +244,7 @@ Anot({ let ry = this.__HEIGHT__ / 2 // 旋转唱片的圆心坐标Y let pw = this.__WIDTH__ - this.__HEIGHT__ - 180 // 进度条总长度 let wl = this.__HEIGHT__ + 180 // 文字的坐标X + const draw = () => { let { time, duration } = this.curr let pp = time / duration // 进度百分比 @@ -244,12 +272,12 @@ Anot({ this.__CTX__.drawImage(img2, 0, 0, this.__HEIGHT__, this.__HEIGHT__) // 歌曲标题和歌手 - this.__CTX__.fillStyle = '#62778d' + this.__CTX__.fillStyle = COLORS[this.ktvMode].title this.__CTX__.font = '56px' + FONTS_NAME this.__CTX__.fillText(`${title} - ${artist}`, wl, 100) // 时间 - this.__CTX__.fillStyle = '#98acae' + this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc this.__CTX__.font = '48px' + FONTS_NAME this.__CTX__.fillText( `${time} / ${duration}`, @@ -258,14 +286,14 @@ Anot({ ) // 歌词 - this.__CTX__.fillStyle = '#98acae' + this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc this.__CTX__.font = '48px' + FONTS_NAME this.__CTX__.fillText(`暂无歌词...`, wl, 180) // 进度条 - this.__CTX__.fillStyle = '#dae1e9' + this.__CTX__.fillStyle = COLORS[this.ktvMode].bar1 this.__CTX__.fillRect(wl, 230, pw, 16) - this.__CTX__.fillStyle = '#3fc2a7' + this.__CTX__.fillStyle = COLORS[this.ktvMode].bar2 this.__CTX__.fillRect(wl, 230, pw * pp, 16) this.__DEG__ += 0.01 diff --git a/main.js b/main.js index 0f82b35..69f7f94 100644 --- a/main.js +++ b/main.js @@ -23,7 +23,7 @@ function createWindow() { win = new BrowserWindow({ title: 'sonist', width: 1024, - height: 600, + height: 640, frame: false, resizable: false, webPreferences: { diff --git a/package.json b/package.json index 2a65f02..c3d59ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sonist", - "version": "1.0.0", + "version": "0.0.9", "description": "Music Player", "main": "main.js", "scripts": {