优化显示:组件上下间隔,footer 位置置于页面底部
This commit is contained in:
parent
0b4444d0d2
commit
d567e9f136
25
src/App.vue
25
src/App.vue
@ -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 © 2019 - {{ new Date().getFullYear() }} MengYX</span>
|
<span>Copyright © 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() {
|
||||||
|
@ -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="歌手">
|
||||||
|
@ -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{
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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%);
|
||||||
|
@ -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 后面,以获得更高优先级
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user