InnoResCompMS/src/page/edu-industry/transformation/index.vue

<template>
  <div class="transformation-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/edu-industry' }">产教融合</el-breadcrumb-item>
            <el-breadcrumb-item>产学研成果转化加速器</el-breadcrumb-item>
          </el-breadcrumb>
          <h1 class="page-title">
            <el-icon class="title-icon"><TrendCharts /></el-icon>
            产学研成果转化加速器
          </h1>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="handleAddAchievement">
            <el-icon><Plus /></el-icon>
            添加成果
          </el-button>
        </div>
      </div>
    </div>

    <!-- 功能导航标签 -->
    <div class="function-tabs">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="技术成熟度评估仪表盘" name="assessment">
          <div class="tab-content">
            <!-- 技术成熟度评估 -->
            <div class="assessment-dashboard">
              <el-row :gutter="24">
                <!-- 评估项目列表 -->
                <el-col :span="8">
                  <div class="assessment-list">
                    <div class="section-header">
                      <h3>待评估项目</h3>
                      <el-button type="primary" size="small" @click="handleNewAssessment">
                        <el-icon><Plus /></el-icon>
                        新建评估
                      </el-button>
                    </div>
                    <div class="project-list">
                      <div
                        v-for="project in assessmentProjects"
                        :key="project.id"
                        class="project-item"
                        :class="{ active: selectedProject?.id === project.id }"
                        @click="selectProject(project)"
                      >
                        <div class="project-info">
                          <h4>{{ project.name }}</h4>
                          <p>{{ project.description }}</p>
                          <div class="project-meta">
                            <el-tag :type="getStatusType(project.status)" size="small">
                              {{ project.status }}
                            </el-tag>
                            <span class="project-date">{{ project.createDate }}</span>
                          </div>
                        </div>
                        <div class="project-score">
                          <el-progress
                            type="circle"
                            :percentage="project.maturityScore"
                            :width="50"
                            :stroke-width="6"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 评估详情 -->
                <el-col :span="16">
                  <div class="assessment-detail" v-if="selectedProject">
                    <div class="detail-header">
                      <h3>{{ selectedProject.name }} - 技术成熟度评估</h3>
                      <el-button type="primary" @click="handleStartAssessment">开始评估</el-button>
                    </div>

                    <!-- 评估维度 -->
                    <div class="assessment-dimensions">
                      <el-row :gutter="16">
                        <el-col :span="12">
                          <div class="dimension-card">
                            <h4>技术可行性</h4>
                            <div class="dimension-content">
                              <el-rate
                                v-model="assessmentScores.feasibility"
                                :max="10"
                                show-score
                                text-color="#ff9900"
                              />
                              <div class="score-desc">
                                <p>评估技术实现的可行性和成熟度</p>
                              </div>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="dimension-card">
                            <h4>市场潜力</h4>
                            <div class="dimension-content">
                              <el-rate
                                v-model="assessmentScores.market"
                                :max="10"
                                show-score
                                text-color="#ff9900"
                              />
                              <div class="score-desc">
                                <p>评估市场需求和商业化前景</p>
                              </div>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="dimension-card">
                            <h4>团队能力</h4>
                            <div class="dimension-content">
                              <el-rate
                                v-model="assessmentScores.team"
                                :max="10"
                                show-score
                                text-color="#ff9900"
                              />
                              <div class="score-desc">
                                <p>评估研发团队的技术实力</p>
                              </div>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="dimension-card">
                            <h4>资源配置</h4>
                            <div class="dimension-content">
                              <el-rate
                                v-model="assessmentScores.resources"
                                :max="10"
                                show-score
                                text-color="#ff9900"
                              />
                              <div class="score-desc">
                                <p>评估资金、设备等资源配置</p>
                              </div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>

                    <!-- 综合评估结果 -->
                    <div class="assessment-result">
                      <h4>综合评估结果</h4>
                      <div class="result-content">
                        <div class="result-chart">
                          <el-progress
                            type="circle"
                            :percentage="overallScore"
                            :width="120"
                            :stroke-width="8"
                          >
                            <template #default="{ percentage }">
                              <span class="percentage-value">{{ percentage }}%</span>
                              <span class="percentage-label">综合得分</span>
                            </template>
                          </el-progress>
                        </div>
                        <div class="result-analysis">
                          <div class="analysis-item">
                            <span class="label">成熟度等级：</span>
                            <el-tag :type="getMaturityType(overallScore)">
                              {{ getMaturityLevel(overallScore) }}
                            </el-tag>
                          </div>
                          <div class="analysis-item">
                            <span class="label">转化建议：</span>
                            <span>{{ getTransformationAdvice(overallScore) }}</span>
                          </div>
                          <div class="analysis-item">
                            <span class="label">风险评估：</span>
                            <span>{{ getRiskAssessment(overallScore) }}</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 专家评价 -->
                    <div class="expert-reviews">
                      <h4>专家评价</h4>
                      <div class="review-list">
                        <div
                          v-for="review in expertReviews"
                          :key="review.id"
                          class="review-item"
                        >
                          <div class="reviewer-info">
                            <el-avatar :src="review.avatar" :size="40" />
                            <div class="reviewer-details">
                              <h5>{{ review.name }}</h5>
                              <p>{{ review.title }}</p>
                            </div>
                          </div>
                          <div class="review-content">
                            <el-rate v-model="review.score" disabled show-score />
                            <p>{{ review.comment }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-selection">
                    <el-empty description="请选择一个项目进行评估" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="路演匹配系统" name="roadshow">
          <div class="tab-content">
            <!-- 路演匹配系统 -->
            <div class="roadshow-system">
              <el-row :gutter="24">
                <!-- 路演项目 -->
                <el-col :span="12">
                  <div class="roadshow-projects">
                    <div class="section-header">
                      <h3>路演项目</h3>
                      <el-button type="primary" size="small" @click="handleCreateRoadshow">
                        <el-icon><Plus /></el-icon>
                        创建路演
                      </el-button>
                    </div>
                    <div class="project-cards">
                      <div
                        v-for="project in roadshowProjects"
                        :key="project.id"
                        class="roadshow-card"
                      >
                        <div class="card-header">
                          <h4>{{ project.name }}</h4>
                          <el-tag :type="getRoadshowStatusType(project.status)">
                            {{ project.status }}
                          </el-tag>
                        </div>
                        <div class="card-content">
                          <p>{{ project.description }}</p>
                          <div class="project-tags">
                            <el-tag
                              v-for="tag in project.tags"
                              :key="tag"
                              size="small"
                              type="info"
                            >
                              {{ tag }}
                            </el-tag>
                          </div>
                          <div class="project-stats">
                            <div class="stat-item">
                              <span class="label">融资需求：</span>
                              <span class="value">{{ project.funding }}万元</span>
                            </div>
                            <div class="stat-item">
                              <span class="label">路演时间：</span>
                              <span class="value">{{ project.roadshowDate }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="card-actions">
                          <el-button size="small" @click="handleViewRoadshow(project)">
                            查看详情
                          </el-button>
                          <el-button size="small" type="primary" @click="handleMatchInvestors(project)">
                            匹配投资方
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 投资机构匹配 -->
                <el-col :span="12">
                  <div class="investor-matching">
                    <div class="section-header">
                      <h3>投资机构匹配</h3>
                      <el-button type="primary" size="small" @click="handleRefreshMatching">
                        <el-icon><Refresh /></el-icon>
                        刷新匹配
                      </el-button>
                    </div>
                    <div class="matching-results">
                      <div
                        v-for="investor in matchedInvestors"
                        :key="investor.id"
                        class="investor-card"
                      >
                        <div class="investor-header">
                          <div class="investor-info">
                            <h4>{{ investor.name }}</h4>
                            <p>{{ investor.type }}</p>
                          </div>
                          <div class="match-score">
                            <el-progress
                              type="circle"
                              :percentage="Math.round(investor.matchScore * 100)"
                              :width="60"
                            />
                          </div>
                        </div>
                        <div class="investor-details">
                          <div class="detail-item">
                            <span class="label">投资领域：</span>
                            <span>{{ investor.fields.join(', ') }}</span>
                          </div>
                          <div class="detail-item">
                            <span class="label">投资规模：</span>
                            <span>{{ investor.investmentRange }}</span>
                          </div>
                          <div class="detail-item">
                            <span class="label">投资阶段：</span>
                            <span>{{ investor.stage }}</span>
                          </div>
                        </div>
                        <div class="investor-actions">
                          <el-button size="small" @click="handleViewInvestor(investor)">
                            查看详情
                          </el-button>
                          <el-button size="small" type="primary" @click="handleContactInvestor(investor)">
                            发起联系
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>

              <!-- 路演日程 -->
              <div class="roadshow-schedule">
                <h3>路演日程</h3>
                <el-calendar v-model="calendarValue">
                  <template #date-cell="{ data }">
                    <div class="calendar-cell">
                      <p>{{ data.day.split('-').slice(2).join('-') }}</p>
                      <div v-if="getRoadshowEvents(data.day).length > 0" class="events">
                        <div
                          v-for="event in getRoadshowEvents(data.day)"
                          :key="event.id"
                          class="event-item"
                        >
                          {{ event.title }}
                        </div>
                      </div>
                    </div>
                  </template>
                </el-calendar>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="成果展示平台" name="showcase">
          <div class="tab-content">
            <!-- 成果展示平台 -->
            <div class="showcase-platform">
              <div class="showcase-header">
                <h3>成果展示平台</h3>
                <div class="header-actions">
                  <el-input
                    v-model="searchKeyword"
                    placeholder="搜索成果"
                    style="width: 200px; margin-right: 12px;"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                  <el-button type="primary" @click="handleUploadAchievement">
                    <el-icon><Upload /></el-icon>
                    上传成果
                  </el-button>
                </div>
              </div>

              <!-- 成果展示网格 -->
              <div class="achievement-grid">
                <el-row :gutter="20">
                  <el-col
                    v-for="achievement in achievements"
                    :key="achievement.id"
                    :span="8"
                  >
                    <div class="achievement-card">
                      <div class="card-media">
                        <img :src="achievement.thumbnail" :alt="achievement.title" />
                        <div class="media-overlay">
                          <el-button type="primary" circle @click="handlePreview(achievement)">
                            <el-icon><View /></el-icon>
                          </el-button>
                        </div>
                      </div>
                      <div class="card-content">
                        <h4>{{ achievement.title }}</h4>
                        <p>{{ achievement.description }}</p>
                        <div class="achievement-meta">
                          <div class="meta-item">
                            <el-icon><User /></el-icon>
                            <span>{{ achievement.author }}</span>
                          </div>
                          <div class="meta-item">
                            <el-icon><Calendar /></el-icon>
                            <span>{{ achievement.publishDate }}</span>
                          </div>
                        </div>
                        <div class="achievement-tags">
                          <el-tag
                            v-for="tag in achievement.tags"
                            :key="tag"
                            size="small"
                            type="success"
                          >
                            {{ tag }}
                          </el-tag>
                        </div>
                      </div>
                      <div class="card-actions">
                        <el-button size="small" @click="handleViewAchievement(achievement)">
                          查看详情
                        </el-button>
                        <el-button size="small" type="primary" @click="handleDownload(achievement)">
                          下载资料
                        </el-button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  TrendCharts,
  Plus,
  Refresh,
  Search,
  Upload,
  View,
  User,
  Calendar
} from '@element-plus/icons-vue'

// 活动标签
const activeTab = ref('assessment')

// 选中的项目
const selectedProject = ref(null)

// 评估项目数据
const assessmentProjects = ref([
  {
    id: 1,
    name: '智能语音识别系统',
    description: '基于深度学习的多语言语音识别技术',
    status: '评估中',
    maturityScore: 75,
    createDate: '2024-01-15'
  },
  {
    id: 2,
    name: '区块链供应链管理',
    description: '去中心化的供应链追溯与管理平台',
    status: '待评估',
    maturityScore: 60,
    createDate: '2024-01-20'
  },
  {
    id: 3,
    name: '新能源电池技术',
    description: '高能量密度锂电池技术研发',
    status: '已完成',
    maturityScore: 85,
    createDate: '2024-01-10'
  }
])

// 评估分数
const assessmentScores = ref({
  feasibility: 7,
  market: 8,
  team: 6,
  resources: 7
})

// 综合得分
const overallScore = computed(() => {
  const scores = assessmentScores.value
  return Math.round((scores.feasibility + scores.market + scores.team + scores.resources) * 2.5)
})

// 专家评价
const expertReviews = ref([
  {
    id: 1,
    name: '张教授',
    title: '人工智能专家',
    avatar: '/avatars/expert1.jpg',
    score: 4,
    comment: '技术方案具有创新性，但需要进一步验证市场需求。'
  },
  {
    id: 2,
    name: '李博士',
    title: '产业化专家',
    avatar: '/avatars/expert2.jpg',
    score: 5,
    comment: '商业化前景良好，建议加强团队建设。'
  }
])

// 路演项目
const roadshowProjects = ref([
  {
    id: 1,
    name: '智能医疗诊断系统',
    description: '基于AI的医学影像诊断辅助系统',
    status: '路演中',
    tags: ['人工智能', '医疗健康', '图像识别'],
    funding: 500,
    roadshowDate: '2024-02-15'
  },
  {
    id: 2,
    name: '绿色能源管理平台',
    description: '智能化的新能源发电管理系统',
    status: '准备中',
    tags: ['新能源', '物联网', '大数据'],
    funding: 800,
    roadshowDate: '2024-02-20'
  }
])

// 匹配的投资机构
const matchedInvestors = ref([
  {
    id: 1,
    name: '红杉资本',
    type: '风险投资',
    matchScore: 0.92,
    fields: ['人工智能', '医疗健康'],
    investmentRange: '1000万-5000万',
    stage: 'A轮-B轮'
  },
  {
    id: 2,
    name: '经纬中国',
    type: '创业投资',
    matchScore: 0.87,
    fields: ['企业服务', '新能源'],
    investmentRange: '500万-2000万',
    stage: '天使轮-A轮'
  }
])

// 日历值
const calendarValue = ref(new Date())

// 搜索关键词
const searchKeyword = ref('')

// 成果展示数据
const achievements = ref([
  {
    id: 1,
    title: '智能制造控制系统',
    description: '工业4.0智能制造生产线控制系统',
    author: '王教授团队',
    publishDate: '2024-01-15',
    thumbnail: '/images/achievement1.jpg',
    tags: ['智能制造', '工业4.0', '自动化']
  },
  {
    id: 2,
    title: '环保材料研发成果',
    description: '可降解生物材料的研发与应用',
    author: '李博士团队',
    publishDate: '2024-01-20',
    thumbnail: '/images/achievement2.jpg',
    tags: ['环保材料', '生物技术', '可持续发展']
  },
  {
    id: 3,
    title: '金融科技创新平台',
    description: '基于区块链的数字金融服务平台',
    author: '张副教授团队',
    publishDate: '2024-01-25',
    thumbnail: '/images/achievement3.jpg',
    tags: ['金融科技', '区块链', '数字货币']
  }
])

// 方法
const handleTabChange = (tabName: string) => {
  console.log('切换标签:', tabName)
}

const handleAddAchievement = () => {
  console.log('添加成果')
}

const selectProject = (project: any) => {
  selectedProject.value = project
}

const getStatusType = (status: string) => {
  const typeMap = {
    '评估中': 'warning',
    '待评估': 'info',
    '已完成': 'success'
  }
  return typeMap[status] || 'info'
}

const getMaturityType = (score: number) => {
  if (score >= 80) return 'success'
  if (score >= 60) return 'warning'
  return 'danger'
}

const getMaturityLevel = (score: number) => {
  if (score >= 80) return '高成熟度'
  if (score >= 60) return '中等成熟度'
  return '低成熟度'
}

const getTransformationAdvice = (score: number) => {
  if (score >= 80) return '建议立即启动产业化进程'
  if (score >= 60) return '需要进一步完善技术方案'
  return '建议继续研发，暂不适合转化'
}

const getRiskAssessment = (score: number) => {
  if (score >= 80) return '低风险'
  if (score >= 60) return '中等风险'
  return '高风险'
}

const getRoadshowStatusType = (status: string) => {
  const typeMap = {
    '路演中': 'success',
    '准备中': 'warning',
    '已结束': 'info'
  }
  return typeMap[status] || 'info'
}

const getRoadshowEvents = (date: string) => {
  // 模拟路演事件数据
  const events = {
    '2024-02-15': [{ id: 1, title: '智能医疗诊断系统路演' }],
    '2024-02-20': [{ id: 2, title: '绿色能源管理平台路演' }]
  }
  return events[date] || []
}

const handleNewAssessment = () => {
  console.log('新建评估')
}

const handleStartAssessment = () => {
  console.log('开始评估')
}

const handleCreateRoadshow = () => {
  console.log('创建路演')
}

const handleViewRoadshow = (project: any) => {
  console.log('查看路演:', project)
}

const handleMatchInvestors = (project: any) => {
  console.log('匹配投资方:', project)
}

const handleRefreshMatching = () => {
  console.log('刷新匹配')
}

const handleViewInvestor = (investor: any) => {
  console.log('查看投资方:', investor)
}

const handleContactInvestor = (investor: any) => {
  console.log('联系投资方:', investor)
}

const handleUploadAchievement = () => {
  console.log('上传成果')
}

const handlePreview = (achievement: any) => {
  console.log('预览成果:', achievement)
}

const handleViewAchievement = (achievement: any) => {
  console.log('查看成果详情:', achievement)
}

const handleDownload = (achievement: any) => {
  console.log('下载成果资料:', achievement)
}

onMounted(() => {
  // 默认选择第一个项目
  if (assessmentProjects.value.length > 0) {
    selectedProject.value = assessmentProjects.value[0]
  }
  console.log('产学研成果转化加速器已加载')
})
</script>

<style scoped>
.transformation-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 8px 0 0 0;
}

