update
宇天
parent
faed0b59b3
commit
039b70c4b6
File diff suppressed because one or more lines are too long
|
|
@ -8,14 +8,16 @@
|
|||
|
||||
@import "./var.scss";
|
||||
|
||||
#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));
|
||||
#app {
|
||||
position:relative;display:flex;flex-direction:column;
|
||||
width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));
|
||||
|
||||
// 标题栏样式
|
||||
.title-bar {position:relative;z-index:9;display:flex;height:5rem;
|
||||
|
||||
.btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
|
||||
.btn-box {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);}
|
||||
|
|
@ -29,7 +31,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
|
||||
.btn-box-win {
|
||||
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;
|
||||
|
|
@ -64,19 +67,11 @@
|
|||
|
||||
|
||||
// 主体样式
|
||||
.main-body {flex:1;display:flex;
|
||||
.main-body {overflow:hidden;;flex:1;display:flex;
|
||||
|
||||
// 侧边栏
|
||||
.sidebar {width:18rem;position:relative;height:100%;
|
||||
|
||||
// 用户信息
|
||||
.user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
|
||||
|
||||
.avatar {overflow:hidden;width:10rem;height:10rem;margin:0 2rem;border:.5rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
|
||||
img {width:100%;height:100%;}
|
||||
.uname {line-height:2;font-weight:normal;}
|
||||
}
|
||||
|
||||
// 功能菜单导航
|
||||
.music-box {width:100%;height:auto;padding:0 1.5rem;
|
||||
|
||||
|
|
@ -94,7 +89,7 @@
|
|||
}
|
||||
|
||||
// 功能模块
|
||||
.module {position:relative;flex:1;display:flex;flex-direction:column;}
|
||||
.module {overflow:hidden;position:relative;flex:1;display:flex;height:100%;}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -185,9 +180,14 @@
|
|||
}
|
||||
|
||||
|
||||
.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;
|
||||
.ktv-box {
|
||||
overflow:hidden;position:absolute;z-index:80;left:0;top:0;
|
||||
width:100%;height:100%;
|
||||
background:nth($cd, 3);background-size:cover;background-repeat:no-repeat;
|
||||
color:#fff;
|
||||
|
||||
.inner-content {display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
|
||||
.inner-content {
|
||||
display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
|
||||
|
||||
.info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2;
|
||||
|
||||
|
|
@ -265,7 +265,10 @@
|
|||
}
|
||||
|
||||
|
||||
.loading {position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
|
||||
.loading {
|
||||
position:fixed;left:0;top:0;z-index:65536;
|
||||
display:flex;justify-content:center;align-items:center;
|
||||
width:100%;height:100%;
|
||||
|
||||
.box {position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -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:75%}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid rgba(200,200,200,0.15)}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:rgba(29,35,44,0.08)}table tbody td{padding:.9rem .8rem}table .ac{text-align:center}table .idx{color:#dae1e9;text-shadow:0 0.1rem 0 rgba(255,255,255,0.6)}table .active{color:#3fc2a7;background:rgba(255,255,255,0.6);font-weight:bold}
|
||||
.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:1vw}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid rgba(200,200,200,0.15)}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:rgba(29,35,44,0.08)}table tbody td{padding:.9rem .8rem}table .ac{text-align:center}table .idx{color:#dae1e9;text-shadow:0 0.1rem 0 rgba(255,255,255,0.6)}table .active{color:#3fc2a7;background:rgba(255,255,255,0.6);font-weight:bold}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
||||
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
||||
|
||||
html {font-size:75%}
|
||||
body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:nth($cd, 1);}
|
||||
html {font-size:1vw}
|
||||
body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:nth($cd, 1);}
|
||||
|
||||
table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
||||
thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -74,7 +74,10 @@
|
|||
// 本地音乐模块
|
||||
.do-mod-local {flex:1;display:flex;flex-flow:column wrap;
|
||||
|
||||
.tabbar {flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:.1rem solid rgba(200, 200, 200, .3);
|
||||
.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;
|
||||
|
||||
|
|
@ -83,10 +86,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.table {overflow:auto;flex:1;}
|
||||
.table {flex:1;}
|
||||
|
||||
|
||||
.edit-form {position:absolute;left:0;top:0;z-index:90;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
|
||||
.edit-form {
|
||||
position:absolute;left:0;top:0;z-index:90;
|
||||
display:flex;justify-content:center;align-items:center;
|
||||
width:100%;height:100%;
|
||||
|
||||
|
||||
.form {position:relative;display:flex;flex-flow:column wrap;flex:0 40rem;width:5rem;height:auto;padding:.5rem 4rem 2rem;background:#fff;box-shadow:0 .5rem 2rem rgba(0, 0, 0, .2);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
|
||||
<!-- 背景点位标签 -->
|
||||
<div class="holder"></div>
|
||||
|
||||
<div class="tools do-fn-drag">
|
||||
<wc-input
|
||||
class="search do-fn-nodrag"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
本地音乐({{list.length}}首)<span class="refresh" @click="refresh">重新扫描</span>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<wc-scroll class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</wc-scroll>
|
||||
|
||||
<div class="edit-form" :if="editMode">
|
||||
<div class="form" :keyup="closeEditByEnter">
|
||||
|
|
|
|||
Reference in New Issue