gxwebsoft/jczxw-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新首页

Browse Source
This commit is contained in:
b2894lxlx
2026-04-29 10:05:55 +08:00
parent 3edf4f0124
commit 188b73a551
16 changed files with 1938 additions and 1055 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
app/components/SiteHeader.vue
View File

@@ -29,7 +29,7 @@
<NuxtLink v-else :to="sub.to">{{ sub.label }}</NuxtLink>
</a-menu-item>
</a-sub-menu>
<a-menu-item v-else :key="item.to">
<a-menu-item v-else :key="item.key">
<NuxtLink :to="item.to" class="nav-item-wrapper">
<span>{{ item.label }}</span>
<span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
@@ -94,7 +94,7 @@
<span v-else @click="onNav(sub.to)">{{ sub.label }}</span>
</a-menu-item>
</a-sub-menu>
<a-menu-item v-else :key="item.to" @click="onNav(item.to)">
<a-menu-item v-else :key="item.key" @click="onNav(item.to)">
<NuxtLink :to="item.to" class="nav-item-wrapper">
<span>{{ item.label }}</span>
<span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
@@ -120,7 +120,6 @@ import type { User } from '@/api/system/user/model'
import { getToken, removeToken } from '@/utils/token-util'
import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
import { UserOutlined, ProfileOutlined, MessageOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
const nav = computed(() => mainNav)
@@ -128,18 +127,18 @@ const route = useRoute()
const open = ref(false)
const selectedKeys = computed(() => {
const hit = nav.value.find((n) => n.to === route.path)
if (hit) return [hit.to]
if (route.path.startsWith('/news')) return ['/news']
if (route.path.startsWith('/consultation')) return ['/consultation']
if (route.path.startsWith('/reference')) return ['/reference']
if (route.path.startsWith('/expert')) return ['/expert']
if (route.path.startsWith('/think-tank')) return ['/think-tank']
if (route.path.startsWith('/suggestions')) return ['/suggestions']
if (route.path.startsWith('/membership')) return ['/membership']
if (route.path.startsWith('/hanmo')) return ['/hanmo']
if (route.path.startsWith('/about')) return ['/about']
return ['/']
const currentPath = route.path
const exactHit = nav.value.find((item) => item.to === currentPath)
if (exactHit) return [exactHit.key]
const prefixHit = nav.value.find((item) => item.to !== '/' && currentPath.startsWith(`${item.to}/`))
if (prefixHit) return [prefixHit.key]
const sectionHit = nav.value.find((item) => item.to !== '/' && currentPath.startsWith(item.to))
if (sectionHit) return [sectionHit.key]
return ['home']
})
// 获取 badge 样式类
@@ -154,8 +153,6 @@ function getBadgeClass(badge: string) {
return `${baseClass} bg-gray-500 text-white`
}
const siteName = ref('广西决策咨询网')
const token = ref('')
const user = ref<User | null>(null)
const isAuthed = computed(() => !!token.value)
@@ -195,12 +192,6 @@ async function refreshAuth() {
}
}
function goConsoleCenter() {
if (!isAuthed.value) return navigateTo('/login')
open.value = false
navigateTo('/profile')
}
function logout() {
removeToken()
try {
@@ -238,8 +229,9 @@ onUnmounted(() => {
<style scoped>
.header {
background: #111827;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, #1773c2 0%, #0e63b1 100%);
border-bottom: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
padding: 0;
height: 64px;
}
@@ -249,11 +241,14 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-left {
display: flex;
align-items: center;
gap: 5rem; /* logo 与菜单的间距 */
flex: 1;
min-width: 0;
gap: 2rem;
}
.nav-right {
display: flex;
@@ -264,18 +259,21 @@ onUnmounted(() => {
background: transparent;
border-bottom: none;
min-width: 0;
flex: 1;
}
.logo-link {
text-decoration: none;
display: flex;
align-items: center;
min-height: 64px;
padding-right: 8px;
}
.logo-text {
color: #fff;
font-family: 'Alimama FangYuanTi VF,sans-serif', sans-serif;
font-size: 20px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.04em;
letter-spacing: 0.08em;
white-space: nowrap;
line-height: 1;
background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
@@ -290,48 +288,76 @@ onUnmounted(() => {
.nav-item-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 62px;
padding: 0 4px;
}
/* ── 统一去掉选中/展开/hover 时的蓝色，改为白色文字 + 底部橙线 ── */
:deep(.ant-menu-dark.ant-menu-horizontal) {
background: transparent !important;
border-bottom: 0 !important;
line-height: 64px;
}
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu) {
top: 0;
margin: 0 !important;
padding: 0 16px !important;
border-right: 1px solid rgba(255, 255, 255, 0.18);
}
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:first-child),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu:first-child) {
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* 选中项背景去掉 */
:deep(.ant-menu-dark .ant-menu-item-selected),
:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title) {
background-color: transparent !important;
background-color: rgba(6, 38, 78, 0.22) !important;
color: #fff !important;
}
/* 选中时底部橙线 */
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu:hover),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-active),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-active),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected) {
background-color: transparent !important;
border-bottom: 2px solid #f97316 !important;
background-color: rgba(6, 38, 78, 0.22) !important;
}
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item::after),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu::after) {
border-bottom: none !important;
}
/* sub-menu 展开/hover 时标题不变蓝 */
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title),
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-open),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-active) {
background-color: transparent !important;
background-color: rgba(6, 38, 78, 0.22) !important;
color: #fff !important;
}
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content),
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content),
:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-title-content),
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content a),
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content a) {
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content a),
:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-title-content a) {
color: #fff !important;
}
/* 展开箭头不变蓝 */
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow),
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title .ant-menu-submenu-arrow) {
color: rgba(255, 255, 255, 0.65) !important;
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title .ant-menu-submenu-arrow),
:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-submenu-arrow) {
color: rgba(255, 255, 255, 0.75) !important;
}
/* 所有菜单项 hover/active 时文字统一白色 */
:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content),
:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content a),
:deep(.ant-menu-dark .ant-menu-item-open > .ant-menu-item-content),
@@ -341,7 +367,15 @@ onUnmounted(() => {
color: #fff !important;
}
/* 所有菜单项默认文字颜色（覆盖 ant-menu-item a 的蓝色） */
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title) {
display: flex;
align-items: center;
min-height: 64px;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 15px;
}
:deep(.ant-menu-dark .ant-menu-item a),
:deep(.ant-menu-dark .ant-menu-submenu-title a) {
color: rgba(255, 255, 255, 0.85) !important;
@@ -351,20 +385,49 @@ onUnmounted(() => {
color: #fff !important;
}
/* 选中项文字强制白色 */
:deep(.ant-menu-dark .ant-menu-item-selected a),
:deep(.ant-menu-dark .ant-menu-submenu-selected .ant-menu-submenu-title a) {
color: #fff !important;
}
/* 控制台按钮：白色边框 + 白色文字，hover 加白色背景 */
.console-btn {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.45) !important;
color: #fff !important;
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-arrow),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-arrow::before),
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-arrow::after) {
color: rgba(255, 255, 255, 0.72) !important;
}
.console-btn:hover {
border-color: #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
:deep(.ant-dropdown .ant-menu),
:deep(.ant-menu-submenu-popup .ant-menu) {
background: rgba(20, 90, 150, 0.96) !important;
box-shadow: 0 10px 20px rgba(13, 45, 82, 0.16) !important;
}
:deep(.ant-menu-submenu-popup .ant-menu-item),
:deep(.ant-dropdown .ant-menu-item) {
color: #fff !important;
font-size: 13px;
line-height: 1.5;
}
:deep(.ant-menu-submenu-popup .ant-menu-item:hover),
:deep(.ant-menu-submenu-popup .ant-menu-item-active),
:deep(.ant-menu-submenu-popup .ant-menu-item-selected) {
background: rgba(8, 56, 97, 0.44) !important;
}
:deep(.ant-drawer .ant-menu-item .nav-item-wrapper) {
min-height: auto;
justify-content: flex-start;
padding: 0;
}
@media (max-width: 1024px) {
.nav-left {
gap: 1rem;
}
.logo-text {
font-size: 20px;
}
}
</style>