.title-icon {
  margin-right: 8px;
  color: #f093fb;
}

/* 功能标签 */
.function-tabs {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tab-content {
  padding-top: 20px;
}

/* 评估仪表盘 */
.assessment-list {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  height: 600px;
  overflow-y: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
}

.project-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-item:hover,
.project-item.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #f093fb;
}

.project-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.project-info p {
  margin: 0 0 12px 0;
  color: #7f8c8d;
  font-size: 14px;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-date {
  font-size: 12px;
  color: #95a5a6;
}

.assessment-detail {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  height: 600px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.detail-header h3 {
  margin: 0;
  color: #2c3e50;
}

.assessment-dimensions {
  margin-bottom: 24px;
}

.dimension-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.dimension-card h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
}

.dimension-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-desc p {
  margin: 0;
  font-size: 12px;
  color: #7f8c8d;
}

.assessment-result {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.assessment-result h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.result-content {
  display: flex;
  gap: 24px;
  align-items: center;
}

.percentage-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
}

.percentage-label {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
}

.result-analysis {
  flex: 1;
}

.analysis-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.analysis-item .label {
  font-weight: 600;
  margin-right: 8px;
  min-width: 80px;
}

.expert-reviews {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.expert-reviews h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.review-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.reviewer-info {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 200px;
}

.reviewer-details h5 {
  margin: 0;
  color: #2c3e50;
}

.reviewer-details p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #7f8c8d;
}

.review-content {
  flex: 1;
}

.review-content p {
  margin: 8px 0 0 0;
  color: #5a6c7d;
}

.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}

