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

feat(about): 重构“关于我们”页面并丰富内容展示

Browse Source 
- 采用左右分栏布局，左侧新增图标导航
- 全新设计顶部 Banner，提升视觉效果
- 添加学会简介数据亮点和主要职能展示
- 新增组织机构图、主要领导及专家委员会成员展示
- 引入学会章程章节分明条目展示
- 丰富咨询服务内容，新增服务项目卡片和联系方式
- “加入我们”板块支持企业与个人会员申请详情说明
- 支持资料下载并优化排版与交互体验
- 增强响应式支持，保证移动端体验一致
- 页面样式大幅调整，提升整体美观与可读性
This commit is contained in:
赵忠林
2026-04-26 01:44:07 +08:00
parent 17ce26411d
commit 56aea4ad86
26 changed files with 5468 additions and 1741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/pages/about/charter.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<AboutIndexVue />
</template>
<script setup lang="ts">
// 学会章程 - 复用关于我们页面，通过路由path自动切换到对应section
import AboutIndexVue from './index.vue'
</script>

7
app/pages/about/consultation.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<AboutIndexVue />
</template>
<script setup lang="ts">
import AboutIndexVue from './index.vue'
</script>

897
app/pages/about/index.vue
View File

@@ -1,105 +1,256 @@
<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 class="about-subpage">
<!-- 顶部 Banner -->
<div class="about-banner">
<div class="mx-auto max-w-screen-xl px-4">
<h1 class="banner-title">关于我们</h1>
<p class="banner-desc">广西决策咨询网 · 汇聚智慧，服务决策</p>
</div>
</div>
<!-- 组织机构 -->
<div v-if="currentSection === 'organization'" class="content-section">
<h2>组织机构</h2>
<div class="content-body">
<h3>顾问委员会</h3>
<p>由区内外知名专家学者组成，为学会发展提供指导和咨询。</p>
<div class="mx-auto max-w-screen-xl px-4 py-8">
<a-row :gutter="[32, 0]">
<!-- 左侧导航 -->
<a-col :xs="24" :lg="6">
<div class="side-nav">
<div class="side-nav-title">关于我们</div>
<div
v-for="item in navItems"
:key="item.key"
class="side-nav-item"
:class="{ active: currentSection === item.key }"
@click="switchSection(item.key)"
>
<span class="nav-item-icon">{{ item.icon }}</span>
<span>{{ item.label }}</span>
</div>
</div>
</a-col>
<h3>理事会</h3>
<p>负责学会日常运营管理，制定和执行各项决策。</p>
<!-- 右侧内容 -->
<a-col :xs="24" :lg="18">
<!-- 学会简介 -->
<div v-show="currentSection === 'intro'" class="content-card">
<h2 class="content-title">学会简介</h2>
<div class="content-body">
<p>广西决策咨询学会（广西决策咨询中心）是在中共广西壮族自治区委员会、广西壮族自治区人民政府的领导下，由全区各高校、科研机构、政府部门从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。</p>
<p>学会以服务党政决策为核心使命，围绕广西经济社会发展中的重大问题开展战略性、综合性、前瞻性研究，为自治区党委政府重大决策提供智力支撑。</p>
<h3>专家库</h3>
<p>汇聚各领域专业人才，提供智力支持。</p>
</div>
</div>
<div class="info-highlight">
<div class="highlight-item">
<div class="highlight-number">200+</div>
<div class="highlight-label">签约专家</div>
</div>
<div class="highlight-item">
<div class="highlight-number">20年</div>
<div class="highlight-label">服务历史</div>
</div>
<div class="highlight-item">
<div class="highlight-number">1000+</div>
<div class="highlight-label">咨询报告</div>
</div>
<div class="highlight-item">
<div class="highlight-number">50+</div>
<div class="highlight-label">重大课题</div>
</div>
</div>
<!-- 学会章程 -->
<div v-if="currentSection === 'charter'" class="content-section">
<h2>学会章程</h2>
<div class="content-body">
<h3>第一章 总则</h3>
<p>广西决策咨询学会是由区内从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。</p>
<h3>主要职能</h3>
<div class="function-list">
<div class="function-item" v-for="item in mainFunctions" :key="item.title">
<div class="function-icon">{{ item.icon }}</div>
<div class="function-content">
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</div>
</div>
</div>
</div>
<h3>第二章 业务范围</h3>
<ul>
<li>开展决策咨询理论研究</li>
<li>组织学术交流活动</li>
<li>提供决策咨询服务</li>
<li>培养决策咨询人才</li>
</ul>
</div>
</div>
<!-- 组织机构 -->
<div v-show="currentSection === 'organization'" class="content-card">
<h2 class="content-title">组织机构</h2>
<div class="content-body">
<div class="org-chart">
<div class="org-level org-top">
<div class="org-box org-primary">理事会</div>
</div>
<div class="org-connector"></div>
<div class="org-level org-mid">
<div class="org-box org-secondary">常务理事会</div>
</div>
<div class="org-connector"></div>
<div class="org-level org-bottom">
<div class="org-box org-third">学术委员会</div>
<div class="org-box org-third">秘书处</div>
<div class="org-box org-third">专家委员会</div>
</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 class="mt-8">主要领导</h3>
<div class="leader-grid">
<div v-for="leader in leaders" :key="leader.name" class="leader-card">
<div class="leader-avatar">{{ leader.name.charAt(0) }}</div>
<div class="leader-info">
<div class="leader-name">{{ leader.name }}</div>
<div class="leader-pos">{{ leader.position }}</div>
</div>
</div>
</div>
<h3>联系方式</h3>
<p>📞 联系电话：0771-1234567</p>
<p>📧 电子邮箱：service@jczxw.org</p>
<p>📍 地址：广西南宁市民族大道XX号</p>
</div>
</div>
<h3 class="mt-8">专家委员会成员</h3>
<div class="committee-tags">
<a-tag v-for="name in committeeMembers" :key="name" color="blue" style="margin-bottom:8px">{{ name }}</a-tag>
</div>
</div>
</div>
<!-- 加入我们 -->
<div v-if="currentSection === 'join'" class="content-section">
<h2>加入我们</h2>
<div class="content-body">
<p>我们热忱欢迎符合条件的专家学者和有志于决策咨询事业的各界人士加入我们的大家庭。</p>
<!-- 学会章程 -->
<div v-show="currentSection === 'charter'" class="content-card">
<h2 class="content-title">学会章程</h2>
<div class="content-body charter-body">
<div v-for="chapter in charter" :key="chapter.title" class="charter-chapter">
<h3>{{ chapter.title }}</h3>
<div v-for="(item, idx) in chapter.items" :key="idx" class="charter-item">
<span class="charter-no">第{{ idx + 1 }}条</span>
<span>{{ item }}</span>
</div>
</div>
</div>
</div>
<h3>入会资格</h3>
<p>详见：<NuxtLink to="/about/join">入会指南</NuxtLink></p>
<!-- 咨询服务 -->
<div v-show="currentSection === 'consultation'" class="content-card">
<h2 class="content-title">咨询服务</h2>
<div class="content-body">
<p class="service-intro">广西决策咨询网为各级政府机构、科研单位及企业提供专业、系统的决策咨询服务，涵盖政策研究、战略规划、项目评估等多个领域。</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 class="service-cards">
<div v-for="service in consultationServices" :key="service.title" class="service-card">
<div class="service-icon">{{ service.icon }}</div>
<h3>{{ service.title }}</h3>
<p>{{ service.desc }}</p>
<div class="service-tags-wrap">
<a-tag v-for="tag in service.tags" :key="tag">{{ tag }}</a-tag>
</div>
</div>
</div>
<div class="contact-box">
<h3>联系我们</h3>
<div class="contact-grid">
<div class="contact-item">
<span class="contact-icon">📞</span>
<div>
<div class="contact-label">联系电话</div>
<div class="contact-value">0771-5386339</div>
</div>
</div>
<div class="contact-item">
<span class="contact-icon">📧</span>
<div>
<div class="contact-label">电子邮箱</div>
<div class="contact-value">gxjzxzx@126.com</div>
</div>
</div>
<div class="contact-item">
<span class="contact-icon">📍</span>
<div>
<div class="contact-label">办公地址</div>
<div class="contact-value">广西南宁市良庆区五象大道401号</div>
</div>
</div>
<div class="contact-item">
<span class="contact-icon">⏰</span>
<div>
<div class="contact-label">工作时间</div>
<div class="contact-value">周一至周五 9:00-17:30</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 加入我们 -->
<div v-show="currentSection === 'join'" class="content-card">
<h2 class="content-title">加入我们</h2>
<div class="content-body">
<p>我们热忱欢迎符合条件的单位和个人加入广西决策咨询学会，共同推动广西决策咨询事业高质量发展。</p>
<div class="join-cards">
<div class="join-card enterprise-card">
<div class="join-card-icon">🏢</div>
<h3>企业会员</h3>
<div class="join-qualifications">
<h4>入会资格</h4>
<ul>
<li>在广西依法注册，具有法人资格的企事业单位</li>
<li>认同学会章程，支持学会工作</li>
<li>具有一定规模和社会影响力</li>
</ul>
<h4>所需材料</h4>
<ul>
<li>入会申请表（加盖公章）</li>
<li>营业执照副本</li>
<li>法人代表身份证</li>
<li>单位简介</li>
</ul>
</div>
<a-button type="primary" block size="large" @click="navigateTo('/about/join/enterprise')">
企业会员申请
</a-button>
</div>
<div class="join-card personal-card">
<div class="join-card-icon">👤</div>
<h3>个人会员</h3>
<div class="join-qualifications">
<h4>入会资格</h4>
<ul>
<li>热爱决策咨询研究，认同学会章程</li>
<li>大学本科及以上学历</li>
<li>具有相关专业工作经历</li>
</ul>
<h4>所需材料</h4>
<ul>
<li>入会申请表（本人签字）</li>
<li>个人简介及研究成果</li>
<li>职称证书或学历证书</li>
<li>身份证复印件</li>
</ul>
</div>
<a-button block size="large" @click="navigateTo('/about/join/personal')">
个人会员申请
</a-button>
</div>
</div>
<div class="download-section">
<h3>📥 资料下载</h3>
<div class="download-list">
<a href="#" class="download-item">
<span class="download-icon">📄</span>
<span class="download-name">企业会员入会申请表.docx</span>
<a-button size="small" type="primary" ghost>下载</a-button>
</a>
<a href="#" class="download-item">
<span class="download-icon">📄</span>
<span class="download-name">个人会员入会申请表.docx</span>
<a-button size="small" type="primary" ghost>下载</a-button>
</a>
<a href="#" class="download-item">
<span class="download-icon">📋</span>
<span class="download-name">广西决策咨询学会章程.pdf</span>
<a-button size="small" type="primary" ghost>下载</a-button>
</a>
</div>
</div>
</div>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
@@ -108,86 +259,590 @@
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'
const navItems = [
{ key: 'intro', label: '学会简介', icon: '🏛️' },
{ key: 'organization', label: '组织机构', icon: '🔧' },
{ key: 'charter', label: '学会章程', icon: '📋' },
{ key: 'consultation', label: '咨询服务', icon: '💼' },
{ key: 'join', label: '加入我们', icon: '🤝' },
]
// 根据路由path判断当前section
const sectionMap: Record<string, string> = {
'/about': 'intro',
'/about/organization': 'organization',
'/about/charter': 'charter',
'/about/consultation': 'consultation',
'/about/join': 'join',
}
const currentSection = ref(
route.query.section as string ||
sectionMap[route.path] ||
'intro'
)
function switchSection(key: string) {
currentSection.value = key
}
watch(() => route.path, (newPath) => {
currentSection.value = sectionMap[newPath] || 'intro'
})
watch(() => route.query.section, (sec) => {
if (sec) currentSection.value = sec as string
})
const mainFunctions = [
{ icon: '🔬', title: '决策咨询研究', desc: '围绕广西经济社会发展重大问题，开展战略性、综合性、前瞻性研究' },
{ icon: '📝', title: '政策建议提供', desc: '为各级政府提供有参考价值的政策建议和咨询报告' },
{ icon: '👥', title: '专家交流合作', desc: '搭建区内外专家学者交流合作平台，推动学术思想碰撞' },
{ icon: '📡', title: '成果宣传推广', desc: '多渠道发布和推广决策咨询研究成果，服务社会各界' },
]
const leaders = [
{ name: '陈某某', position: '会长' },
{ name: '李某某', position: '副会长' },
{ name: '王某某', position: '副会长' },
{ name: '张某某', position: '秘书长' },
]
const committeeMembers = ['张教授', '李研究员', '王专家', '刘学者', '赵教授', '黄学者', '林研究员', '吴教授']
const charter = [
{
title: '第一章 总则',
items: [
'广西决策咨询学会是由全区从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。',
'学会的宗旨是：以服务党政决策为核心使命，汇聚全区高端智慧，围绕经济社会发展重大问题开展研究，为科学决策提供智力支撑。',
]
},
{
title: '第二章 业务范围',
items: [
'开展决策咨询理论与应用研究，撰写决策咨询报告。',
'组织学术交流、研讨会议等活动，促进学科发展。',
'为政府机构、企事业单位提供专业决策咨询服务。',
'培养决策咨询专业人才，开展业务培训。',
]
},
{
title: '第三章 会员',
items: [
'凡符合本章程规定，经申请并经理事会审议通过，即为本学会会员。',
'会员分为单位会员（企业会员）和个人会员两类。',
'会员有权出席会员大会，参与学会活动，享受学会提供的服务和资源。',
]
},
]
const consultationServices = [
{ icon: '🎯', title: '政策研究', desc: '深入研究党中央国务院及自治区重要政策，提供权威解读和实施建议', tags: ['政策解读', '战略规划'] },
{ icon: '🗺️', title: '规划咨询', desc: '为地方政府、园区和企业提供区域规划、产业规划、专项规划编制咨询', tags: ['区域规划', '产业规划'] },
{ icon: '📊', title: '项目评估', desc: '对重大投资项目开展可行性研究、风险评估和后评价服务', tags: ['可行性研究', '风险评估'] },
{ icon: '🔍', title: '专题调研', desc: '根据委托需求开展实地调研，形成翔实的调研报告和对策建议', tags: ['实地调研', '对策建议'] },
]
</script>
<style scoped>
.about-page {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
.about-banner {
background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
padding: 60px 0 40px;
position: relative;
overflow: hidden;
}
.page-header {
text-align: center;
margin-bottom: 40px;
.about-banner::before {
content: '';
position: absolute;
inset: 0;
background: url('https://picsum.photos/1920/400?random=200') center/cover;
opacity: 0.1;
}
.page-title {
font-size: 32px;
.banner-title {
color: #fff;
font-size: 36px;
font-weight: 700;
color: #1f2937;
margin: 0 0 12px;
position: relative;
}
.page-desc {
.banner-desc {
color: rgba(255,255,255,0.75);
font-size: 16px;
color: #6b7280;
margin: 0;
position: relative;
}
.about-nav {
margin-bottom: 40px;
text-align: center;
.side-nav {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow: hidden;
position: sticky;
top: 80px;
}
.content-section {
.side-nav-title {
padding: 16px 20px;
background: #1e3a5f;
color: #fff;
font-size: 15px;
font-weight: 600;
}
.side-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
cursor: pointer;
font-size: 14px;
color: #374151;
border-bottom: 1px solid #f5f5f5;
transition: all 0.2s;
}
.side-nav-item:hover {
background: #f0f7ff;
color: #1e3a5f;
}
.side-nav-item.active {
background: #eff6ff;
color: #1e3a5f;
font-weight: 600;
border-left: 3px solid #1e3a5f;
}
.nav-item-icon {
font-size: 16px;
}
.content-card {
background: #fff;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
min-height: 400px;
}
.content-section h2 {
.content-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
color: #1e3a5f;
margin: 0 0 24px;
padding-bottom: 16px;
border-bottom: 2px solid #f0f0f0;
border-bottom: 2px solid #e8f0fe;
}
.content-section h3 {
.content-body h3 {
font-size: 18px;
font-weight: 600;
color: #374151;
color: #1f2937;
margin: 24px 0 12px;
}
.content-section p {
.content-body p {
font-size: 15px;
color: #4b5563;
line-height: 1.8;
margin: 0 0 12px;
text-indent: 2em;
}
.content-section ul {
padding-left: 24px;
/* 数据亮点 */
.info-highlight {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 24px 0;
padding: 24px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-radius: 12px;
}
.content-section li {
.highlight-item {
text-align: center;
}
.highlight-number {
font-size: 32px;
font-weight: 800;
color: #1e3a5f;
}
.highlight-label {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
}
/* 职能列表 */
.function-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.function-item {
display: flex;
gap: 12px;
padding: 16px;
background: #f9fafb;
border-radius: 10px;
}
.function-icon {
font-size: 28px;
flex-shrink: 0;
}
.function-content h4 {
font-size: 15px;
font-weight: 600;
color: #1f2937;
margin: 0 0 4px;
}
.function-content p {
font-size: 13px;
color: #6b7280;
margin: 0;
text-indent: 0;
line-height: 1.5;
}
/* 组织结构图 */
.org-chart {
text-align: center;
padding: 20px;
}
.org-level {
display: flex;
justify-content: center;
gap: 20px;
}
.org-connector {
height: 24px;
width: 2px;
background: #d1d5db;
margin: 0 auto;
}
.org-box {
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.org-primary {
background: #1e3a5f;
color: #fff;
min-width: 120px;
}
.org-secondary {
background: #3b82f6;
color: #fff;
min-width: 140px;
}
.org-third {
background: #eff6ff;
color: #1e3a5f;
border: 1px solid #bfdbfe;
min-width: 110px;
}
.leader-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.leader-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: #f9fafb;
border-radius: 10px;
}
.leader-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #1e3a5f;
color: #fff;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.leader-name {
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
.leader-pos {
font-size: 12px;
color: #6b7280;
}
.committee-tags {
margin-top: 8px;
}
/* 章程 */
.charter-body .charter-chapter {
margin-bottom: 24px;
}
.charter-chapter h3 {
font-size: 17px;
font-weight: 700;
color: #1e3a5f;
background: #eff6ff;
padding: 10px 16px;
border-radius: 6px;
margin: 0 0 12px;
}
.charter-item {
display: flex;
gap: 12px;
padding: 10px 16px;
font-size: 14px;
color: #4b5563;
line-height: 1.8;
border-bottom: 1px dashed #f0f0f0;
}
.charter-no {
color: #1e3a5f;
font-weight: 600;
flex-shrink: 0;
width: 48px;
}
/* 咨询服务 */
.service-intro {
text-indent: 2em;
}
.service-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 24px 0;
}
.service-card {
padding: 24px;
background: #f9fafb;
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: all 0.2s;
}
.service-card:hover {
border-color: #1e3a5f;
box-shadow: 0 4px 12px rgba(30,58,95,0.1);
}
.service-icon {
font-size: 36px;
margin-bottom: 12px;
}
.service-card h3 {
font-size: 16px;
font-weight: 700;
color: #1e3a5f;
margin: 0 0 8px;
}
.service-card p {
font-size: 13px;
color: #6b7280;
margin: 0 0 12px;
text-indent: 0;
line-height: 1.6;
}
.service-tags-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.contact-box {
background: #1e3a5f;
border-radius: 16px;
padding: 32px;
margin-top: 24px;
}
.contact-box h3 {
color: #fff;
font-size: 18px;
margin: 0 0 20px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(255,255,255,0.08);
border-radius: 10px;
}
.contact-icon {
font-size: 20px;
}
.contact-label {
font-size: 12px;
color: rgba(255,255,255,0.65);
margin-bottom: 4px;
}
.contact-value {
font-size: 14px;
color: #fff;
font-weight: 500;
}
/* 加入我们 */
.join-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 24px 0;
}
.join-card {
padding: 28px;
border-radius: 16px;
border: 2px solid transparent;
}
.enterprise-card {
background: #eff6ff;
border-color: #bfdbfe;
}
.personal-card {
background: #f0fdf4;
border-color: #bbf7d0;
}
.join-card-icon {
font-size: 40px;
margin-bottom: 12px;
}
.join-card h3 {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0 0 16px;
}
.join-qualifications h4 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 12px 0 8px;
}
.join-qualifications ul {
padding-left: 18px;
margin: 0 0 12px;
}
.join-qualifications li {
font-size: 13px;
color: #4b5563;
line-height: 2;
}
.action-buttons {
margin-top: 32px;
.download-section {
background: #f9fafb;
border-radius: 12px;
padding: 24px;
margin-top: 24px;
}
.download-section h3 {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin: 0 0 16px;
}
.download-list {
display: flex;
gap: 16px;
flex-direction: column;
gap: 10px;
}
.download-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
color: #374151;
transition: all 0.2s;
}
.download-item:hover {
border-color: #1e3a5f;
}
.download-icon {
font-size: 18px;
}
.download-name {
flex: 1;
font-size: 14px;
color: #374151;
}
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
@media (max-width: 768px) {
.info-highlight { grid-template-columns: repeat(2, 1fr); }
.function-list { grid-template-columns: 1fr; }
.service-cards { grid-template-columns: 1fr; }
.join-cards { grid-template-columns: 1fr; }
.leader-grid { grid-template-columns: repeat(2, 1fr); }
.contact-grid { grid-template-columns: 1fr; }
.content-card { padding: 20px; }
}
</style>

8
app/pages/about/organization.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<AboutIndexVue />
</template>
<script setup lang="ts">
// 组织机构 - 复用关于我们页面，通过路由path自动切换到对应section
import AboutIndexVue from './index.vue'
</script>