From 6fd513ee79a56aa30b4a986976837538496fb54f Mon Sep 17 00:00:00 2001 From: Folltoshe Date: Sun, 6 Nov 2022 19:53:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=92=AD=E6=94=BE=E6=A0=8FUI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- .../components/layout/PlayBar/index.vue | 205 +++++++++++------- 2 files changed, 126 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index 740c67cd..2e8789c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lx-music-desktop", - "version": "2.0.0-beta.6", + "version": "2.0.0-beta.7", "description": "一个免费的音乐查找助手", "main": "./dist/main.js", "productName": "lx-music-desktop", diff --git a/src/renderer/components/layout/PlayBar/index.vue b/src/renderer/components/layout/PlayBar/index.vue index baf2a707..4d1db66d 100644 --- a/src/renderer/components/layout/PlayBar/index.vue +++ b/src/renderer/components/layout/PlayBar/index.vue @@ -5,41 +5,47 @@
LX
-
+
{{ title }}
{{ statusText }}
-
- {{ nowPlayTimeStr }} -
- +
+
+
+ +
+ + + +
+
+ + + + + + +
+
+ + + +
+
+
+
+
+ {{ nowPlayTimeStr }} +
+ +
+ {{ maxPlayTimeStr }} +
- - {{ maxPlayTimeStr }}
+ - -
-
- - - -
-
- - - - - - -
-
- - - -
-
@@ -115,6 +121,18 @@ export default { : '^-^' }) + const titleName = computed(() => { + return musicInfo.name + ? musicInfo.name + : '^-^' + }) + + const titleSinger = computed(() => { + return musicInfo.singer + ? musicInfo.singer + : '^-^' + }) + // onBeforeUnmount(() => { // window.eventHub.emit(eventPlayerNames.setTogglePlay) // }) @@ -130,6 +148,8 @@ export default { imgError, statusText, title, + titleName, + titleSinger, showPlayerDetail, isPlay, togglePlay, @@ -177,7 +197,6 @@ export default { .picContent { height: 100%; aspect-ratio: 1 / 1; - // color: var(--color-primary); // transition: @transition-normal; // transition-property: color; @@ -189,11 +208,9 @@ export default { justify-content: center; // align-items: center; cursor: pointer; - &:hover { opacity: .8; } - // svg { // fill: currentColor; // } @@ -227,59 +244,24 @@ export default { } } -.infoContent { - padding: 0 10px; - flex: auto; - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: flex-start; - font-size: 14px; - color: var(--color-font); - min-width: 0; - line-height: 1.5; -} - -.title { - max-width: 100%; - font-size: 12px; - color: var(--color-font-label); - .mixin-ellipsis-1; -} -.status { - padding-top: 2px; - height: 23px; - .mixin-ellipsis-1; - max-width: 100%; -} - .timeContent { - width: 30%; + width: 100%; // position: relative; flex: none; color: var(--color-300); font-size: 13px; - // padding-left: 10px; + padding-top: 8px; + padding-right: 10px; display: flex; flex-flow: row nowrap; align-items: center; } .progress { // position: absolute; - // top: 0; - // left: 0; - // width: 100%; flex: auto; - // width: 160px; position: relative; - // padding-bottom: 6px; margin: 0 8px; padding: 8px 0; - // height: 15px; - // .progressBar { - // height: 4px; - // // border-radius: 0; - // } } .time { display: flex; @@ -287,27 +269,78 @@ export default { justify-content: space-between; } -.playBtnContent { - height: 100%; - flex: none; - display: flex; - flex-flow: row nowrap; - align-items: center; +.infoContent { padding-left: 10px; - padding-right: 15px; - gap: 18px; + flex: auto; + display: flex; + margin-right: auto; + flex-flow: column nowrap; + justify-content: center; + align-items: flex-start; + font-size: 12px; + color: var(--color-font); + min-width: 0; + line-height: 2.2; + max-width: 40%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.title { + .mixin-ellipsis-1; + color: var(--color-font); + font-size: 14px; + max-width: 100%; +} +.status { + .mixin-ellipsis-1; + color: var(--color-font-lable); + font-size: 12px; + max-width: 100%; } +.rightContent { + position: absolute; + height: 100%; + width: 50%; + right: 0; + margin-right: auto; + padding-right: 10px; + flex: auto; + display: flex; + justify-content: center; + font-size: 13px; + color: var(--color-font); +} + +.rightBtn { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + padding-top: 8px; + padding-right: 20px; + width: 100%; + height: 50%; +} +.playBtnContent { + position: absolute; + justify-content: center; + align-items: center; + display: flex; + height: 100%; + width: 100%; + gap: 28px; +} .play-btn { + position: relative; flex: none; - height: 52%; - // margin-top: -2px; + height: 90%; transition: @transition-fast; transition-property: color, opacity; color: var(--color-button-font); opacity: 1; cursor: pointer; - svg { fill: currentColor; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)); @@ -320,4 +353,16 @@ export default { } } +.rightProgress { + position: absolute; + right: 0; + display: inline-block; + justify-content: center; + width: 100%; + height: 50%; + top: 50%; + bottom: 0; + margin-left: auto; +} +