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

更新播放栏UI

pull/1053/head
lyswhut 2022-11-10 18:35:15 +08:00
parent 70a691bc68
commit 54b5517222
1 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,17 @@
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)"> <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
{{ title }} {{ title }}
</div> </div>
<div :class="$style.status" :aria-label="statusText">{{ statusText }}</div> <div :class="$style.status">{{ statusText }}</div>
</div> </div>
<div :class="$style.timeContent"> <div :class="$style.timeContainer">
<span>{{ nowPlayTimeStr }}</span> <div :class="$style.timeContent">
<div :class="$style.progress"> <span>{{ nowPlayTimeStr }}</span>
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" /> <span style="margin: 0 1px;">/</span>
<span>{{ maxPlayTimeStr }}</span>
<div :class="$style.progress">
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
</div>
</div> </div>
<!-- <span style="margin: 0 1px;">/</span> -->
<span>{{ maxPlayTimeStr }}</span>
</div> </div>
<!-- <play-progress /> --> <!-- <play-progress /> -->
<control-btns /> <control-btns />
@ -253,33 +255,45 @@ export default {
max-width: 100%; max-width: 100%;
} }
.timeContainer {
padding: 15px 0;
&:hover {
.progress {
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: 12px;
// padding-left: 10px; // padding-left: 10px;
display: flex; // display: flex;
flex-flow: row nowrap; // flex-flow: column nowrap;
align-items: center; // align-items: center;
padding-bottom: 3px;
} }
.progress { .progress {
// position: absolute; position: absolute;
// top: 0; 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: 8px 0; padding: 2px 0;
// height: 15px; height: 8px;
// .progressBar { transition: opacity @transition-normal;
// height: 4px; opacity: .24;
// // border-radius: 0;
// } .progressBar {
height: 2px;
border-radius: 0;
}
} }
.time { .time {
display: flex; display: flex;