优化显示:组件上下间隔,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> <template>
<el-container id="app"> <el-container id="app" :style="`min-height: ${heightMinContainer}px`">
<el-main> <el-main class="p-0">
<Home /> <Home />
</el-main> </el-main>
<el-footer id="app-footer"> <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" target="_blank">音乐解锁</a>({{ version }})
移除已购音乐的加密保护 移除已购音乐的加密保护
<a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a> <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) 目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a> <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> <span>Copyright &copy; 2019 - {{ new Date().getFullYear() }} MengYX</span>
音乐解锁使用 音乐解锁使用
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a> <a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
开放源代码 开放源代码
</el-row> </div>
</el-footer> </el-footer>
</el-container> </el-container>
</template> </template>
@ -41,10 +41,17 @@ export default {
data() { data() {
return { return {
version: config.version, version: config.version,
heightMinContainer: 800
}; };
}, },
created() { created() {
this.$nextTick(() => this.finishLoad()); this.$nextTick(() => {
this.heightMinContainer = innerHeight
this.finishLoad()
window.onresize = () => {
this.heightMinContainer = innerHeight
}
});
}, },
methods: { methods: {
async finishLoad() { async finishLoad() {

View File

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

View File

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

View File

@ -37,3 +37,13 @@ $btn-radius: 6px;
.el-button{ .el-button{
@include border-radius($btn-radius) ; @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; $red : #F56C6C;
$green : #85ce61; $green : #85ce61;
// TEXT
// TEXT COLOR
$text-main : #2C3E50; $text-main : #2C3E50;
$text-comment : #777;
$color-link : $blue; $color-link : $blue;
// FONT SIZE
$fz-main: 14px; $fz-main: 14px;
$fz-mini-title: 13px; $fz-mini-title: 13px;
$fz-mini-content: 12px; $fz-mini-content: 12px;
$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
// DARK MODE // DARK MODE
$dark-border : lighten(black, 25%); $dark-border : lighten(black, 25%);

View File

@ -1,10 +1,61 @@
@import "variables"; @import "variables";
@import "utility"; @import "utility";
@import "gaps"; @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; margin: 10px 0;
.update-title{ .update-title{
font-size: $fz-mini-title; font-size: $fz-mini-title;
padding: 5px 10px; padding: 3px 10px;
background-color: $color-border-el; background-color: $color-border-el;
} }
.update-content{ .update-content{
font-size: $fz-mini-content; font-size: $fz-mini-content;
line-height: 1.5; 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 /> <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> </div>
</template> </template>