新增自定义列表

This commit is contained in:
lyswhut
2020-05-16 19:21:21 +08:00
parent eed8b36dc1
commit afc3f48f51
39 changed files with 1486 additions and 309 deletions
+16 -25
View File
@@ -1,26 +1,25 @@
<template lang="pug">
div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
div(:class="['animated', logoAnimate, $style.logo]") L X
//- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
div(:class="$style.menu")
dl
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search")
router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 801.99 811.98' space='preserve')
use(xlink:href='#icon-search-2')
//- span {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList")
router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 739.96 763.59' space='preserve')
use(xlink:href='#icon-album')
//- span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard")
router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 819.1 819.38' space='preserve')
use(xlink:href='#icon-leaderboard')
@@ -28,23 +27,20 @@ div(:class="$style.aside")
dl
//- 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}`")
router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 830.33 740.22' 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')}}
dd
router-link(:active-class="$style.active" to="download")
router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 798.85 718.96' space='preserve')
use(xlink:href='#icon-download-2')
//- span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting")
router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 854.85 775.41' space='preserve')
use(xlink:href='#icon-setting')
@@ -55,14 +51,6 @@ div(:class="$style.aside")
import { mapGetters } from 'vuex'
// import { getRandom } from '../../utils'
export default {
props: {
list: {
type: Array,
default() {
return []
},
},
},
data() {
return {
active: 'search',
@@ -83,7 +71,8 @@ export default {
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters(['setting']),
...mapGetters('list', ['defaultList']),
},
// mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
@@ -120,10 +109,12 @@ export default {
}
.logo {
box-sizing: border-box;
padding: 12% 13%;
// height: 120px;
padding: 0 13%;
height: 50px;
color: @color-theme-font;
flex: none;
text-align: center;
line-height: 50px;
// -webkit-app-region: no-drag;
}
@@ -132,7 +123,7 @@ export default {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: 40px;
// padding-bottom: 50px;
// padding: 5px;
dl {
-webkit-app-region: no-drag;
@@ -165,7 +156,7 @@ export default {
text-align: center;
transition: background-color 0.3s ease;
// border-radius: 4px;
// border-radius: @radius-border;
.mixin-ellipsis-1;
&.active {