diff --git a/src/App.vue b/src/App.vue
index 176b755..a44c624 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,25 @@
-
-
+
+
@@ -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() {
diff --git a/src/component/PreviewTable.vue b/src/component/PreviewTable.vue
index 64cdf1f..a9a0246 100644
--- a/src/component/PreviewTable.vue
+++ b/src/component/PreviewTable.vue
@@ -9,7 +9,7 @@
- {{ scope.row.title }}
+ {{ scope.row.title }}
diff --git a/src/scss/_dark-mode.scss b/src/scss/_dark-mode.scss
index e90af2f..b66d32e 100644
--- a/src/scss/_dark-mode.scss
+++ b/src/scss/_dark-mode.scss
@@ -188,13 +188,20 @@
// LINKS
a{
- text-decoration: none;
- color: darken($dark-color-link, 15%);
- &:hover{
- color: $dark-color-link;
+
+ }
+
+ // footer
+ #app-footer {
+ a {
+ color: lighten($text-comment, 5%);
+ &:hover{
+ color: $color-link;
+ }
}
}
+
// ALERT
.el-notification{
background-color: $dark-btn-bg-highlight;
diff --git a/src/scss/_element-ui-overrite.scss b/src/scss/_element-ui-overwrite.scss
similarity index 82%
rename from src/scss/_element-ui-overrite.scss
rename to src/scss/_element-ui-overwrite.scss
index b452fd0..3863f66 100644
--- a/src/scss/_element-ui-overrite.scss
+++ b/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;
+}
diff --git a/src/scss/_normal.scss b/src/scss/_normal.scss
deleted file mode 100644
index 69ace39..0000000
--- a/src/scss/_normal.scss
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 51cd555..49dc2b2 100644
--- a/src/scss/_variables.scss
+++ b/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%);
diff --git a/src/scss/unlock-music.scss b/src/scss/unlock-music.scss
index 178f28c..a48818c 100644
--- a/src/scss/unlock-music.scss
+++ b/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";
-@import "dark-mode"; // dark-mode 放在 normal 后面,以获得更高优先级
+// UNIVERSAL STYLE
+
+
+
+// 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 后面,以获得更高优先级
diff --git a/src/view/Home.vue b/src/view/Home.vue
index 69a6f5d..41cda6b 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -44,7 +44,13 @@
-
+