881 lines
32 KiB
Plaintext
881 lines
32 KiB
Plaintext
---
|
||
/**
|
||
* 技术报告页面标准模板 (完整版) - 2025更新版
|
||
* 基于 report/20250722/index.astro 的统一宽度配置优化设计
|
||
* 使用CSS变量实现所有ReportSection的统一宽度管理
|
||
*/
|
||
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 GlassTable from '../../../components/common/GlassTable.astro';
|
||
import MathFormula from '../../../components/common/MathFormula.astro';
|
||
import ImageViewer from '../../../components/common/ImageViewer.astro';
|
||
import CodeBlock from '../../../components/common/CodeBlock.astro';
|
||
import Container from '../../../components/Container.astro';
|
||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||
import ReportSidebar from '../../../components/report/ReportSidebar.astro';
|
||
|
||
// 导入动画时序计算工具
|
||
import {
|
||
getSectionBaseDelay,
|
||
getChildDelay,
|
||
getNestedDelay,
|
||
getImageDelay
|
||
} from '../../../scripts/animation-timing';
|
||
|
||
// 定义各章节的基础延迟时间
|
||
const TEMPLATE_SECTION_DELAYS = {
|
||
HERO: 200,
|
||
OVERVIEW: getSectionBaseDelay(0), // 400ms
|
||
ANALYSIS: getSectionBaseDelay(1), // 600ms
|
||
SOLUTION: getSectionBaseDelay(2), // 800ms
|
||
COMPARISON: getSectionBaseDelay(3), // 1000ms
|
||
RESULTS: getSectionBaseDelay(4), // 1200ms
|
||
CONCLUSION: getSectionBaseDelay(5), // 1400ms
|
||
};
|
||
|
||
// 报告配置 - 请根据实际情况修改
|
||
const reportConfig = {
|
||
title: "技术报告标题",
|
||
subtitle: "技术报告副标题，描述报告的核心内容和研究方向。",
|
||
description: "技术报告的详细描述，用于SEO和页面元信息。",
|
||
date: "2025年XX月XX日",
|
||
type: "技术报告",
|
||
actionText: "开始阅读 ↓",
|
||
actionLink: "#overview"
|
||
};
|
||
|
||
// 示例代码配置 - 请根据需要修改
|
||
const sampleCodeExamples = {
|
||
javascript: {
|
||
title: "JavaScript 示例",
|
||
language: "javascript",
|
||
code: `function fibonacci(n) {
|
||
if (n <= 1) return n;
|
||
return fibonacci(n - 1) + fibonacci(n - 2);
|
||
}
|
||
|
||
console.log(fibonacci(10)); // 输出: 55`
|
||
},
|
||
python: {
|
||
title: "Python 示例",
|
||
language: "python",
|
||
code: `def quick_sort(arr):
|
||
if len(arr) <= 1:
|
||
return arr
|
||
pivot = arr[len(arr) // 2]
|
||
left = [x for x in arr if x < pivot]
|
||
middle = [x for x in arr if x == pivot]
|
||
right = [x for x in arr if x > pivot]
|
||
return quick_sort(left) + middle + quick_sort(right)
|
||
|
||
print(quick_sort([3, 6, 8, 10, 1, 2, 1]))`
|
||
},
|
||
css: {
|
||
title: "CSS 样式示例",
|
||
language: "css",
|
||
code: `.glass-effect {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 1rem;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
}`
|
||
}
|
||
};
|
||
---
|
||
|
||
<BaseLayout
|
||
title={`${reportConfig.title} - Jiao77`}
|
||
description={reportConfig.description}
|
||
type="report"
|
||
>
|
||
<Header
|
||
pageTitle={reportConfig.title}
|
||
showPageTitle={true}
|
||
description={reportConfig.subtitle}
|
||
/>
|
||
|
||
<main class="report-main">
|
||
<div class="report-layout container mx-auto px-4">
|
||
<ReportSidebar title="报告目录" toggleLabel="目录" />
|
||
<div class="report-content" data-report-content>
|
||
|
||
<!-- 报告标题区域 -->
|
||
<section id="intro" class="report-header scroll-mt-16">
|
||
<AnimatedElement animation="fadeInUp" delay={200} trigger="load">
|
||
<Container
|
||
variant="glass"
|
||
size="full"
|
||
padding="xl"
|
||
className="text-center mb-12 mt-24"
|
||
>
|
||
<h1 class="report-title">{reportConfig.title}</h1>
|
||
<p class="report-subtitle">{reportConfig.subtitle}</p>
|
||
<div class="report-meta">
|
||
<span class="report-date">报告日期：{reportConfig.date}</span>
|
||
<span class="report-type">{reportConfig.type}</span>
|
||
</div>
|
||
<div class="report-action">
|
||
<a href={reportConfig.actionLink} class="report-cta-button">{reportConfig.actionText}</a>
|
||
</div>
|
||
</Container>
|
||
</AnimatedElement>
|
||
</section>
|
||
|
||
<!-- 概述章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.OVERVIEW} trigger="scroll">
|
||
<section id="overview">
|
||
<ReportSection
|
||
title="📖 概述"
|
||
subtitle="报告的主要内容和背景介绍"
|
||
level={2}
|
||
>
|
||
<div class="space-y-6">
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">背景介绍</h3>
|
||
<p>
|
||
在这里详细描述报告的背景和研究动机。可以包含<strong>重点强调的文字</strong>，
|
||
以及相关的技术背景和问题陈述。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">主要内容</h3>
|
||
<ul class="research-pillars">
|
||
<li>
|
||
<strong>内容要点一：</strong>
|
||
详细描述第一个主要内容点。
|
||
</li>
|
||
<li>
|
||
<strong>内容要点二：</strong>
|
||
详细描述第二个主要内容点。
|
||
</li>
|
||
<li>
|
||
<strong>内容要点三：</strong>
|
||
详细描述第三个主要内容点。
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 技术分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.ANALYSIS} trigger="scroll">
|
||
<section id="analysis">
|
||
<ReportSection
|
||
title="🔬 技术分析"
|
||
subtitle="核心技术概念和挑战的详细分析"
|
||
level={2}
|
||
>
|
||
<!-- 🎨 子容器延迟动画示例：为各个卡片添加逐个出现的动画效果 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 0)} trigger="scroll">
|
||
<div class="challenge-card">
|
||
<h3 class="challenge-title">技术挑战一</h3>
|
||
<p class="challenge-description">描述第一个技术挑战的具体内容和影响。</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 1)} trigger="scroll">
|
||
<div class="challenge-card">
|
||
<h3 class="challenge-title">技术挑战二</h3>
|
||
<p class="challenge-description">描述第二个技术挑战的具体内容和影响。</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.ANALYSIS, 2)} trigger="scroll">
|
||
<div class="challenge-card">
|
||
<h3 class="challenge-title">技术挑战三</h3>
|
||
<p class="challenge-description">描述第三个技术挑战的具体内容和影响。</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 解决方案章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.SOLUTION} trigger="scroll">
|
||
<section id="solution">
|
||
<ReportSection
|
||
title="💡 解决方案"
|
||
subtitle="针对技术挑战提出的创新解决方案和实施方法"
|
||
level={2}
|
||
>
|
||
<!-- 🎨 数学公式区域延迟动画示例 -->
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 0)} trigger="scroll">
|
||
<div class="math-intro mb-6">
|
||
<p class="text-center text-lg text-gray-600 max-w-3xl mx-auto">
|
||
如果报告涉及数学公式，可以使用 MathFormula 组件进行展示：
|
||
</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 0), 1)} trigger="scroll">
|
||
<div class="text-center mt-4">
|
||
<p class="text-lg text-gray-600 mb-3">示例公式：</p>
|
||
<MathFormula
|
||
formula="f(x) = ax^2 + bx + c"
|
||
className="example-formula"
|
||
/>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<!-- 🎨 深度分析卡片的子容器延迟动画示例 -->
|
||
<div class="space-y-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🛠️</div>
|
||
<div>
|
||
<p class="component-label">核心方案</p>
|
||
<h3 class="component-title">技术方案一</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3">详细描述第一个技术方案的原理和实现方式。</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 1), 1)} trigger="scroll">
|
||
<h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">实现步骤：</h4>
|
||
<ul class="list-disc text-gray-600 space-y-2">
|
||
<li>步骤一：具体的实施方法和技术要点</li>
|
||
<li>步骤二：具体的实施方法和技术要点</li>
|
||
<li>步骤三：具体的实施方法和技术要点</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 2)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">⚡</div>
|
||
<div>
|
||
<p class="component-label">优化策略</p>
|
||
<h3 class="component-title">技术方案二</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3">详细描述第二个技术方案的优化策略和核心技术。</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.SOLUTION, 2), 1)} trigger="scroll">
|
||
<h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">关键技术：</h4>
|
||
<ul class="list-disc text-gray-600 space-y-2">
|
||
<li>关键技术一：技术原理和应用优势</li>
|
||
<li>关键技术二：技术原理和应用优势</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
|
||
<div class="summary-highlight">
|
||
<p class="summary-highlight__text">核心优势总结：在这里总结解决方案的核心优势和创新点，突出技术方案的独特价值。</p>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 对比分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.COMPARISON} trigger="scroll">
|
||
<section id="comparison">
|
||
<ReportSection
|
||
title="📊 对比分析"
|
||
subtitle="不同技术方案的详细对比和评估"
|
||
level={2}
|
||
>
|
||
<div class="mt-12">
|
||
<h3 class="text-2xl font-bold text-center mb-6 text-blue-500">技术方案对比表</h3>
|
||
<GlassTable
|
||
headers={['对比维度', '方案A', '方案B', '方案C', '推荐方案']}
|
||
rows={[
|
||
['技术复杂度', '高', '中', '低', '方案B'],
|
||
['性能表现', '优秀', '良好', '一般', '方案A'],
|
||
['实施成本', '高', '中', '低', '方案B'],
|
||
['维护难度', '低', '中', '高', '方案A'],
|
||
['扩展性', '优秀', '良好', '一般', '方案A'],
|
||
['综合评价', '⭐⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐', '方案A']
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="tech-comparison-table"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 代码示例部分 -->
|
||
<div class="mt-16">
|
||
<h3 class="text-2xl font-bold text-center mb-8 text-blue-500">💻 代码实现示例</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 0)} trigger="scroll">
|
||
<CodeBlock
|
||
title={sampleCodeExamples.javascript.title}
|
||
language={sampleCodeExamples.javascript.language}
|
||
showLineNumbers={true}
|
||
code={sampleCodeExamples.javascript.code}
|
||
/>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 1)} trigger="scroll">
|
||
<CodeBlock
|
||
title={sampleCodeExamples.python.title}
|
||
language={sampleCodeExamples.python.language}
|
||
showLineNumbers={true}
|
||
code={sampleCodeExamples.python.code}
|
||
/>
|
||
</AnimatedElement>
|
||
</div>
|
||
|
||
<div class="mt-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.COMPARISON, 2)} trigger="scroll">
|
||
<CodeBlock
|
||
title={sampleCodeExamples.css.title}
|
||
language={sampleCodeExamples.css.language}
|
||
showLineNumbers={true}
|
||
code={sampleCodeExamples.css.code}
|
||
/>
|
||
</AnimatedElement>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 实验结果章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.RESULTS} trigger="scroll">
|
||
<section id="results">
|
||
<ReportSection
|
||
title="🧪 实验结果"
|
||
subtitle="技术方案的实际测试结果和性能数据"
|
||
level={2}
|
||
>
|
||
<div class="space-y-10">
|
||
<div>
|
||
<h3 class="text-xl font-semibold text-center mb-4 text-gray-700">实验数据展示</h3>
|
||
<!-- 🎨 图片容器的子元素延迟动画示例 -->
|
||
<div class="proof-image-container">
|
||
<AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 0)} trigger="scroll">
|
||
<div class="proof-image-item">
|
||
<ImageViewer
|
||
src="/report/template-images/result-1.jpg"
|
||
alt="实验结果图表1"
|
||
className="proof-image-viewer"
|
||
aspectRatio="5 / 3"
|
||
/>
|
||
<p>性能测试结果对比</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 1)} trigger="scroll">
|
||
<div class="proof-image-item">
|
||
<ImageViewer
|
||
src="/report/template-images/result-2.jpg"
|
||
alt="实验结果图表2"
|
||
className="proof-image-viewer"
|
||
aspectRatio="5 / 3"
|
||
/>
|
||
<p>精度测试结果分析</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={getImageDelay(TEMPLATE_SECTION_DELAYS.RESULTS, 2)} trigger="scroll">
|
||
<div class="proof-image-item">
|
||
<ImageViewer
|
||
src="/report/template-images/result-3.jpg"
|
||
alt="实验结果图表3"
|
||
className="proof-image-viewer"
|
||
aspectRatio="5 / 3"
|
||
/>
|
||
<p>效率提升对比</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 总结与展望章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={TEMPLATE_SECTION_DELAYS.CONCLUSION} trigger="scroll">
|
||
<section id="conclusion">
|
||
<ReportSection
|
||
title="🚀 总结与展望"
|
||
subtitle="对报告内容进行总结，并提出未来的发展方向"
|
||
level={2}
|
||
>
|
||
<!-- 🎨 总结与展望卡片的子容器延迟动画示例 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<h3 class="text-2xl font-bold mb-4 text-blue-500">🎯 核心成果</h3>
|
||
<ul class="space-y-3 text-gray-700 list-disc list-inside">
|
||
<li><strong>技术突破：</strong>详细描述取得的重要技术突破。</li>
|
||
<li><strong>性能提升：</strong>详细描述性能改进的具体数据。</li>
|
||
<li><strong>应用价值：</strong>详细描述技术的实际应用价值。</li>
|
||
<li><strong>创新点：</strong>详细描述技术方案的创新之处。</li>
|
||
</ul>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<h3 class="text-2xl font-bold mb-4 text-blue-500">📅 未来规划</h3>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(TEMPLATE_SECTION_DELAYS.CONCLUSION, 1), 1)} trigger="scroll">
|
||
<ul class="space-y-4 text-gray-700">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 font-bold w-32 shrink-0">短期目标</span>
|
||
<span>描述近期要完成的技术优化和功能完善。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 font-bold w-32 shrink-0">中期目标</span>
|
||
<span>描述中期的技术发展方向和应用扩展。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-500 font-bold w-32 shrink-0">长期目标</span>
|
||
<span>描述长期的技术愿景和产业化应用。</span>
|
||
</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout>
|
||
|
||
<script>
|
||
// 交互式功能示例
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 可以在这里添加报告特定的交互功能
|
||
console.log('技术报告页面已加载完成');
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
/* === 报告页面核心样式 === */
|
||
.report-main {
|
||
--report-color-primary: #5f7a99;
|
||
--report-color-primary-strong: #4a627b;
|
||
--report-color-primary-deep: #384b5f;
|
||
--report-color-primary-soft: #8ea3b8;
|
||
--report-color-accent: #a8bdc9;
|
||
--report-color-highlight: rgba(95, 122, 153, 0.2);
|
||
--report-color-soft-glow: rgba(148, 173, 196, 0.12);
|
||
--report-color-glass-border: rgba(95, 122, 153, 0.28);
|
||
--report-color-text: #2f3844;
|
||
--report-color-subtext: #566171;
|
||
--report-color-muted: #6d7885;
|
||
--report-color-surface: rgba(255, 255, 255, 0.65);
|
||
min-height: 100vh;
|
||
padding-bottom: 2rem;
|
||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
background: transparent;
|
||
color: var(--report-color-text);
|
||
position: relative;
|
||
}
|
||
|
||
.report-main::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: linear-gradient(135deg,
|
||
rgba(143, 167, 187, 0.16) 0%,
|
||
rgba(164, 186, 202, 0.1) 25%,
|
||
rgba(182, 201, 214, 0.08) 50%,
|
||
rgba(154, 175, 192, 0.1) 75%,
|
||
rgba(122, 146, 165, 0.22) 100%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* === 布局样式 === */
|
||
.report-layout {
|
||
--report-sidebar-width: clamp(var(--report-sidebar-min-width), 22vw, var(--report-sidebar-max-width));
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--report-sidebar-gap);
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.report-content {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.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: 4rem 0 2rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: var(--report-color-primary);
|
||
margin: 0 0 1rem 0;
|
||
background: linear-gradient(135deg, var(--report-color-primary-soft), var(--report-color-primary), var(--report-color-primary-strong));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.report-subtitle {
|
||
font-size: 1.25rem;
|
||
color: var(--report-color-subtext);
|
||
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(95, 122, 153, 0.12);
|
||
color: var(--report-color-primary-deep);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 1rem;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.report-action {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.report-cta-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.9rem 2.4rem;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, var(--report-color-primary), var(--report-color-primary-strong));
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
box-shadow: 0 14px 32px rgba(56, 75, 95, 0.28);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
|
||
}
|
||
|
||
.report-cta-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 18px 40px rgba(56, 75, 95, 0.32);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.report-cta-button:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 12px 28px rgba(56, 75, 95, 0.28);
|
||
filter: brightness(0.98);
|
||
}
|
||
|
||
/* === 内容区域样式 === */
|
||
.goal-section {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.section-heading {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--report-color-primary);
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.research-pillars {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.research-pillars li {
|
||
background: rgba(95, 122, 153, 0.08);
|
||
border-left: 4px solid rgba(95, 122, 153, 0.65);
|
||
padding: 1rem 1.5rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: 0 0.5rem 0.5rem 0;
|
||
}
|
||
|
||
/* === 卡片样式 === */
|
||
.challenge-card {
|
||
background: linear-gradient(135deg, rgba(95, 122, 153, 0.18), rgba(74, 98, 123, 0.16));
|
||
padding: 1.5rem;
|
||
border-radius: 0.85rem;
|
||
border: 1px solid rgba(74, 98, 123, 0.35);
|
||
box-shadow: 0 12px 32px rgba(56, 75, 95, 0.18);
|
||
backdrop-filter: blur(16px);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
|
||
.challenge-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 44px rgba(56, 75, 95, 0.25);
|
||
border-color: rgba(74, 98, 123, 0.48);
|
||
}
|
||
|
||
.challenge-title {
|
||
font-weight: bold;
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--report-color-primary-strong);
|
||
}
|
||
|
||
.challenge-description {
|
||
color: var(--report-color-subtext);
|
||
}
|
||
|
||
.deep-dive-card {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
/* === 组件样式 === */
|
||
.component-label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
color: rgba(95, 122, 153, 0.85);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.component-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--report-color-primary);
|
||
margin: 0.25rem 0 0 0;
|
||
}
|
||
|
||
/* === 高亮样式 === */
|
||
.summary-highlight {
|
||
margin-top: 3rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
max-width: 56rem;
|
||
padding: 1.75rem 2.5rem;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, rgba(168, 189, 201, 0.28), rgba(95, 122, 153, 0.16));
|
||
border-radius: 1.25rem;
|
||
border: 1px solid rgba(95, 122, 153, 0.32);
|
||
box-shadow: 0 18px 48px rgba(56, 75, 95, 0.22);
|
||
backdrop-filter: blur(18px);
|
||
color: var(--report-color-primary-deep);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.summary-highlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 55%);
|
||
opacity: 0.65;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.summary-highlight__text {
|
||
position: relative;
|
||
font-weight: 600;
|
||
font-size: 1.05rem;
|
||
color: inherit;
|
||
}
|
||
|
||
/* === 数学公式样式 === */
|
||
.math-intro {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* === 表格样式 === */
|
||
.tech-comparison-table {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.tech-comparison-table .glass-table th:last-child {
|
||
background: rgba(95, 122, 153, 0.18);
|
||
color: var(--report-color-primary-deep);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tech-comparison-table .glass-table td:last-child {
|
||
background: rgba(95, 122, 153, 0.12);
|
||
font-weight: 600;
|
||
color: var(--report-color-primary-strong);
|
||
}
|
||
|
||
/* === 图片样式 === */
|
||
.proof-image-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.proof-image-item {
|
||
text-align: center;
|
||
}
|
||
|
||
:global(.proof-image-viewer) {
|
||
margin: 0;
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
:global(.proof-image-viewer:hover) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
|
||
}
|
||
|
||
.proof-image-item p {
|
||
text-align: center;
|
||
font-size: 0.875rem;
|
||
color: var(--report-color-muted);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* === 响应式设计 === */
|
||
@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;
|
||
}
|
||
.deep-dive-card { padding: 1.5rem; }
|
||
.grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* 统一宽度配置 - 先进的宽度管理方式 */
|
||
/*
|
||
* 要修改整个页面的最大宽度，只需要修改下面的 --max-content-width 值
|
||
* 建议的宽度选项：
|
||
* - 1024px (较窄，适合阅读)
|
||
* - 1200px (当前设置，平衡)
|
||
* - 1400px (较宽，适合表格)
|
||
*/
|
||
:global(:root) {
|
||
--max-content-width: 1200px;
|
||
--report-sidebar-min-width: 260px;
|
||
--report-sidebar-base-width: 300px;
|
||
--report-sidebar-max-width: 320px;
|
||
--report-sidebar-gap: 2.5rem;
|
||
--report-content-padding: 1rem;
|
||
}
|
||
|
||
/* 统一宽度类 - 所有内容区域使用相同的最大宽度 */
|
||
.report-header,
|
||
.container {
|
||
max-width: var(--max-content-width);
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 专门的宽度配置，可根据需要调整 */
|
||
.report-width {
|
||
max-width: var(--max-content-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (min-width: 1280px) {
|
||
.report-main {
|
||
padding-left: clamp(
|
||
calc(var(--report-sidebar-base-width) + var(--report-sidebar-gap)),
|
||
calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
|
||
calc(var(--report-sidebar-max-width) + 3rem)
|
||
);
|
||
padding-right: clamp(
|
||
var(--report-content-padding),
|
||
calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
|
||
2rem
|
||
);
|
||
}
|
||
.report-layout {
|
||
max-width: var(--max-content-width);
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
.report-content {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
.container {
|
||
padding-left: var(--report-content-padding);
|
||
padding-right: var(--report-content-padding);
|
||
}
|
||
}
|
||
|
||
/* === 工具样式类 === */
|
||
.grid { display: grid; }
|
||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||
@media (min-width: 768px) {
|
||
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
}
|
||
.gap-8 { gap: 2rem; }
|
||
.space-y-6 > * + * { margin-top: 1.5rem; }
|
||
.space-y-8 > * + * { margin-top: 2rem; }
|
||
.space-y-10 > * + * { margin-top: 2.5rem; }
|
||
.space-y-3 > * + * { margin-top: 0.75rem; }
|
||
.space-y-4 > * + * { margin-top: 1rem; }
|
||
.flex { display: flex; }
|
||
.items-center { align-items: center; }
|
||
.items-start { align-items: flex-start; }
|
||
.mb-8 { margin-bottom: 2rem; }
|
||
.mb-6 { margin-bottom: 1.5rem; }
|
||
.mb-4 { margin-bottom: 1rem; }
|
||
.mb-3 { margin-bottom: 0.75rem; }
|
||
.mb-2 { margin-bottom: 0.5rem; }
|
||
.mt-4 { margin-top: 1rem; }
|
||
.mt-12 { margin-top: 3rem; }
|
||
.mr-4 { margin-right: 1rem; }
|
||
.text-center { text-align: center; }
|
||
.text-5xl { font-size: 3rem; line-height: 1; }
|
||
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
||
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
||
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
||
.font-bold { font-weight: 700; }
|
||
.font-semibold { font-weight: 600; }
|
||
.text-gray-700 { color: var(--report-color-text); }
|
||
.text-gray-600 { color: var(--report-color-subtext); }
|
||
.text-blue-500 { color: var(--report-color-primary); }
|
||
.text-blue-600 { color: var(--report-color-primary-strong); }
|
||
.text-green-500 { color: #6f8c83; }
|
||
.text-purple-500 { color: #7f7a94; }
|
||
.w-32 { width: 8rem; }
|
||
.shrink-0 { flex-shrink: 0; }
|
||
.max-w-3xl { max-width: 48rem; }
|
||
.list-disc { list-style-type: disc; }
|
||
.list-inside { list-style-position: inside; }
|
||
</style> |