优化显示：组件上下间隔，footer 位置置于页面底部

src/App.vue

@@ -1,25 +1,25 @@
 <template>
-  <el-container id="app">
+  <el-container id="app" :style="`min-height: ${heightMinContainer}px`">
-    <el-main>
+    <el-main class="p-0">
       <Home />
     </el-main>
     <el-footer id="app-footer">
-      <el-row>
+      <div>
         <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{ version }})
         ：移除已购音乐的加密保护。
         <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
-      </el-row>
+      </div>
-      <el-row>
+      <div>
         目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
         <a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>。
-      </el-row>
+      </div>
-      <el-row>
+      <div>
         <!--如果进行二次开发，此行版权信息不得移除且应明显地标注于页面上-->
         <span>Copyright &copy; 2019 - {{ new Date().getFullYear() }} MengYX</span>
         音乐解锁使用
         <a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
         开放源代码
-      </el-row>
+      </div>
     </el-footer>
   </el-container>
 </template>
@@ -41,10 +41,17 @@ export default {
   data() {
     return {
       version: config.version,
+      heightMinContainer: 800
     };
   },
   created() {
-    this.$nextTick(() => this.finishLoad());
+    this.$nextTick(() => {
+      this.heightMinContainer = innerHeight
+      this.finishLoad()
+      window.onresize = () => {
+        this.heightMinContainer = innerHeight
+      }
+    });
   },
   methods: {
     async finishLoad() {

src/component/PreviewTable.vue

@@ -9,7 +9,7 @@
     </el-table-column>
     <el-table-column label="歌曲">
       <template #default="scope">
-        <span>{{ scope.row.title }}</span>
+        <p>{{ scope.row.title }}</p>
       </template>
     </el-table-column>
     <el-table-column label="歌手">

src/scss/_dark-mode.scss

@@ -188,12 +188,19 @@
 
   // LINKS
   a{
-    text-decoration: none;
+
-    color: darken($dark-color-link, 15%);
+  }
+
+  // footer
+  #app-footer {
+    a {
+      color: lighten($text-comment, 5%);
       &:hover{
-      color: $dark-color-link;
+        color: $color-link;
       }
     }
+  }
+
 
   // ALERT
   .el-notification{

src/scss/_element-ui-overwrite.scss

@@ -37,3 +37,13 @@ $btn-radius: 6px;
 .el-button{
   @include border-radius($btn-radius) ;
 }
+
+// upload
+.el-upload-dragger{
+  &:hover{
+    background-color: transparentize($color-checkbox, 0.9);
+  }
+}
+.el-upload__tip{
+  color: $text-comment;
+}

src/scss/_normal.scss

@@ -1,38 +0,0 @@
-body{
-  font-family: $font-family;
-  font-size: $fz-main;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#app {
-  text-align: center;
-  color: $text-main;
-  padding-top: 30px;
-}
-
-#app-footer a {
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-}
-
-#app-footer {
-  text-align: center;
-  font-size: small;
-}
-
-#app-control {
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-audio{
-  margin-bottom: 15px; // 播放控件与表格间隔
-}
-
-a{
-  color: darken($color-link, 15%);
-  &:hover{
-    color: $color-link;
-  }
-}

src/scss/_variables.scss

@@ -3,17 +3,18 @@ $blue      : #409EFF;
 $red       : #F56C6C;
 $green     : #85ce61;
 
-// TEXT
-$text-main : #2C3E50;
-$color-link: $blue;
 
+// TEXT COLOR
+$text-main    : #2C3E50;
+$text-comment : #777;
+$color-link   : $blue;
+
+
+// FONT SIZE
 $fz-main: 14px;
 $fz-mini-title: 13px;
 $fz-mini-content: 12px;
 
-$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
-"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-
 
 // DARK MODE
 $dark-border                : lighten(black, 25%);

src/scss/unlock-music.scss

@@ -1,10 +1,61 @@
 @import "variables";
 @import "utility";
 @import "gaps";
-@import "element-ui-overrite";
+@import "element-ui-overwrite";
 
-@import "normal";
+// UNIVERSAL STYLE
-@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
+
+
+
+// MAIN CONTENT
+
+body{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+  font-size: $fz-main;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  text-align: center;
+  color: $text-main;
+  padding: 30px;
+}
+
+// 音频文件操作
+#app-control {
+  margin-top: 20px;
+}
+
+// 音频播放
+audio{
+  margin-top: 20px;
+}
+
+.table-content{
+  margin-top: 20px;
+}
+
+// footer
+#app-footer {
+  margin-top: 40px;
+  text-align: center;
+  color: $text-comment;
+  line-height: 1.3;
+  font-size: $fz-mini-content;
+  a {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    color: darken($text-comment, 10%);
+    &:hover{
+      color: $color-link;
+    }
+  }
+}
 
 
 // 首页弹窗提示信息的 更新信息 面板
@@ -15,12 +66,14 @@
   margin: 10px 0;
   .update-title{
     font-size: $fz-mini-title;
-    padding: 5px 10px;
+    padding: 3px 10px;
     background-color: $color-border-el;
   }
   .update-content{
     font-size: $fz-mini-content;
     line-height: 1.5;
-    padding: 10px;
+    padding: 5px 8px;
   }
 }
+
+@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级

src/view/Home.vue

@@ -44,7 +44,13 @@
 
     <audio :autoplay="playing_auto" :src="playing_url" controls />
 
-    <PreviewTable :policy="filename_policy" :table-data="tableData" @download="saveFile" @edit="editFile" @play="changePlaying" />
+    <PreviewTable
+      class="table-content"
+      :policy="filename_policy"
+      :table-data="tableData"
+      @download="saveFile"
+      @edit="editFile"
+      @play="changePlaying" />
   </div>
 </template>