feat(home): 更新首页新闻栏目数据获取逻辑
- 将硬编码的新闻栏目数据替换为从CMS动态获取 - 添加了新闻栏目数据类型定义和解析函数 - 实现了新闻文章链接生成和标题解析功能 - 更新了页面参数传递,将navigationId改为categoryId - 添加了加载状态和空数据状态的UI显示 - 集成了文章详情页的动态路由跳转功能
This commit is contained in:
@@ -19,22 +19,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="showBrandbar" class="brandbar">
|
<div v-if="showBrandbar" class="brandbar">
|
||||||
<div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
|
<div class="brandbar-inner mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
|
||||||
<NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
|
<NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
|
||||||
<img class="brand-logo" :src="`https://oss.wsdns.cn/20260127/989e5cf82b0847ed9168023baf68f4a9.png`" :alt="siteName" />
|
<img class="brand-logo" :src="`https://oss.wsdns.cn/20260127/989e5cf82b0847ed9168023baf68f4a9.png`" :alt="siteName" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<div class="col-span-12 text-right md:col-span-6">
|
<div class="col-span-12 hidden text-right md:col-span-6 md:block">
|
||||||
<div class="brand-mission">{{ missionText }}</div>
|
<div class="brand-mission">{{ missionText }}</div>
|
||||||
<div class="brand-values">{{ valuesText }}</div>
|
<div class="brand-values">{{ valuesText }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden md:block">
|
||||||
<a-affix :offset-top="0" @change="onAffixChange">
|
<a-affix :offset-top="0" @change="onAffixChange">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="mx-auto flex max-w-screen-xl items-center justify-between gap-20 px-">
|
<div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
|
||||||
<NuxtLink v-if="isAffixed" to="/" class="navbar-brand" :class="{ 'navbar-brand-hidden': !isAffixed }">
|
<NuxtLink v-if="isAffixed" to="/" class="navbar-brand">
|
||||||
<img class="navbar-logo" :src="logoUrl" :alt="siteName" />
|
<img class="navbar-logo" :src="logoUrl" :alt="siteName" />
|
||||||
<span class="navbar-brand-name">
|
<span class="navbar-brand-name">
|
||||||
{{ siteName }}
|
{{ siteName }}
|
||||||
@@ -42,7 +43,7 @@
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<nav class="nav hidden md:flex">
|
<nav class="nav hidden md:flex">
|
||||||
<template v-for="item in navItems" :key="item.key">
|
<template v-for="item in navItems" :key="item.key">
|
||||||
<a-dropdown v-if="item.children?.length" :trigger="['hover']">
|
<a-dropdown v-if="item.children?.length" :trigger="['hover', 'click']">
|
||||||
<a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
|
<a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</a>
|
</a>
|
||||||
@@ -67,23 +68,12 @@
|
|||||||
>
|
>
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
class="nav-link"
|
|
||||||
:class="{ active: isActive(item) }"
|
|
||||||
:href="item.href"
|
|
||||||
:target="item.target || undefined"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</a>
|
|
||||||
</template>
|
</template>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="nav-spacer md:hidden" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-affix>
|
</a-affix>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<a-drawer v-model:open="open" title="导航" placement="right">
|
<a-drawer v-model:open="open" title="导航" placement="right">
|
||||||
@@ -397,13 +387,6 @@ onBeforeUnmount(() => {
|
|||||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand-hidden {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-logo {
|
.navbar-logo {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
@@ -453,4 +436,12 @@ onBeforeUnmount(() => {
|
|||||||
.nav-spacer {
|
.nav-spacer {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.brandbar-inner {
|
||||||
|
height: 160px;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user