diff --git a/src/common/config.js b/src/common/config.js
index a04e49b6..451cc76e 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -33,7 +33,7 @@ module.exports = {
name: 'larger',
width: 1198,
height: 766,
- fontSize: '18px',
+ fontSize: '17px',
},
{
id: 5,
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index ea1117a2..b1dc61e9 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,20 +1,22 @@
#container(v-if="isProd && !isNt" :class="[theme, nd ? 'nd' : '']" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
- core-aside#left
- #right
- core-toolbar#toolbar
- core-view#view
- core-player#player
+ #main
+ core-aside#left
+ #right
+ core-toolbar#toolbar
+ core-view#view
+ core-player#player
core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
material-version-modal(v-show="version.showModal")
material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
#container(v-else :class="[theme, nd ? 'nd' : '']")
- core-aside#left
- #right
- core-toolbar#toolbar
- core-view#view
- core-player#player
+ #main
+ core-aside#left
+ #right
+ core-toolbar#toolbar
+ core-view#view
+ core-player#player
core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
material-version-modal(v-show="version.showModal")
@@ -341,6 +343,7 @@ body {
#container {
position: relative;
display: flex;
+ flex-flow: column nowrap;
height: 100%;
overflow: hidden;
background: @color-theme-bgimg @color-theme-bgposition no-repeat;
@@ -349,6 +352,11 @@ body {
background-color: @color-theme;
}
+#main {
+ flex: auto;
+ display: flex;
+}
+
#left {
flex: none;
width: @width-app-left;
diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less
index 1bc71284..f6687c21 100644
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -703,11 +703,11 @@
// Width
-@width-app-left: 20%;
+@width-app-left: 6.5%;
// Height
-@height-toolbar: 50px;
-@height-player: 55px;
+@height-toolbar: 54px;
+@height-player: 60px;
// Shadow
diff --git a/src/renderer/components/core/Aside.vue b/src/renderer/components/core/Aside.vue
index d3a84350..211f8d1d 100644
--- a/src/renderer/components/core/Aside.vue
+++ b/src/renderer/components/core/Aside.vue
@@ -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')}}