lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-25 08:47:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 优化mv播放

Browse Source
This commit is contained in:
algerkong
2023-12-27 21:44:32 +08:00
parent a504b914fe
commit d04aeef40b
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mv/index.vue
+12 -6
View File
@@ -19,15 +19,15 @@
</div> </div>
</n-scrollbar> </n-scrollbar>
<n-drawer :show="showMv" height="100vh" placement="bottom"> <n-drawer :show="showMv" height="100vh" placement="bottom" :z-index="999999999">
<div class="mv-detail"> <div class="mv-detail">
<video :src="playMvUrl" controls autoplay></video>
<div class="mv-detail-title"> <div class="mv-detail-title">
<div class="title">{{ playMvItem?.name }}</div> <div class="title">{{ playMvItem?.name }}</div>
<button @click="close"> <button @click="close">
<i class="iconfont icon-xiasanjiaoxing"></i> <i class="iconfont icon-xiasanjiaoxing"></i>
</button> </button>
</div> </div>
<video :src="playMvUrl" controls autoplay></video>
</div> </div>
</n-drawer> </n-drawer>
</div> </div>
@@ -129,11 +129,10 @@ const close = () => {
@apply w-full h-full bg-black relative; @apply w-full h-full bg-black relative;
&-title { &-title {
@apply absolute w-full top-12 left-0 flex justify-between z-50 h-10 px-4 py-2 text-lg items-center; @apply absolute w-full left-0 flex justify-between h-16 px-6 py-2 text-xl font-bold items-center z-50 transition-all duration-300 ease-in-out -top-24;
background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
button .icon-xiasanjiaoxing { button .icon-xiasanjiaoxing {
@apply text-2xl; @apply text-3xl;
} }
button:hover { button:hover {
@@ -144,4 +143,11 @@ const close = () => {
video { video {
@apply w-full h-full; @apply w-full h-full;
} }
video:hover + .mv-detail-title {
@apply top-0;
}
.mv-detail-title:hover {
@apply top-0;
}
}</style> }</style>