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

chore: 调整样式细节并移除节假日功能

Browse Source 
- 恢复 aplayer 初始变换为 translateY(0) 和 translateX(0)，并自动触发点击以初始化状态
- 为 aplayer 列表项添加字体大小 12px 样式
- 简化 homeSide 组件模板格式，统一代码风格
- 移除节假日获取与显示相关逻辑（getHoli 函数及对应模板）
This commit is contained in:
youzi
2026-08-07 18:15:24 +08:00
parent 28612006a6
commit 925ff669df
2 changed files with 28 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/aplayer.vue
+4 -2
View File
@@ -58,8 +58,8 @@ function setupMiniswitcher() {
let expanded = false;
app.style.display = "block";
app.style.transform = "translateY(50px)";
apic.style.transform = "translateX(-66px)";
app.style.transform = "translateY(0)";
apic.style.transform = "translateX(0)";
onClickMiniswitcher = () => {
if (expanded) {
@@ -76,6 +76,7 @@ function setupMiniswitcher() {
}
};
miniswitcherEl.addEventListener("click", onClickMiniswitcher);
miniswitcherEl?.click()
}
/** 阻止歌单列表滚轮事件冒泡，避免联动外层滚动 */
@@ -149,6 +150,7 @@ onUnmounted(() => {
}
:deep(.aplayer-list-light) {
font-size: 12px !important;
background: inherit;
color: @orange;
}
src/components/homeSide.vue
+24 -78
View File
@@ -1,10 +1,7 @@
<template>
<div class="pl-6 pr-6 !bg-transparent">
<n-card
embedded
class="side-glass-card side-glass-card--tint mt-2 overflow-hidden rounded-[24px]"
:style="{ '--side-i': 0 }"
>
<n-card embedded class="side-glass-card side-glass-card--tint mt-2 overflow-hidden rounded-[24px]"
:style="{ '--side-i': 0 }">
<template #header>
<div class="flex items-center font-semibold text-slate-700">
<icon-time class="mr-2 w-5 text-primary"></icon-time>
@@ -15,24 +12,16 @@
<div class="flex items-center justify-between gap-3">
<div class="min-w-0">
<div
class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#D71A44] drop-shadow-[0_8px_20px_rgba(215,26,68,0.14)]"
>
class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#D71A44] drop-shadow-[0_8px_20px_rgba(215,26,68,0.14)]">
{{ t }}
</div>
<div class="mt-1 text-[14px] text-slate-500">{{ d }}</div>
</div>
<img
v-if="jq?.type != 0"
<img v-if="jq?.type != 0"
class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(236,160,102,0.18)]"
src="@/assets/images/offwork.png"
alt="offwork"
>
<img
v-else
class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(102,160,236,0.18)]"
src="@/assets/images/onwork.png"
alt="onwork"
>
src="@/assets/images/offwork.png" alt="offwork">
<img v-else class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(102,160,236,0.18)]"
src="@/assets/images/onwork.png" alt="onwork">
</div>
<div class="mt-2">
<div class="flex items-center justify-between text-[13px] text-slate-500">
@@ -40,22 +29,16 @@
<span>{{ yearProgress }}%</span>
</div>
<div
class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(128,118,126,0.14)]"
>
class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(128,118,126,0.14)]">
<div
class="h-full rounded-full bg-[linear-gradient(90deg,#DB5F51,#D71A44)] shadow-[0_0_10px_rgba(215,26,68,0.4)] transition-[width] duration-700"
:style="{ width: yearProgress + '%' }"
></div>
:style="{ width: yearProgress + '%' }"></div>
</div>
</div>
</template>
</n-card>
<n-card
embedded
class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
:style="{ '--side-i': 1 }"
>
<n-card embedded class="side-glass-card mt-2 overflow-hidden rounded-[24px]" :style="{ '--side-i': 1 }">
<template #header>
<div class="flex items-center font-semibold text-slate-700">
<icon-news class="mr-2 w-5 text-primary"></icon-news>
@@ -64,31 +47,27 @@
</template>
<template #default>
<div class="py-1" v-for="i in bdNews" :key="i.id">
<a
class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#D71A44] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
:href="i.url"
target="_blank"
>
<a class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#D71A44] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
:href="i.url" target="_blank">
<span class="flex min-w-0 items-center truncate">
<span
class="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[11px] font-bold"
:class="i.index <= 3
? 'bg-[linear-gradient(135deg,#DB5F51,#F99A9F)] text-white shadow-[0_3px_8px_rgba(219,95,81,0.28)] transition-[box-shadow] duration-200 group-hover:bg-[linear-gradient(135deg,#D71A44,#DB5F51)] group-hover:shadow-[0_3px_8px_rgba(215,26,68,0.28)]'
: 'bg-slate-700/6 text-slate-400'"
>{{ i.index }}</span>
<span class="truncate text-[#DB5F51] transition-colors duration-200 group-hover:text-[#D71A44]">{{ i.title }}</span>
: 'bg-slate-700/6 text-slate-400'">{{ i.index }}</span>
<span class="truncate text-[#DB5F51] transition-colors duration-200 group-hover:text-[#D71A44]">{{ i.title
}}</span>
<icon-hot v-show="i.index < 4" class="ml-2 inline-block w-4 shrink-0 text-[red]"></icon-hot>
</span>
<span class="shrink-0 text-[13px] font-medium text-[#DB5F51]/85 transition-colors duration-200 group-hover:text-[#D71A44]/85">{{ i.hot }}</span>
<span
class="shrink-0 text-[13px] font-medium text-[#DB5F51]/85 transition-colors duration-200 group-hover:text-[#D71A44]/85">{{
i.hot }}</span>
</a>
</div>
<div class="mt-1.5 flex items-center justify-between">
<div class="h-px w-2/5 bg-gradient-to-r from-transparent via-[#D71A44] to-[#D71A44]/40"></div>
<a
class="flex items-center font-medium text-[#D71A44] no-underline transition-transform duration-200 hover:scale-105"
href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
target="_blank"
>
<a class="flex items-center font-medium text-[#D71A44] no-underline transition-transform duration-200 hover:scale-105"
href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻" target="_blank">
更多
<icon-right class="ml-1 inline-block w-4 text-primary"></icon-right>
</a>
@@ -97,11 +76,7 @@
</template>
</n-card>
<n-card
embedded
class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
:style="{ '--side-i': 2 }"
>
<n-card embedded class="side-glass-card mt-2 overflow-hidden rounded-[24px]" :style="{ '--side-i': 2 }">
<template #header>
<div class="flex items-center font-semibold text-slate-700">
<icon-date class="mr-2 h-[20px] w-5"></icon-date>
@@ -121,19 +96,9 @@
<div class="flex w-full justify-center">
<img
class="mt-2 w-[82%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_1px_3px_rgba(128,118,126,0.05),0_10px_22px_rgba(128,118,126,0.1),0_28px_54px_rgba(215,26,68,0.07),inset_0_1px_0_rgba(255,255,255,0.7)]"
:src="jqImg"
alt="节气图"
>
:src="jqImg" alt="节气图">
</div>
<div class="mt-1.5 text-center font-medium text-slate-600">{{ jq?.solarTerms }}</div>
<div
v-if="holiName && holiDays !== null"
class="mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full border border-white/70 bg-[linear-gradient(135deg,rgba(220,240,252,0.85),rgba(200,182,224,0.6))] px-3.5 py-0.5 text-[13px] font-medium text-[#D71A44] shadow-[0_2px_8px_rgba(215,26,68,0.12),inset_0_1px_0_rgba(255,255,255,0.7)]"
>
<icon-date class="w-3.5"></icon-date>
距 <b class="font-bold">{{ holiName }}</b> 还有
<b class="font-bold">{{ holiDays }}</b> 天
</div>
</template>
</n-card>
</div>
@@ -177,7 +142,6 @@ let timer: ReturnType<typeof setInterval> | null = null
const jq = ref<JqData | null>(null)
const jqImg = ref('')
const bdNews = ref<BdNewsItem[]>([])
const holi = ref<HoliData | null>(null)
// 今年进度百分比
const yearProgress = computed(() => {
@@ -188,14 +152,7 @@ const yearProgress = computed(() => {
return Math.min(100, Math.max(0, pct)).toFixed(1)
})
// 下一个节假日（防御式解析多种字段名）
const holiName = computed(() => holi.value?.name || holi.value?.holiday || '')
const holiDays = computed(() => {
const v = holi.value
if (!v) return null
const raw = v.days ?? v.countdown ?? v.day ?? null
return typeof raw === 'number' ? raw : null
})
function getTime() {
const date = new Date()
@@ -226,21 +183,10 @@ async function getBdhot() {
}
}
async function getHoli() {
try {
const res = await $http.mix.getHoli()
const data = Array.isArray(res.data) ? res.data[0] : res.data
holi.value = data || null
} catch {
holi.value = null
}
}
onMounted(() => {
getTime()
getJq()
getBdhot()
getHoli()
timer = setInterval(() => {
getTime()
@@ -343,7 +289,7 @@ onUnmounted(() => {
:deep(.n-card) {
background: transparent !important;
box-shadow:unset;
box-shadow: unset;
}
:deep(.side-glass-card > .n-card__content),