From 2c325e167553deca7e41ef6697503a00f54abec7 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Wed, 29 Oct 2025 17:28:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AE=8C=E6=88=90web?=
 =?UTF-8?q?=E7=9A=84=E5=AD=A6=E6=9C=AF=E4=BA=A4=E6=B5=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/AcademicExchange.vue | 1125 +++++++++++++++++++---------
 1 file changed, 768 insertions(+), 357 deletions(-)

diff --git a/web/src/views/AcademicExchange.vue b/web/src/views/AcademicExchange.vue
index 36d3bd21..da591c3a 100644
--- a/web/src/views/AcademicExchange.vue
+++ b/web/src/views/AcademicExchange.vue
@@ -1,448 +1,859 @@
 <template>
-  <div class="conference-report-page">
-    <!-- 大会报道部分 -->
-    <div class="title-section">
-      <h1>大会报道</h1>
-      <p>Conference Report</p>
-      <a href="#" class="more-link">More</a>
+  <div class="conference-page">
+    <!-- 全局加载状态 -->
+    <el-loading
+      v-if="loading"
+      fullscreen
+      text="正在加载会议信息..."
+      background="rgba(255, 255, 255, 0.8)"
+    />
+
+    <!-- 全局错误提示 -->
+    <div v-if="error" class="error-message">
+      {{ error }}
+      <el-button type="primary" size="small" @click="fetchMeetings">重新加载</el-button>
     </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>
+    <template v-if="!loading && !error && currentMeeting">
+      <!-- 锚点导航 -->
+      <el-anchor
+        :offset="100"
+        direction="horizontal"
+        class="conference-anchor"
+        @click.prevent="handleAnchorClick"
+      >
+        <el-anchor-link href="#conference" title="国际会议" />
+        <el-anchor-link href="#report" title="大会报道" />
+        <el-anchor-link href="#schedule" title="会议日程" />
+        <el-anchor-link href="#speakers" title="演讲嘉宾" />
+        <el-anchor-link href="#review" title="往届回顾" />
+      </el-anchor>
 
