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;
cursor: pointer;
border-radius: 50%;
color: #fff;
color: @color-theme_2;
&.min {
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")
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.middle")
div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
div(:class="$style.column1")
div(:class="$style.container")
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="音量")
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')
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.progress" v-if="!isShowPlayerDetail")
//- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
@ -33,6 +27,18 @@ div(:class="$style.player")
span {{nowPlayTimeStr}}
span(:class="$style.statusText") {{statusText}}
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"
leave-active-class="animated slideOutDown")
@ -610,7 +616,7 @@ export default {
this.volumeEvent.isMsDown = true
this.volumeEvent.msDownX = e.clientX
let val = e.offsetX / 70
let val = e.offsetX / 80
if (val < 0) val = 0
if (val > 1) val = 1
@ -624,7 +630,7 @@ export default {
},
handleVolumeMsMove(e) {
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) {
this.handleSetVolume(this.volume + step)
@ -778,12 +784,12 @@ export default {
}
.left {
width: @height-player - 2;
height: @height-player - 2;
height: 100%;
color: @color-theme;
transition: @transition-theme;
transition-property: color;
flex: none;
padding: 2px;
padding: 2PX;
opacity: 1;
transition: @transition-theme;
transition-property: opacity;
@ -809,13 +815,24 @@ export default {
// border: 2px solid @color-theme_2-background_1;
}
}
.right {
.middle {
flex: auto;
// margin-left: 10px;
padding: 5px 10px 5px 8px;
}
.middle-container {
height: 100%;
padding: 5px 8px 5px 8px;
display: flex;
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 {
flex: auto;
position: relative;
@ -842,10 +859,9 @@ export default {
.volume-content {
position: relative;
width: 100px;
width: 80px;
display: flex;
align-items: center;
padding: 0 15px;
opacity: .5;
transition: opacity @transition-theme;
&:hover {
@ -885,22 +901,18 @@ export default {
.volume-mask {
position: absolute;
left: 15px;
right: 15px;
top: 0;
width: 70%;
width: 100%;
height: 100%;
cursor: pointer;
}
.play-btn {
+ .play-btn {
margin-left: 10px;
margin-left: 15px;
}
flex: none;
height: 95%;
width: 20px;
align-self: center;
height: 46%;
// margin-top: -2px;
transition: @transition-theme;
transition-property: color;
@ -926,8 +938,8 @@ export default {
.progress {
width: 100%;
height: 0.15rem;
border-radius: 0.2rem;
height: 3px;
border-radius: 10px;
// overflow: hidden;
transition: @transition-theme;
transition-property: background-color;

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

@ -411,7 +411,7 @@ export default {
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: #fff;
color: @color-theme_2;
display: flex;
justify-content: 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%);
}
}
.control {
.controBtn {
button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}';
// }

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

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