update

src/css/app.scss

@@ -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;
       

src/css/common.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: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}

src/css/common.scss

@@ -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%}
+html {font-size:1vw}
-body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:nth($cd, 1);}
+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)}

src/css/modules.scss

@@ -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);

src/index.html

@@ -25,7 +25,7 @@
 
 
     <!-- 背景点位标签 -->
-    <div class="holder"></div>
+
     <div class="tools do-fn-drag">
       <wc-input 
         class="search do-fn-nodrag" 

src/views/local.htm

@@ -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">