新增自定义列表
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user