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}) {