ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

初步完善

Browse Source
This commit is contained in:
lyswhut
2020-05-02 18:21:20 +08:00
parent 78c5250f1b
commit 33383cd3bd
9 changed files with 182 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Aside.vue
+48 -16
View File
@@ -6,25 +6,49 @@ div(:class="$style.aside")
div(:class="$style.menu")
dl
dt {{$t('core.aside.online_music')}}
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search") {{$t('core.aside.search')}}
router-link(:active-class="$style.active" to="search")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 30.239 30.239' space='preserve')
use(xlink:href='#icon-search')
span {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList") {{$t('core.aside.song_list')}}
router-link(:active-class="$style.active" to="songList")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 511.334 511.334' space='preserve')
use(xlink:href='#icon-album')
span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard") {{$t('core.aside.leaderboard')}}
router-link(:active-class="$style.active" to="leaderboard")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512.001 512.001' space='preserve')
use(xlink:href='#icon-leaderboard')
span {{$t('core.aside.leaderboard')}}
dl
dt {{$t('core.aside.my_music')}}
//- dt {{$t('core.aside.my_music')}}
dd
router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`") {{$t('core.aside.love_list')}}
//- router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-love')
span {{$t('core.aside.love_list')}}
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
dl
dt {{$t('core.aside.other')}}
//- dt {{$t('core.aside.other')}}
dd
router-link(:active-class="$style.active" to="download") {{$t('core.aside.download')}}
router-link(:active-class="$style.active" to="download")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-download-2')
span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting") {{$t('core.aside.setting')}}
router-link(:active-class="$style.active" to="setting")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-setting')
span {{$t('core.aside.setting')}}
</template>
<script>
@@ -105,18 +129,20 @@ export default {
.menu {
flex: auto;
padding: 10px;
// padding: 5px;
dl {
-webkit-app-region: no-drag;
margin-bottom: 15px;
// margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
dt {
padding-left: 5px;
font-size: 11px;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font-label;
.mixin-ellipsis-1;
}
dd a {
display: block;
@@ -124,17 +150,19 @@ export default {
text-decoration: none;
position: relative;
padding: 10px;
margin: 5px 0;
padding: 10px 10px;
// margin: 5px 0;
// border-left: 5px solid transparent;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font;
cursor: pointer;
font-size: 14px;
font-size: 11.5px;
text-align: center;
transition: background-color 0.3s ease;
border-radius: 4px;
// border-radius: 4px;
.mixin-ellipsis-1;
&.active {
// border-left-color: @color-theme-active;
@@ -151,6 +179,10 @@ export default {
}
}
.icon {
margin-bottom: 5px;
}
each(@themes, {
:global(#container.@{value}) {
src/renderer/components/core/Icons.vue
+92 -57
View File
File diff suppressed because one or more lines are too long
src/renderer/components/core/Player.vue
+10 -4
View File
@@ -2,7 +2,7 @@
div(:class="$style.player")
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 60 60' space='preserve')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.right" v-if="!isShowPlayerDetail")
div(:class="$style.column1")
@@ -658,7 +658,7 @@ export default {
.player {
height: @height-player;
// background-color: rgb(245, 245, 245);
background-color: @color-theme_2;
transition: @transition-theme;
transition-property: border-color;
border-top: 2px solid @color-theme;
@@ -670,16 +670,19 @@ export default {
}
}
.left {
width: @height-player - 2;
width: @height-player;
height: @height-player - 2;
color: @color-theme;
transition: @transition-theme;
transition-property: color;
flex: none;
padding: 2px;
padding: 3px 3px 3px 5px;
opacity: 1;
transition: @transition-theme;
transition-property: opacity;
display: flex;
justify-content: center;
// align-items: center;
cursor: pointer;
&:hover {
@@ -694,6 +697,8 @@ export default {
max-height: 100%;
transition: @transition-theme;
transition-property: border-color;
// border-radius: 50%;
border-radius: @radius-progress-border;
// border: 2px solid @color-theme_2-background_1;
}
}
@@ -899,6 +904,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
.player {
background-color: ~'@{color-@{value}-theme_2}';
border-top-color: ~'@{color-@{value}-theme}';
}
.left {
src/renderer/components/material/Input.vue
+1
View File
@@ -55,6 +55,7 @@ export default {
outline: none;
transition: background-color 0.2s ease;
background-color: @color-btn-background;
font-size: 13.3px;
&[disabled] {
opacity: .4;
}
src/renderer/components/material/SearchInput.vue
+7 -3
View File
@@ -140,7 +140,7 @@ export default {
transition: box-shadow .4s ease, background-color @transition-theme;
display: flex;
flex-flow: column nowrap;
width: 240px;
width: 35%;
background-color: @color-search-form-background;
&.active {
@@ -148,6 +148,7 @@ export default {
.form {
input {
border-bottom-left-radius: 0;
}
button {
border-bottom-right-radius: 0;
@@ -156,7 +157,7 @@ export default {
}
.form {
display: flex;
height: @height-toolbar / 2;
height: @height-toolbar * 0.52;
position: relative;
input {
flex: auto;
@@ -172,6 +173,8 @@ export default {
// height: @height-toolbar * .7;
padding: 0 5px;
overflow: hidden;
font-size: 13.5px;
line-height: @height-toolbar * 0.52 + 5px;
&::placeholder {
color: @color-btn;
}
@@ -226,7 +229,8 @@ export default {
}
.big {
width: 500px;
min-width: 500px;
width: 100%;
// input {
// line-height: 30px;
// }