/* 路演系统 */
.roadshow-projects,
.investor-matching {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  height: 500px;
  overflow-y: auto;
}

.roadshow-card,
.investor-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header,
.investor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-header h4,
.investor-info h4 {
  margin: 0;
  color: #2c3e50;
}

.card-content p,
.investor-info p {
  margin: 4px 0 12px 0;
  color: #7f8c8d;
  font-size: 14px;
}

.project-tags {
  margin-bottom: 12px;
}

.project-tags .el-tag {
  margin-right: 8px;
}

.project-stats,
.investor-details {
  margin-bottom: 12px;
}

.stat-item,
.detail-item {
  display: flex;
  margin-bottom: 4px;
}

.stat-item .label,
.detail-item .label {
  font-weight: 600;
  margin-right: 8px;
  min-width: 80px;
}

.card-actions,
.investor-actions {
  text-align: right;
}

.roadshow-schedule {
  margin-top: 24px;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.roadshow-schedule h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.calendar-cell {
  height: 100%;
  padding: 4px;
}

.calendar-cell p {
  margin: 0;
  text-align: center;
}

.events {
  margin-top: 4px;
}

.event-item {
  background: #f093fb;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 2px;
}

/* 成果展示 */
.showcase-platform {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.showcase-header h3 {
  margin: 0;
  color: #2c3e50;
}

.header-actions {
  display: flex;
  align-items: center;
}

.achievement-grid {
  margin-top: 20px;
}

.achievement-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.achievement-card:hover {
  transform: translateY(-4px);
}

.card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.achievement-card:hover .media-overlay {
  opacity: 1;
}

.card-content {
  padding: 16px;
}

.card-content h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.card-content p {
  margin: 0 0 12px 0;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.5;
}

.achievement-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #95a5a6;
}

.achievement-tags {
  margin-bottom: 12px;
}

.achievement-tags .el-tag {
  margin-right: 8px;
}

.card-actions {
  padding: 0 16px 16px;
  text-align: right;
}
</style>