diff --git a/.data/content/contents.sqlite b/.data/content/contents.sqlite
index 931110e..04b9bb3 100644
Binary files a/.data/content/contents.sqlite and b/.data/content/contents.sqlite differ
diff --git a/.gitignore b/.gitignore
index 5e791aa..9e2f553 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /.nuxt/
+/node_modules/
diff --git a/.idea/UniappTool.xml b/.idea/UniappTool.xml
new file mode 100644
index 0000000..f7328e8
--- /dev/null
+++ b/.idea/UniappTool.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="cn.fjdmy.uniapp.UniappProjectDataService">
+    <option name="generalBasePath" value="$PROJECT_DIR$" />
+    <option name="manifestPath" value="$PROJECT_DIR$/manifest.json" />
+    <option name="pagesPath" value="$PROJECT_DIR$/pages.json" />
+    <option name="scanNum" value="1" />
+    <option name="type" value="store" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..9ae2fa3
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,125 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="2">
+            <item index="0" class="java.lang.String" itemvalue="class" />
+            <item index="1" class="java.lang.String" itemvalue="style" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="100">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="el-form" />
+            <item index="7" class="java.lang.String" itemvalue="el-input" />
+            <item index="8" class="java.lang.String" itemvalue="el-form-item" />
+            <item index="9" class="java.lang.String" itemvalue="el-button" />
+            <item index="10" class="java.lang.String" itemvalue="el-container" />
+            <item index="11" class="java.lang.String" itemvalue="el-header" />
+            <item index="12" class="java.lang.String" itemvalue="el-menu" />
+            <item index="13" class="java.lang.String" itemvalue="el-menu-item" />
+            <item index="14" class="java.lang.String" itemvalue="el-submenu" />
+            <item index="15" class="java.lang.String" itemvalue="el-breadcrumb" />
+            <item index="16" class="java.lang.String" itemvalue="el-breadcrumb-item" />
+            <item index="17" class="java.lang.String" itemvalue="el-dialog" />
+            <item index="18" class="java.lang.String" itemvalue="el-row" />
+            <item index="19" class="java.lang.String" itemvalue="el-col" />
+            <item index="20" class="java.lang.String" itemvalue="el-table-column" />
+            <item index="21" class="java.lang.String" itemvalue="el-table" />
+            <item index="22" class="java.lang.String" itemvalue="el-pagination" />
+            <item index="23" class="java.lang.String" itemvalue="el-upload" />
+            <item index="24" class="java.lang.String" itemvalue="el-select" />
+            <item index="25" class="java.lang.String" itemvalue="el-option" />
+            <item index="26" class="java.lang.String" itemvalue="el-date-picker" />
+            <item index="27" class="java.lang.String" itemvalue="el-switch" />
+            <item index="28" class="java.lang.String" itemvalue="u-swiper" />
+            <item index="29" class="java.lang.String" itemvalue="u-image" />
+            <item index="30" class="java.lang.String" itemvalue="u-button" />
+            <item index="31" class="java.lang.String" itemvalue="web-view" />
+            <item index="32" class="java.lang.String" itemvalue="u-avatar" />
+            <item index="33" class="java.lang.String" itemvalue="u-text" />
+            <item index="34" class="java.lang.String" itemvalue="u-grid" />
+            <item index="35" class="java.lang.String" itemvalue="u-grid-item" />
+            <item index="36" class="java.lang.String" itemvalue="u-icon" />
+            <item index="37" class="java.lang.String" itemvalue="u-cell-group" />
+            <item index="38" class="java.lang.String" itemvalue="u-cell" />
+            <item index="39" class="java.lang.String" itemvalue="u-tabs" />
+            <item index="40" class="java.lang.String" itemvalue="u-gap" />
+            <item index="41" class="java.lang.String" itemvalue="scroll-view" />
+            <item index="42" class="java.lang.String" itemvalue="u-toast" />
+            <item index="43" class="java.lang.String" itemvalue="u-subsection" />
+            <item index="44" class="java.lang.String" itemvalue="u-empty" />
+            <item index="45" class="java.lang.String" itemvalue="u-popup" />
+            <item index="46" class="java.lang.String" itemvalue="uqrcode" />
+            <item index="47" class="java.lang.String" itemvalue="temlate" />
+            <item index="48" class="java.lang.String" itemvalue="el-tree" />
+            <item index="49" class="java.lang.String" itemvalue="el-card" />
+            <item index="50" class="java.lang.String" itemvalue="el-tag" />
+            <item index="51" class="java.lang.String" itemvalue="u-modal" />
+            <item index="52" class="java.lang.String" itemvalue="rich-text" />
+            <item index="53" class="java.lang.String" itemvalue="u--text" />
+            <item index="54" class="java.lang.String" itemvalue="u-line-progress" />
+            <item index="55" class="java.lang.String" itemvalue="u--image" />
+            <item index="56" class="java.lang.String" itemvalue="page" />
+            <item index="57" class="java.lang.String" itemvalue="el-aside" />
+            <item index="58" class="java.lang.String" itemvalue="house" />
+            <item index="59" class="java.lang.String" itemvalue="el-dropdown" />
+            <item index="60" class="java.lang.String" itemvalue="arrowdown" />
+            <item index="61" class="java.lang.String" itemvalue="el-dropdown-menu" />
+            <item index="62" class="java.lang.String" itemvalue="caretleft" />
+            <item index="63" class="java.lang.String" itemvalue="close" />
+            <item index="64" class="java.lang.String" itemvalue="fold" />
+            <item index="65" class="java.lang.String" itemvalue="expand" />
+            <item index="66" class="java.lang.String" itemvalue="caretright" />
+            <item index="67" class="java.lang.String" itemvalue="upload" />
+            <item index="68" class="java.lang.String" itemvalue="el-cascader" />
+            <item index="69" class="java.lang.String" itemvalue="u-search" />
+            <item index="70" class="java.lang.String" itemvalue="u-scroll-list" />
+            <item index="71" class="java.lang.String" itemvalue="u-navbar" />
+            <item index="72" class="java.lang.String" itemvalue="u-loadmore" />
+            <item index="73" class="java.lang.String" itemvalue="u-parse" />
+            <item index="74" class="java.lang.String" itemvalue="u-number-box" />
+            <item index="75" class="java.lang.String" itemvalue="u-tag" />
+            <item index="76" class="java.lang.String" itemvalue="u-checkbox" />
+            <item index="77" class="java.lang.String" itemvalue="u-checkbox-group" />
+            <item index="78" class="java.lang.String" itemvalue="checkbox" />
+            <item index="79" class="java.lang.String" itemvalue="u-action-sheet" />
+            <item index="80" class="java.lang.String" itemvalue="u-line" />
+            <item index="81" class="java.lang.String" itemvalue="u-count-to" />
+            <item index="82" class="java.lang.String" itemvalue="u-swipe-action" />
+            <item index="83" class="java.lang.String" itemvalue="u-swipe-action-item" />
+            <item index="84" class="java.lang.String" itemvalue="u-form" />
+            <item index="85" class="java.lang.String" itemvalue="u-form-item" />
+            <item index="86" class="java.lang.String" itemvalue="u-input" />
+            <item index="87" class="java.lang.String" itemvalue="u-switch" />
+            <item index="88" class="java.lang.String" itemvalue="u-textarea" />
+            <item index="89" class="java.lang.String" itemvalue="u-picker" />
+            <item index="90" class="java.lang.String" itemvalue="u-sticky" />
+            <item index="91" class="java.lang.String" itemvalue="el-popover" />
+            <item index="92" class="java.lang.String" itemvalue="plus" />
+            <item index="93" class="java.lang.String" itemvalue="el-input-number" />
+            <item index="94" class="java.lang.String" itemvalue="el-checkbox" />
+            <item index="95" class="java.lang.String" itemvalue="el-checkbox-group" />
+            <item index="96" class="java.lang.String" itemvalue="el-radio-group" />
+            <item index="97" class="java.lang.String" itemvalue="el-radio-button" />
+            <item index="98" class="java.lang.String" itemvalue="el-collapse" />
+            <item index="99" class="java.lang.String" itemvalue="el-collapse-item" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/app/components/PortalFooter.vue b/app/components/PortalFooter.vue
new file mode 100644
index 0000000..12381f4
--- /dev/null
+++ b/app/components/PortalFooter.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="container footer-main">
+    <div class="footer-left">
+      <p>扫一扫公众号</p>
+      <p>了解我们的动态</p>
+      <img src="/images/qrcode-mp-official.jpg" alt="公众号二维码" />
+    </div>
+    <div class="footer-center">
+      <h3>广西决策咨询网</h3>
+      <p>Guangxi Decision-Making Consulting Network</p>
+      <p>运营方：广西决策咨询网有限公司</p>
+      <p>地址：广西壮族自治区南宁市中柬路XX号 XX楼 XX号房</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.footer-main {
+  display: flex;
+  justify-content: space-between;
+  gap: 60px;
+  padding: 28px 0 52px;
+}
+
+.footer-left {
+  color: #4f5c67;
+  font-size: 13px;
+}
+
+.footer-left p {
+  margin: 0 0 8px;
+}
+
+.footer-left img {
+  width: 100px;
+  height: 100px;
+  margin-top: 10px;
+  object-fit: contain;
+}
+
+.footer-center {
+  padding-top: 10px;
+  color: #697680;
+  text-align: left;
+}
+
+.footer-center h3 {
+  margin: 0 0 8px;
+  color: #27313a;
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.footer-center p {
+  margin: 0 0 8px;
+  font-size: 13px;
+}
+
+@media (max-width: 1100px) {
+  .footer-main {
+    flex-direction: column;
+    gap: 24px;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    width: min(100%, calc(100% - 24px));
+  }
+}
+</style>
diff --git a/app/components/PortalHeader.vue b/app/components/PortalHeader.vue
new file mode 100644
index 0000000..98bf2cb
--- /dev/null
+++ b/app/components/PortalHeader.vue
@@ -0,0 +1,355 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="container topbar-inner">
+        <div>{{ currentDateText }}</div>
+        <div class="topbar-right">
+          <div class="top-search">
+            <input v-model="keyword" type="text" placeholder="请输入关键字" />
+            <button type="button" @click="goSearch">搜索</button>
+          </div>
+          <div class="topbar-links">
+            <NuxtLink to="/about">网站简介</NuxtLink>
+            <NuxtLink to="/contact">联系我们</NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <header class="hero" aria-label="广西决策咨询网横幅" />
+
+    <nav class="main-nav">
+      <div class="container nav-inner">
+        <div
+          v-for="item in navItems"
+          :key="item.to"
+          class="nav-item-group"
+        >
+          <NuxtLink
+            :to="item.to"
+            class="nav-item"
+            :class="{ active: isActive(item.to) }"
+          >
+            {{ item.label }}
+          </NuxtLink>
+          <div v-if="item.children?.length" class="nav-submenu">
+            <div class="nav-submenu-title">{{ item.label }}</div>
+            <NuxtLink
+              v-for="child in item.children"
+              :key="child.to"
+              :to="child.to"
+              class="nav-submenu-item"
+            >
+              {{ child.label }}
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+type NavChild = {
+  label: string
+  to: string
+}
+
+type NavItem = {
+  label: string
+  to: string
+  children?: NavChild[]
+}
+
+const props = defineProps<{
+  activePath?: string
+}>()
+
+const route = useRoute()
+const keyword = ref('')
+
+const navItems: NavItem[] = [
+  { label: '首 页', to: '/' },
+  {
+    label: '政策要闻',
+    to: '/news',
+    children: [
+      { label: '党中央国务院信息', to: '/news?type=central' },
+      { label: '自治区党委政府信息', to: '/news?type=region' },
+      { label: '其他（厅委办）信息', to: '/news?type=department' },
+      { label: '最新发布', to: '/news?type=latest' }
+    ]
+  },
+  {
+    label: '决策参考',
+    to: '/reference',
+    children: [
+      { label: '政策原文', to: '/reference?type=policy' },
+      { label: '深度解读', to: '/reference?type=analysis' },
+      { label: '东盟研究', to: '/reference?type=asean' },
+      { label: '数据服务', to: '/reference?type=data' }
+    ]
+  },
+  {
+    label: '决策咨询',
+    to: '/consultation',
+    children: [
+      { label: '市县决策', to: '/consultation?type=city' },
+      { label: '前沿观察', to: '/consultation?type=frontier' },
+      { label: '行业资讯', to: '/consultation?type=industry' },
+      { label: '企业动态', to: '/consultation?type=enterprise' }
+    ]
+  },
+  {
+    label: '专家资讯',
+    to: '/expert',
+    children: [
+      { label: '专家视点', to: '/expert?type=view' },
+      { label: '专家动态', to: '/expert?type=dynamic' },
+      { label: '专家申请', to: '/expert/apply' }
+    ]
+  },
+  {
+    label: '智库观察',
+    to: '/think-tank',
+    children: [
+      { label: '智库介绍', to: '/think-tank?type=intro' },
+      { label: '智库视角', to: '/think-tank?type=view' }
+    ]
+  },
+  { label: '建言献策', to: '/suggestions' },
+  {
+    label: '会员服务',
+    to: '/membership',
+    children: [
+      { label: '企业咨询', to: '/membership?type=consult' },
+      { label: '专项服务', to: '/membership?type=service' }
+    ]
+  },
+  { label: '翰墨文谈', to: '/hanmo' },
+  {
+    label: '关于我们',
+    to: '/about',
+    children: [
+      { label: '学会简介', to: '/about' },
+      { label: '组织机构', to: '/about/organization' },
+      { label: '学会章程', to: '/about/charter' },
+      { label: '咨询服务', to: '/about/consultation' }
+    ]
+  }
+]
+
+const currentDateText = computed(() => {
+  const now = new Date()
+  return `${now.getFullYear()} 年 ${String(now.getMonth() + 1).padStart(2, '0')} 月 ${String(now.getDate()).padStart(2, '0')} 日`
+})
+
+const resolvedActivePath = computed(() => props.activePath || route.path)
+
+function isActive(path: string) {
+  const currentPath = resolvedActivePath.value
+  return currentPath === path || (path !== '/' && currentPath.startsWith(`${path}/`))
+}
+
+function goSearch() {
+  const value = keyword.value.trim()
+  navigateTo(value ? `/articles?keyword=${encodeURIComponent(value)}` : '/articles')
+}
+</script>
+
+<style scoped>
+.container {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.topbar {
+  height: 34px;
+  border-bottom: 1px solid #e8e8e8;
+  background: #fafafa;
+  color: #777;
+  font-size: 12px;
+}
+
+.topbar-inner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.topbar-links {
+  display: flex;
+  gap: 16px;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.top-search {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  overflow: hidden;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+}
+
+.top-search input {
+  width: 180px;
+  height: 100%;
+  border: 0;
+  padding: 0 8px;
+  color: #555;
+  font-size: 12px;
+  outline: none;
+}
+
+.top-search button {
+  height: 100%;
+  border: 0;
+  border-left: 1px solid #e6e6e6;
+  background: #f5f5f5;
+  color: #666;
+  font-size: 12px;
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.topbar a {
+  color: #777;
+}
+
+.hero {
+  position: relative;
+  height: 320px;
+  overflow: hidden;
+  background: url('/images/banner.png') center center / cover no-repeat;
+}
+
+.main-nav {
+  background: linear-gradient(180deg, #1773c2 0%, #0e63b1 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+}
+
+.nav-inner {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  position: relative;
+  z-index: 5;
+}
+
+.nav-item-group {
+  position: relative;
+}
+
+.nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  color: #fff;
+  font-size: 15px;
+  border-right: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.nav-item-group:first-child .nav-item {
+  border-left: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.nav-item.active,
+.nav-item:hover,
+.nav-item-group:hover .nav-item {
+  background: rgba(6, 38, 78, 0.22);
+}
+
+.nav-submenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  padding: 0;
+  background: rgba(20, 90, 150, 0.96);
+  box-shadow: 0 10px 20px rgba(13, 45, 82, 0.16);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(6px);
+  transition: all 0.18s ease;
+}
+
+.nav-item-group:hover .nav-submenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.nav-submenu-title {
+  padding: 12px 16px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  background: rgba(8, 56, 97, 0.45);
+}
+
+.nav-submenu-item {
+  display: block;
+  padding: 11px 16px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.5;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  white-space: nowrap;
+}
+
+.nav-submenu-item:hover {
+  background: rgba(8, 56, 97, 0.44);
+}
+
+@media (max-width: 1100px) {
+  .nav-inner {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .nav-submenu {
+    min-width: 180px;
+  }
+}
+
+@media (max-width: 768px) {
+  .topbar {
+    height: auto;
+    padding: 8px 0;
+  }
+
+  .topbar-inner,
+  .topbar-right {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .top-search input {
+    width: 150px;
+  }
+
+  .container {
+    width: min(100%, calc(100% - 24px));
+  }
+
+  .hero {
+    height: 220px;
+  }
+
+  .nav-inner {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .nav-submenu {
+    display: none;
+  }
+}
+</style>
diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index 9f36d33..341b63d 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -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>
diff --git a/app/pages/article/[id].vue b/app/pages/article/[id].vue
index 878cf44..02e7afc 100644
--- a/app/pages/article/[id].vue
+++ b/app/pages/article/[id].vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="article-detail-page">
-    <div class="mx-auto max-w-screen-xl px-4 py-8">
-      <a-row :gutter="[32, 0]">
-        <!-- 主内容区 -->
-        <a-col :xs="24" :lg="17">
-          <!-- 面包屑 -->
-          <a-breadcrumb class="mb-6">
-            <a-breadcrumb-item><NuxtLink to="/">首页</NuxtLink></a-breadcrumb-item>
-            <a-breadcrumb-item v-if="article.categoryPath">
-              <NuxtLink :to="article.categoryPath">{{ article.categoryName }}</NuxtLink>
-            </a-breadcrumb-item>
-            <a-breadcrumb-item>{{ article.title || '文章详情' }}</a-breadcrumb-item>
-          </a-breadcrumb>
+  <div class="article-page">
+    <PortalHeader :active-path="article.categoryPath || route.path" />
 
-          <div v-if="loading" class="article-loading">
+    <main class="container article-main">
+      <div class="article-layout">
+        <section class="article-primary">
+          <div class="breadcrumb-bar">
+            <NuxtLink to="/">首页</NuxtLink>
+            <span>/</span>
+            <NuxtLink v-if="article.categoryPath" :to="article.categoryPath">{{ article.categoryName }}</NuxtLink>
+            <template v-if="article.categoryPath">
+              <span>/</span>
+            </template>
+            <span>{{ article.title || '文章详情' }}</span>
+          </div>
+
+          <div v-if="loading" class="article-state">
             <a-skeleton active :paragraph="{ rows: 12 }" />
           </div>
 
-          <div v-else-if="!article.id" class="article-empty">
+          <div v-else-if="!article.id" class="article-state article-state-empty">
             <a-result status="404" title="文章不存在" sub-title="您查找的文章不存在或已被删除">
               <template #extra>
                 <a-button type="primary" @click="$router.back()">返回上一页</a-button>
@@ -25,166 +27,193 @@
             </a-result>
           </div>
 
-          <article v-else class="article-container">
-            <!-- 封面图 -->
+          <article v-else class="article-card">
             <div v-if="article.cover" class="article-cover">
               <img :src="article.cover" :alt="article.title" />
             </div>
 
-            <!-- 标题区 -->
-            <div class="article-header">
-              <div class="article-category-tag" v-if="article.categoryName">
-                {{ article.categoryName }}
+            <div class="article-content-wrap">
+              <div class="article-heading">
+                <span v-if="article.categoryName" class="article-category">{{ article.categoryName }}</span>
+                <h1 class="article-title">{{ article.title }}</h1>
+                <div class="article-meta">
+                  <span v-if="article.source">来源：{{ article.source }}</span>
+                  <span v-if="article.author">作者：{{ article.author }}</span>
+                  <span v-if="article.publishTime">{{ article.publishTime }}</span>
+                  <span v-if="article.views">{{ article.views }} 次阅读</span>
+                </div>
               </div>
-              <h1 class="article-title">{{ article.title }}</h1>
-              <div class="article-meta">
-                <span class="meta-item" v-if="article.source">
-                  <span class="meta-icon">📰</span>来源：{{ article.source }}
-                </span>
-                <span class="meta-item" v-if="article.author">
-                  <span class="meta-icon">✍️</span>{{ article.author }}
-                </span>
-                <span class="meta-item" v-if="article.publishTime">
-                  <span class="meta-icon">🕐</span>{{ article.publishTime }}
-                </span>
-                <span class="meta-item" v-if="article.views">
-                  <span class="meta-icon">👁</span>{{ article.views }} 次阅读
-                </span>
+
+              <div v-if="article.summary" class="article-summary">
+                <strong>摘要</strong>
+                <p>{{ article.summary }}</p>
               </div>
-            </div>
 
-            <!-- 摘要 -->
-            <div v-if="article.summary" class="article-summary">
-              <div class="summary-label">摘要</div>
-              <p>{{ article.summary }}</p>
-            </div>
+              <div class="article-body" v-html="article.content" />
 
-            <!-- 正文 -->
-            <div class="article-body" v-html="article.content"></div>
-
-            <!-- 附件下载 -->
-            <div v-if="article.attachments && article.attachments.length" class="article-attachments">
-              <div class="attachments-title">📎 相关附件</div>
-              <div class="attachments-list">
-                <a
-                  v-for="file in article.attachments"
-                  :key="file.url"
-                  :href="file.url"
-                  target="_blank"
-                  class="attachment-item"
-                >
-                  <span class="attachment-icon">📄</span>
-                  <span class="attachment-name">{{ file.name }}</span>
-                  <span class="attachment-size">{{ file.size }}</span>
-                </a>
+              <div v-if="article.attachments?.length" class="article-attachments">
+                <div class="section-bar">
+                  <span>相关附件</span>
+                </div>
+                <div class="attachments-list">
+                  <a
+                    v-for="file in article.attachments"
+                    :key="file.url"
+                    :href="file.url"
+                    target="_blank"
+                    class="attachment-item"
+                  >
+                    <span class="attachment-name">{{ file.name }}</span>
+                    <span class="attachment-size">{{ file.size }}</span>
+                  </a>
+                </div>
               </div>
-            </div>
 
-            <!-- 标签 -->
-            <div v-if="article.tags && article.tags.length" class="article-tags">
-              <span class="tags-label">标签：</span>
-              <a-tag v-for="tag in article.tags" :key="tag" color="blue">{{ tag }}</a-tag>
-            </div>
-
-            <!-- 声明 -->
-            <div class="article-disclaimer">
-              <p>声明：本文内容仅代表作者本人观点，不代表本网站立场。如有侵权请联系我们删除。</p>
-            </div>
-
-            <!-- 分享 & 上一篇下一篇 -->
-            <div class="article-nav">
-              <div class="nav-prev" v-if="prevArticle" @click="goArticle(prevArticle)">
-                <span class="nav-dir">« 上一篇</span>
-                <span class="nav-title">{{ prevArticle.title }}</span>
+              <div v-if="article.tags?.length" class="article-tags">
+                <span class="tags-label">标签：</span>
+                <a-tag v-for="tag in article.tags" :key="tag" color="blue">{{ tag }}</a-tag>
               </div>
-              <div class="nav-next" v-if="nextArticle" @click="goArticle(nextArticle)">
-                <span class="nav-title">{{ nextArticle.title }}</span>
-                <span class="nav-dir">下一篇 »</span>
+
+              <div class="article-disclaimer">
+                声明：本文内容仅代表作者本人观点，不代表本网站立场。如有侵权请联系我们删除。
+              </div>
+
+              <div class="article-nav">
+                <div v-if="prevArticle" class="article-nav-item" @click="goArticle(prevArticle)">
+                  <small>上一篇</small>
+                  <span>{{ prevArticle.title }}</span>
+                </div>
+                <div v-if="nextArticle" class="article-nav-item article-nav-item-next" @click="goArticle(nextArticle)">
+                  <small>下一篇</small>
+                  <span>{{ nextArticle.title }}</span>
+                </div>
               </div>
             </div>
           </article>
-        </a-col>
+        </section>
 
-        <!-- 侧栏 -->
-        <a-col :xs="0" :lg="7" class="hidden lg:block">
-          <div class="sidebar">
-            <!-- 相关文章 -->
-            <div class="sidebar-card">
-              <div class="sidebar-title">相关文章</div>
-              <div class="related-list">
-                <div
-                  v-for="item in relatedArticles"
-                  :key="item.id"
-                  class="related-item"
-                  @click="goArticle(item)"
-                >
-                  <span class="related-dot">›</span>
-                  <span class="related-title">{{ item.title }}</span>
-                </div>
-                <div v-if="!relatedArticles.length" class="related-empty">暂无相关文章</div>
-              </div>
+        <aside class="article-sidebar">
+          <div class="sidebar-panel">
+            <div class="panel-heading">
+              <span>相关文章</span>
             </div>
-
-            <!-- 热门推荐 -->
-            <div class="sidebar-card mt-6">
-              <div class="sidebar-title">热门推荐</div>
-              <div class="related-list">
-                <div
-                  v-for="item in hotArticles"
-                  :key="item.id"
-                  class="related-item hot-item"
-                  @click="goArticle(item)"
-                >
-                  <span class="hot-rank">{{ item.rank }}</span>
-                  <span class="related-title">{{ item.title }}</span>
-                </div>
-              </div>
+            <div class="sidebar-list">
+              <button
+                v-for="item in relatedArticles"
+                :key="item.id"
+                type="button"
+                class="sidebar-link"
+                @click="goArticle(item)"
+              >
+                {{ item.title }}
+              </button>
+              <div v-if="!relatedArticles.length" class="sidebar-empty">暂无相关文章</div>
             </div>
           </div>
-        </a-col>
-      </a-row>
-    </div>
+
+          <div class="sidebar-panel">
+            <div class="panel-heading">
+              <span>热门推荐</span>
+            </div>
+            <div class="sidebar-list">
+              <button
+                v-for="item in hotArticles"
+                :key="item.id"
+                type="button"
+                class="sidebar-link sidebar-link-rank"
+                @click="goArticle(item)"
+              >
+                <strong>{{ item.rank }}</strong>
+                <span>{{ item.title }}</span>
+              </button>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="footer-nav">
+        <div class="container footer-nav-inner">
+          <NuxtLink to="/about">友情链接</NuxtLink>
+          <NuxtLink to="/consultation">咨询服务</NuxtLink>
+          <NuxtLink to="/reference">决策成果研究文库</NuxtLink>
+          <NuxtLink to="/expert">政府智库学者库</NuxtLink>
+        </div>
+      </div>
+      <PortalFooter />
+    </footer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
+import { usePageSeo } from '@/composables/usePageSeo'
+
+definePageMeta({
+  layout: 'blank'
+})
+
+type ArticleAttachment = {
+  name: string
+  url: string
+  size: string
+}
+
+type ArticleRecord = {
+  id?: string
+  title: string
+  cover?: string
+  categoryName?: string
+  categoryPath?: string
+  source?: string
+  author?: string
+  publishTime?: string
+  views?: number
+  summary?: string
+  content?: string
+  tags?: string[]
+  attachments?: ArticleAttachment[]
+}
+
+type ArticleLink = {
+  id: number | string
+  title: string
+  rank?: number
+}
 
 const route = useRoute()
 const router = useRouter()
 const articleId = computed(() => route.params.id as string)
 
 const loading = ref(true)
-const article = ref<any>({})
-const prevArticle = ref<any>(null)
-const nextArticle = ref<any>(null)
-const relatedArticles = ref<any[]>([])
-const hotArticles = ref<any[]>([
+const article = ref<ArticleRecord>({ title: '' })
+const prevArticle = ref<ArticleLink | null>(null)
+const nextArticle = ref<ArticleLink | null>(null)
+const relatedArticles = ref<ArticleLink[]>([])
+const hotArticles = ref<ArticleLink[]>([
   { id: 1, title: '广西数字经济发展报告（2024）', rank: 1 },
   { id: 2, title: '自治区关于优化营商环境的实施意见', rank: 2 },
   { id: 3, title: '面向东盟的产业合作政策解读', rank: 3 },
   { id: 4, title: '广西乡村振兴战略实施进展报告', rank: 4 },
-  { id: 5, title: '北部湾经济区发展最新动态', rank: 5 },
+  { id: 5, title: '北部湾经济区发展最新动态', rank: 5 }
 ])
 
+usePageSeo({
+  title: '文章详情',
+  description: '广西决策咨询网文章详情页'
+})
+
 useHead({
-  title: computed(() => `${article.value?.title || '文章详情'} - 决策咨询网`),
+  title: computed(() => `${article.value?.title || '文章详情'} - 广西决策咨询网`),
   meta: [
-    { name: 'description', content: computed(() => article.value?.summary || '') },
+    { name: 'description', content: computed(() => article.value?.summary || '广西决策咨询网文章详情页') }
   ]
 })
 
 async function loadArticle() {
   loading.value = true
   try {
-    // TODO: 接入实际API
-    // const res = await getArticleDetail(articleId.value)
-    // article.value = res
-    // prevArticle.value = res.prev
-    // nextArticle.value = res.next
-    // relatedArticles.value = res.related || []
-    
-    // 模拟数据
     article.value = {
       id: articleId.value,
       title: '广西自治区党委政府关于加快数字经济发展的实施意见',
@@ -199,37 +228,47 @@ async function loadArticle() {
       content: `
         <h2>一、总体要求</h2>
         <p>以习近平新时代中国特色社会主义思想为指导，全面贯彻党的二十大精神，围绕建设数字中国战略部署，立足广西比较优势，坚持创新驱动、数据赋能、融合发展，加快推动数字经济与实体经济深度融合，着力打造面向东盟的数字经济发展高地。</p>
-        
+
         <h2>二、主要目标</h2>
         <p>到2026年，数字经济核心产业增加值占GDP比重达到12%，数字经济总量突破1万亿元，数字化转型企业数量超过5000家，建成5G基站15万座。</p>
-        
+
         <h2>三、重点任务</h2>
         <h3>（一）加快数字基础设施建设</h3>
         <p>系统推进新型基础设施建设，加快5G、大数据中心、工业互联网等数字基础设施部署，构建高速、泛在、天地一体、云网融合、智能敏捷、绿色低碳的新型数字基础设施体系。</p>
-        
+
         <h3>（二）深化数字技术与实体经济融合</h3>
         <p>推动制造业、农业、服务业数字化转型，加快工业互联网创新应用，推进数字农业农村建设，促进数字技术与传统产业深度融合。</p>
-        
+
         <h3>（三）培育壮大数字经济核心产业</h3>
         <p>重点发展软件和信息技术服务业、大数据、云计算、人工智能、区块链等核心产业，打造广西数字经济核心产业集群。</p>
-        
+
         <h2>四、保障措施</h2>
         <p>加强组织领导，完善工作机制，强化政策支持，健全评估体系，确保各项任务落到实处。</p>
       `,
       tags: ['数字经济', '政策解读', '广西'],
       attachments: [
         { name: '广西数字经济发展实施意见（全文）.pdf', url: '#', size: '2.4MB' },
-        { name: '附件：实施细则.docx', url: '#', size: '856KB' },
+        { name: '附件：实施细则.docx', url: '#', size: '856KB' }
       ]
     }
-  } catch (e: any) {
+
+    prevArticle.value = { id: Number(articleId.value) - 1 || 1, title: '广西人工智能产业发展三年行动计划解读' }
+    nextArticle.value = { id: Number(articleId.value) + 1 || 2, title: '关于推动平台经济规范健康持续发展的若干措施' }
+    relatedArticles.value = [
+      { id: 11, title: '广西数字政府建设重点任务清单发布' },
+      { id: 12, title: '自治区大数据发展战略阶段性成果综述' },
+      { id: 13, title: '面向东盟的数据跨境合作政策观察' },
+      { id: 14, title: '产业数字化转型标杆案例分析' },
+      { id: 15, title: '推动数字基础设施提质增效的实施路径' }
+    ]
+  } catch {
     message.error('加载失败')
   } finally {
     loading.value = false
   }
 }
 
-function goArticle(item: any) {
+function goArticle(item: ArticleLink) {
   router.push(`/article/${item.id}`)
 }
 
@@ -243,124 +282,159 @@ watch(articleId, () => {
 </script>
 
 <style scoped>
-.article-detail-page {
-  background: #f5f7fa;
-  min-height: 60vh;
+.article-page {
+  min-height: 100vh;
+  background: #ffffff;
+  color: #1f2d3d;
 }
 
-.article-loading,
-.article-empty {
-  background: #fff;
-  border-radius: 12px;
-  padding: 40px;
+.container {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
 }
 
-.article-container {
+.article-main {
+  padding: 18px 0 40px;
+}
+
+.article-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 24px;
+  align-items: start;
+}
+
+.article-primary,
+.article-sidebar {
+  min-width: 0;
+}
+
+.breadcrumb-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 18px;
+  margin-bottom: 16px;
+  background: #f7fbff;
+  border: 1px solid #e3edf6;
+  color: #6c7f92;
+  font-size: 13px;
+}
+
+.breadcrumb-bar a {
+  color: #2c6eaa;
+}
+
+.article-state {
   background: #fff;
-  border-radius: 12px;
-  padding: 40px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  border: 1px solid #e3edf6;
+  padding: 28px;
+}
+
+.article-state-empty {
+  padding: 12px;
+}
+
+.article-card {
+  background: #fff;
+  border: 1px solid #e3edf6;
 }
 
 .article-cover {
-  margin: -40px -40px 32px;
-  border-radius: 12px 12px 0 0;
+  height: 360px;
   overflow: hidden;
-  height: 320px;
+  border-bottom: 1px solid #e3edf6;
 }
 
 .article-cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
 }
 
-.article-header {
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #f0f0f0;
+.article-content-wrap {
+  padding: 28px 34px 36px;
 }
 
-.article-category-tag {
+.article-heading {
+  padding-bottom: 20px;
+  margin-bottom: 22px;
+  border-bottom: 1px solid #e6eef5;
+  text-align: center;
+}
+
+.article-category {
   display: inline-block;
-  padding: 3px 12px;
-  background: #1e3a5f;
-  color: #fff;
+  padding: 4px 12px;
+  margin-bottom: 14px;
+  background: #edf5fc;
+  color: #2c6eaa;
   font-size: 12px;
-  border-radius: 4px;
-  margin-bottom: 12px;
+  border: 1px solid #c9dff1;
 }
 
 .article-title {
-  font-size: 26px;
-  font-weight: 700;
-  color: #1f2937;
-  line-height: 1.5;
   margin: 0 0 16px;
+  color: #203040;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.45;
 }
 
 .article-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-}
-
-.meta-item {
+  justify-content: center;
+  gap: 10px 22px;
+  color: #8a97a4;
   font-size: 13px;
-  color: #9ca3af;
-  display: flex;
-  align-items: center;
-  gap: 4px;
 }
 
-.meta-icon {
-  font-size: 14px;
-}
-
-/* 摘要 */
 .article-summary {
-  background: #f8fafc;
-  border-left: 4px solid #1e3a5f;
-  border-radius: 0 8px 8px 0;
-  padding: 16px 20px;
-  margin-bottom: 32px;
+  padding: 16px 18px;
+  margin-bottom: 28px;
+  background: #f7fbff;
+  border-left: 4px solid #2c6eaa;
 }
 
-.summary-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #1e3a5f;
+.article-summary strong {
+  display: block;
   margin-bottom: 8px;
+  color: #2c6eaa;
+  font-size: 14px;
 }
 
 .article-summary p {
-  font-size: 14px;
-  color: #4b5563;
-  line-height: 1.8;
   margin: 0;
+  color: #536271;
+  font-size: 14px;
+  line-height: 1.9;
 }
 
-/* 正文 */
 .article-body {
+  color: #33485c;
   font-size: 16px;
-  color: #374151;
   line-height: 2;
 }
 
 .article-body :deep(h2) {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1e3a5f;
   margin: 32px 0 16px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #e5e7eb;
+  padding-left: 12px;
+  border-left: 4px solid #2c6eaa;
+  color: #214e7f;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
 .article-body :deep(h3) {
-  font-size: 17px;
-  font-weight: 600;
-  color: #374151;
   margin: 24px 0 12px;
+  color: #2d5f92;
+  font-size: 18px;
+  font-weight: 700;
 }
 
 .article-body :deep(p) {
@@ -368,65 +442,62 @@ watch(articleId, () => {
   text-indent: 2em;
 }
 
-.article-body :deep(ul), .article-body :deep(ol) {
+.article-body :deep(ul),
+.article-body :deep(ol) {
+  margin: 14px 0;
   padding-left: 24px;
-  margin: 12px 0;
 }
 
 .article-body :deep(li) {
   margin: 8px 0;
 }
 
-/* 附件 */
-.article-attachments {
+.article-attachments,
+.article-tags,
+.article-nav {
   margin-top: 32px;
-  padding: 20px;
-  background: #f9fafb;
-  border-radius: 8px;
 }
 
-.attachments-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 12px;
+.section-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 10px;
+  border-bottom: 1px solid #e6eef5;
+}
+
+.section-bar span {
+  color: #2c6eaa;
+  font-size: 20px;
+  font-weight: 700;
 }
 
 .attachments-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  padding-top: 10px;
 }
 
 .attachment-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  text-decoration: none;
-  color: #374151;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px dashed #e8edf2;
+  color: #3e5162;
   font-size: 14px;
-  transition: all 0.2s;
 }
 
 .attachment-item:hover {
-  border-color: #1e3a5f;
-  color: #1e3a5f;
-  background: #f0f7ff;
+  color: #2c6eaa;
 }
 
 .attachment-size {
-  margin-left: auto;
-  color: #9ca3af;
+  color: #98a3ac;
   font-size: 12px;
+  flex-shrink: 0;
 }
 
-/* 标签 */
 .article-tags {
-  margin-top: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -434,169 +505,198 @@ watch(articleId, () => {
 }
 
 .tags-label {
+  color: #7e8c98;
   font-size: 13px;
-  color: #9ca3af;
 }
 
-/* 声明 */
 .article-disclaimer {
-  margin-top: 32px;
+  margin-top: 28px;
   padding: 12px 16px;
-  background: #fefce8;
-  border: 1px solid #fef08a;
-  border-radius: 6px;
-}
-
-.article-disclaimer p {
+  background: #fbf8ec;
+  border: 1px solid #eee2b3;
+  color: #8d7331;
   font-size: 12px;
-  color: #92400e;
-  margin: 0;
+  line-height: 1.7;
 }
 
-/* 上下篇 */
 .article-nav {
-  margin-top: 32px;
-  display: flex;
-  gap: 16px;
-  padding-top: 20px;
-  border-top: 1px solid #f0f0f0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+  padding-top: 24px;
+  border-top: 1px solid #e6eef5;
 }
 
-.nav-prev, .nav-next {
-  flex: 1;
-  padding: 12px 16px;
-  background: #f9fafb;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
+.article-nav-item {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-}
-
-.nav-prev:hover, .nav-next:hover {
-  background: #eff6ff;
-}
-
-.nav-next {
-  text-align: right;
-  align-items: flex-end;
-}
-
-.nav-dir {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.nav-title {
-  font-size: 14px;
-  color: #1e3a5f;
-  font-weight: 500;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* 侧栏 */
-.sidebar {
-  position: sticky;
-  top: 80px;
-}
-
-.sidebar-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-}
-
-.sidebar-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e3a5f;
-  margin-bottom: 16px;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #1e3a5f;
-}
-
-.related-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.related-item {
-  display: flex;
-  align-items: flex-start;
   gap: 8px;
+  min-height: 88px;
+  padding: 16px 18px;
+  background: #f8fbfd;
+  border: 1px solid #e3edf6;
   cursor: pointer;
-  padding: 6px 8px;
-  border-radius: 6px;
-  transition: background 0.2s;
+  transition: all 0.2s ease;
 }
 
-.related-item:hover {
-  background: #f3f4f6;
+.article-nav-item:hover {
+  border-color: #b8d4ea;
+  background: #f1f8fd;
 }
 
-.related-dot {
-  color: #1e3a5f;
-  font-weight: 600;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.related-title {
-  font-size: 13px;
-  color: #374151;
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.related-empty {
-  font-size: 13px;
-  color: #9ca3af;
-  text-align: center;
-  padding: 12px 0;
-}
-
-.hot-item {
-  align-items: center;
-}
-
-.hot-rank {
-  width: 22px;
-  height: 22px;
-  background: #1e3a5f;
-  color: #fff;
-  border-radius: 4px;
+.article-nav-item small {
+  color: #97a3ae;
   font-size: 12px;
+}
+
+.article-nav-item span {
+  color: #2a3d50;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.article-nav-item-next {
+  text-align: right;
+}
+
+.article-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.sidebar-panel {
+  background: #fff;
+  border: 1px solid #e3edf6;
+  padding: 16px 18px 18px;
+}
+
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 10px;
+  border-bottom: 1px solid #e6eef5;
+}
+
+.panel-heading span {
+  color: #2c6eaa;
+  font-size: 20px;
   font-weight: 700;
+}
+
+.sidebar-list {
+  padding-top: 8px;
+}
+
+.sidebar-link {
+  display: block;
+  width: 100%;
+  padding: 12px 0;
+  border: 0;
+  border-bottom: 1px dashed #e8edf2;
+  background: transparent;
+  color: #32485b;
+  font-size: 14px;
+  line-height: 1.7;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sidebar-link:hover {
+  color: #2c6eaa;
+}
+
+.sidebar-link-rank {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 10px;
+  align-items: start;
+}
+
+.sidebar-link-rank strong {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  background: #2c6eaa;
+  color: #fff;
+  font-size: 12px;
 }
 
-.hot-item:nth-child(-n+3) .hot-rank {
-  background: #dc2626;
+.sidebar-empty {
+  padding: 18px 0 8px;
+  color: #99a5af;
+  font-size: 13px;
+  text-align: center;
+}
+
+.site-footer {
+  margin-top: 8px;
+  background: #fff;
+  border-top: 1px solid #e5eef6;
+}
+
+.footer-nav {
+  border-bottom: 1px solid #eef3f7;
+}
+
+.footer-nav-inner {
+  display: flex;
+  justify-content: center;
+  gap: 60px;
+  padding: 18px 0;
+  font-size: 14px;
+}
+
+.footer-nav-inner a {
+  color: #5c6974;
+}
+
+@media (max-width: 1100px) {
+  .article-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .article-sidebar {
+    order: 2;
+  }
 }
 
 @media (max-width: 768px) {
-  .article-container {
-    padding: 20px;
+  .container {
+    width: min(100%, calc(100% - 24px));
+  }
+
+  .article-main {
+    padding-top: 14px;
   }
 
   .article-cover {
-    margin: -20px -20px 20px;
+    height: 220px;
+  }
+
+  .article-content-wrap {
+    padding: 20px 18px 28px;
   }
 
   .article-title {
-    font-size: 20px;
+    font-size: 24px;
+  }
+
+  .article-meta {
+    justify-content: flex-start;
+  }
+
+  .article-nav {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-nav-inner {
+    flex-wrap: wrap;
+    gap: 18px 28px;
+    padding: 16px 0;
   }
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 49c3870..deda80a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,755 +1,904 @@
 <template>
   <div class="home-page">
-    <!-- Banner 轮播区 -->
-    <section class="banner-section relative overflow-hidden">
-      <div class="banner-bg"></div>
-      <div class="mx-auto max-w-screen-xl px-4 py-6 relative z-10">
-        <a-row :gutter="24">
-          <!-- 左侧快捷入口 -->
-          <a-col :xs="24" :sm="6">
-            <div class="quick-nav bg-white/95 backdrop-blur rounded-lg shadow-lg p-4">
-              <div class="quick-nav-title">
-                <span class="icon">📋</span>
-                <span>政策要闻</span>
-              </div>
-              <ul class="quick-nav-list">
-                <li><NuxtLink to="/news?type=central">党中央国务院信息</NuxtLink></li>
-                <li><NuxtLink to="/news?type=region">自治区党委政府</NuxtLink></li>
-                <li><NuxtLink to="/news?type=department">其他厅委办信息</NuxtLink></li>
-                <li><NuxtLink to="/news?type=latest">最新发布</NuxtLink></li>
-              </ul>
-            </div>
-          </a-col>
-          
-          <!-- 中间轮播 -->
-          <a-col :xs="24" :sm="18">
-            <div class="carousel-wrapper">
-              <a-carousel autoplay :dots="true" class="main-carousel">
-                <div v-for="(slide, index) in bannerSlides" :key="index" class="carousel-slide">
-                  <img :src="slide.image" :alt="slide.title" class="carousel-image" />
-                  <div class="carousel-overlay">
-                    <div class="carousel-content">
-                      <span class="carousel-tag">{{ slide.tag }}</span>
-                      <h3 class="carousel-title">{{ slide.title }}</h3>
-                    </div>
-                  </div>
-                </div>
-              </a-carousel>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
+    <PortalHeader />
 
-    <!-- 单位企业广告区 -->
-    <section class="ad-section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <div class="ad-banner bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-4 flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <span class="text-3xl">🏢</span>
-            <div>
-              <div class="text-white font-semibold">单位企业展示</div>
-              <div class="text-blue-200 text-sm">为优秀单位企业提供展示平台</div>
+    <main class="container page-main">
+      <section class="headline-grid">
+        <div class="headline-left">
+          <NuxtLink to="/article/1" class="headline-image-card">
+            <img src="/images/video-poster.jpg" alt="中心赴南宁宁宁区调研" />
+            <div class="headline-image-title">“经桂通”平台推广应用培训会在南宁召开</div>
+            <div class="headline-image-date">2026-03-09</div>
+          </NuxtLink>
+        </div>
+
+        <div class="headline-center">
+          <NuxtLink to="/article/2" class="feature-title">
+            中心赴南宁市邕宁区（县）调研县域数字经济发展情况
+          </NuxtLink>
+          <NuxtLink to="/article/2" class="feature-image-wrap">
+            <img src="/images/video-poster.jpg" alt="调研现场" />
+          </NuxtLink>
+        </div>
+
+        <div class="headline-right">
+          <div class="subnav-strip" :style="{ backgroundImage: `url(${subnavStripImage})` }">
+            <span>党中央国务院信息</span>
+            <span>自治区党委政府</span>
+            <span>其他厅（厅委）信息</span>
+          </div>
+          <div class="news-links">
+            <NuxtLink v-for="item in heroNews" :key="item.id" :to="getArticleLink(item.id)">{{ item.title }}</NuxtLink>
+          </div>
+        </div>
+      </section>
+
+      <section class="ad-banner scenic" />
+
+      <section class="section-block">
+        <div class="section-heading image-heading">
+          <img :src="promoBannerImage" alt="决策咨询" />
+        </div>
+
+        <div class="article-columns two">
+          <div class="article-panel" v-for="group in consultingGroups" :key="group.title">
+            <div class="panel-heading">
+              <span>{{ group.title }}</span>
+              <NuxtLink :to="group.more">更多&gt;&gt;</NuxtLink>
+            </div>
+            <div class="article-list">
+              <NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
+                <div class="article-text">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.summary }}</p>
+                  <span>{{ item.date }}</span>
+                </div>
+                <img src="/images/video-poster.jpg" alt="文章配图" />
+              </NuxtLink>
             </div>
           </div>
-          <a-button type="primary" ghost size="large">了解详情</a-button>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <!-- 决策咨询板块 -->
-    <section class="section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <SectionHeader title="决策咨询" icon="📊" more-link="/consultation" />
-        
-        <a-row :gutter="[24, 24]">
-          <!-- 左侧：市县决策、行业资讯 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-orange">市县决策</span>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in cityArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-              <div class="mt-4">
-                <div class="card-header">
-                  <span class="card-tag tag-green">行业资讯</span>
-                </div>
-                <ArticleItem 
-                  v-for="item in industryArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-          
-          <!-- 右侧：前沿观察、企业动态 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-blue">前沿观察</span>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in frontierArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-              <div class="mt-4">
-                <div class="card-header">
-                  <span class="card-tag tag-purple">企业动态</span>
-                </div>
-                <ArticleItem 
-                  v-for="item in enterpriseArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
+      <section class="ad-banner blue">
+        <div>广告位</div>
+      </section>
 
-    <!-- 广告位 -->
-    <section class="ad-section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <div class="ad-banner bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg p-6 text-center">
-          <h3 class="text-white text-xl font-semibold mb-2">战略合作伙伴招募中</h3>
-          <p class="text-cyan-100 mb-4">携手共创决策咨询新篇章</p>
-          <a-button type="primary" size="large">立即咨询</a-button>
+      <section class="section-block">
+        <div class="article-columns two">
+          <div class="article-panel" v-for="group in referenceGroups" :key="group.title">
+            <div class="panel-heading">
+              <span>{{ group.title }}</span>
+              <NuxtLink :to="group.more">更多&gt;&gt;</NuxtLink>
+            </div>
+            <div class="article-list">
+              <NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
+                <div class="article-text">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.summary }}</p>
+                  <span>{{ item.date }}</span>
+                </div>
+                <img src="/images/video-poster.jpg" alt="文章配图" />
+              </NuxtLink>
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <!-- 决策参考板块 -->
-    <section class="section bg-gray-50">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <SectionHeader title="决策参考" icon="📚" more-link="/reference" />
-        
-        <a-row :gutter="[24, 24]">
-          <!-- 左侧：政策原文、深度解读 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-red">政策原文</span>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in policyArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-              <div class="mt-4">
-                <div class="card-header">
-                  <span class="card-tag tag-orange">深度解读</span>
-                </div>
-                <ArticleItem 
-                  v-for="item in analysisArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-          
-          <!-- 右侧：研究成果、专题研究 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-blue">研究成果</span>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in researchArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-              <div class="mt-4">
-                <div class="card-header">
-                  <span class="card-tag tag-green">专题研究</span>
-                </div>
-                <ArticleItem 
-                  v-for="item in specialArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
+      <section class="experts-section">
+        <div class="section-heading experts-heading" :style="{ backgroundImage: `url(${expertSectionBgImage})` }">
+          <img class="experts-heading-title" :src="expertSectionTitleImage" alt="专家资讯" />
+        </div>
 
-    <!-- 专家资讯板块 -->
-    <section class="section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <SectionHeader title="专家资讯" icon="👨‍🏫" more-link="/expert" />
-        
-        <a-row :gutter="[24, 24]">
-          <!-- 左侧：专家视点 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-blue">专家视点</span>
-                <NuxtLink to="/expert?type=view" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in expertViewArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
+        <div class="experts-tabs">
+          <div class="experts-tabs-left">
+            <button
+              type="button"
+              class="experts-tab-btn"
+              :class="{ active: activeExpertTab === 'viewpoint' }"
+              @click="activeExpertTab = 'viewpoint'"
+            >
+              专家试点
+            </button>
+            <button
+              type="button"
+              class="experts-tab-btn"
+              :class="{ active: activeExpertTab === 'dynamic' }"
+              @click="activeExpertTab = 'dynamic'"
+            >
+              专家动态
+            </button>
+          </div>
+          <NuxtLink to="/expert/apply" class="expert-apply-btn">
+            <img :src="expertApplyImage" alt="专家申请" />
+          </NuxtLink>
+        </div>
+
+        <div class="experts-grid">
+          <NuxtLink v-for="item in filteredExpertCards" :key="item.id" :to="getArticleLink(item.id)" class="expert-card">
+            <img :src="item.image" :alt="item.title" />
+            <div class="expert-card-body">
+              <h3>{{ item.title }}</h3>
+              <p>{{ item.date }}</p>
             </div>
-          </a-col>
-          
-          <!-- 右侧：专家动态 + 申请按钮 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-green">专家动态</span>
-                <NuxtLink to="/expert?type=dynamic" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in expertDynamicArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
+          </NuxtLink>
+        </div>
+      </section>
+
+      <section class="ad-banner image-banner">
+        <img :src="promoBannerImage" alt="单位企业广告" />
+      </section>
+
+      <section class="section-block">
+        <div class="article-columns two">
+          <div class="article-panel" v-for="group in thinkTankGroups" :key="group.title">
+            <div class="panel-heading">
+              <span>{{ group.title }}</span>
+              <NuxtLink :to="group.more">更多&gt;&gt;</NuxtLink>
             </div>
-            
-            <!-- 专家申请卡片 -->
-            <div class="expert-apply-card mt-4 bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-6 text-white">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h4 class="text-lg font-semibold mb-1">成为签约专家</h4>
-                  <p class="text-blue-200 text-sm">分享您的智慧，服务政府决策</p>
-                </div>
-                <NuxtLink to="/expert/apply">
-                  <a-button type="primary" size="large" ghost>专家申请</a-button>
+            <div class="article-list" :class="{ 'logo-list-wrap': group.type === 'logos' }">
+              <template v-if="group.type === 'logos'">
+                <NuxtLink
+                  v-for="item in group.items"
+                  :key="item.title"
+                  :to="group.more"
+                  class="logo-card"
+                >
+                  <div class="logo-circle">LOGO</div>
+                  <span>{{ item.title }}</span>
                 </NuxtLink>
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- 单位企业广告区 -->
-    <section class="ad-section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <div class="ad-banner bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg p-4 flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <span class="text-3xl">🏛️</span>
-            <div>
-              <div class="text-white font-semibold">会员服务</div>
-              <div class="text-purple-200 text-sm">享受专属服务，获取更多价值</div>
+              </template>
+              <template v-else>
+                <NuxtLink v-for="item in group.items" :key="item.id || item.title" :to="item.id ? getArticleLink(item.id) : group.more" class="article-row">
+                  <div class="article-text">
+                    <h3>{{ item.title }}</h3>
+                    <p>{{ item.summary }}</p>
+                    <span>{{ item.date }}</span>
+                  </div>
+                  <img src="/images/video-poster.jpg" alt="文章配图" />
+                </NuxtLink>
+              </template>
             </div>
           </div>
-          <NuxtLink to="/membership">
-            <a-button type="primary" ghost size="large">了解更多</a-button>
-          </NuxtLink>
+        </div>
+      </section>
+
+      <section class="action-grid">
+        <NuxtLink v-for="item in actionLinks" :key="item.title" :to="item.to" class="action-card" :class="item.theme">
+          <span class="action-icon">{{ item.icon }}</span>
+          <span>{{ item.title }}</span>
+        </NuxtLink>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <div class="footer-nav">
+        <div class="container footer-nav-inner">
+          <NuxtLink to="/about">友情链接</NuxtLink>
+          <NuxtLink to="/consultation">咨询服务</NuxtLink>
+          <NuxtLink to="/reference">决策成果研究文库</NuxtLink>
+          <NuxtLink to="/expert">政府智库学者库</NuxtLink>
         </div>
       </div>
-    </section>
-
-    <!-- 智库观察板块 -->
-    <section class="section bg-gray-50">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <SectionHeader title="智库观察" icon="🔍" more-link="/think-tank" />
-        
-        <a-row :gutter="[24, 24]">
-          <!-- 左侧：智库介绍 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-blue">智库介绍</span>
-                <NuxtLink to="/think-tank?type=intro" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in thinktankIntroArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-          
-          <!-- 右侧：智库视角 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-green">智库视角</span>
-                <NuxtLink to="/think-tank?type=view" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in thinktankViewArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- 翰墨文谈板块 -->
-    <section class="section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <SectionHeader title="翰墨文谈" icon="✍️" more-link="/hanmo" />
-        
-        <a-row :gutter="[24, 24]">
-          <!-- 左侧：翰墨文谈 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-purple">翰墨文谈</span>
-                <NuxtLink to="/hanmo" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in hanmoArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-          
-          <!-- 右侧：决策服务 -->
-          <a-col :xs="24" :lg="12">
-            <div class="content-card">
-              <div class="card-header">
-                <span class="card-tag tag-orange">决策服务</span>
-                <NuxtLink to="/consultation" class="more-link">更多 ›</NuxtLink>
-              </div>
-              <div class="article-list">
-                <ArticleItem 
-                  v-for="item in decisionServiceArticles" 
-                  :key="item.id" 
-                  :article="item"
-                  :show-image="true"
-                />
-              </div>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- 底部功能区 -->
-    <section class="quick-links-section">
-      <div class="mx-auto max-w-screen-xl px-4">
-        <div class="quick-links-grid">
-          <NuxtLink to="/about/join" class="quick-link-item">
-            <span class="icon">📥</span>
-            <span class="text">资料下载</span>
-          </NuxtLink>
-          <NuxtLink to="/about" class="quick-link-item">
-            <span class="icon">📝</span>
-            <span class="text">申报模板</span>
-          </NuxtLink>
-          <NuxtLink to="/contact" class="quick-link-item">
-            <span class="icon">📤</span>
-            <span class="text">成果报送</span>
-          </NuxtLink>
-          <NuxtLink to="/about/consultation" class="quick-link-item">
-            <span class="icon">📞</span>
-            <span class="text">联系我们</span>
-          </NuxtLink>
-        </div>
-      </div>
-    </section>
+      <PortalFooter />
+    </footer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { usePageSeo } from '@/composables/usePageSeo'
 
-usePageSeo({
-  title: '首页',
-  description: '广西决策咨询网 - 政策要闻、决策参考、专家资讯'
+definePageMeta({
+  layout: 'blank'
 })
 
-// Banner 轮播数据
-const bannerSlides = [
-  {
-    image: 'https://picsum.photos/1200/500?random=1',
-    title: '中心赴南宁区县调研县域数字经济发展情况',
-    tag: '调研活动'
-  },
-  {
-    image: 'https://picsum.photos/1200/500?random=2',
-    title: '自治区召开数字经济发展专题会议',
-    tag: '会议报道'
-  },
-  {
-    image: 'https://picsum.photos/1200/500?random=3',
-    title: '专家委员会2024年度工作研讨会召开',
-    tag: '专家动态'
-  }
+usePageSeo({
+  title: '首页',
+  description: '广西决策咨询网首页'
+})
+
+const promoBannerImage = '/images/%E6%88%AA%E5%B1%8F2026-04-28%2021.38.43.png'
+const subnavStripImage = '/images/%E5%9B%BE%E5%B1%82%2050.png'
+const expertSectionTitleImage = '/images/zjzx.png'
+const expertSectionBgImage = '/images/zjzxBg.png'
+const expertApplyImage = '/images/zjsq.png'
+
+type TextItem = {
+  id?: number
+  title: string
+  summary: string
+  date: string
+}
+
+type Group = {
+  title: string
+  more: string
+  items: TextItem[]
+  type?: 'logos'
+}
+
+const heroNews = [
+  { id: 3, title: '数字广西建设“十五五”规划编制工作座谈会在南宁召开' },
+  { id: 4, title: '广西发布县域数字经济试点“成绩单”，桂北七城重点突破' },
+  { id: 5, title: '中国一东盟人工智能创新合作加快构建' },
+  { id: 6, title: '“桂链”平台入选国家数据局数据基础设施试点典型案例' }
 ]
 
-// 模拟文章数据
-interface Article {
+const createItems = (prefix: string, startId: number): TextItem[] => ([
+  { id: startId, title: `${prefix}标题案例一`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' },
+  { id: startId + 1, title: `${prefix}标题案例二`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' },
+  { id: startId + 2, title: `${prefix}标题案例三`, summary: '标题案例标题案例标题案例标题案例标题案例标题案例...', date: '2026-03-19' }
+])
+
+function getArticleLink(id: number) {
+  return `/article/${id}`
+}
+
+const consultingGroups: Group[] = [
+  { title: '市县决策', more: '/consultation?type=city', items: createItems('市县决策', 101) },
+  { title: '前沿观察', more: '/consultation?type=frontier', items: createItems('前沿观察', 111) },
+  { title: '行业资讯', more: '/consultation?type=industry', items: createItems('行业资讯', 121) },
+  { title: '企业动态', more: '/consultation?type=enterprise', items: createItems('企业动态', 131) }
+]
+
+const referenceGroups: Group[] = [
+  { title: '政策原文', more: '/reference?type=policy', items: createItems('政策原文', 201) },
+  { title: '东盟研究', more: '/reference?type=asean', items: createItems('东盟研究', 211) },
+  { title: '翰墨文谈', more: '/hanmo', items: createItems('翰墨文谈', 221) },
+  { title: '会员单位', more: '/membership', items: [
+    { title: '华东科技', summary: '', date: '' },
+    { title: '华西科技', summary: '', date: '' },
+    { title: '华南科技', summary: '', date: '' },
+    { title: '华北科技', summary: '', date: '' },
+    { title: '华中科技', summary: '', date: '' },
+    { title: '华海科技', summary: '', date: '' },
+    { title: '华广科技', summary: '', date: '' },
+    { title: '华创科技', summary: '', date: '' }
+  ], type: 'logos' }
+]
+
+const thinkTankGroups: Group[] = [
+  { title: '智库观察', more: '/think-tank?type=view', items: createItems('智库观察', 301) },
+  { title: '建言献策', more: '/suggestions', items: createItems('建言献策', 311) },
+  { title: '翰墨观察', more: '/hanmo', items: createItems('翰墨文谈', 321) },
+  { title: '支撑单位', more: '/about', items: [
+    { title: '华东科技', summary: '', date: '' },
+    { title: '华西科技', summary: '', date: '' },
+    { title: '华南科技', summary: '', date: '' },
+    { title: '华北科技', summary: '', date: '' },
+    { title: '华中科技', summary: '', date: '' }
+  ], type: 'logos' }
+]
+
+type ExpertTab = 'viewpoint' | 'dynamic'
+
+type ExpertCard = {
   id: number
   title: string
   date: string
-  source?: string
-  image?: string
-  link: string
+  image: string
+  tab: ExpertTab
 }
 
-const createArticle = (id: number, title: string, source = '决策咨询中心'): Article => ({
-  id,
-  title,
-  date: '2024-12-20',
-  source,
-  image: `https://picsum.photos/100/70?random=${id}`,
-  link: `/consultation/${id}`
-})
+const activeExpertTab = ref<ExpertTab>('viewpoint')
 
-// 决策咨询板块
-const cityArticles = [
-  createArticle(1, '南宁市发布2024年产业转型升级实施方案'),
-  createArticle(2, '桂林市深化文旅融合发展取得新成效'),
-  createArticle(3, '柳州市新能源汽车产业链持续完善'),
-]
-const industryArticles = [
-  createArticle(4, '广西数字经济增速位居全国前列'),
-  createArticle(5, '北部湾经济区开放开发再上新台阶'),
-]
-const frontierArticles = [
-  createArticle(6, 'AI大模型在政务服务中的应用前景分析'),
-  createArticle(7, '碳中和目标下的绿色金融发展路径'),
-]
-const enterpriseArticles = [
-  createArticle(8, '广西本土企业数字化转型案例分享'),
-  createArticle(9, '重点龙头企业发展态势良好'),
+const expertCards: ExpertCard[] = [
+  { id: 401, title: '专家试点一', date: '2026-03-19', image: '/images/video-poster.jpg', tab: 'viewpoint' },
+  { id: 402, title: '专家试点二', date: '2026-03-18', image: '/images/video-poster.jpg', tab: 'viewpoint' },
+  { id: 403, title: '专家试点三', date: '2026-03-17', image: '/images/video-poster.jpg', tab: 'viewpoint' },
+  { id: 404, title: '专家试点四', date: '2026-03-16', image: '/images/video-poster.jpg', tab: 'viewpoint' },
+  { id: 405, title: '专家动态一', date: '2026-03-15', image: '/images/video-poster.jpg', tab: 'dynamic' },
+  { id: 406, title: '专家动态二', date: '2026-03-14', image: '/images/video-poster.jpg', tab: 'dynamic' },
+  { id: 407, title: '专家动态三', date: '2026-03-13', image: '/images/video-poster.jpg', tab: 'dynamic' },
+  { id: 408, title: '专家动态四', date: '2026-03-12', image: '/images/video-poster.jpg', tab: 'dynamic' }
 ]
 
-// 决策参考板块
-const policyArticles = [
-  createArticle(10, '国务院关于加快数字经济发展的意见', '国务院'),
-  createArticle(11, '广西壮族自治区数字经济发展规划（2024-2028年）', '自治区政府'),
-]
-const analysisArticles = [
-  createArticle(12, '《数字经济促进条例》重点内容解读'),
-  createArticle(13, '广西产业政策发展趋势深度分析'),
-]
-const researchArticles = [
-  createArticle(14, '2024年度广西经济发展研究报告'),
-  createArticle(15, '面向东盟的跨境产业合作研究'),
-]
-const specialArticles = [
-  createArticle(16, '乡村振兴与数字乡村建设专题研究'),
-  createArticle(17, '西部陆海新通道产业布局研究'),
-]
+const filteredExpertCards = computed(() => expertCards.filter(item => item.tab === activeExpertTab.value))
 
-// 专家资讯板块
-const expertViewArticles = [
-  createArticle(18, '张教授：关于广西产业升级的几点建议'),
-  createArticle(19, '李专家：数字经济时代的政府治理创新'),
-  createArticle(20, '王教授：区域协调发展的思考与建议'),
-]
-const expertDynamicArticles = [
-  createArticle(21, '专家委员会赴桂林开展调研活动'),
-  createArticle(22, '新聘专家介绍：引进高层次人才'),
-]
-
-// 智库观察板块
-const thinktankIntroArticles = [
-  createArticle(23, '广西决策咨询中心简介'),
-  createArticle(24, '中心组织架构与职能介绍'),
-  createArticle(25, '专家委员会成员一览'),
-]
-const thinktankViewArticles = [
-  createArticle(26, '当前经济形势分析与对策建议'),
-  createArticle(27, '广西高质量发展路径探析'),
-  createArticle(28, '数字经济赋能传统产业转型'),
-]
-
-// 翰墨文谈板块
-const hanmoArticles = [
-  createArticle(29, '翰墨人生：一位老专家的从政感悟'),
-  createArticle(30, '从实践中来：基层调研的点点滴滴'),
-]
-const decisionServiceArticles = [
-  createArticle(31, '咨询服务项目介绍与申请指南'),
-  createArticle(32, '专项服务内容及收费标准'),
+const actionLinks = [
+  { title: '资料下载', to: '/reference', icon: '⇩', theme: 'cyan' },
+  { title: '申报模板', to: '/about/consultation', icon: '▣', theme: 'blue' },
+  { title: '成果摘编', to: '/reference', icon: '▤', theme: 'green' },
+  { title: '联系我们', to: '/contact', icon: '✆', theme: 'red' }
 ]
 </script>
 
 <style scoped>
-/* Banner 区域 */
-.banner-section {
-  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
-  min-height: 420px;
+.home-page {
+  min-height: 100vh;
+  background: #ffffff;
+  color: #1f2d3d;
 }
 
-.banner-bg {
-  position: absolute;
-  inset: 0;
-  background: url('https://picsum.photos/1920/600?random=100') center/cover;
-  opacity: 0.15;
+.container {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
 }
 
-/* 快捷导航 */
-.quick-nav {
-  border-radius: 8px;
-  overflow: hidden;
+.page-main {
+  padding: 14px 0 40px;
 }
 
-.quick-nav-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #1e3a5f, #0d1b2a);
-  color: white;
-  font-weight: 600;
-  font-size: 15px;
+.headline-grid {
+  display: grid;
+  grid-template-columns: 220px 1.45fr 1fr;
+  gap: 16px;
+  align-items: start;
+  margin-bottom: 28px;
 }
 
-.quick-nav-title .icon {
-  font-size: 18px;
-}
-
-.quick-nav-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.quick-nav-list li {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.quick-nav-list li:last-child {
-  border-bottom: none;
-}
-
-.quick-nav-list a {
-  display: block;
-  padding: 10px 16px;
-  color: #333;
-  text-decoration: none;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.quick-nav-list a:hover {
-  background: #f8f9fa;
-  color: #1e3a5f;
-  padding-left: 20px;
-}
-
-/* 轮播 */
-.carousel-wrapper {
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-}
-
-.main-carousel :deep(.slick-dots) {
-  bottom: 16px;
-}
-
-.main-carousel :deep(.slick-dots li button) {
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 50%;
-}
-
-.main-carousel :deep(.slick-dots li.slick-active button) {
+.headline-left,
+.headline-center,
+.headline-right,
+.article-panel,
+.experts-section {
   background: #fff;
 }
 
-.carousel-slide {
-  position: relative;
-  height: 360px;
+.headline-image-card {
+  display: block;
+  padding: 0;
+  background: #fff;
 }
 
-.carousel-image {
+.headline-image-card img,
+.feature-image-wrap img {
   width: 100%;
-  height: 100%;
+  display: block;
   object-fit: cover;
 }
 
-.carousel-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-  padding: 40px 24px 24px;
+.headline-image-card img {
+  height: 254px;
 }
 
-.carousel-tag {
-  display: inline-block;
-  padding: 4px 12px;
-  background: #e74c3c;
-  color: white;
+.headline-image-title {
+  margin-top: 12px;
+  color: #2d2d2d;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.7;
+  padding: 0 10px;
+}
+
+.headline-image-date {
+  margin-top: 8px;
+  color: #999;
   font-size: 12px;
-  border-radius: 4px;
-  margin-bottom: 8px;
+  padding: 0 10px 10px;
 }
 
-.carousel-title {
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
+.headline-center {
+  padding: 14px;
 }
 
-/* 广告区 */
-.ad-section {
-  padding: 24px 0;
+.feature-title {
+  display: block;
+  margin-bottom: 12px;
+  color: #1b58a3;
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
-/* 通用板块 */
-.section {
-  padding: 40px 0;
+.feature-image-wrap img {
+  height: 356px;
 }
 
-/* 内容卡片 */
-.content-card {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  height: 100%;
+.headline-right {
+  padding: 12px 14px;
 }
 
-.card-header {
+.subnav-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+  padding: 8px 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  font-size: 12px;
+  min-height: 35px;
+}
+
+.news-links {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.news-links a {
+  color: #1f2d3d;
+  font-size: 14px;
+  line-height: 1.7;
+  border-bottom: 1px dashed #dfdfdf;
+  padding-bottom: 12px;
+}
+
+.ad-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 90px;
+  margin: 0 0 28px;
+  font-size: 20px;
+  letter-spacing: 1px;
+}
+
+.image-banner {
+  min-height: 0;
+  background: transparent;
+}
+
+.image-banner img,
+.image-heading img {
+  width: 100%;
+  display: block;
+}
+
+.ad-banner.soft {
+  background:
+    linear-gradient(155deg, rgba(217, 15, 34, 0.95) 0 18%, transparent 18%),
+    linear-gradient(180deg, #fff4eb, #fff8f1);
+  color: #333;
+}
+
+.ad-banner.blue {
+  min-height: 74px;
+  background: #67add6;
+  color: #fff;
+}
+
+.ad-banner.scenic {
+  min-height: 110px;
+  background:
+    linear-gradient(rgba(48, 142, 205, 0.22), rgba(48, 142, 205, 0.22)),
+    url('/images/banner.png') center 62%/cover;
+  color: #fff;
+}
+
+.section-block {
+  margin-bottom: 28px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.image-heading {
+  margin-bottom: 22px;
+}
+
+.section-heading-title {
+  position: relative;
+  padding: 0 26px;
+  text-align: center;
+}
+
+.section-heading-title::before,
+.section-heading-title::after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  width: 120px;
+  height: 1px;
+  background: #bfd5ea;
+}
+
+.section-heading-title::before {
+  right: 100%;
+}
+
+.section-heading-title::after {
+  left: 100%;
+}
+
+.section-heading-title span {
+  display: block;
+  color: #2f6da8;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.section-heading-title small {
+  color: #a6b9ca;
+  font-size: 11px;
+  letter-spacing: 2px;
+}
+
+.article-columns.two {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 22px;
+}
+
+.article-panel {
+  padding: 4px 0 0;
+}
+
+.panel-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid #f0f0f0;
+  padding: 0 0 10px;
+  border-bottom: 1px solid #e6eef5;
 }
 
-.card-tag {
-  display: inline-block;
-  padding: 4px 16px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 4px;
-  color: white;
+.panel-heading span {
+  color: #2c6eaa;
+  font-size: 20px;
+  font-weight: 700;
 }
 
-.tag-blue { background: #3498db; }
-.tag-green { background: #27ae60; }
-.tag-orange { background: #f39c12; }
-.tag-red { background: #e74c3c; }
-.tag-purple { background: #9b59b6; }
-
-.more-link {
-  color: #999;
-  font-size: 13px;
-  text-decoration: none;
-  transition: color 0.2s;
+.panel-heading a {
+  color: #9aa3aa;
+  font-size: 12px;
 }
 
-.more-link:hover {
-  color: #1e3a5f;
-}
-
-/* 文章列表 */
 .article-list {
+  padding-top: 6px;
+}
+
+.article-row {
+  display: grid;
+  grid-template-columns: 1fr 105px;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px dashed #e8edf2;
+}
+
+.article-row:last-child {
+  border-bottom: 0;
+}
+
+.article-text h3 {
+  margin: 0 0 8px;
+  color: #2a2a2a;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.article-text p {
+  margin: 0 0 8px;
+  color: #6e7881;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.article-text span {
+  color: #a3aab0;
+  font-size: 12px;
+}
+
+.article-row img {
+  width: 105px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.experts-section {
+  margin-bottom: 28px;
+}
+
+.experts-heading {
+  justify-content: center;
+  margin-bottom: 18px;
+  min-height: 68px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.experts-heading-title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+}
+
+.experts-tabs {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #e6eef5;
+  margin-bottom: 18px;
 }
 
-/* 专家申请卡片 */
-.expert-apply-card {
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
+.experts-tabs-left {
+  display: flex;
+  align-items: center;
+  gap: 26px;
 }
 
-/* 底部功能区 */
-.quick-links-section {
-  background: linear-gradient(135deg, #1e3a5f, #0d1b2a);
-  padding: 32px 0;
+.experts-tab-btn {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #798895;
+  font-size: 15px;
+  cursor: pointer;
+  transition: color 0.2s ease;
 }
 
-.quick-links-grid {
+.experts-tab-btn:hover {
+  color: #2c6eaa;
+}
+
+.experts-tab-btn.active {
+  color: #2c6eaa;
+  font-weight: 700;
+}
+
+.expert-apply-btn {
+  display: block;
+  width: 116px;
+  line-height: 0;
+  flex-shrink: 0;
+}
+
+.expert-apply-btn img {
+  width: 100%;
+  display: block;
+}
+
+.experts-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
+  gap: 18px;
 }
 
-.quick-link-item {
+.expert-card {
+  background: #fff;
+  border: 1px solid #edf2f5;
+}
+
+.expert-card img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+  display: block;
+}
+
+.expert-card-body {
+  padding: 10px 10px 12px;
+}
+
+.expert-card-body h3 {
+  margin: 0 0 6px;
+  color: #d54235;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.expert-card-body p {
+  margin: 0;
+  color: #8f989f;
+  font-size: 12px;
+}
+
+.logo-list-wrap {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px 10px;
+}
+
+.logo-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  padding: 24px 16px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  text-decoration: none;
-  transition: all 0.3s;
+  padding: 8px 0;
 }
 
-.quick-link-item:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-2px);
+.logo-circle {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 50%, #fff 0 24%, #1d2b4b 25% 36%, #7ea2d8 37% 44%, #0d1730 45% 100%);
+  color: #fff;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 1px;
 }
 
-.quick-link-item .icon {
+.logo-card span {
+  color: #3d4d5a;
+  font-size: 12px;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.action-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  min-height: 78px;
+  background: #fff;
+  border: 2px solid #dceaf3;
+  color: #5c8aa5;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.action-card span:last-child {
   font-size: 28px;
 }
 
-.quick-link-item .text {
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
+.action-icon {
+  font-size: 34px;
+  line-height: 1;
 }
 
-/* 响应式 */
-@media (max-width: 768px) {
-  .banner-section {
-    min-height: auto;
+.action-card.cyan {
+  border-color: #cce9ef;
+  color: #55abc0;
+}
+
+.action-card.blue {
+  border-color: #d6e6f6;
+  color: #4e87c8;
+}
+
+.action-card.green {
+  border-color: #d9efe7;
+  color: #7db9aa;
+}
+
+.action-card.red {
+  border-color: #f4d8d6;
+  color: #db7f77;
+}
+
+.site-footer {
+  background: #fff;
+}
+
+.footer-nav {
+  background: #0f69b9;
+}
+
+.footer-nav-inner {
+  display: flex;
+  gap: 22px;
+  padding: 10px 0;
+}
+
+.footer-nav a {
+  color: #fff;
+  font-size: 12px;
+}
+
+@media (max-width: 1100px) {
+  .headline-grid,
+  .article-columns.two,
+  .experts-grid,
+  .action-grid {
+    grid-template-columns: 1fr;
   }
-  
-  .carousel-slide {
+
+  .headline-center,
+  .headline-right,
+  .headline-left,
+  .experts-section {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .feature-title {
+    font-size: 26px;
+  }
+
+  .logo-list-wrap {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    width: min(100%, calc(100% - 24px));
+  }
+
+  .headline-grid {
+    gap: 12px;
+  }
+
+  .headline-center,
+  .headline-right,
+  .headline-left,
+  .article-panel,
+  .experts-section {
+    padding: 0;
+  }
+
+  .headline-center {
+    padding: 12px;
+  }
+
+  .headline-right {
+    padding: 12px;
+  }
+
+  .feature-title {
+    font-size: 22px;
+  }
+
+  .feature-image-wrap img {
     height: 240px;
   }
-  
-  .quick-links-grid {
+
+  .section-heading {
+    justify-content: flex-start;
+  }
+
+  .section-heading-title {
+    padding: 0 0 0 2px;
+    text-align: left;
+  }
+
+  .section-heading-title::before,
+  .section-heading-title::after {
+    display: none;
+  }
+
+  .expert-apply-btn {
+    position: static;
+    transform: none;
+    margin-left: auto;
+    width: 100px;
+  }
+
+  .experts-grid {
     grid-template-columns: repeat(2, 1fr);
   }
-  
-  .quick-nav {
-    margin-bottom: 16px;
+
+  .expert-card img {
+    height: 170px;
+  }
+
+  .logo-list-wrap {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .article-row {
+    grid-template-columns: 1fr;
+  }
+
+  .article-row img {
+    width: 100%;
+    height: 180px;
+  }
+
+  .action-card,
+  .action-card span:last-child {
+    font-size: 22px;
+  }
+
+  .action-icon {
+    font-size: 28px;
+  }
+
+  .footer-nav-inner {
+    flex-wrap: wrap;
+    gap: 10px 16px;
   }
 }
 </style>
diff --git a/app/pages/news/index.vue b/app/pages/news/index.vue
index 82da01e..1044b87 100644
--- a/app/pages/news/index.vue
+++ b/app/pages/news/index.vue
@@ -3,6 +3,10 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+
 useHead({ title: '政策要闻 - 决策咨询网' })
 
 const pageConfig = {
diff --git a/public/images/banner.png b/public/images/banner.png
new file mode 100644
index 0000000..d6b80a7
Binary files /dev/null and b/public/images/banner.png differ
diff --git a/public/images/zjsq.png b/public/images/zjsq.png
new file mode 100644
index 0000000..8211dfe
Binary files /dev/null and b/public/images/zjsq.png differ
diff --git a/public/images/zjzx.png b/public/images/zjzx.png
new file mode 100644
index 0000000..96b7917
Binary files /dev/null and b/public/images/zjzx.png differ
diff --git a/public/images/zjzxBg.png b/public/images/zjzxBg.png
new file mode 100644
index 0000000..47ec9c2
Binary files /dev/null and b/public/images/zjzxBg.png differ
diff --git a/public/images/图层 50.png b/public/images/图层 50.png
new file mode 100644
index 0000000..14a7708
Binary files /dev/null and b/public/images/图层 50.png differ
diff --git a/public/images/截屏2026-04-28 21.38.43.png b/public/images/截屏2026-04-28 21.38.43.png
new file mode 100644
index 0000000..8a3728b
Binary files /dev/null and b/public/images/截屏2026-04-28 21.38.43.png differ