赵忠林
56aea4ad86
- 采用左右分栏布局，左侧新增图标导航 - 全新设计顶部 Banner，提升视觉效果 - 添加学会简介数据亮点和主要职能展示 - 新增组织机构图、主要领导及专家委员会成员展示 - 引入学会章程章节分明条目展示 - 丰富咨询服务内容，新增服务项目卡片和联系方式 - “加入我们”板块支持企业与个人会员申请详情说明 - 支持资料下载并优化排版与交互体验 - 增强响应式支持，保证移动端体验一致 - 页面样式大幅调整，提升整体美观与可读性
478 lines
12 KiB
Vue
478 lines
12 KiB
Vue
<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>
|