初步完善
This commit is contained in:
lyswhut
@@ -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}) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user