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

This commit is contained in:
邴新科 2023-02-03 12:08:59 +08:00
parent 0b4444d0d2
commit d567e9f136
8 changed files with 110 additions and 64 deletions

View File

@ -1,25 +1,25 @@
<template>
<el-container id="app">
<el-main>
<el-container id="app" :style="`min-height: ${heightMinContainer}px`">
<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>
<el-row>
</div>
<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>
<el-row>
</div>
<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() {

View File

@ -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="歌手">

View File

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

View File

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

View File

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

View File

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

View File

@ -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 后面以获得更高优先级

View File

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