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

修改播放栏进度条布局

pull/1057/head
lyswhut 2022-11-19 18:05:37 +08:00
parent 03b73e89b3
commit 59061a0672
2 changed files with 131 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/renderer/components/layout/PlayBar/PlayProgress.vue
View File

@ -1,20 +1,25 @@
<template> <template>
<div ref="dom_btn" :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave"> <div :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
<div ref="dom_btn" :class="$style.timeContent">
<span>{{ nowPlayTimeStr }}</span> <span>{{ nowPlayTimeStr }}</span>
<span style="margin: 0 1px;">/</span> <span style="margin: 0 1px;">/</span>
<span>{{ maxPlayTimeStr }}</span> <span>{{ maxPlayTimeStr }}</span>
<base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave" @transitionend="handleTranEnd">
<div :class="$style.progress"> <div :class="$style.progress">
<div :class="[$style.progressBar, {[$style.barTransition]: isActiveTransition}]" :style="{ transform: `scaleX(${progress || 0})` }" @transitionend="handleTransitionEnd" />
</div>
<base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave" @transitionend="handleTranEnd">
<div :class="$style.popupProgress">
<common-progress-bar v-if="visibleProgress" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" /> <common-progress-bar v-if="visibleProgress" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
</div> </div>
</base-popup> </base-popup>
</div> </div>
</div>
</template> </template>
<script> <script>
import { ref, onMounted } from '@common/utils/vueTools' import { ref, onMounted } from '@common/utils/vueTools'
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress' import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
import { isShowPlayerDetail } from '@renderer/store/player/state'
export default { export default {
setup() { setup() {
@ -83,6 +88,7 @@ export default {
handlMsLeave, handlMsLeave,
handlMsEnter, handlMsEnter,
handleTranEnd, handleTranEnd,
isShowPlayerDetail,
} }
}, },
} }
@ -92,22 +98,80 @@ export default {
<style lang="less" module> <style lang="less" module>
@import '@renderer/assets/styles/layout.less'; @import '@renderer/assets/styles/layout.less';
// .content {
// flex: none;
// position: relative;
// // display: inline-block;
// padding: 5px 0;
// color: var(--color-300);
// font-size: 13px;
// cursor: pointer;
// transition: opacity @transition-fast;
// &:hover {
// opacity: .7;
// }
// }
.content { .content {
flex: none; flex: none;
position: relative; position: relative;
// display: inline-block; padding: 15px 0;
padding: 5px 0; &:hover {
.progress {
opacity: 1;
}
}
}
.timeContent {
// width: 30%;
position: relative;
// flex: none;
color: var(--color-300); color: var(--color-300);
font-size: 13px; font-size: 13px;
cursor: pointer; // padding-left: 10px;
transition: opacity @transition-fast; // display: flex;
// flex-flow: column nowrap;
&:hover { // align-items: center;
opacity: .7; padding-bottom: 3px;
}
} }
.progress { .progress {
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex: auto;
margin-top: 2px;
// width: 160px;
// position: relative;
// padding-bottom: 6px;
// margin: 0 8px;
height: 2px;
opacity: .24;
overflow: hidden;
transition: @transition-normal;
transition-property: background-color, opacity;
background-color: var(--color-primary-light-100-alpha-800);
.progressBar {
height: 100%;
width: 100%;
// position: absolute;
background-color: var(--color-primary-light-100-alpha-400);
// left: 0;
// top: 0;
transform-origin: 0;
will-change: transform;
}
.bar-transition {
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.2s;
}
}
.popupProgress {
position: relative; position: relative;
width: 300px; width: 300px;
height: 15px; height: 15px;
@ -115,4 +179,5 @@ export default {
padding: 5px; padding: 5px;
} }
</style> </style>

100
src/renderer/components/layout/PlayBar/index.vue
View File

@ -10,7 +10,7 @@
</div> </div>
<div :class="$style.status">{{ statusText }}</div> <div :class="$style.status">{{ statusText }}</div>
</div> </div>
<div :class="$style.timeContainer"> <!-- <div :class="$style.timeContainer">
<div :class="$style.timeContent"> <div :class="$style.timeContent">
<span>{{ nowPlayTimeStr }}</span> <span>{{ nowPlayTimeStr }}</span>
<span style="margin: 0 1px;">/</span> <span style="margin: 0 1px;">/</span>
@ -19,8 +19,8 @@
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" /> <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
</div> </div>
</div> </div>
</div> </div> -->
<!-- <play-progress /> --> <play-progress />
<control-btns /> <control-btns />
<div :class="$style.playBtnContent"> <div :class="$style.playBtnContent">
<div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()"> <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
@ -50,7 +50,7 @@ import { computed } from '@common/utils/vueTools'
import { useRouter } from '@common/utils/vueRouter' import { useRouter } from '@common/utils/vueRouter'
import { clipboardWriteText } from '@common/utils/electron' import { clipboardWriteText } from '@common/utils/electron'
import ControlBtns from './ControlBtns' import ControlBtns from './ControlBtns'
// import PlayProgress from './PlayProgress' import PlayProgress from './PlayProgress'
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress' import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
// import { lyric } from '@renderer/core/share/lyric' // import { lyric } from '@renderer/core/share/lyric'
import { import {
@ -72,7 +72,7 @@ export default {
name: 'CorePlayBar', name: 'CorePlayBar',
components: { components: {
ControlBtns, ControlBtns,
// PlayProgress, PlayProgress,
}, },
setup() { setup() {
const router = useRouter() const router = useRouter()
@ -255,52 +255,52 @@ export default {
max-width: 100%; max-width: 100%;
} }
.timeContainer { // .timeContainer {
flex: none; // flex: none;
padding: 15px 0; // padding: 15px 0;
&:hover { // &:hover {
.progress { // .progress {
opacity: 1; // opacity: 1;
} // }
} // }
} // }
.timeContent { // .timeContent {
// width: 30%; // // width: 30%;
position: relative; // position: relative;
// flex: none; // // flex: none;
color: var(--color-300); // color: var(--color-300);
font-size: 13px; // font-size: 13px;
// padding-left: 10px; // // padding-left: 10px;
// display: flex; // // display: flex;
// flex-flow: column nowrap; // // flex-flow: column nowrap;
// align-items: center; // // align-items: center;
padding-bottom: 3px; // padding-bottom: 3px;
} // }
.progress { // .progress {
position: absolute; // position: absolute;
top: 100%; // top: 100%;
left: 0; // left: 0;
width: 100%; // width: 100%;
flex: auto; // flex: auto;
// width: 160px; // // width: 160px;
// position: relative; // // position: relative;
// padding-bottom: 6px; // // padding-bottom: 6px;
// margin: 0 8px; // // margin: 0 8px;
padding: 2px 0; // padding: 2px 0;
height: 8px; // height: 8px;
transition: opacity @transition-normal; // transition: opacity @transition-normal;
opacity: .24; // opacity: .24;
.progressBar { // .progressBar {
height: 2px; // height: 2px;
border-radius: 0; // border-radius: 0;
} // }
} // }
.time { // .time {
display: flex; // display: flex;
flex-flow: row nowrap; // flex-flow: row nowrap;
justify-content: space-between; // justify-content: space-between;
} // }
.playBtnContent { .playBtnContent {
height: 100%; height: 100%;