首页细节调整
This commit is contained in:
188
src/components/aplayer.vue
Normal file
188
src/components/aplayer.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<!-- 准备一个容器用来存放音乐播放器 -->
|
||||
<div id="aplayer"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// https://aplayer.js.org/#/zh-Hans/
|
||||
// import Hls from 'hls.js/dist/hls.min.js';
|
||||
import APlayer from "aplayer"; // 引入音乐插件
|
||||
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
|
||||
import { onMounted, reactive } from "vue";
|
||||
|
||||
// window.Hls = Hls;
|
||||
const data: any = reactive({
|
||||
audio: [],
|
||||
info: {
|
||||
fixed: true, // 开启吸底模式
|
||||
// mini: false, // 开启迷你模式
|
||||
// autoplay: true, // 自动播放(已经没用了)
|
||||
// theme: '#000', // 主题色
|
||||
loop: "all", // 音频循环播放, 可选值: 'all', 'one', 'none'
|
||||
order: "list", // 音频循环顺序, 可选值: 'list', 'random'
|
||||
preload: "metadata", //预加载，可选值: 'none', 'metadata', 'auto'
|
||||
volume: 0.5, // 默认音量，可选值: 0-1
|
||||
mutex: true, // 互斥，默认为true，即不允许多个音频同时播放，当前播放的音频会暂停其他音频
|
||||
lrcType: 3, // 歌词类型，可选值: 1, 2, 3
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 8834041785
|
||||
const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
|
||||
// const res = await fetch("https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=8834041785")
|
||||
const mlist = await res.json()
|
||||
data.audio = []
|
||||
mlist.forEach((i: any) => {
|
||||
data.audio.push({
|
||||
title: i.name,
|
||||
author: i.artist,
|
||||
url: i.url,
|
||||
pic: i.pic,
|
||||
lrc: i.lrc,
|
||||
});
|
||||
// console.log('>>>>>',data.audio);
|
||||
|
||||
});
|
||||
|
||||
// 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById("aplayer"),
|
||||
audio: data.audio, // 音乐信息
|
||||
...data.info, // 其他配置信息
|
||||
});
|
||||
const d: any = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
|
||||
let flag = true;
|
||||
const app: any = document.querySelector("#aplayer > div.aplayer-lrc");
|
||||
app.style.display = "block";
|
||||
app.style.transform = "translateY(50px)";
|
||||
d.addEventListener("click", () => {
|
||||
if (flag) {
|
||||
app.style.transform = "translateY(0)";
|
||||
ap.lrc.show();
|
||||
flag = false;
|
||||
} else {
|
||||
app.style.transform = "translateY(50px)";
|
||||
ap.lrc.hide();
|
||||
ap.list.hide();
|
||||
flag = true;
|
||||
}
|
||||
});
|
||||
document.querySelector(".aplayer-list > ol")?.addEventListener("mousewheel", (e) => {
|
||||
e.stopPropagation();
|
||||
})
|
||||
|
||||
// 获取当前屏幕宽度
|
||||
const width = document.documentElement.clientWidth; // 获取屏幕宽度
|
||||
if (width < 767) d.click();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#aplayer {
|
||||
width: 480px; // 定个宽度
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: #f5f5f8; // 设置背景色
|
||||
|
||||
:deep(.aplayer-body) {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: #f5f5f8; // 设置背景色
|
||||
|
||||
// bottom: 10px; // 设置底部距离
|
||||
.aplayer-icon-lrc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon):hover svg path {
|
||||
fill: @blue; // 设置颜色
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) {
|
||||
width: 418px !important;
|
||||
background-color: #f5f5f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list-light) {
|
||||
background: inherit;
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol {
|
||||
max-height: 160px !important;
|
||||
|
||||
// margin-bottom: 12px;
|
||||
.aplayer-list-light .aplayer-list-author {
|
||||
color: @orange !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol li:hover {
|
||||
background: inherit;
|
||||
color: @blue;
|
||||
border: none;
|
||||
|
||||
.aplayer-list-author {
|
||||
color: @blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-info) {
|
||||
padding: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon) svg {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: var(--v-bgc); // 设置背景色
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon):hover svg {
|
||||
color: @blue; // 设置颜色
|
||||
}
|
||||
|
||||
:deep(.aplayer-miniswitcher) {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: var(--v-bgc); // 设置背景色
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc) {
|
||||
// text-align: right !important;
|
||||
width: 368px !important;
|
||||
transition: all 0.3s ease;
|
||||
// left: unset;
|
||||
bottom: 12px;
|
||||
z-index: 999;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc-contents) {
|
||||
transition: all 0.5s ease !important;
|
||||
|
||||
p {
|
||||
font-size: 12px !important;
|
||||
color: @primary !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc-contents) {
|
||||
.aplayer-lrc-current {
|
||||
opacity: 1;
|
||||
font-size: 13px !important;
|
||||
color: @orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#aplayer {
|
||||
width: 100vw !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user