youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
youzi
2025-08-08 10:45:57 +08:00
parent a161520e7b
commit eefae900bf
16 changed files with 316 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/aplayer.vue Normal file
View 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>

30
src/components/homeSide.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="pr-8">
<d-card class="mt-10 bg-white">
<d-card shadow="never" class="mt-10 bg-white">
<template #title>
<div class="flex items-center">
<icon-time class="w-5 mr-2"></icon-time>
节日天气
时间日期
</div>
</template>
<template #content>
<div class="w-full text-center text-[#ec66ab] font-500 text-2xl font-[yj]">{{ t }}</div>
<div class="mt-2 text-center">{{ d }}</div>
<div class="w-full text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
<div class="mt-3 text-right">{{ d }}</div>
</template>
</d-card>
<d-card class="mt-10 bg-white">
<d-card shadow="never" class="mt-10 bg-white">
<template #title>
<div class="flex items-center">
<icon-date class="w-5 mr-2"></icon-date>
@ -29,7 +29,7 @@
</template>
</d-card>
<d-card class="mt-10 bg-white">
<d-card shadow="never" class="mt-10 bg-white">
<template #title>
<div class="flex items-center">
<icon-news class="w-5 mr-2"></icon-news>
@ -39,12 +39,21 @@
<template #content>
<div class="py-1" v-for="i in bdNews" :key="i.id">
<a class="devui-link flex justify-between" :href="i.url" target="_blank">
<span>{{ i.index }}. {{ i.title }}</span>
<span>{{ i.index }}. {{ i.title }}
<icon-hot v-show="i.index < 4" class="w-4 text-[#ec66ab] inline-block"></icon-hot>
</span>
<span class="text-primary">{{ i.hot }}</span>
</a>
</div>
<div class="mt-2 text-center">
<a class="devui-link" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻" target="_blank">更多</a>
<div class="mt-2 justify-between flex items-center">
<div class="w-2/5 h-px bg-[#ec66ab]"></div>
<a class="devui-link text-[#ec66ab] flex items-center" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
target="_blank">
更多
<icon-right class="ml-1 w-4 text-primary inline-block"></icon-right>
</a>
<div class="w-2/5 h-px bg-[#ec66ab]"></div>
</div>
</template>
</d-card>
@ -108,7 +117,4 @@ onUnmounted(() => {
src: url('@/assets/font/LCDML.woff2');
}
:deep(.devui-card__shadow--hover:hover, .devui-card__shadow--always) {
box-shadow: none !important;
}
</style>

17
src/components/menu.vue
View File

@ -1,9 +1,8 @@
<template>
<div ref="nav"
class="main-nav flex justify-between bg-white border-b border-gray-100 shadow-[0_2px_10px_rgba(173,21,21,0.05)]">
<div ref="nav" class="main-nav flex justify-between bg-white">
<!-- 网站Logo -->
<div class="px-5 flex items-center" slot="brand" @click="goHome">
<img src="@/logo/红色字体.png" alt="柚子的网站" class="h-9 align-middle" />
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
</div>
<!-- 主导航菜单 -->
<d-menu mode="horizontal" router class="ml-5 h-14 text-[16px]" :default-select-keys="[key]">
@ -51,12 +50,15 @@
<script setup lang="ts">
// 从@/icon/menu引入所有的svg文件
import logo from '@/assets/images/logo.png';
import artiSvg from '@/icon/menu/arti.svg';
import downSvg from '@/icon/menu/download.svg';
import homeSvg from '@/icon/menu/home.svg';
import linkSvg from '@/icon/menu/link.svg';
import picSvg from '@/icon/menu/pic.svg';
import settingSvg from '@/icon/menu/setting.svg';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
@ -177,10 +179,11 @@ onMounted(() => {
</script>
<style scoped>
/* :deep(svg) {
color: red;
} */
<style scoped lang="less">
.main-nav {
box-shadow: 0 1px 15px 0 @primary;
margin-bottom: 1px;
}
:deep(.devui-menu-horizontal .devui-menu-item:hover span .icon) {
color: var(--devui-brand, #5e7ce0) !important;
fill: var(--devui-brand, #5e7ce0) !important;