feat(about): 重构“关于我们”页面并丰富内容展示
- 采用左右分栏布局，左侧新增图标导航 - 全新设计顶部 Banner，提升视觉效果 - 添加学会简介数据亮点和主要职能展示 - 新增组织机构图、主要领导及专家委员会成员展示 - 引入学会章程章节分明条目展示 - 丰富咨询服务内容，新增服务项目卡片和联系方式 - “加入我们”板块支持企业与个人会员申请详情说明 - 支持资料下载并优化排版与交互体验 - 增强响应式支持，保证移动端体验一致 - 页面样式大幅调整，提升整体美观与可读性
This commit is contained in:
477
app/pages/expert/[id].vue
Normal file
477
app/pages/expert/[id].vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<div class="expert-detail-page">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-8">
|
||||
<!-- 面包屑 -->
|
||||
<a-breadcrumb class="mb-6">
|
||||
<a-breadcrumb-item><NuxtLink to="/">首页</NuxtLink></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><NuxtLink to="/expert">专家资讯</NuxtLink></a-breadcrumb-item>
|
||||
<a-breadcrumb-item>专家详情</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
<div v-if="loading">
|
||||
<a-skeleton active avatar :paragraph="{ rows: 6 }" />
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<a-row :gutter="[32, 24]">
|
||||
<!-- 专家信息卡片 -->
|
||||
<a-col :xs="24" :lg="7">
|
||||
<div class="expert-card">
|
||||
<div class="expert-avatar-wrapper">
|
||||
<img v-if="expert.avatar" :src="expert.avatar" :alt="expert.name" class="expert-avatar" />
|
||||
<div v-else class="expert-avatar-placeholder">{{ expert.name?.charAt(0) }}</div>
|
||||
</div>
|
||||
<h2 class="expert-name">{{ expert.name }}</h2>
|
||||
<div class="expert-title-tag">{{ expert.title }}</div>
|
||||
<div class="expert-org">{{ expert.organization }}</div>
|
||||
|
||||
<div class="expert-info-list">
|
||||
<div class="info-item" v-if="expert.researchArea">
|
||||
<span class="info-label">研究领域</span>
|
||||
<span class="info-value">{{ expert.researchArea }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-if="expert.education">
|
||||
<span class="info-label">学历</span>
|
||||
<span class="info-value">{{ expert.education }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-if="expert.joinTime">
|
||||
<span class="info-label">入库时间</span>
|
||||
<span class="info-value">{{ expert.joinTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-button type="primary" block size="large" class="mt-4" @click="handleConsult">
|
||||
预约咨询
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 专家详情 -->
|
||||
<a-col :xs="24" :lg="17">
|
||||
<div class="expert-content-card">
|
||||
<a-tabs v-model:activeKey="activeTab">
|
||||
<a-tab-pane key="intro" tab="专家简介">
|
||||
<div class="tab-content">
|
||||
<h3 class="section-title">个人简介</h3>
|
||||
<p class="intro-text">{{ expert.introduction || '暂无简介' }}</p>
|
||||
|
||||
<h3 class="section-title mt-6">主要成就</h3>
|
||||
<ul class="achievement-list">
|
||||
<li v-for="(item, idx) in expert.achievements" :key="idx">{{ item }}</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="section-title mt-6">荣誉奖项</h3>
|
||||
<div class="honors-grid">
|
||||
<div v-for="(honor, idx) in expert.honors" :key="idx" class="honor-item">
|
||||
<span class="honor-icon">🏆</span>
|
||||
<span>{{ honor }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="articles" tab="专家文章">
|
||||
<div class="tab-content">
|
||||
<div v-if="expertArticles.length === 0" class="empty-state">
|
||||
<a-empty description="暂无文章" />
|
||||
</div>
|
||||
<div class="article-list">
|
||||
<div
|
||||
v-for="item in expertArticles"
|
||||
:key="item.id"
|
||||
class="article-item"
|
||||
@click="goArticle(item)"
|
||||
>
|
||||
<div class="article-thumb" v-if="item.image">
|
||||
<img :src="item.image" :alt="item.title" />
|
||||
</div>
|
||||
<div class="article-info">
|
||||
<h4 class="article-title">{{ item.title }}</h4>
|
||||
<p class="article-overview">{{ item.overview }}</p>
|
||||
<span class="article-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="research" tab="研究成果">
|
||||
<div class="tab-content">
|
||||
<div v-if="expert.researchResults && expert.researchResults.length">
|
||||
<div v-for="(result, idx) in expert.researchResults" :key="idx" class="research-item">
|
||||
<span class="research-year">{{ result.year }}</span>
|
||||
<div class="research-content">
|
||||
<h4>{{ result.title }}</h4>
|
||||
<p>{{ result.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else description="暂无研究成果" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const expertId = computed(() => route.params.id as string)
|
||||
|
||||
const loading = ref(true)
|
||||
const activeTab = ref('intro')
|
||||
const expert = ref<any>({})
|
||||
const expertArticles = ref<any[]>([])
|
||||
|
||||
useHead({
|
||||
title: computed(() => `${expert.value?.name || '专家详情'} - 决策咨询网`),
|
||||
})
|
||||
|
||||
async function loadExpert() {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 接入实际API
|
||||
expert.value = {
|
||||
id: expertId.value,
|
||||
name: '张教授',
|
||||
avatar: `https://picsum.photos/200/200?random=${expertId.value}`,
|
||||
title: '研究员/教授',
|
||||
organization: '广西社会科学院',
|
||||
researchArea: '区域经济、数字经济、产业政策',
|
||||
education: '经济学博士',
|
||||
joinTime: '2022-06-15',
|
||||
introduction: '张教授长期从事区域经济和产业政策研究，主持多项国家级和省部级科研项目，发表学术论文80余篇，著有《广西经济发展战略研究》等专著，是广西省级决策咨询委员会专家委员。',
|
||||
achievements: [
|
||||
'主持国家社科基金重点项目"面向东盟的广西产业协同发展研究"',
|
||||
'参与编制《广西"十四五"经济发展规划》',
|
||||
'提出"广西向海经济发展战略"并获省政府采纳',
|
||||
'为南宁、柳州、桂林等城市提供产业规划咨询服务',
|
||||
],
|
||||
honors: [
|
||||
'广西优秀专家',
|
||||
'省级社科研究成果一等奖',
|
||||
'国务院政府特殊津贴享受者',
|
||||
'广西"十百千"人才',
|
||||
],
|
||||
researchResults: [
|
||||
{
|
||||
year: '2024',
|
||||
title: '广西数字经济与传统产业融合研究',
|
||||
description: '发表于《经济学研究》，探讨数字技术赋能广西传统制造业转型升级路径。'
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: '面向东盟的广西跨境产业协同模式研究',
|
||||
description: '国家社科基金资助项目结项报告，构建"中国-东盟产业链合作新模式"理论框架。'
|
||||
},
|
||||
{
|
||||
year: '2022',
|
||||
title: '西部陆海新通道经济带产业布局优化',
|
||||
description: '广西社科规划重点课题，提出沿线城市产业差异化发展建议。'
|
||||
},
|
||||
]
|
||||
}
|
||||
expertArticles.value = [
|
||||
{
|
||||
id: 1,
|
||||
title: '张教授：关于广西产业升级的几点建议',
|
||||
overview: '从经济发展规律角度分析广西产业转型升级面临的机遇与挑战，提出针对性建议...',
|
||||
date: '2024-12-10',
|
||||
image: 'https://picsum.photos/120/80?random=1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '数字经济时代广西制造业高质量发展路径探析',
|
||||
overview: '以数字化转型为切入点，系统梳理广西制造业现状，提出差异化发展策略...',
|
||||
date: '2024-10-28',
|
||||
image: 'https://picsum.photos/120/80?random=2'
|
||||
}
|
||||
]
|
||||
} catch (e: any) {
|
||||
message.error('加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleConsult() {
|
||||
message.info('请先联系我们预约咨询服务')
|
||||
}
|
||||
|
||||
function goArticle(item: any) {
|
||||
router.push(`/article/${item.id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadExpert()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expert-detail-page {
|
||||
background: #f5f7fa;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.expert-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.expert-avatar-wrapper {
|
||||
margin: 0 auto 16px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.expert-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid #e8f0fe;
|
||||
}
|
||||
|
||||
.expert-avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1e3a5f, #3498db);
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expert-name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.expert-title-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 16px;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
font-size: 13px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-org {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.expert-info-list {
|
||||
text-align: left;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
width: 65px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.expert-content-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e3a5f;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #1e3a5f;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 15px;
|
||||
color: #4b5563;
|
||||
line-height: 2;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.achievement-list {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.achievement-list li {
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
line-height: 2;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.honors-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fef3c7;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
background: #f9fafb;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
background: #eff6ff;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 100px;
|
||||
height: 68px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.article-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.article-overview {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.research-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.research-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.research-year {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: #1e3a5f;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.research-content h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.research-content p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.mt-6 { margin-top: 24px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user