diff --git a/src/renderer/components/common/AudioVisualizer.vue b/src/renderer/components/common/AudioVisualizer.vue index 4a1e1548..bced8d9e 100644 --- a/src/renderer/components/common/AudioVisualizer.vue +++ b/src/renderer/components/common/AudioVisualizer.vue @@ -29,11 +29,14 @@ const themes = { const getBarWidth = canvasWidth => { let barWidth = (canvasWidth / 128) * 2.5 - const width = canvasWidth / 85 + const width = canvasWidth / 86 + const diffWidth = barWidth - width // console.log(barWidth - width) // if (barWidth - width > 20) newBarWidth = 20 // barWidth = newBarWidth - return barWidth - width > 12 ? width : barWidth + return diffWidth > 32 + ? canvasWidth / 128 // 4k屏、超宽屏直接显示所有频谱条 + : diffWidth > 12 ? width : barWidth } export default { setup() { diff --git a/src/renderer/components/common/ListAddModal.vue b/src/renderer/components/common/ListAddModal.vue index ad3c5f82..2a1516a8 100644 --- a/src/renderer/components/common/ListAddModal.vue +++ b/src/renderer/components/common/ListAddModal.vue @@ -92,11 +92,11 @@ export default { ...mapMutations('list', ['listAdd', 'listMove', 'createUserList']), handleResize() { const width = window.innerWidth - this.rowNum = width <= 1440 + this.rowNum = width < 1920 ? 3 - : width <= 1920 + : width < 2560 ? 4 - : width <= 2560 ? 5 : 6 + : width < 3840 ? 5 : 6 }, handleClick(index) { this.isMove @@ -212,19 +212,19 @@ export default { } @item-width2: (100% / 4); -@media screen and (min-width: 1920px){ +@media (min-width: 1920px){ .btn { width: calc(@item-width2 - 15px); } } @item-width3: (100% / 5); -@media screen and (min-width: 2048px){ +@media (min-width: 2560px){ .btn { width: calc(@item-width3 - 15px); } } @item-width4: (100% / 6); -@media screen and (min-width: 2560px){ +@media (min-width: 3840px){ .btn { width: calc(@item-width4 - 15px); } diff --git a/src/renderer/components/common/ListAddMultipleModal.vue b/src/renderer/components/common/ListAddMultipleModal.vue index 837e0818..b897b58d 100644 --- a/src/renderer/components/common/ListAddMultipleModal.vue +++ b/src/renderer/components/common/ListAddMultipleModal.vue @@ -93,11 +93,11 @@ export default { ...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']), handleResize() { const width = window.innerWidth - this.rowNum = width <= 1440 + this.rowNum = width < 1920 ? 3 - : width <= 1920 + : width < 2560 ? 4 - : width <= 2560 ? 5 : 6 + : width < 3840 ? 5 : 6 }, handleClick(index) { this.isMove @@ -210,19 +210,19 @@ export default { } @item-width2: (100% / 4); -@media screen and (min-width: 1920px){ +@media (min-width: 1920px){ .btn { width: calc(@item-width2 - 15px); } } @item-width3: (100% / 5); -@media screen and (min-width: 2048px){ +@media (min-width: 2560px){ .btn { width: calc(@item-width3 - 15px); } } @item-width4: (100% / 6); -@media screen and (min-width: 2560px){ +@media (min-width: 3840px){ .btn { width: calc(@item-width4 - 15px); } diff --git a/src/renderer/components/core/PlayDetail/LyricPlayer.vue b/src/renderer/components/core/PlayDetail/LyricPlayer.vue index 8d320c63..bb06c4ce 100644 --- a/src/renderer/components/core/PlayDetail/LyricPlayer.vue +++ b/src/renderer/components/core/PlayDetail/LyricPlayer.vue @@ -31,6 +31,7 @@