849 lines
23 KiB
Vue
849 lines
23 KiB
Vue
<template>
|
||
<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 class="mx-auto max-w-screen-xl px-4 py-8">
|
||
<a-row :gutter="[32, 0]">
|
||
<!-- 左侧导航 -->
|
||
<a-col :lg="6" :xs="24">
|
||
<div class="side-nav">
|
||
<div class="side-nav-title">关于我们</div>
|
||
<div
|
||
v-for="item in navItems"
|
||
:key="item.key"
|
||
:class="{ active: currentSection === item.key }"
|
||
class="side-nav-item"
|
||
@click="switchSection(item.key)"
|
||
>
|
||
<span class="nav-item-icon">{{ item.icon }}</span>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧内容 -->
|
||
<a-col :lg="18" :xs="24">
|
||
<!-- 学会简介 -->
|
||
<div v-show="currentSection === 'intro'" class="content-card">
|
||
<h2 class="content-title">学会简介</h2>
|
||
<div class="content-body">
|
||
<p>广西决策咨询学会（广西决策咨询中心）是在中共广西壮族自治区委员会、广西壮族自治区人民政府的领导下，由全区各高校、科研机构、政府部门从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。</p>
|
||
<p>学会以服务党政决策为核心使命，围绕广西经济社会发展中的重大问题开展战略性、综合性、前瞻性研究，为自治区党委政府重大决策提供智力支撑。</p>
|
||
|
||
<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>
|
||
|
||
<h3>主要职能</h3>
|
||
<div class="function-list">
|
||
<div v-for="item in mainFunctions" :key="item.title" class="function-item">
|
||
<div class="function-icon">{{ item.icon }}</div>
|
||
<div class="function-content">
|
||
<h4>{{ item.title }}</h4>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<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 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-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>
|
||
|
||
<!-- 咨询服务 -->
|
||
<div v-show="currentSection === 'consultation'" class="content-card">
|
||
<h2 class="content-title">咨询服务</h2>
|
||
<div class="content-body">
|
||
<p class="service-intro">广西决策咨询网为各级政府机构、科研单位及企业提供专业、系统的决策咨询服务，涵盖政策研究、战略规划、项目评估等多个领域。</p>
|
||
|
||
<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 block size="large" type="primary" @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 class="download-item" href="#">
|
||
<span class="download-icon">📄</span>
|
||
<span class="download-name">企业会员入会申请表.docx</span>
|
||
<a-button ghost size="small" type="primary">下载</a-button>
|
||
</a>
|
||
<a class="download-item" href="#">
|
||
<span class="download-icon">📄</span>
|
||
<span class="download-name">个人会员入会申请表.docx</span>
|
||
<a-button ghost size="small" type="primary">下载</a-button>
|
||
</a>
|
||
<a class="download-item" href="#">
|
||
<span class="download-icon">📋</span>
|
||
<span class="download-name">广西决策咨询学会章程.pdf</span>
|
||
<a-button ghost size="small" type="primary">下载</a-button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
useHead({ title: '关于我们 - 决策咨询网' })
|
||
|
||
const route = useRoute()
|
||
|
||
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-banner {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
|
||
padding: 60px 0 40px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.about-banner::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: url('https://picsum.photos/1920/400?random=200') center/cover;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.banner-title {
|
||
color: #fff;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin: 0 0 12px;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-desc {
|
||
color: rgba(255,255,255,0.75);
|
||
font-size: 16px;
|
||
margin: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.side-nav {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
position: sticky;
|
||
top: 80px;
|
||
}
|
||
|
||
.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 2px 12px rgba(0,0,0,0.06);
|
||
min-height: 400px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #1e3a5f;
|
||
margin: 0 0 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 2px solid #e8f0fe;
|
||
}
|
||
|
||
.content-body h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 24px 0 12px;
|
||
}
|
||
|
||
.content-body p {
|
||
font-size: 15px;
|
||
color: #4b5563;
|
||
line-height: 1.8;
|
||
margin: 0 0 12px;
|
||
text-indent: 2em;
|
||
}
|
||
|
||
/* 数据亮点 */
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
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>
|