pc-10588/app/pages/index.vue

<template>
  <main class="portal-home">
    <header class="site-header">
      <div class="mx-auto max-w-screen-xl px-4">
        <div class="site-brand-wrap">
          <div class="site-badge">政务</div>
          <div>
            <h1 class="site-title">广西决策咨询网</h1>
            <p class="site-subtitle">权威发布 · 决策支持 · 服务发展</p>
          </div>
        </div>

        <nav class="top-nav" aria-label="主导航">
          <NuxtLink
            v-for="item in navItems"
            :key="item.label"
            :to="item.to"
            class="nav-item"
          >
            {{ item.label }}
          </NuxtLink>
        </nav>
      </div>
    </header>

    <section class="hero-panel">
      <div class="mx-auto max-w-screen-xl px-4 py-8">
        <p class="hero-eyebrow">政府门户 · 官方导向</p>
        <h2 class="hero-title">聚焦广西决策咨询服务，建设高水平智库平台</h2>
        <p class="hero-desc">
          围绕政策解读、课题研究、战略合作与会员服务，提供规范、及时、可追溯的政务信息发布与决策支持。
        </p>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-8">
      <div class="content-grid">
        <article class="module-card">
          <h3 class="module-title">政策文件</h3>
          <ul class="module-list">
            <li v-for="item in policyDocs" :key="item">{{ item }}</li>
          </ul>
        </article>

        <article class="module-card">
          <h3 class="module-title">重要通知</h3>
          <ul class="module-list">
            <li v-for="item in notices" :key="item">{{ item }}</li>
          </ul>
        </article>

        <article class="module-card">
          <h3 class="module-title">领导讲话</h3>
          <ul class="module-list">
            <li v-for="item in speeches" :key="item">{{ item }}</li>
          </ul>
        </article>
      </div>

      <div class="feature-block">
        <h3 class="feature-title">重点工作</h3>
        <div class="feature-grid">
          <div v-for="item in focusWorks" :key="item.title" class="feature-card">
            <h4>{{ item.title }}</h4>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <footer class="site-footer">
      <div class="mx-auto max-w-screen-xl px-4 py-6">
        <h3 class="friend-title">友情链接</h3>
        <div class="friend-links">
          <a v-for="item in friendLinks" :key="item.name" :href="item.url" target="_blank" rel="noreferrer">
            {{ item.name }}
          </a>
        </div>
        <p class="copyright">© 广西决策咨询网 | 政务信息仅供公开发布与查询使用</p>
      </div>
    </footer>
  </main>
</template>

<script setup lang="ts">
import { usePageSeo } from "@/composables/usePageSeo"

usePageSeo({
  title: "广西决策咨询网",
  description: "广西决策咨询网门户首页，发布政策文件、重要通知、领导讲话与课题研究信息。",
  path: "/"
})

const navItems = [
  { label: "网站首页", to: "/" },
  { label: "学会活动", to: "/article/activities" },
  { label: "决策资讯", to: "/article/news" },
  { label: "战略合作", to: "/article/coop" },
  { label: "会员服务", to: "/member" },
  { label: "课题研究", to: "/article/research" },
  { label: "学会党建", to: "/article/party" },
  { label: "关于我们", to: "/about" }
]

const policyDocs = [
  "广西重点产业发展政策解读（2026年）",
  "自治区决策咨询课题管理办法（修订）",
  "关于加强高端智库成果转化的实施意见",
  "政务信息公开与数据安全管理规范"
]

const notices = [
  "关于申报2026年度重点课题的通知",
  "学会专家库入库审核结果公示",
  "战略合作单位联络员培训安排",
  "清明节假期值班与应急工作通知"
]

const speeches = [
  "坚持问题导向，提升咨政建言质量",
  "服务地方治理现代化的智库路径",
  "打造开放协同的决策咨询共同体",
  "推动研究成果向政策实践高效转化"
]

