在播放列表中,添加定位按钮,方便定位当前正在播放的音乐
This commit is contained in:
parent
d92e34949c
commit
380e80478f
@ -220,6 +220,9 @@
|
|||||||
<!-- 0 0 24 24-->
|
<!-- 0 0 24 24-->
|
||||||
<path d="M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,7L13,12.07L14.41,13.5L17,10.9V17H19V10.9L21.59,13.5L23,12.07L18,7Z" />
|
<path d="M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,7L13,12.07L14.41,13.5L17,10.9V17H19V10.9L21.59,13.5L23,12.07L18,7Z" />
|
||||||
</g>
|
</g>
|
||||||
|
<g id="icon-music-location" fill="currentColor">
|
||||||
|
<path d="M87.424 469.312A426.816 426.816 0 0 1 469.312 87.424V0h85.376v87.424a426.816 426.816 0 0 1 381.888 381.888H1024v85.376h-87.424a426.816 426.816 0 0 1-381.888 381.888V1024h-85.376v-87.424A426.816 426.816 0 0 1 87.424 554.688H0v-85.376h87.424z m424.576 384a341.312 341.312 0 1 0 0-682.624 341.312 341.312 0 0 0 0 682.624z m0-170.624a170.688 170.688 0 1 0 0-341.376 170.688 170.688 0 0 0 0 341.376z"></path>
|
||||||
|
</g>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -82,6 +82,15 @@
|
|||||||
<div class="list-item-cell" style="flex: 0 0 10%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
|
<div class="list-item-cell" style="flex: 0 0 10%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
</base-virtualized-list>
|
</base-virtualized-list>
|
||||||
|
<button
|
||||||
|
v-if="playerInfo.isPlayList && playerInfo.playIndex >= 0"
|
||||||
|
:class="$style.location"
|
||||||
|
@click="handleLocation"
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<use xlink:href="#icon-music-location" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!list.length" :class="$style.noItem">
|
<div v-show="!list.length" :class="$style.noItem">
|
||||||
<p v-text="$t('no_item')" />
|
<p v-text="$t('no_item')" />
|
||||||
@ -287,6 +296,9 @@ export default {
|
|||||||
const scrollToTop = () => {
|
const scrollToTop = () => {
|
||||||
listRef.value.scrollTo(0, true)
|
listRef.value.scrollTo(0, true)
|
||||||
}
|
}
|
||||||
|
const handleLocation = () => {
|
||||||
|
listRef.value.scrollToIndex(playerInfo.value.playIndex, 0, true)
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
listItemHeight,
|
listItemHeight,
|
||||||
@ -338,6 +350,8 @@ export default {
|
|||||||
handleRestoreScroll,
|
handleRestoreScroll,
|
||||||
|
|
||||||
actionButtonsVisible,
|
actionButtonsVisible,
|
||||||
|
|
||||||
|
handleLocation,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -396,6 +410,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
flex: auto;
|
flex: auto;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.noItem {
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user