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

✨ feat: 优化样式，添加播放列表

Browse Source
This commit is contained in:
alger
2023-12-27 14:39:52 +08:00
parent 4dde40ac60
commit 70139e3ca4
6 changed files with 119 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/AppMenu.vue
+2 -3
View File
@@ -4,7 +4,7 @@
<div class="app-menu">
<div class="app-menu-header">
<div class="app-menu-logo">
<img src="@/assets/logo.png" class="w-9 h-9 mt-2" alt="logo" />
<img src="/icon.png" class="w-9 h-9" alt="logo" />
</div>
</div>
<div class="app-menu-list">
@@ -24,7 +24,6 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "@vue/runtime-core";
import { useRoute } from "vue-router";
const props = defineProps({
isText: {
@@ -67,7 +66,7 @@ const iconStyle = (index: any) => {
<style lang="scss" scoped>
.app-menu {
@apply flex-col items-center justify-center p-6;
@apply flex-col items-center justify-center px-6;
max-width: 100px;
}
.app-menu-item-link,
src/layout/components/MusicFull.vue
+16 -6
View File
@@ -6,7 +6,7 @@
:drawer-style="{ backgroundColor: 'transparent' }"
>
<div id="drawer-target">
<div class="drawer-back" :style="{backgroundImage:`url(${getImgUrl(playMusic?.picUrl, '300y300')})`}"></div>
<div class="drawer-back" :class="{'paused': !isPlaying}" :style="{backgroundImage:`url(${getImgUrl(playMusic?.picUrl, '300y300')})`}"></div>
<div class="music-img">
<n-image
ref="PicImgRef"
@@ -26,7 +26,7 @@
</div>
<n-layout
class="music-lrc"
style="height: 550px"
style="height: 55vh"
ref="lrcSider"
:native-scrollbar="false"
@mouseover="mouseOverLayout"
@@ -43,9 +43,10 @@
</template>
</n-layout>
<!-- 时间矫正 -->
<div class="music-content-time"></div>
<n-button @click="reduceCorrectionTime(0.2)">-0.2</n-button>
<n-button @click="addCorrectionTime(0.2)">+0.2</n-button>
<div class="music-content-time">
<n-button @click="reduceCorrectionTime(0.2)">-</n-button>
<n-button @click="addCorrectionTime(0.2)">+</n-button>
</div>
</div>
</div>
</n-drawer>
@@ -54,7 +55,6 @@
<script setup lang="ts">
import type { SongResult } from '@/type/music'
import { getImgUrl } from '@/utils'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import {
lrcArray,
@@ -83,6 +83,7 @@ const emit = defineEmits(['update:musicFull'])
// 播放的音乐信息
const playMusic = computed(() => store.state.playMusic as SongResult)
const isPlaying = computed(() => store.state.play as boolean)
// 获取歌词滚动dom
const lrcSider = ref<any>(null)
const isMouse = ref(false)
@@ -128,6 +129,10 @@ defineExpose({
animation: round 20s linear infinite;
}
.drawer-back.paused {
animation-play-state: paused;
}
#drawer-target {
@apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
backdrop-filter: blur(20px);
@@ -156,6 +161,11 @@ defineExpose({
}
}
.music-content-time{
display: none;
@apply flex justify-center items-center;
}
.music-lrc {
background-color: inherit;
width: 500px;
src/layout/components/PlayBar.vue
+44 -17
View File
@@ -56,24 +56,42 @@
></n-slider>
</div>
<div class="audio-button">
<n-tooltip trigger="hover">
<!-- <n-tooltip trigger="hover" :z-index="9999999">
<template #trigger>
<i class="iconfont icon-likefill"></i>
</template>
喜欢
</n-tooltip>
<!-- <n-tooltip trigger="hover">
</n-tooltip> -->
<!-- <n-tooltip trigger="hover" :z-index="9999999">
<template #trigger>
<i class="iconfont icon-Play" @click="parsingMusic"></i>
</template>
解析播放
</n-tooltip> -->
<n-tooltip trigger="hover">
<!-- <n-tooltip trigger="hover" :z-index="9999999">
<template #trigger>
<i class="iconfont icon-full" @click="setMusicFull"></i>
</template>
歌词
</n-tooltip>
</n-tooltip> -->
<n-popover trigger="click" :z-index="99999999" content-class="music-play" raw :show-arrow="false" :delay="200">
<template #trigger>
<n-tooltip trigger="manual" :z-index="9999999">
<template #trigger>
<i class="iconfont icon-list"></i>
</template>
播放列表
</n-tooltip>
</template>
<div class="music-play-list">
<div class="music-play-list-back"></div>
<n-scrollbar>
<div class="music-play-list-content">
<song-item v-for="(item, index) in playList" :key="item.id" :item="item" mini></song-item>
</div>
</n-scrollbar>
</div>
</n-popover>
</div>
<!-- 播放音乐 -->
@@ -83,7 +101,6 @@
<script lang="ts" setup>
import type { SongResult } from '@/type/music'
import { secondToMinute, getImgUrl } from '@/utils'
import { computed, onMounted, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { setAnimationClass } from '@/utils'
import {
@@ -92,6 +109,7 @@ import {
allTime
} from '@/hooks/MusicHook'
import MusicFull from './MusicFull.vue'
import SongItem from '@/components/common/SongItem.vue'
const store = useStore()
@@ -100,6 +118,8 @@ const playMusic = computed(() => store.state.playMusic as SongResult)
// 是否播放
const play = computed(() => store.state.play as boolean)
const playList = computed(() => store.state.playList as SongResult[])
const audio = {
value: document.querySelector('#MusicAudio') as HTMLAudioElement
}
@@ -248,13 +268,6 @@ const setMusicFull = () => {
</script>
<style lang="scss" scoped>
.musicPage-enter-active {
animation: fadeInUp 0.4s ease-in-out;
}
.musicPage-leave-active {
animation: fadeOutDown 0.4s ease-in-out;
}
.text-ellipsis {
width: 100%;
@@ -262,11 +275,10 @@ const setMusicFull = () => {
.music-play-bar {
@apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
z-index: 99999999;
z-index: 9999;
backdrop-filter: blur(20px);
background-color: rgba(0, 0, 0, 0.747);
.music-content {
box-shadow: 0px 0px 8px 0px rgba(203, 203, 203, 0.238);
background-color: rgba(0, 0, 0, 0.747); .music-content {
width: 140px;
@apply ml-4;
@@ -332,4 +344,19 @@ const setMusicFull = () => {
@apply text-2xl hover:text-green-500 transition cursor-pointer m-4;
}
}
.music-play{
&-list{
height: 50vh;
@apply relative rounded-3xl overflow-hidden;
&-back{
backdrop-filter: blur(20px);
@apply absolute top-0 left-0 w-full h-full bg-gray-800 bg-opacity-75;
}
&-content{
padding: 10px;
}
}
}
</style>
src/layout/components/SearchBar.vue
+4 -5
View File
@@ -2,7 +2,7 @@
<div class="search-box flex">
<div class="search-box-input flex-1">
<n-input
size="large"
size="medium"
round
v-model:value="searchValue"
:placeholder="hotSearchKeyword"
@@ -21,14 +21,14 @@
<n-avatar
class="ml-2 cursor-pointer"
circle
size="large"
size="medium"
:src="getImgUrl(store.state.user.avatarUrl)"
v-if="store.state.user"
/>
<n-avatar
class="ml-2 cursor-pointer"
circle
size="large"
size="medium"
src="https://picsum.photos/200/300?random=1"
@click="toLogin()"
v-else
@@ -40,7 +40,6 @@
<script lang="ts" setup>
import { getSearchKeyword, getHotSearch } from '@/api/home';
import { getUserDetail, logout } from '@/api/login';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import request from '@/utils/request_mt'
@@ -157,7 +156,7 @@ const selectItem = async (key: any) => {
<style lang="scss" scoped>
.user-box {
@apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
@apply ml-4 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
background: #1a1a1a;
}
src/layout/components/TitleBar.vue
+1 -1
View File
@@ -51,7 +51,7 @@ const drag = (event: HTMLElement) => {
<style scoped lang="scss">
#title-bar {
-webkit-app-region: drag;
@apply flex justify-between text-white px-6 py-3 select-none relative;
@apply flex justify-between text-white px-6 py-2 select-none relative;
z-index: 9999999;
}