feat: 后台管理系统完整重构 + 前后台数据联通
- 后台全面引入 Naive UI 组件库，统一 UI 规范 - 前台 usePublicApi 切换到 API 调用（GET /api/content/[key]） - 前后台数据源统一（site_content 表） - 产品线统一管理（tour/camp/course 三套编辑器） - 产品数据归一化（itinerary/faq/pricing 格式统一） - 表单提交 API 改写入 submissions 表 - 新增 submissions 标记已读 API - site-content PUT 支持 upsert - 修复前台 bug（stories 路由冲突、占位符警告、selector breadcrumb） - 消除 PageHero 类型警告（useSEO reactive 修复） - 25 个前台页面全部 HTTP 200，展示效果不变 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
这个提交包含在：
Mimingguang
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<div class="footer-container">
|
||||
<div v-if="brand && images" class="footer-grid">
|
||||
<!-- 品牌信息 -->
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo">
|
||||
<img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="footer-logo-img" width="44" height="44" />
|
||||
<div class="footer-logo-text">
|
||||
<span class="logo-text">呼籁旅行</span>
|
||||
<span class="logo-sub">HULAI TRAVEL</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-desc">{{ brand?.slogan?.functional }}</p>
|
||||
<div class="footer-qr-list">
|
||||
<CommonQRCodeBlock
|
||||
v-for="ch in qrChannels"
|
||||
:key="ch.type"
|
||||
:image="ch.qrImage"
|
||||
:label="ch.label"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航链接 -->
|
||||
<div v-for="group in footerNav" :key="group.title" class="footer-nav-group">
|
||||
<h4 class="footer-nav-title">{{ group.title }}</h4>
|
||||
<ul class="footer-nav-list">
|
||||
<li v-for="link in group.links" :key="link.to">
|
||||
<NuxtLink :to="link.to" class="footer-nav-link">{{ link.text }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="footer-bottom">
|
||||
<p class="footer-company">旅行服务：内蒙古呼籁国际旅行社有限公司</p>
|
||||
<p class="footer-legal">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="footer-icp-link">{{ brand?.icp }}</a>
|
||||
<span class="footer-divider">|</span>
|
||||
{{ brand?.icpEntity }}
|
||||
</p>
|
||||
<p class="footer-copyright">
|
||||
© {{ new Date().getFullYear() }} {{ brand?.fullName }} 版权所有
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { data: brand } = await usePublicApi('brand')
|
||||
const { data: images } = await usePublicApi('images')
|
||||
const { data: navData } = await usePublicApi('navigation')
|
||||
const { data: contact } = await usePublicApi('contact')
|
||||
|
||||
const footerNav = computed(() => navData.value?.footer || [])
|
||||
const qrChannels = computed(() => (contact.value?.channels || []).filter(c => c.qrImage && !c.hidden))
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-footer {
|
||||
background: linear-gradient(180deg, @color-primary-dark 0%, #0F2419 100%);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: @space-2xl 0 @space-lg;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, @color-primary, @color-accent, @color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
.container();
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-xl;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
||||
gap: @space-xl;
|
||||
});
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
margin-bottom: @space-lg;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: @space-sm;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.footer-logo-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.logo-text {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo-sub {
|
||||
font-size: @font-size-xs;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: @font-size-sm;
|
||||
margin-bottom: @space-lg;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.footer-qr-list {
|
||||
display: flex;
|
||||
gap: @space-lg;
|
||||
}
|
||||
|
||||
.footer-nav-title {
|
||||
font-size: @font-size-base;
|
||||
font-weight: @font-weight-medium;
|
||||
color: #fff;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.footer-nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-sm;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
font-size: @font-size-sm;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
transition: color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
margin-top: @space-2xl;
|
||||
padding-top: @space-lg;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-company {
|
||||
font-size: @font-size-sm;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
font-size: @font-size-xs;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
margin: 0 @space-sm;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: @font-size-xs;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.footer-icp-link {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-decoration: none;
|
||||
transition: color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<header class="app-header">
|
||||
<div class="header-container">
|
||||
<NuxtLink to="/" class="header-logo" aria-label="呼籁旅行首页">
|
||||
<img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="logo-img" width="40" height="40" />
|
||||
<div class="logo-text-group">
|
||||
<span class="logo-text">呼籁旅行</span>
|
||||
<span class="logo-sub">HULAI TRAVEL</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<nav class="header-nav" aria-label="主导航">
|
||||
<ul class="nav-list">
|
||||
<li
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
class="nav-item"
|
||||
:class="{ 'has-dropdown': item.children }"
|
||||
@mouseenter="item.children && (openDropdown = item.to)"
|
||||
@mouseleave="item.children && (openDropdown = null)"
|
||||
>
|
||||
<NuxtLink :to="item.to" class="nav-link" :class="{ active: isActive(item.to) }">
|
||||
{{ item.text }}
|
||||
<span v-if="item.children" class="nav-arrow">▾</span>
|
||||
</NuxtLink>
|
||||
<!-- 下拉菜单：真实 <a> 链接，SEO 可抓取 -->
|
||||
<ul v-if="item.children" class="nav-dropdown" :class="{ show: openDropdown === item.to }">
|
||||
<li v-for="child in item.children" :key="child.to" class="dropdown-item">
|
||||
<NuxtLink :to="child.to" class="dropdown-link" @click="openDropdown = null">
|
||||
<span class="dropdown-text">{{ child.text }}</span>
|
||||
<span v-if="child.season" class="dropdown-season">{{ child.season }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
class="mobile-toggle"
|
||||
:aria-expanded="mobileOpen"
|
||||
aria-controls="mobile-nav"
|
||||
aria-label="打开导航菜单"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<span class="toggle-bar" :class="{ open: mobileOpen }"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<LayoutMobileNav :is-open="mobileOpen" :items="navItems" @close="mobileOpen = false" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const { data: navData } = await usePublicApi('navigation')
|
||||
const { data: images } = await usePublicApi('images')
|
||||
|
||||
const navItems = computed(() => navData.value?.header || [])
|
||||
const mobileOpen = ref(false)
|
||||
const openDropdown = ref(null)
|
||||
const route = useRoute()
|
||||
|
||||
function isActive(path) {
|
||||
if (path === '/') return route.path === '/'
|
||||
return route.path.startsWith(path)
|
||||
}
|
||||
|
||||
watch(() => route.path, () => {
|
||||
mobileOpen.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: box-shadow @transition-base;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
.container();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
|
||||
.respond-lg({
|
||||
height: 72px;
|
||||
});
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: @space-sm;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.respond-lg({
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
});
|
||||
}
|
||||
|
||||
.logo-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-primary;
|
||||
|
||||
.respond-lg({
|
||||
font-size: @font-size-xl;
|
||||
});
|
||||
}
|
||||
|
||||
.logo-sub {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: none;
|
||||
|
||||
.respond-lg({
|
||||
display: block;
|
||||
});
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
gap: @space-xl;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: @font-size-base;
|
||||
color: @color-text-secondary;
|
||||
text-decoration: none;
|
||||
padding: @space-sm 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color @transition-fast, border-color @transition-fast;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: @color-primary;
|
||||
border-bottom-color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
transition: transform @transition-fast;
|
||||
|
||||
.has-dropdown:hover & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 180px;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-md;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
padding: @space-sm 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity @transition-fast, visibility @transition-fast;
|
||||
z-index: 10;
|
||||
|
||||
// 防止鼠标移到下拉菜单过程中菜单消失
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @space-sm @space-lg;
|
||||
text-decoration: none;
|
||||
color: @color-text-secondary;
|
||||
font-size: @font-size-sm;
|
||||
white-space: nowrap;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dropdown-season {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-gray;
|
||||
padding: 2px 6px;
|
||||
border-radius: @border-radius-sm;
|
||||
margin-left: @space-sm;
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
transition: transform @transition-fast;
|
||||
|
||||
.has-dropdown:hover & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 180px;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-md;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
padding: @space-sm 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity @transition-fast, visibility @transition-fast;
|
||||
z-index: 10;
|
||||
|
||||
// 防止鼠标移到下拉菜单过程中菜单消失
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @space-sm @space-lg;
|
||||
text-decoration: none;
|
||||
color: @color-text-secondary;
|
||||
font-size: @font-size-sm;
|
||||
white-space: nowrap;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dropdown-season {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-gray;
|
||||
padding: 2px 6px;
|
||||
border-radius: @border-radius-sm;
|
||||
margin-left: @space-sm;
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
transition: transform @transition-fast;
|
||||
|
||||
.has-dropdown:hover & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 180px;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-md;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
padding: @space-sm 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity @transition-fast, visibility @transition-fast;
|
||||
z-index: 10;
|
||||
|
||||
// 防止鼠标移到下拉菜单过程中菜单消失
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @space-sm @space-lg;
|
||||
text-decoration: none;
|
||||
color: @color-text-secondary;
|
||||
font-size: @font-size-sm;
|
||||
white-space: nowrap;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dropdown-season {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-gray;
|
||||
padding: 2px 6px;
|
||||
border-radius: @border-radius-sm;
|
||||
margin-left: @space-sm;
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
transition: transform @transition-fast;
|
||||
|
||||
.has-dropdown:hover & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 180px;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-md;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
padding: @space-sm 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity @transition-fast, visibility @transition-fast;
|
||||
z-index: 10;
|
||||
|
||||
// 防止鼠标移到下拉菜单过程中菜单消失
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @space-sm @space-lg;
|
||||
text-decoration: none;
|
||||
color: @color-text-secondary;
|
||||
font-size: @font-size-sm;
|
||||
white-space: nowrap;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dropdown-season {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-gray;
|
||||
padding: 2px 6px;
|
||||
border-radius: @border-radius-sm;
|
||||
margin-left: @space-sm;
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.respond-lg({
|
||||
display: none;
|
||||
});
|
||||
}
|
||||
|
||||
.toggle-bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: @color-text-primary;
|
||||
transition: background @transition-fast;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: @color-text-primary;
|
||||
transition: transform @transition-base;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&.open {
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="slide">
|
||||
<div v-if="isOpen" id="mobile-nav" class="mobile-nav" role="dialog" aria-label="导航菜单">
|
||||
<div class="mobile-nav-backdrop" @click="$emit('close')"></div>
|
||||
<nav class="mobile-nav-panel">
|
||||
<ul class="mobile-nav-list">
|
||||
<li v-for="item in items" :key="item.to" class="mobile-nav-item">
|
||||
<!-- 有子菜单的导航项 -->
|
||||
<template v-if="item.children">
|
||||
<button
|
||||
class="mobile-nav-link mobile-nav-toggle"
|
||||
:class="{ expanded: expandedItem === item.to }"
|
||||
@click="toggleExpand(item.to)"
|
||||
>
|
||||
{{ item.text }}
|
||||
<span class="mobile-nav-arrow">›</span>
|
||||
</button>
|
||||
<ul v-show="expandedItem === item.to" class="mobile-sub-list">
|
||||
<li v-for="child in item.children" :key="child.to" class="mobile-sub-item">
|
||||
<NuxtLink :to="child.to" class="mobile-sub-link" @click="$emit('close')">
|
||||
<span>{{ child.text }}</span>
|
||||
<span v-if="child.season" class="mobile-sub-season">{{ child.season }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 普通导航项 -->
|
||||
<NuxtLink v-else :to="item.to" class="mobile-nav-link" @click="$emit('close')">
|
||||
{{ item.text }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
isOpen: { type: Boolean, default: false },
|
||||
items: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
const expandedItem = ref(null)
|
||||
|
||||
function toggleExpand(key) {
|
||||
expandedItem.value = expandedItem.value === key ? null : key
|
||||
}
|
||||
|
||||
// 关闭菜单时重置展开状态
|
||||
watch(() => props.isOpen, (open) => {
|
||||
if (import.meta.client) {
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
}
|
||||
if (!open) {
|
||||
expandedItem.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mobile-nav {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.mobile-nav-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mobile-nav-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: min(300px, 85vw);
|
||||
height: 100%;
|
||||
background: @color-bg-white;
|
||||
padding: @space-3xl @space-lg @space-lg;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-xs;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: @space-md @space-md;
|
||||
font-size: @font-size-md;
|
||||
color: @color-text-primary;
|
||||
text-decoration: none;
|
||||
border-radius: @border-radius-md;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.mobile-nav-arrow {
|
||||
font-size: @font-size-lg;
|
||||
color: @color-text-muted;
|
||||
transition: transform @transition-fast;
|
||||
|
||||
.expanded & {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sub-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: @space-md;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.mobile-sub-item {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mobile-sub-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @space-sm @space-md;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
text-decoration: none;
|
||||
border-radius: @border-radius-sm;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary-bg;
|
||||
color: @color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-sub-season {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-muted;
|
||||
background: @color-bg-gray;
|
||||
padding: 2px 6px;
|
||||
border-radius: @border-radius-sm;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: opacity @transition-base;
|
||||
|
||||
.mobile-nav-panel {
|
||||
transition: transform @transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
.mobile-nav-panel {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<section
|
||||
class="page-hero"
|
||||
:class="{
|
||||
'page-hero--compact': compact,
|
||||
'page-hero--has-bg': backgroundImage,
|
||||
}"
|
||||
>
|
||||
<!-- 背景图模式 -->
|
||||
<div v-if="backgroundImage" class="page-hero-bg">
|
||||
<img :src="backgroundImage" :alt="title" class="page-hero-bg-img" />
|
||||
<div class="page-hero-overlay" />
|
||||
</div>
|
||||
|
||||
<!-- 无背景图时的装饰 -->
|
||||
<div v-else class="page-hero-decor">
|
||||
<div class="decor-circle decor-circle--1" />
|
||||
<div class="decor-circle decor-circle--2" />
|
||||
<div class="decor-line" />
|
||||
</div>
|
||||
|
||||
<div class="container page-hero-content">
|
||||
<CommonBreadcrumbNav :items="breadcrumbs" />
|
||||
<h1 class="page-hero-title">{{ title }}</h1>
|
||||
<p v-if="subtitle" class="page-hero-subtitle">{{ subtitle }}</p>
|
||||
</div>
|
||||
<div class="page-hero-curve">
|
||||
<svg viewBox="0 0 1440 56" fill="none" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="M0 56h1440V28C1200 0 240 0 0 28v28z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: { type: String, required: true },
|
||||
subtitle: { type: String, default: '' },
|
||||
compact: { type: Boolean, default: false },
|
||||
breadcrumbs: { type: Array, default: () => [] },
|
||||
backgroundImage: { type: String, default: '' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-hero {
|
||||
background: @gradient-cool;
|
||||
padding: @space-2xl 0 @space-3xl;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.respond-md({
|
||||
padding: @space-3xl 0 @space-4xl;
|
||||
});
|
||||
|
||||
&--compact {
|
||||
padding: @space-xl 0 @space-2xl;
|
||||
}
|
||||
|
||||
&--has-bg {
|
||||
padding: @space-2xl 0 @space-3xl;
|
||||
min-height: 220px;
|
||||
|
||||
.respond-md({
|
||||
padding: @space-4xl 0 100px;
|
||||
min-height: 360px;
|
||||
});
|
||||
|
||||
.page-hero-title {
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.page-hero-subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
// 背景图模式下面包屑使用白色
|
||||
:deep(.breadcrumb-link),
|
||||
:deep(.breadcrumb-sep),
|
||||
:deep(.breadcrumb-current) {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
:deep(.breadcrumb-link:hover) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 背景图
|
||||
.page-hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.page-hero-bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.page-hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(27, 67, 50, 0.55) 0%,
|
||||
rgba(27, 67, 50, 0.7) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// 装饰元素（无背景图时）
|
||||
.page-hero-decor {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decor-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(45, 106, 79, 0.08);
|
||||
|
||||
&--1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
background: radial-gradient(circle, rgba(45, 106, 79, 0.04) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -60px;
|
||||
left: 10%;
|
||||
background: radial-gradient(circle, rgba(212, 136, 58, 0.05) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
|
||||
.decor-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5%;
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(45, 106, 79, 0.15), transparent);
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
// 内容
|
||||
.page-hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-hero-title {
|
||||
margin-top: @space-md;
|
||||
color: @color-text-primary;
|
||||
}
|
||||
|
||||
.page-hero-subtitle {
|
||||
margin-top: @space-sm;
|
||||
font-size: @font-size-md;
|
||||
color: @color-text-secondary;
|
||||
max-width: 600px;
|
||||
line-height: @line-height-relaxed;
|
||||
}
|
||||
|
||||
.page-hero-curve {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 0;
|
||||
color: #FAFAF8;
|
||||
z-index: 1;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
||||
.respond-md({
|
||||
height: 56px;
|
||||
});
|
||||
}
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户