-      <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="header-banner"
+        id="conference"
+        ref="conferenceRef"
+        :style="headerBackgroundStyle"
+      >
+        <div class="banner-mask"></div>
+        <div class="banner-content">
+          <div class="conference-info">
+            <div class="hdic-logo">{{ currentMeeting.theme }}</div>
+            <h1 v-html="currentMeeting.subtitle"></h1>
+            <div class="conference-meta">
+              <div class="meta-item">
+                <span class="meta-label">时间 / TIME</span>
+                <span class="meta-value">{{ formatMeetingTime(currentMeeting.start_time, currentMeeting.end_time) }}</span>
+              </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>
+
+      <!-- 大会报道 -->
+      <section class="report-section" id="report" ref="reportRef">
+        <div class="section-header">
+          <h2>大会报道</h2>
+          <p>Conference Report</p>
+          <a href="javascript:void(0)" class="more-link">More</a>
+        </div>
+
+        <div class="report-content">
+          <div class="report-image">
+            <img :src="currentMeeting.cover_url" alt="会议合影" class="group-photo">
+            <p class="image-caption">{{ currentMeeting.theme }}</p>
+            <p class="image-subcaption">{{ currentMeeting.subtitle }}</p>
+          </div>
+
+          <div class="report-intro">
+            <h3>会议简介</h3>
+            <div class="intro-text" v-html="currentMeeting.intro"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 会议日程 -->
+      <section class="schedule-section" id="schedule" ref="scheduleRef">
+        <div class="section-header">
+          <h2>会议日程</h2>
+          <p>Meeting Schedule</p>
+          <a href="javascript:void(0)" class="more-link">More</a>
+        </div>
+
+        <div class="schedule-image-container">
+          <img
+            :src="currentMeeting.schedule_image_url"
+            alt="会议议程安排"
+            class="schedule-image"
+            loading="lazy"
+          >
+          <p class="schedule-caption">
+            点击图片可查看高清议程 | Click to view high-resolution schedule
+          </p>
+        </div>
+      </section>
+
+      <!-- 演讲嘉宾（动态获取） -->
+      <section class="speakers-section" id="speakers" ref="speakersRef">
+        <div class="section-header">
+          <h2>演讲嘉宾</h2>
+          <p>Speakers</p>
+          <a href="javascript:void(0)" class="more-link">More</a>
+        </div>
+
+        <!-- 嘉宾加载状态 -->
+        <div v-if="speakersLoading" class="speakers-loading">
+          <el-loading text="加载嘉宾中..." />
+        </div>
+
+        <!-- 嘉宾加载错误 -->
+        <div v-else-if="speakersError" class="speakers-error">
+          {{ speakersError }}
+          <el-button type="text" @click="fetchSpeakers(currentMeeting.id)">重试</el-button>
+        </div>
+
+        <!-- 无嘉宾数据 -->
+        <div v-else-if="speakersList.length === 0" class="no-speakers">
+          暂无演讲嘉宾信息
+        </div>
+
+        <!-- 嘉宾列表 -->
+        <div v-else class="speakers-grid">
+          <div
+            class="speaker-card"
+            v-for="(speaker, index) in speakersList"
+            :key="speaker.id"
+            @click="showSpeakerInfo(speaker)"
+          >
+            <div class="speaker-photo">
+              <img :src="speaker.avatar" :alt="speaker.name" class="speaker-avatar">
+            </div>
+            <div class="speaker-name">{{ speaker.name }}</div>
+            <div class="speaker-title">{{ speaker.title }}</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 往届回顾（第2-4个会议） -->
+      <section class="review-section" id="review" ref="reviewRef">
+        <div class="section-header">
+          <h2>往届回顾</h2>
+          <p>Previous Review</p>
+          <a href="javascript:void(0)" class="more-link">More</a>
+        </div>
+
+        <div class="review-content">
+          <div
+            class="review-card"
+            v-for="(meeting, index) in pastMeetings"
+            :key="meeting.id"
+          >
+            <img :src="meeting.cover_url" :alt="meeting.theme" class="review-image">
+            <div class="review-info">
+              <h4>{{ meeting.theme }}</h4>
+              <p>{{meeting.subtitle}}}</p>
+              <div class="review-desc" >{{ formatMeetingTime(meeting.start_time, meeting.end_time) }}</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 嘉宾详情弹窗 -->
+      <el-dialog
+        v-model="dialogVisible"
+        :title="currentSpeaker.name || '嘉宾详情'"
+        width="600px"
+        :before-close="handleClose"
+      >
+        <div class="speaker-detail">
+          <div class="detail-avatar">
+            <img :src="currentSpeaker.avatar" :alt="currentSpeaker.name" class="avatar-img">
+          </div>
+          <div class="detail-info">
+            <h3 class="detail-name">{{ currentSpeaker.name }}</h3>
+            <div class="detail-title">{{ currentSpeaker.title }}</div>
+            <div class="detail-intro">
+              <h4>简介</h4>
+              <p>{{ currentSpeaker.intro || '暂无详细介绍' }}</p>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </template>
   </div>
 </template>
 
-<script setup>
-// 会议数据
-const meetings = [
-  {
-    date: "10月11/2025",
-    title: "制度型开放助推经济高质量发展",
-    desc: "探索健康设计的新路径，引领知识创新的新范式"
-  },
-  {
-    date: "10月15/2025",
-    title: "制度型开放助推经济高质量发展",
-    desc: "探索健康设计的新路径，引领知识创新的新范式"
-  },
-  {
-    date: "10月20/2025",
-    title: "制度型开放助推经济高质量发展",
-    desc: "探索健康设计的新路径，引领知识创新的新范式"
-  }
-];
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue'
+import { ElAnchor, ElAnchorLink, ElDialog, ElLoading, ElButton } from 'element-plus'
+import axios from 'axios'
 
-// 日程数据
-const scheduleDays = [
-  {
-    date: "10月11/2025",
-    title: "制度型开放助推经济高质量发展",
-    description: "探索健康设计的新路径，引领知识创新的新范式"
-  },
-  {
-    date: "10月15/2025",
-    title: "制度型开放助推经济高质量发展",
-    description: "探索健康设计的新路径，引领知识创新的新范式"
-  },
-  {
-    date: "10月20/2025",
-    title: "制度型开放助推经济高质量发展",
-    description: "探索健康设计的新路径，引领知识创新的新范式"
-  }
-];
+// 基础配置 - 固定baseurl
+const baseUrl = 'http://localhost:8080/api'
 
