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-06-24 14:18:32 +08:00
parent 9b82cdfe53
commit 637727faa0
4 changed files with 63 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,7 +154,7 @@ export default {
padding: 1px; padding: 1px;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
color: #fff; color: @color-theme_2;
&.min { &.min {
background-color: @color-minBtn; background-color: @color-minBtn;

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

@ -4,7 +4,8 @@ div(:class="$style.player")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError") 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' height='102%' width='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}`') use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.right" v-if="!isShowPlayerDetail") div(:class="$style.middle")
div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
div(:class="$style.column1") div(:class="$style.column1")
div(:class="$style.container") div(:class="$style.container")
div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}} div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}}
@ -16,14 +17,7 @@ div(:class="$style.player")
//- div(:class="$style.playBtn" @click='handleNext' title="音量") //- div(:class="$style.playBtn" @click='handleNext' title="音量")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
use(xlink:href='#icon-sound') use(xlink:href='#icon-sound')
div(:class="$style.playBtn" @click='handleNext' :title="$t('core.player.next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
div(:class="$style.column2") div(:class="$style.column2")
div(:class="$style.progress" v-if="!isShowPlayerDetail") div(:class="$style.progress" v-if="!isShowPlayerDetail")
//- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }") //- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
@ -33,6 +27,18 @@ div(:class="$style.player")
span {{nowPlayTimeStr}} span {{nowPlayTimeStr}}
span(:class="$style.statusText") {{statusText}} span(:class="$style.statusText") {{statusText}}
span {{maxPlayTimeStr}} span {{maxPlayTimeStr}}
div(:class="$style.right")
div(:class="$style.playBtn" @click='handlePrev' :title="$t('core.player.next')" style="transform: rotate(180deg);")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
div(:class="$style.playBtn" @click='handleNext' :title="$t('core.player.next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
//- transition(enter-active-class="animated lightSpeedIn" //- transition(enter-active-class="animated lightSpeedIn"
transition(enter-active-class="animated lightSpeedIn" transition(enter-active-class="animated lightSpeedIn"
leave-active-class="animated slideOutDown") leave-active-class="animated slideOutDown")
@ -610,7 +616,7 @@ export default {
this.volumeEvent.isMsDown = true this.volumeEvent.isMsDown = true
this.volumeEvent.msDownX = e.clientX this.volumeEvent.msDownX = e.clientX
let val = e.offsetX / 70 let val = e.offsetX / 80
if (val < 0) val = 0 if (val < 0) val = 0
if (val > 1) val = 1 if (val > 1) val = 1
@ -624,7 +630,7 @@ export default {
}, },
handleVolumeMsMove(e) { handleVolumeMsMove(e) {
if (!this.volumeEvent.isMsDown) return if (!this.volumeEvent.isMsDown) return
this.handleSetVolume(this.volumeEvent.msDownVolume + (e.clientX - this.volumeEvent.msDownX) / 70) this.handleSetVolume(this.volumeEvent.msDownVolume + (e.clientX - this.volumeEvent.msDownX) / 80)
}, },
handleSetVolumeUp(step = 0.02) { handleSetVolumeUp(step = 0.02) {
this.handleSetVolume(this.volume + step) this.handleSetVolume(this.volume + step)
@ -778,12 +784,12 @@ export default {
} }
.left { .left {
width: @height-player - 2; width: @height-player - 2;
height: @height-player - 2; height: 100%;
color: @color-theme; color: @color-theme;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
flex: none; flex: none;
padding: 2px; padding: 2PX;
opacity: 1; opacity: 1;
transition: @transition-theme; transition: @transition-theme;
transition-property: opacity; transition-property: opacity;
@ -809,13 +815,24 @@ export default {
// border: 2px solid @color-theme_2-background_1; // border: 2px solid @color-theme_2-background_1;
} }
} }
.right { .middle {
flex: auto; flex: auto;
// margin-left: 10px; }
padding: 5px 10px 5px 8px; .middle-container {
height: 100%;
padding: 5px 8px 5px 8px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
} }
.right {
height: 100%;
flex: none;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-left: 15px;
padding-right: 20px;
}
.column1 { .column1 {
flex: auto; flex: auto;
position: relative; position: relative;
@ -842,10 +859,9 @@ export default {
.volume-content { .volume-content {
position: relative; position: relative;
width: 100px; width: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 15px;
opacity: .5; opacity: .5;
transition: opacity @transition-theme; transition: opacity @transition-theme;
&:hover { &:hover {
@ -885,22 +901,18 @@ export default {
.volume-mask { .volume-mask {
position: absolute; position: absolute;
left: 15px;
right: 15px;
top: 0; top: 0;
width: 70%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
.play-btn { .play-btn {
+ .play-btn { + .play-btn {
margin-left: 10px; margin-left: 15px;
} }
flex: none; flex: none;
height: 95%; height: 46%;
width: 20px;
align-self: center;
// margin-top: -2px; // margin-top: -2px;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
@ -926,8 +938,8 @@ export default {
.progress { .progress {
width: 100%; width: 100%;
height: 0.15rem; height: 3px;
border-radius: 0.2rem; border-radius: 10px;
// overflow: hidden; // overflow: hidden;
transition: @transition-theme; transition: @transition-theme;
transition-property: background-color; transition-property: background-color;

5
src/renderer/components/core/PlayerDetail.vue
View File

@ -411,7 +411,7 @@ export default {
padding: 1px; padding: 1px;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
color: #fff; color: @color-theme_2;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -655,8 +655,9 @@ each(@themes, {
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%); background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
} }
} }
.control { .controBtn {
button { button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after { // &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}'; // background-color: ~'@{color-@{value}-hideBtn}';
// } // }

2
src/renderer/components/core/Toolbar.vue
View File

@ -192,7 +192,7 @@ export default {
padding: 1px; padding: 1px;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
color: #fff; color: @color-theme_2;
+ button { + button {
margin-left: @control-btn-width * 1.2; margin-left: @control-btn-width * 1.2;