const focusWorks = [
  { title: "课题研究", desc: "围绕重大现实问题开展专题研究，形成可落地的政策建议。" },
  { title: "战略合作", desc: "联动高校、研究机构与行业协会，构建协同创新平台。" },
  { title: "会员服务", desc: "提供成果交流、培训活动和资源对接等综合服务。" },
  { title: "学会党建", desc: "强化党建引领，推动业务发展与组织建设深度融合。" }
]

const friendLinks = [
  { name: "广西壮族自治区人民政府", url: "https://www.gxzf.gov.cn" },
  { name: "中国社会科学院", url: "https://www.cass.cn" },
  { name: "国务院发展研究中心", url: "https://www.drc.gov.cn" },
  { name: "广西社科联", url: "http://www.gxskl.gov.cn" }
]
</script>

<style scoped>
.portal-home {
  min-height: 100vh;
  background: #f8f8f8;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #9f1313, #c31818);
  border-bottom: 3px solid #f3d27a;
  box-shadow: 0 8px 20px rgba(110, 10, 10, 0.25);
}

.site-brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 14px;
}

.site-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #8b1111;
  background: linear-gradient(180deg, #f8df9f, #e7bd5b);
}

.site-title {
  margin: 0;
  color: #fff;
  font-size: 30px;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.site-subtitle {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-item {
  color: #fff3d7;
  text-decoration: none;
  font-size: 15px;
  padding: 12px 18px;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.nav-item:hover,
.nav-item.router-link-active {
  color: #fff;
  border-bottom-color: #f5d07a;
  background: rgba(255, 255, 255, 0.08);
}

.hero-panel {
  background:
    linear-gradient(140deg, rgba(140, 12, 12, 0.9), rgba(173, 18, 18, 0.88)),
    repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.03) 18px, rgba(255, 255, 255, 0.03) 36px);
  color: #fff;
}

.hero-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 233, 190, 0.95);
}

.hero-title {
  margin: 12px 0;
  font-size: 34px;
  line-height: 1.35;
  font-weight: 900;
}

.hero-desc {
  margin: 0;
  max-width: 780px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.module-card {
  grid-column: span 12;
  border: 1px solid #eed7d7;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .module-card {
    grid-column: span 4;
  }
}

.module-title {
  margin: 0;
  padding: 14px 16px;
  font-size: 18px;
  color: #941515;
  background: linear-gradient(180deg, #fff6f6, #ffeaea);
  border-bottom: 1px solid #efd5d5;
}

.module-list {
  list-style: none;
  padding: 10px 16px 16px;
  margin: 0;
}

.module-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #ecd1d1;
  color: #2d2d2d;
  line-height: 1.55;
}

.module-list li:last-child {
  border-bottom: 0;
}

.feature-block {
  margin-top: 24px;
  border: 1px solid #efd4d4;
  border-radius: 10px;
  background: #fff;
}

.feature-title {
  margin: 0;
  padding: 14px 16px;
  color: #941515;
  font-size: 20px;
  border-bottom: 1px solid #efd4d4;
  background: linear-gradient(180deg, #fff9f9, #fff0f0);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.feature-card {
  grid-column: span 12;
  background: #fffafa;
  border: 1px solid #f2dede;
  border-radius: 8px;
  padding: 14px;
}

@media (min-width: 900px) {
  .feature-card {
    grid-column: span 6;
  }
}

.feature-card h4 {
  margin: 0;
  color: #8f1313;
  font-size: 16px;
}

.feature-card p {
  margin: 8px 0 0;
  line-height: 1.7;
  color: #4b4b4b;
}

.site-footer {
  margin-top: 20px;
  background: #f0ecec;
  border-top: 1px solid #dcc8c8;
}

.friend-title {
  margin: 0;
  font-size: 18px;
  color: #6f6f6f;
}

.friend-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}

.friend-links a {
  color: #514a4a;
  text-decoration: none;
}

.friend-links a:hover {
  color: #931414;
  text-decoration: underline;
}

.copyright {
  margin: 14px 0 0;
  color: #7f7f7f;
  font-size: 12px;
}
</style>