-// 演讲嘉宾数据
-const speakers = [
-  { name: "张明", title: "经济学教授" },
-  { name: "李华", title: "研究院院长" },
-  { name: "王静", title: "企业总裁" },
-  { name: "赵伟", title: "政策研究员" },
-  { name: "陈丽", title: "学术主任" },
-  { name: "刘强", title: "行业专家" },
-  { name: "周敏", title: "首席科学家" },
-  { name: "吴刚", title: "经济顾问" },
-  { name: "郑雪", title: "研究所主任" },
-  { name: "孙杰", title: "战略总监" }
-];
+// 会议数据状态
+const meetings = ref([])
+const currentMeeting = ref(null) // 当前（最新）会议
+const pastMeetings = ref([]) // 往届会议（第2-4个）
+const loading = ref(true) // 全局加载状态
+const error = ref(null) // 全局错误信息
+
+// 演讲嘉宾状态
+const speakersList = ref([]) // 嘉宾列表
+const speakersLoading = ref(false) // 嘉宾加载状态
+const speakersError = ref(null) // 嘉宾加载错误
+
+// 元素引用
+const conferenceRef = ref<HTMLElement>()
+const reportRef = ref<HTMLElement>()
+const scheduleRef = ref<HTMLElement>()
+const speakersRef = ref<HTMLElement>()
+const reviewRef = ref<HTMLElement>()
+
+// 弹窗控制
+const dialogVisible = ref(false)
+const currentSpeaker = ref({
+  id: 0,
+  meeting_id: 0,
+  name: '',
+  title: '',
+  avatar: '',
+  intro: '',
+  sort: 0,
+  is_delete: 0
+})
+
+// 头部背景样式（使用当前会议封面图）
+const headerBackgroundStyle = computed(() => ({
+  backgroundImage: currentMeeting.value
+    ? `url(${currentMeeting.value.cover_url})`
+    : 'url(https://picsum.photos/id/1059/1920/600)'
+}))
+
+// 格式化日期（用于创建时间）
+const formatDate = (dateString: string) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 格式化会议时间范围（开始-结束）
+const formatMeetingTime = (startTime: string, endTime: string) => {
+  if (!startTime || !endTime) return ''
+
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+
+  // 同一天显示时间范围，不同天显示完整日期范围
+  if (start.toDateString() === end.toDateString()) {
+    return `${start.toLocaleDateString('zh-CN')} ${start.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - ${end.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
+  }
+
+  return `${start.toLocaleString('zh-CN')} - ${end.toLocaleString('zh-CN')}`
+}
+
+// 获取会议列表
+const fetchMeetings = async () => {
+  try {
+    loading.value = true
+    error.value = null
+
+    const response = await axios.post(`${baseUrl}/meetings/list`, {
+      page: 1,
+      page_size: 10
+    })
+
+    if (response.data.message === '查询成功' && response.data.meetings && response.data.meetings.length > 0) {
+      // 按创建时间排序（最新在前）
+      const sortedMeetings = [...response.data.meetings].sort(
+        (a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime()
+      )
+
+      meetings.value = sortedMeetings
+      currentMeeting.value = sortedMeetings[0] // 最新会议
+      pastMeetings.value = sortedMeetings.slice(1, 4) // 第2-4个会议
+
+      // 自动获取当前会议的嘉宾
+      if (currentMeeting.value.id) {
+        await fetchSpeakers(currentMeeting.value.id)
+      }
+    } else {
+      error.value = '未获取到会议数据'
+    }
+  } catch (err) {
+    console.error('获取会议列表失败:', err)
+    error.value = '获取会议信息失败，请稍后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 根据会议ID获取演讲嘉宾
+const fetchSpeakers = async (meetingId: number) => {
+  try {
+    speakersLoading.value = true
+    speakersError.value = null
+    speakersList.value = []
+
+    // 发送POST请求获取嘉宾列表
+    const response = await axios.post(`${baseUrl}/speakers/meetingspeakers`, {
+      meetingId, // 当前会议ID
+      page: 1,
+      page_size: 100
+    })
+
+    if (response.data.message.includes('成功') && Array.isArray(response.data.speakers)) {
+      // 按sort字段排序（升序）
+      speakersList.value = [...response.data.speakers].sort((a, b) => a.sort - b.sort)
+    } else {
+      speakersError.value = '未获取到演讲嘉宾数据'
+    }
+  } catch (err) {
+    console.error('获取演讲嘉宾失败:', err)
+    speakersError.value = '获取演讲嘉宾失败，请重试'
+  } finally {
+    speakersLoading.value = false
+  }
+}
+
+// 锚点点击滚动
+const handleAnchorClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  const anchorLink = target.closest('.el-anchor-link')
+  if (!anchorLink) return
+
+  const href = anchorLink.getAttribute('href')
+  if (!href) return
+
+  const sectionId = href.slice(1)
+  const sectionRefs = {
+    conference: conferenceRef,
+    report: reportRef,
+    schedule: scheduleRef,
+    speakers: speakersRef,
+    review: reviewRef
+  }
+
+  const sectionRef = sectionRefs[sectionId as keyof typeof sectionRefs]
+  if (sectionRef?.value) {
+    window.scrollTo({
+      top: sectionRef.value.offsetTop - 100,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 显示嘉宾详情
+const showSpeakerInfo = (speaker: any) => {
+  currentSpeaker.value = speaker
+  dialogVisible.value = true
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false
+}
+
+// 初始化加载会议数据
+onMounted(() => {
+  fetchMeetings()
+})
 </script>
 
 <style scoped>
-/* 原有样式保持不变 */
-.conference-report-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
+/* 基础样式 */
+.conference-page {
   font-family: "Helvetica Neue", Arial, sans-serif;
+  color: #333;
+  line-height: 1.6;
+  position: relative;
 }
 
-.title-section {
+/* 错误提示样式 */
+.error-message {
+  text-align: center;
+  padding: 50px 20px;
+  color: #f56c6c;
+  font-size: 18px;
+}
+
+/* 嘉宾区域状态样式 */
+.speakers-loading, .speakers-error, .no-speakers {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.speakers-error {
+  color: #f56c6c;
+}
+
+.no-speakers {
+  color: #909399;
+}
+
+/* 锚点导航样式 */
+.conference-anchor {
+  background: rgba(255, 255, 255, 0.95);
+  padding: 20px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+:deep(.el-anchor) {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+:deep(.el-anchor-link__title) {
+  font-size: 16px;
+  color: #606266;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+:deep(.el-anchor-link__title:hover) {
+  color: #409eff;
+  background-color: #ecf5ff;
+}
+
+:deep(.el-anchor-link.is-active .el-anchor-link__title) {
+  color: #409eff;
+  font-weight: 600;
+}
+
+/* 头部横幅样式 */
+.header-banner {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: white;
+  padding: 60px 0 80px;
+  position: relative;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+}
+
+.banner-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 1;
+}
+
+.banner-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+  z-index: 2;
+}
+
+.hdic-logo {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+  font-weight: 300;
+  letter-spacing: 2px;
+  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
+}
+
+.conference-info h1 {
+  font-size: 2.5rem;
+  margin: 0 0 25px;
+  line-height: 1.3;
+  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
+  font-weight: 700;
+}
+
+.conference-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.meta-label {
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.meta-value {
+  font-size: 1rem;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+/* 通用区块标题样式 */
+.section-header {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px 30px;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-bottom: 40px;
+  border-bottom: 1px solid #eee;
 }
 
-.title-section h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin: 0;
+.section-header h2 {
+  font-size: 2.2rem;
   color: #2c3e50;
+  margin: 0;
 }
 
-.title-section p {
-  font-size: 1.2rem;
+.section-header p {
+  font-size: 1.1rem;
   color: #7f8c8d;
   margin: 5px 0 0;
 }
 
 .more-link {
-  color: #95a5a6;
+  color: #3498db;
   text-decoration: none;
-  font-size: 1rem;
-  transition: color 0.3s;
+  font-size: 0.95rem;
+  padding-bottom: 5px;
+  border-bottom: 1px dotted #3498db;
+  cursor: pointer;
 }
 
 .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;
+/* 大会报道样式 */
+.report-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
 }
 
-.schedule-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 40px;
+.report-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 50px;
+  margin-top: 40px;
 }
 
-.schedule-title h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin: 0;
-  color: #2c3e50;
+.report-image .group-photo {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
 }
 
-.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;
+.image-caption {
   font-weight: 600;
-  margin-right: 10px;
-}
-
-.day-date {
+  margin: 20px 0 8px;
+  color: #2c3e50;
   font-size: 1.2rem;
-  color: #2c3e50;
 }
 
-.time-slots {
-  margin-bottom: 15px;
-  color: #2c3e50;
-}
-
-.time-slots .time {
-  margin: 5px 0;
+.image-subcaption {
+  color: #7f8c8d;
   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;
+.report-intro h3 {
+  color: #2c3e50;
+  border-left: 4px solid #3498db;
+  padding-left: 15px;
+  margin-top: 0;
+  font-size: 1.4rem;
+}
+
+.intro-text {
+  text-align: justify;
+  line-height: 1.8;
+  color: #555;
+  font-size: 1.05rem;
+}
+
+.intro-text p {
+  margin: 0 0 16px;
+}
+
+/* 会议日程样式 */
+.schedule-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.schedule-image-container {
+  max-width: 1000px;
+  margin: 40px auto 0;
+  text-align: center;
+}
+
+.schedule-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+
+.schedule-image:hover {
+  transform: scale(1.02);
+}
+
+.schedule-caption {
+  margin-top: 20px;
+  color: #666;
+  font-size: 1rem;
+  font-style: italic;
+}
+
+/* 演讲嘉宾样式 */
+.speakers-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
 }
 
 .speakers-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 30px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 40px;
+  margin-top: 40px;
 }
 
 .speaker-card {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  border-radius: 12px;
+  transition: all 0.3s;
+  cursor: pointer;
 }
 
-.speaker-image {
-  background-color: #ccc;
-  height: 200px;
-  margin-bottom: 15px;
-  background-size: cover;
-  background-position: center;
+.speaker-card:hover {
+  background: #f8f9fa;
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
 }
 
-.speaker-info {
-  padding: 15px;
-  background-color: #f8f9fa;
+.speaker-photo {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 20px;
+  border: 4px solid #fff;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.speaker-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s;
+}
+
+.speaker-card:hover .speaker-avatar {
+  transform: scale(1.1);
 }
 
 .speaker-name {
-  font-size: 1rem;
+  font-weight: 600;
   color: #2c3e50;
-  margin: 0 0 5px;
-  text-align: center;
+  font-size: 1.1rem;
+  margin-bottom: 5px;
 }
 
 .speaker-title {
-  font-size: 0.85rem;
   color: #7f8c8d;
+  font-size: 0.9rem;
+}
+
+/* 往届回顾样式 */
+.review-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  background: #f8f9fa;
+  border-radius: 12px;
+}
+
+.review-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.review-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+  transition: transform 0.3s;
+}
+
+.review-card:hover {
+  transform: translateY(-5px);
+}
+
+.review-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.review-info {
+  padding: 20px;
+}
+
+.review-info h4 {
+  margin: 0 0 10px;
+  color: #2c3e50;
+  font-size: 1.2rem;
+}
+
+.review-date {
+  color: #409eff;
+  font-size: 0.9rem;
+  margin: 0 0 15px;
+  font-style: italic;
+}
+
+.review-desc {
+  color: #666;
   margin: 0;
-  text-align: center;
+  line-height: 1.6;
+  max-height: 100px;
+  overflow: hidden;
+}
+
+.review-desc p {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+/* 嘉宾详情弹窗样式 */
+.speaker-detail {
+  display: flex;
+  gap: 25px;
+  padding: 10px 0;
+}
+
+.detail-avatar {
+  flex-shrink: 0;
+}
+
+.avatar-img {
+  width: 160px;
+  height: 160px;
+  border-radius: 8px;
+  object-fit: cover;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.detail-info {
+  flex: 1;
+}
+
+.detail-name {
+  margin: 0 0 10px;
+  color: #2c3e50;
+  font-size: 1.5rem;
+}
+
+.detail-title {
+  color: #409eff;
+  margin: 0 0 20px;
+  font-size: 1.1rem;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #e4e7ed;
+}
+
+.detail-intro h4 {
+  margin: 0 0 15px;
+  color: #333;
+  font-size: 1.1rem;
+}
+
+.detail-intro p {
+  line-height: 1.8;
+  color: #666;
+  margin: 0;
+  text-align: justify;
 }
 
 /* 响应式适配 */
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
   .speakers-grid {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .report-content {
+    grid-template-columns: 1fr;
+  }
+  .speakers-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .content-grid, .speakers-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .header-banner {
+    min-height: 350px;
+    padding: 40px 0;
   }
-
-  .title-section, .schedule-title, .speakers-title {
+  .conference-info h1 {
+    font-size: 2rem;
+  }
+  .speakers-grid {
+    grid-template-columns: 1fr;
+  }
+  .speaker-detail {
     flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .more-link {
-    margin-top: 15px;
-  }
-
-  .card-image {
-    height: 200px;
-  }
-
-  .schedule-list {
-    margin-left: 0;
+    align-items: center;
+    text-align: center;
   }
 }
 
 @media (max-width: 480px) {
-  .speakers-grid {
-    grid-template-columns: 1fr;
+  .header-banner {
+    min-height: 300px;
+    padding: 30px 0;
+  }
+  .conference-info h1 {
+    font-size: 1.6rem;
+  }
+  .conference-meta {
+    flex-direction: column;
+    gap: 15px;
   }
 }
-</style>
\ No newline at end of file
+</style>