Jiao77/astro-jiao77.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finally finish all website check in.

Browse Source
This commit is contained in:
Jiao77
2025-10-01 09:51:06 +08:00
parent d40ae5a8d9
commit 96b50327f3
102 changed files with 11724 additions and 4945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

856
src/pages/report/template/index.astro Normal file
View File

@@ -0,0 +1,856 @@
---
/**
* 技术报告页面标准模板 (完整版) - 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(260px, 22vw, 320px);
display: flex;
flex-direction: column;
gap: 2.5rem;
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 (较宽，适合表格)
*/
:root {
--max-content-width: 1200px;
}
/* 统一宽度类 - 所有内容区域使用相同的最大宽度 */
.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(300px + 2.5rem), calc((100vw - 1200px) / 2 + 1rem), calc(320px + 3rem));
padding-right: clamp(1rem, calc((100vw - 1200px) / 2 + 1rem), 2rem);
}
.report-layout { max-width: var(--max-content-width); margin: 0 auto; position: relative; }
.report-content { max-width: 100%; width: 100%; margin-left: 0; }
}
/* === 工具样式类 === */
.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>