添加学术交流
This commit is contained in:
JACKYMYPERSON
@@ -1,5 +1,448 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="conference-report-page">
|
||||||
基地概况
|
<!-- 大会报道部分 -->
|
||||||
|
<div class="title-section">
|
||||||
|
<h1>大会报道</h1>
|
||||||
|
<p>Conference Report</p>
|
||||||
|
<a href="#" class="more-link">More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-grid">
|
||||||
|
<div class="left-card">
|
||||||
|
<div class="card-image"></div>
|
||||||
|
<div class="card-text">
|
||||||
|
<p class="category">艺术与文化</p>
|
||||||
|
<h3>制度型开放助推经济高质量发展制度型开放</h3>
|
||||||
|
<p class="desc">探索健康设计的新路径，引领知识创新的新范式</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-list">
|
||||||
|
<h2>即将举行的会议</h2>
|
||||||
|
<ul class="meeting-list">
|
||||||
|
<li v-for="meeting in meetings" :key="meeting.date">
|
||||||
|
<p class="date">{{ meeting.date }}</p>
|
||||||
|
<h3>{{ meeting.title }}</h3>
|
||||||
|
<p class="desc">{{ meeting.desc }}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="view-all">查看所有活动</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 会议日程部分 -->
|
||||||
|
<div class="schedule-section">
|
||||||
|
<div class="schedule-title">
|
||||||
|
<h2>会议日程</h2>
|
||||||
|
<p>Meeting Schedule</p>
|
||||||
|
<a href="#" class="more-link">More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="schedule-list">
|
||||||
|
<div v-for="(day, index) in scheduleDays" :key="index" class="day-item">
|
||||||
|
<div class="day-header">
|
||||||
|
<span class="day-number">第{{ index + 1 }}日</span>
|
||||||
|
<span class="day-date">{{ day.date }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="time-slots">
|
||||||
|
<p class="time">上午: 09: 00 - 11: 30</p>
|
||||||
|
<p class="time">下午: 13: 30 - 17: 30</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="session-title">{{ day.title }}</h3>
|
||||||
|
<p class="session-desc">{{ day.description }}</p>
|
||||||
|
|
||||||
|
<div class="divider" v-if="index < scheduleDays.length - 1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增演讲嘉宾部分 -->
|
||||||
|
<div class="speakers-section">
|
||||||
|
<div class="speakers-title">
|
||||||
|
<h2>演讲嘉宾</h2>
|
||||||
|
<p>Speakers</p>
|
||||||
|
<a href="#" class="more-link">More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="speakers-grid">
|
||||||
|
<div class="speaker-card" v-for="(speaker, index) in speakers" :key="index">
|
||||||
|
<div class="speaker-image"></div>
|
||||||
|
<div class="speaker-info">
|
||||||
|
<h3 class="speaker-name">{{ speaker.name }}</h3>
|
||||||
|
<p class="speaker-title">{{ speaker.title }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 会议数据
|
||||||
|
const meetings = [
|
||||||
|
{
|
||||||
|
date: "10月11/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
desc: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "10月15/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
desc: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "10月20/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
desc: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 日程数据
|
||||||
|
const scheduleDays = [
|
||||||
|
{
|
||||||
|
date: "10月11/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
description: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "10月15/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
description: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "10月20/2025",
|
||||||
|
title: "制度型开放助推经济高质量发展",
|
||||||
|
description: "探索健康设计的新路径，引领知识创新的新范式"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 演讲嘉宾数据
|
||||||
|
const speakers = [
|
||||||
|
{ name: "张明", title: "经济学教授" },
|
||||||
|
{ name: "李华", title: "研究院院长" },
|
||||||
|
{ name: "王静", title: "企业总裁" },
|
||||||
|
{ name: "赵伟", title: "政策研究员" },
|
||||||
|
{ name: "陈丽", title: "学术主任" },
|
||||||
|
{ name: "刘强", title: "行业专家" },
|
||||||
|
{ name: "周敏", title: "首席科学家" },
|
||||||
|
{ name: "吴刚", title: "经济顾问" },
|
||||||
|
{ name: "郑雪", title: "研究所主任" },
|
||||||
|
{ name: "孙杰", title: "战略总监" }
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 原有样式保持不变 */
|
||||||
|
.conference-report-page {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link {
|
||||||
|
color: #95a5a6;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link:hover {
|
||||||
|
color: #3498db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
background-color: #ccc;
|
||||||
|
height: 300px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text .category {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text h3 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text .desc {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-list h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list li {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list .date {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-list .desc {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all {
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all:hover {
|
||||||
|
color: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-section {
|
||||||
|
margin-top: 60px;
|
||||||
|
padding-top: 40px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-title h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-title p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-list {
|
||||||
|
max-width: 800px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-item {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-header {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-number {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #e74c3c;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-date {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-slots {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-slots .time {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-desc {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增演讲嘉宾样式 */
|
||||||
|
.speakers-section {
|
||||||
|
margin-top: 60px;
|
||||||
|
padding-top: 40px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speakers-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speakers-title h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speakers-title p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speakers-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-image {
|
||||||
|
background-color: #ccc;
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-info {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin: 0 0 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speaker-title {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式适配 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.speakers-grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.content-grid, .speakers-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section, .schedule-title, .speakers-title {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-list {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.speakers-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user