From b380e596afd84873091d010ad99b5350c8a403c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B4=E6=96=B0=E7=A7=91?= Date: Fri, 3 Feb 2023 12:08:59 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=9A=E7=BB=84=E4=BB=B6=E4=B8=8A=E4=B8=8B=E9=97=B4=E9=9A=94?= =?UTF-8?q?=EF=BC=8Cfooter=20=E4=BD=8D=E7=BD=AE=E7=BD=AE=E4=BA=8E=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BA=95=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 25 +++++--- src/component/PreviewTable.vue | 2 +- src/scss/_dark-mode.scss | 15 +++-- ...errite.scss => _element-ui-overwrite.scss} | 10 +++ src/scss/_normal.scss | 38 ----------- src/scss/_variables.scss | 13 ++-- src/scss/unlock-music.scss | 63 +++++++++++++++++-- src/view/Home.vue | 8 ++- 8 files changed, 110 insertions(+), 64 deletions(-) rename src/scss/{_element-ui-overrite.scss => _element-ui-overwrite.scss} (82%) delete mode 100644 src/scss/_normal.scss 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 @@ 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 @@