jczxw-pc/app/pages/about/index.vue

<template>
  <div class="about-page">
    <div class="page-header">
      <h1 class="page-title">关于我们</h1>
      <p class="page-desc">广西决策咨询网 - 汇聚智慧，服务决策</p>
    </div>

    <div class="about-nav">
      <a-space wrap>
        <a-button type="primary" @click="currentSection = 'intro'">学会简介</a-button>
        <a-button @click="currentSection = 'organization'">组织机构</a-button>
        <a-button @click="currentSection = 'charter'">学会章程</a-button>
        <a-button @click="currentSection = 'consultation'">咨询服务</a-button>
        <a-button @click="currentSection = 'join'">加入我们</a-button>
      </a-space>
    </div>

    <!-- 学会简介 -->
    <div v-if="currentSection === 'intro'" class="content-section">
      <h2>学会简介</h2>
      <div class="content-body">
        <p>广西决策咨询网是由广西壮族自治区决策咨询委员会主管的专业决策咨询平台，致力于为各级政府和企业提供高质量的决策咨询服务。</p>
        <p>网站汇聚了区内外的知名专家学者，围绕经济社会发展中的重大问题开展研究，为科学决策提供参考依据。</p>
        <h3>主要职能</h3>
        <ul>
          <li>组织开展重大决策咨询课题研究</li>
          <li>为各级政府提供政策建议和咨询报告</li>
          <li>搭建专家学者交流合作平台</li>
          <li>推广决策咨询研究成果</li>
        </ul>
      </div>
    </div>

    <!-- 组织机构 -->
    <div v-if="currentSection === 'organization'" class="content-section">
      <h2>组织机构</h2>
      <div class="content-body">
        <h3>顾问委员会</h3>
        <p>由区内外知名专家学者组成，为学会发展提供指导和咨询。</p>

        <h3>理事会</h3>
        <p>负责学会日常运营管理，制定和执行各项决策。</p>

        <h3>专家库</h3>
        <p>汇聚各领域专业人才，提供智力支持。</p>
      </div>
    </div>

    <!-- 学会章程 -->
    <div v-if="currentSection === 'charter'" class="content-section">
      <h2>学会章程</h2>
      <div class="content-body">
        <h3>第一章 总则</h3>
        <p>广西决策咨询学会是由区内从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。</p>

        <h3>第二章 业务范围</h3>
        <ul>
          <li>开展决策咨询理论研究</li>
          <li>组织学术交流活动</li>
          <li>提供决策咨询服务</li>
          <li>培养决策咨询人才</li>
        </ul>
      </div>
    </div>

    <!-- 咨询服务 -->
    <div v-if="currentSection === 'consultation'" class="content-section">
      <h2>咨询服务</h2>
      <div class="content-body">
        <h3>服务内容</h3>
        <ul>
          <li><strong>政策研究：</strong>为各级政府提供政策研究和评估服务</li>
          <li><strong>规划咨询：</strong>区域规划、产业规划编制咨询</li>
          <li><strong>项目评估：</strong>重大投资项目可行性研究和评估</li>
          <li><strong>专题调研：</strong>根据需求开展专题调研</li>
        </ul>

        <h3>联系方式</h3>
        <p>📞 联系电话：0771-1234567</p>
        <p>📧 电子邮箱：service@jczxw.org</p>
        <p>📍 地址：广西南宁市民族大道XX号</p>
      </div>
    </div>

    <!-- 加入我们 -->
    <div v-if="currentSection === 'join'" class="content-section">
      <h2>加入我们</h2>
      <div class="content-body">
        <p>我们热忱欢迎符合条件的专家学者和有志于决策咨询事业的各界人士加入我们的大家庭。</p>

        <h3>入会资格</h3>
        <p>详见：<NuxtLink to="/about/join">入会指南</NuxtLink></p>

        <div class="action-buttons">
          <a-button type="primary" size="large" @click="navigateTo('/about/join/enterprise')">
            企业会员申请
          </a-button>
          <a-button size="large" @click="navigateTo('/about/join/personal')">
            个人会员申请
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({ title: '关于我们 - 决策咨询网' })

const route = useRoute()
const currentSection = ref((route.query.section as string) || 'intro')

watch(() => route.query.section, (newSection) => {
  currentSection.value = (newSection as string) || 'intro'
})
</script>

<style scoped>
.about-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px;
}

.page-desc {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

.about-nav {
  margin-bottom: 40px;
  text-align: center;
}

.content-section {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.content-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.content-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin: 24px 0 12px;
}

.content-section p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.8;
  margin: 0 0 12px;
}

.content-section ul {
  padding-left: 24px;
}

.content-section li {
  font-size: 15px;
  color: #4b5563;
  line-height: 2;
}

.action-buttons {
  margin-top: 32px;
  display: flex;
  gap: 16px;
}
</style>