diff --git a/src/renderer/components/layout/Icons.vue b/src/renderer/components/layout/Icons.vue index 3ee78a98..74a5455e 100644 --- a/src/renderer/components/layout/Icons.vue +++ b/src/renderer/components/layout/Icons.vue @@ -220,6 +220,9 @@ + + + diff --git a/src/renderer/views/List/MusicList/index.vue b/src/renderer/views/List/MusicList/index.vue index c6c74f07..e812f6eb 100644 --- a/src/renderer/views/List/MusicList/index.vue +++ b/src/renderer/views/List/MusicList/index.vue @@ -82,6 +82,15 @@
{{ item.interval || '--/--' }}
+

@@ -287,6 +296,9 @@ export default { const scrollToTop = () => { listRef.value.scrollTo(0, true) } + const handleLocation = () => { + listRef.value.scrollToIndex(playerInfo.value.playIndex, 0, true) + } return { listItemHeight, @@ -338,6 +350,8 @@ export default { handleRestoreScroll, actionButtonsVisible, + + handleLocation, } }, } @@ -396,6 +410,7 @@ export default { display: flex; flex-flow: column nowrap; flex: auto; + position: relative; } .noItem { @@ -412,4 +427,32 @@ export default { } } +.location { + all: unset; + position: absolute; + right: 48px; + bottom: 48px; + width: 32px; + height: 32px; + color: var(--color-button-font); + cursor: pointer; + + svg { + transition: opacity @transition-fast; + opacity: .6; + filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)); + } + + &:hover { + svg { + opacity: .9; + } + } + + &:active { + svg { + opacity: 1; + } + } +}