905 lines
26 KiB
Plaintext
905 lines
26 KiB
Plaintext
---
|
||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||
import Header from '../../../components/Header.astro';
|
||
import Footer from '../../../components/Footer.astro';
|
||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||
import Container from '../../../components/Container.astro';
|
||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||
---
|
||
|
||
<BaseLayout
|
||
title="AI-EDA论文报告 - Jiao77"
|
||
description="AI在EDA领域的前沿研究综述，分析人工智能技术在电子设计自动化中的应用现状与发展趋势"
|
||
type="report"
|
||
>
|
||
<Header />
|
||
|
||
<main class="report-main">
|
||
<div class="container mx-auto px-4">
|
||
<!-- 报告标题区域 -->
|
||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||
<div class="report-header">
|
||
<h1 class="report-title">AI在EDA领域的前沿研究</h1>
|
||
<p class="report-subtitle">人工智能技术在电子设计自动化中的创新应用与发展趋势分析</p>
|
||
<div class="report-meta">
|
||
<span class="report-date">研究综述</span>
|
||
<span class="report-type">前沿技术</span>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</AnimatedElement>
|
||
|
||
<!-- 研究概况 -->
|
||
<ReportSection
|
||
title="📊 研究现状概览"
|
||
subtitle="AI-EDA领域的研究热点与技术发展现状"
|
||
level={2}
|
||
>
|
||
<MetricsGrid columns={2} gap="large">
|
||
<MetricCard
|
||
title="相关论文数量"
|
||
value="2,847"
|
||
change="+23%"
|
||
changeType="positive"
|
||
icon="fas fa-file-alt"
|
||
color="primary"
|
||
/>
|
||
|
||
<MetricCard
|
||
title="主要研究机构"
|
||
value="156"
|
||
icon="fas fa-university"
|
||
color="success"
|
||
/>
|
||
|
||
<MetricCard
|
||
title="技术应用领域"
|
||
value="12"
|
||
icon="fas fa-cogs"
|
||
color="info"
|
||
/>
|
||
|
||
<MetricCard
|
||
title="商业化产品"
|
||
value="38"
|
||
change="+15%"
|
||
changeType="positive"
|
||
icon="fas fa-chart-line"
|
||
color="warning"
|
||
/>
|
||
</MetricsGrid>
|
||
</ReportSection>
|
||
|
||
<!-- 核心技术领域 -->
|
||
<ReportSection
|
||
title="🎯 核心技术领域分析"
|
||
subtitle="AI技术在EDA各个环节的深度应用"
|
||
level={2}
|
||
>
|
||
<div class="domain-analysis">
|
||
<div class="domain-category">
|
||
<div class="category-header">
|
||
<div class="category-icon">
|
||
<i class="fas fa-microchip"></i>
|
||
</div>
|
||
<h3>逻辑综合优化</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 85%"></div>
|
||
</div>
|
||
<span class="progress-label">成熟度: 85%</span>
|
||
</div>
|
||
<div class="category-content">
|
||
<div class="research-highlights">
|
||
<h4>研究亮点</h4>
|
||
<ul>
|
||
<li><strong>强化学习优化：</strong>使用RL算法优化逻辑综合流程，提升20-30%性能</li>
|
||
<li><strong>图神经网络：</strong>利用GNN建模电路拓扑，实现更精确的时序预测</li>
|
||
<li><strong>多目标优化：</strong>AI驱动的帕累托前沿搜索，平衡面积-功耗-性能</li>
|
||
</ul>
|
||
</div>
|
||
<div class="key-papers">
|
||
<h4>代表性工作</h4>
|
||
<div class="paper-list">
|
||
<div class="paper-item">
|
||
<span class="paper-title">"Learning to Optimize Synthesis"</span>
|
||
<span class="paper-venue">DAC 2023</span>
|
||
</div>
|
||
<div class="paper-item">
|
||
<span class="paper-title">"GNN-based Logic Synthesis"</span>
|
||
<span class="paper-venue">ICCAD 2023</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="domain-category">
|
||
<div class="category-header">
|
||
<div class="category-icon">
|
||
<i class="fas fa-th-large"></i>
|
||
</div>
|
||
<h3>物理设计</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 75%"></div>
|
||
</div>
|
||
<span class="progress-label">成熟度: 75%</span>
|
||
</div>
|
||
<div class="category-content">
|
||
<div class="research-highlights">
|
||
<h4>研究亮点</h4>
|
||
<ul>
|
||
<li><strong>布局规划：</strong>深度学习预测最优floorplan，减少迭代次数</li>
|
||
<li><strong>详细布线：</strong>基于注意力机制的智能绕线算法</li>
|
||
<li><strong>时钟树综合：</strong>AI优化时钟网络，最小化skew和功耗</li>
|
||
</ul>
|
||
</div>
|
||
<div class="key-papers">
|
||
<h4>代表性工作</h4>
|
||
<div class="paper-list">
|
||
<div class="paper-item">
|
||
<span class="paper-title">"DREAMPlace: Deep Learning Placement"</span>
|
||
<span class="paper-venue">ISPD 2019</span>
|
||
</div>
|
||
<div class="paper-item">
|
||
<span class="paper-title">"Neural Router"</span>
|
||
<span class="paper-venue">ICCAD 2022</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="domain-category">
|
||
<div class="category-header">
|
||
<div class="category-icon">
|
||
<i class="fas fa-search"></i>
|
||
</div>
|
||
<h3>验证测试</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 68%"></div>
|
||
</div>
|
||
<span class="progress-label">成熟度: 68%</span>
|
||
</div>
|
||
<div class="category-content">
|
||
<div class="research-highlights">
|
||
<h4>研究亮点</h4>
|
||
<ul>
|
||
<li><strong>形式化验证：</strong>ML加速SAT求解，提升验证效率</li>
|
||
<li><strong>测试向量生成：</strong>AI生成高覆盖率测试模式</li>
|
||
<li><strong>缺陷预测：</strong>基于历史数据的良率预测模型</li>
|
||
</ul>
|
||
</div>
|
||
<div class="key-papers">
|
||
<h4>代表性工作</h4>
|
||
<div class="paper-list">
|
||
<div class="paper-item">
|
||
<span class="paper-title">"ML for SAT Solving"</span>
|
||
<span class="paper-venue">FMCAD 2022</span>
|
||
</div>
|
||
<div class="paper-item">
|
||
<span class="paper-title">"AI-driven Test Generation"</span>
|
||
<span class="paper-venue">VTS 2023</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="domain-category">
|
||
<div class="category-header">
|
||
<div class="category-icon">
|
||
<i class="fas fa-brain"></i>
|
||
</div>
|
||
<h3>设计空间探索</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 72%"></div>
|
||
</div>
|
||
<span class="progress-label">成熟度: 72%</span>
|
||
</div>
|
||
<div class="category-content">
|
||
<div class="research-highlights">
|
||
<h4>研究亮点</h4>
|
||
<ul>
|
||
<li><strong>架构探索：</strong>贝叶斯优化指导处理器架构设计</li>
|
||
<li><strong>参数调优：</strong>AutoML自动化工具链参数优化</li>
|
||
<li><strong>设计预测：</strong>早期阶段的PPA预测模型</li>
|
||
</ul>
|
||
</div>
|
||
<div class="key-papers">
|
||
<h4>代表性工作</h4>
|
||
<div class="paper-list">
|
||
<div class="paper-item">
|
||
<span class="paper-title">"AutoDSE: Design Space Exploration"</span>
|
||
<span class="paper-venue">DAC 2022</span>
|
||
</div>
|
||
<div class="paper-item">
|
||
<span class="paper-title">"PPA Prediction with GNN"</span>
|
||
<span class="paper-venue">ASPDAC 2023</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
|
||
<!-- 技术趋势分析 -->
|
||
<ReportSection
|
||
title="📈 技术发展趋势"
|
||
subtitle="AI-EDA技术的演进路径与未来发展方向"
|
||
level={2}
|
||
>
|
||
<div class="trends-timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2020-2021</div>
|
||
<div class="timeline-content">
|
||
<h4>探索阶段</h4>
|
||
<p>初步探索ML在EDA中的应用，主要集中在单点问题优化</p>
|
||
<div class="trend-tags">
|
||
<span class="trend-tag">机器学习启蒙</span>
|
||
<span class="trend-tag">单点突破</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2022-2023</div>
|
||
<div class="timeline-content">
|
||
<h4>深化阶段</h4>
|
||
<p>深度学习方法广泛应用，图神经网络成为主流技术</p>
|
||
<div class="trend-tags">
|
||
<span class="trend-tag">深度学习</span>
|
||
<span class="trend-tag">图神经网络</span>
|
||
<span class="trend-tag">端到端优化</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2024-2025</div>
|
||
<div class="timeline-content">
|
||
<h4>成熟阶段</h4>
|
||
<p>大模型技术引入，多模态学习，工具链全面智能化</p>
|
||
<div class="trend-tags">
|
||
<span class="trend-tag">大语言模型</span>
|
||
<span class="trend-tag">多模态学习</span>
|
||
<span class="trend-tag">自动化工具链</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item future">
|
||
<div class="timeline-year">2026+</div>
|
||
<div class="timeline-content">
|
||
<h4>革命阶段</h4>
|
||
<p>AGI驱动的全自动化设计，人机协同设计新模式</p>
|
||
<div class="trend-tags">
|
||
<span class="trend-tag">AGI应用</span>
|
||
<span class="trend-tag">全自动化</span>
|
||
<span class="trend-tag">人机协同</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
|
||
<!-- 挑战与机遇 -->
|
||
<ReportSection
|
||
title="⚖️ 挑战与机遇分析"
|
||
subtitle="AI-EDA发展面临的关键问题与发展机遇"
|
||
level={2}
|
||
>
|
||
<div class="challenge-opportunity-grid">
|
||
<div class="challenge-section">
|
||
<h3>主要挑战</h3>
|
||
<div class="challenge-list">
|
||
<div class="challenge-item">
|
||
<div class="challenge-icon">⚠️</div>
|
||
<div class="challenge-content">
|
||
<h4>数据质量问题</h4>
|
||
<p>EDA数据往往包含噪声，标注困难，高质量训练数据稀缺</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-item">
|
||
<div class="challenge-icon">🔍</div>
|
||
<div class="challenge-content">
|
||
<h4>可解释性不足</h4>
|
||
<p>AI模型决策过程黑盒化，难以满足EDA工具的可信度要求</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-item">
|
||
<div class="challenge-icon">⚡</div>
|
||
<div class="challenge-content">
|
||
<h4>实时性要求</h4>
|
||
<p>EDA流程对延迟敏感，AI推理速度需要进一步优化</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-item">
|
||
<div class="challenge-icon">🔄</div>
|
||
<div class="challenge-content">
|
||
<h4>工具链集成</h4>
|
||
<p>AI模块与现有EDA工具的无缝集成仍存在技术障碍</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="opportunity-section">
|
||
<h3>发展机遇</h3>
|
||
<div class="opportunity-list">
|
||
<div class="opportunity-item">
|
||
<div class="opportunity-icon">🚀</div>
|
||
<div class="opportunity-content">
|
||
<h4>大模型技术</h4>
|
||
<p>基础大模型为EDA领域提供强大的通用能力基础</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="opportunity-item">
|
||
<div class="opportunity-icon">📊</div>
|
||
<div class="opportunity-content">
|
||
<h4>数据资源丰富</h4>
|
||
<p>多年积累的设计数据为AI训练提供丰富资源</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="opportunity-item">
|
||
<div class="opportunity-icon">💡</div>
|
||
<div class="opportunity-content">
|
||
<h4>算法创新</h4>
|
||
<p>专用AI算法不断涌现，为EDA问题提供定制化解决方案</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="opportunity-item">
|
||
<div class="opportunity-icon">🏭</div>
|
||
<div class="opportunity-content">
|
||
<h4>产业需求</h4>
|
||
<p>摩尔定律挑战推动产业界对AI-EDA技术的强烈需求</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
|
||
<!-- 研究展望 -->
|
||
<ReportSection
|
||
title="🔮 研究展望与建议"
|
||
subtitle="AI-EDA领域的未来发展方向与研究建议"
|
||
level={2}
|
||
>
|
||
<div class="research-outlook">
|
||
<div class="outlook-categories">
|
||
<div class="outlook-category">
|
||
<div class="category-header">
|
||
<i class="fas fa-lightbulb"></i>
|
||
<h3>技术创新方向</h3>
|
||
</div>
|
||
<div class="recommendation-list">
|
||
<div class="recommendation-item">
|
||
<strong>跨模态学习：</strong>结合文本、图像、数值等多种模态信息
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>因果推理：</strong>引入因果关系建模提升模型可解释性
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>联邦学习：</strong>在保护隐私的前提下利用分布式数据
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>神经符号AI：</strong>结合符号推理与深度学习优势
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outlook-category">
|
||
<div class="category-header">
|
||
<i class="fas fa-users"></i>
|
||
<h3>产学研合作</h3>
|
||
</div>
|
||
<div class="recommendation-list">
|
||
<div class="recommendation-item">
|
||
<strong>开放数据集：</strong>建立标准化的AI-EDA基准数据集
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>竞赛平台：</strong>举办AI-EDA算法竞赛推动技术发展
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>标准制定：</strong>制定AI-EDA工具的评估标准和规范
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>人才培养：</strong>建立跨学科的AI-EDA人才培养体系
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outlook-category">
|
||
<div class="category-header">
|
||
<i class="fas fa-cogs"></i>
|
||
<h3>工具平台建设</h3>
|
||
</div>
|
||
<div class="recommendation-list">
|
||
<div class="recommendation-item">
|
||
<strong>统一框架：</strong>开发通用的AI-EDA开发框架
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>云端服务：</strong>构建AI-EDA云计算服务平台
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>模型库：</strong>建立预训练模型共享平台
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>自动化MLOps：</strong>实现AI模型的自动化部署运维
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outlook-category">
|
||
<div class="category-header">
|
||
<i class="fas fa-shield-alt"></i>
|
||
<h3>安全可信</h3>
|
||
</div>
|
||
<div class="recommendation-list">
|
||
<div class="recommendation-item">
|
||
<strong>鲁棒性验证：</strong>确保AI模型在各种条件下稳定工作
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>对抗性防护：</strong>防范针对AI-EDA系统的恶意攻击
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>隐私保护：</strong>保护设计数据和知识产权安全
|
||
</div>
|
||
<div class="recommendation-item">
|
||
<strong>伦理规范：</strong>制定AI-EDA应用的伦理准则
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout>
|
||
|
||
<style>
|
||
.report-main {
|
||
min-height: 100vh;
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
}
|
||
|
||
.mx-auto {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.px-4 {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.report-header {
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: #011a2d;
|
||
margin: 0 0 1rem 0;
|
||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.report-subtitle {
|
||
font-size: 1.25rem;
|
||
color: #2c4a6b;
|
||
margin: 0 0 2rem 0;
|
||
line-height: 1.6;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.report-meta {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.report-date,
|
||
.report-type {
|
||
background: rgba(91, 119, 142, 0.1);
|
||
color: #011a2d;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 1rem;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.domain-analysis {
|
||
display: grid;
|
||
gap: 2rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.domain-category {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.domain-category:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 25px rgba(91, 119, 142, 0.15);
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.category-icon {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.category-header h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.progress-bar {
|
||
background: rgba(91, 119, 142, 0.1);
|
||
border-radius: 1rem;
|
||
height: 0.5rem;
|
||
width: 150px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
background: linear-gradient(90deg, #5b778e, #b2c5d5);
|
||
height: 100%;
|
||
border-radius: 1rem;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.progress-label {
|
||
font-size: 0.875rem;
|
||
color: #2c4a6b;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.category-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.research-highlights h4,
|
||
.key-papers h4 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.research-highlights ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.research-highlights li {
|
||
margin-bottom: 0.75rem;
|
||
color: #2c4a6b;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.research-highlights strong {
|
||
color: #011a2d;
|
||
}
|
||
|
||
.paper-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.paper-item {
|
||
background: rgba(91, 119, 142, 0.05);
|
||
padding: 0.75rem;
|
||
border-radius: 0.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.paper-title {
|
||
font-weight: 500;
|
||
color: #011a2d;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.paper-venue {
|
||
color: #5b778e;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.trends-timeline {
|
||
position: relative;
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.trends-timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 2rem;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(180deg, #5b778e, #b2c5d5);
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.timeline-year {
|
||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||
color: white;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 1rem;
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-content {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.timeline-content h4 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.timeline-content p {
|
||
color: #2c4a6b;
|
||
line-height: 1.5;
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.trend-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.trend-tag {
|
||
background: rgba(91, 119, 142, 0.1);
|
||
color: #011a2d;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 0.5rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.timeline-item.future .timeline-year {
|
||
background: linear-gradient(135deg, #b1d9d4, #aecedd);
|
||
}
|
||
|
||
.timeline-item.future .trend-tag {
|
||
background: rgba(177, 217, 212, 0.2);
|
||
}
|
||
|
||
.challenge-opportunity-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.challenge-section h3,
|
||
.opportunity-section h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0 0 1.5rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.challenge-list,
|
||
.opportunity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.challenge-item,
|
||
.opportunity-item {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 0.75rem;
|
||
padding: 1rem;
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.challenge-icon,
|
||
.opportunity-icon {
|
||
font-size: 1.25rem;
|
||
flex-shrink: 0;
|
||
margin-top: 0.125rem;
|
||
}
|
||
|
||
.challenge-content h4,
|
||
.opportunity-content h4 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.challenge-content p,
|
||
.opportunity-content p {
|
||
color: #2c4a6b;
|
||
font-size: 0.875rem;
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
}
|
||
|
||
.research-outlook {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.outlook-categories {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.outlook-category {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.outlook-category .category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.outlook-category .category-header i {
|
||
font-size: 1.25rem;
|
||
color: #5b778e;
|
||
}
|
||
|
||
.outlook-category .category-header h3 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #011a2d;
|
||
margin: 0;
|
||
}
|
||
|
||
.recommendation-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.recommendation-item {
|
||
background: rgba(91, 119, 142, 0.05);
|
||
padding: 0.75rem;
|
||
border-radius: 0.5rem;
|
||
border-left: 3px solid #5b778e;
|
||
color: #2c4a6b;
|
||
font-size: 0.875rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.recommendation-item strong {
|
||
color: #011a2d;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.report-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.report-subtitle {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.report-meta {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.category-header {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 200px;
|
||
}
|
||
|
||
.category-content {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.trends-timeline::before {
|
||
display: none;
|
||
}
|
||
|
||
.timeline-item {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.challenge-opportunity-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.outlook-categories {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |