github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

修改布局

pull/277/head
lyswhut 2020-05-02 19:52:43 +08:00
parent 33383cd3bd
commit 6724912c73
5 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/App.vue
View File

@ -1,22 +1,20 @@
<template lang="pug"> <template lang="pug">
#container(v-if="isProd && !isNt" :class="[theme, nd ? 'nd' : '']" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents") #container(v-if="isProd && !isNt" :class="[theme, nd ? 'nd' : '']" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
#main core-aside#left
core-aside#left #right
#right core-toolbar#toolbar
core-toolbar#toolbar core-view#view
core-view#view core-player#player
core-player#player
core-icons core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose") 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-version-modal(v-show="version.showModal")
material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact") material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
#container(v-else :class="[theme, nd ? 'nd' : '']") #container(v-else :class="[theme, nd ? 'nd' : '']")
#main core-aside#left
core-aside#left #right
#right core-toolbar#toolbar
core-toolbar#toolbar core-view#view
core-view#view core-player#player
core-player#player
core-icons core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose") 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-version-modal(v-show="version.showModal")
@ -343,7 +341,6 @@ body {
#container { #container {
position: relative; position: relative;
display: flex; display: flex;
flex-flow: column nowrap;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: @color-theme-bgimg @color-theme-bgposition no-repeat; background: @color-theme-bgimg @color-theme-bgposition no-repeat;
@ -352,11 +349,6 @@ body {
background-color: @color-theme; background-color: @color-theme;
} }
#main {
flex: auto;
display: flex;
}
#left { #left {
flex: none; flex: none;
width: @width-app-left; width: @width-app-left;

2
src/renderer/assets/styles/variables.less
View File

@ -703,7 +703,7 @@
// Width // Width
@width-app-left: 6.5%; @width-app-left: 7.3%;
// Height // Height
@height-toolbar: 54px; @height-toolbar: 54px;

17
src/renderer/components/core/Aside.vue
View File

@ -10,19 +10,19 @@ div(:class="$style.aside")
dd dd
router-link(:active-class="$style.active" to="search") router-link(:active-class="$style.active" to="search")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30.239 30.239' space='preserve')
use(xlink:href='#icon-search') use(xlink:href='#icon-search')
span {{$t('core.aside.search')}} span {{$t('core.aside.search')}}
dd dd
router-link(:active-class="$style.active" to="songList") router-link(:active-class="$style.active" to="songList")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.334 511.334' space='preserve')
use(xlink:href='#icon-album') use(xlink:href='#icon-album')
span {{$t('core.aside.song_list')}} span {{$t('core.aside.song_list')}}
dd dd
router-link(:active-class="$style.active" to="leaderboard") router-link(:active-class="$style.active" to="leaderboard")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512.001 512.001' space='preserve')
use(xlink:href='#icon-leaderboard') use(xlink:href='#icon-leaderboard')
span {{$t('core.aside.leaderboard')}} span {{$t('core.aside.leaderboard')}}
dl dl
@ -31,7 +31,7 @@ div(:class="$style.aside")
//- 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 === 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="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-love') use(xlink:href='#icon-love')
span {{$t('core.aside.love_list')}} 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}} 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}}
@ -40,13 +40,13 @@ div(:class="$style.aside")
dd dd
router-link(:active-class="$style.active" to="download") router-link(:active-class="$style.active" to="download")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-download-2') use(xlink:href='#icon-download-2')
span {{$t('core.aside.download')}} span {{$t('core.aside.download')}}
dd dd
router-link(:active-class="$style.active" to="setting") router-link(:active-class="$style.active" to="setting")
div(:class="$style.icon") 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') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-setting') use(xlink:href='#icon-setting')
span {{$t('core.aside.setting')}} span {{$t('core.aside.setting')}}
</template> </template>
@ -150,7 +150,7 @@ export default {
text-decoration: none; text-decoration: none;
position: relative; position: relative;
padding: 10px 10px; padding: 10px 3px;
// margin: 5px 0; // margin: 5px 0;
// border-left: 5px solid transparent; // border-left: 5px solid transparent;
transition: @transition-theme; transition: @transition-theme;
@ -181,6 +181,9 @@ export default {
.icon { .icon {
margin-bottom: 5px; margin-bottom: 5px;
&> svg {
width: 27%;
}
} }

4
src/renderer/components/core/Player.vue
View File

@ -676,7 +676,7 @@ export default {
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
flex: none; flex: none;
padding: 3px 3px 3px 5px; padding: 2px;
opacity: 1; opacity: 1;
transition: @transition-theme; transition: @transition-theme;
transition-property: opacity; transition-property: opacity;
@ -698,7 +698,7 @@ export default {
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
// border-radius: 50%; // border-radius: 50%;
border-radius: @radius-progress-border; // border-radius: @radius-progress-border;
// border: 2px solid @color-theme_2-background_1; // border: 2px solid @color-theme_2-background_1;
} }
} }

2
src/renderer/components/material/SearchInput.vue
View File

@ -189,7 +189,7 @@ export default {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
padding: 5px 7px; padding: 6px 7px;
color: @color-btn; color: @color-btn;
transition: background-color .2s ease; transition: background-color .2s ease;