This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
appcat
/
sonist
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化播放时的UI

2.x
宇天 2018-12-29 17:42:50 +08:00
parent c34c3e7dda
commit 730b4c204d
6 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/app.css
View File

File diff suppressed because one or more lines are too long

25
css/app.scss
View File

@ -34,25 +34,27 @@
.do-fn-nodrag {-webkit-app-region:no-drag;} .do-fn-nodrag {-webkit-app-region:no-drag;}
html {font-size:62.5%} html {font-size:62.5%}
body {line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1)} 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; table {overflow:auto;display:table;width:100%;line-height:2.5rem;
thead tr {height:4.5rem;border-bottom:.1rem solid nth($cp, 1)} thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
thead th {padding:1rem .8rem;border:0;} thead th {padding:1rem .8rem;border:0;}
tbody tr {height:auto;@include ts(background, .3s); tbody tr {height:auto;@include ts(background, .3s);
&:hover {background:#f7f8fb;} &:hover {background:rgba(63, 194, 168, .08);}
} }
tbody td {padding:.9rem .8rem} tbody td {padding:.9rem .8rem}
} }
::-webkit-scrollbar {width:8px;height:8px;background:#f7f8fb;} ::-webkit-scrollbar {width:8px;height:8px;background:none;}
::-webkit-scrollbar:hover {background:#f3f5fb;} ::-webkit-scrollbar:hover {background:#f3f5fb;}
::-webkit-scrollbar-button {display:none;} ::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background:nth($cp, 3);} ::-webkit-scrollbar-thumb {background:nth($cp, 3);}
::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);} ::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
.do-mod-app {display:flex;position:fixed;left:0;top:0;width:100%;height:100%; .do-mod-app {display:flex;width:100%;height:100%;background:#fff;
.menubar {position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0; .menubar {position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0;
@ -131,6 +133,8 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
} }
// 主体样式 // 主体样式
.main {flex:1;display:flex;flex-flow:column wrap; .main {flex:1;display:flex;flex-flow:column wrap;
@ -174,7 +178,18 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
} }
&.blur {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem);
.sidebar {background:rgba(255, 255, 255, .3);
.play-contrl {background:transparent}
}
.main {
.play-bar {background:rgba(255, 255, 255, .35)}
}
}
} }

2
css/modules.css
View File

File diff suppressed because one or more lines are too long

7
css/modules.scss
View File

@ -74,7 +74,7 @@
// 本地音乐模块 // 本地音乐模块
.do-mod-local {flex:1;display:flex;flex-flow:column wrap; .do-mod-local {flex:1;display:flex;flex-flow:column wrap;
.toolbar {flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:.1rem solid nth($cp, 2); .tabbar {flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:.1rem solid rgba(200, 200, 200, .3);
.refresh {margin-left:1rem;color:nth($ct, 1);text-decoration:underline; .refresh {margin-left:1rem;color:nth($ct, 1);text-decoration:underline;
@ -88,7 +88,7 @@
.stat {width:2.6rem;height:2.6rem;line-height:2.6rem;} .stat {width:2.6rem;height:2.6rem;line-height:2.6rem;}
.ac {text-align:center} .ac {text-align:center}
.active {color:nth($ct, 1);background:nth($cp, 1); .active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);;
i {animation: play 2s infinite linear;} i {animation: play 2s infinite linear;}
} }
@ -125,7 +125,8 @@
.tabbar {flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:.1rem solid nth($cp, 2);text-align:center; .tabbar {flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:.1rem solid nth($cp, 2);text-align:center;
.item {flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:.1rem solid nth($cp, 2);background:#fff;color:nth($cp, 3); .item {flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:.1rem solid rgba(200, 200, 200, .3);background:rgba(255, 255, 255, .3);color:nth($cp, 3);
&.active {border-bottom-color:transparent;color:nth($cd, 1);} &.active {border-bottom-color:transparent;color:nth($cd, 1);}
i {color:nth($cr, 1)} i {color:nth($cr, 1)}

4
index.html
View File

@ -11,9 +11,9 @@
<script>window.LIBS_BASE_URL = location.origin + '/dist';window.__ENV_LANG__ = 'zh'</script> <script>window.LIBS_BASE_URL = location.origin + '/dist';window.__ENV_LANG__ = 'zh'</script>
<script type="module" src="js/app.js"></script> <script type="module" src="js/app.js"></script>
</head> </head>
<body class="do-fn-noselect"> <body class="do-fn-noselect" anot="app" :css="{'background-image':'url(' + curr.cover + ')'}">
<div class="do-mod-app" anot="app"> <div class="do-mod-app" :class="{blur: isPlaying}">
<nav class="menubar do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}"> <nav class="menubar do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
<i class="item quit" :click="quit(false)"></i> <i class="item quit" :click="quit(false)"></i>

2
views/local.htm
View File

@ -1,5 +1,5 @@
<div class="do-mod-local" anot="local"> <div class="do-mod-local" anot="local">
<div class="toolbar"> <div class="tabbar">
本地音乐({{list.length}}首)<span class="refresh" :click="refresh">重新扫描</span> 本地音乐({{list.length}}首)<span class="refresh" :click="refresh">重新扫描</span>
</div> </div>