460 lines
13 KiB
Plaintext
460 lines
13 KiB
Plaintext
---
|
||
/**
|
||
* 技术报告简化模板
|
||
* 适用于快速创建基础技术报告
|
||
*
|
||
* 使用说明:
|
||
* 1. 修改下方配置信息
|
||
* 2. 添加你的报告章节
|
||
* 3. 替换示例内容
|
||
*/
|
||
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 Container from '../../../components/Container.astro';
|
||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||
import ReportSidebar from '../../../components/report/ReportSidebar.astro';
|
||
|
||
// 报告配置 - 请修改以下信息
|
||
const reportConfig = {
|
||
title: "技术报告标题",
|
||
subtitle: "报告副标题描述",
|
||
description: "报告的详细描述，用于SEO",
|
||
date: "2025年XX月XX日",
|
||
actionText: "开始阅读 ↓"
|
||
};
|
||
---
|
||
|
||
<BaseLayout
|
||
title={`${reportConfig.title} - Jiao77`}
|
||
description={reportConfig.description}
|
||
type="report"
|
||
>
|
||
<Header />
|
||
|
||
<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">技术报告</span>
|
||
</div>
|
||
<div class="report-action">
|
||
<a href="#overview" class="bg-[#27797f] text-white font-bold py-3 px-8 rounded-full hover:bg-[#1e6066] transition duration-300">
|
||
{reportConfig.actionText}
|
||
</a>
|
||
</div>
|
||
</Container>
|
||
</AnimatedElement>
|
||
</section>
|
||
|
||
<!-- 概述章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
|
||
<section id="overview">
|
||
<ReportSection title="📖 概述" subtitle="报告的主要内容和背景介绍" level={2}>
|
||
<div class="space-y-6">
|
||
<div class="content-section">
|
||
<h3 class="section-heading">背景介绍</h3>
|
||
<p>在这里描述报告的背景和研究动机...</p>
|
||
</div>
|
||
<div class="content-section">
|
||
<h3 class="section-heading">主要内容</h3>
|
||
<ul class="content-list">
|
||
<li>主要内容点一</li>
|
||
<li>主要内容点二</li>
|
||
<li>主要内容点三</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 技术分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
|
||
<section id="analysis">
|
||
<ReportSection title="🔬 技术分析" subtitle="核心技术和方法的详细分析" level={2}>
|
||
<!-- 🎨 子容器延迟动画示例 -->
|
||
<div class="space-y-8">
|
||
<AnimatedElement animation="fadeInUp" delay={700} trigger="scroll">
|
||
<div class="analysis-card">
|
||
<h3 class="card-title">技术要点一</h3>
|
||
<p class="card-description">详细描述第一个技术要点的内容和实现方法...</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={800} trigger="scroll">
|
||
<div class="analysis-card">
|
||
<h3 class="card-title">技术要点二</h3>
|
||
<p class="card-description">详细描述第二个技术要点的内容和实现方法...</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 实施方案章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={800} trigger="scroll">
|
||
<section id="implementation">
|
||
<ReportSection title="⚙️ 实施方案" subtitle="具体的实施步骤和方法" level={2}>
|
||
<!-- 🎨 实施步骤的子容器延迟动画示例 -->
|
||
<div class="implementation-steps">
|
||
<AnimatedElement animation="fadeInUp" delay={900} trigger="scroll">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<h4 class="step-title">第一步：准备阶段</h4>
|
||
<p class="step-description">描述第一步的具体内容和要求...</p>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={1000} trigger="scroll">
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<h4 class="step-title">第二步：实施阶段</h4>
|
||
<p class="step-description">描述第二步的具体内容和要求...</p>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
<AnimatedElement animation="fadeInUp" delay={1100} trigger="scroll">
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<h4 class="step-title">第三步：验证阶段</h4>
|
||
<p class="step-description">描述第三步的具体内容和要求...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 总结章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={1000} trigger="scroll">
|
||
<section id="conclusion">
|
||
<ReportSection title="📋 总结" subtitle="报告内容总结和后续计划" level={2}>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="summary-card">
|
||
<h3 class="summary-title">🎯 关键成果</h3>
|
||
<ul class="summary-list">
|
||
<li>成果一：具体描述</li>
|
||
<li>成果二：具体描述</li>
|
||
<li>成果三：具体描述</li>
|
||
</ul>
|
||
</div>
|
||
<div class="summary-card">
|
||
<h3 class="summary-title">📅 后续计划</h3>
|
||
<ul class="summary-list">
|
||
<li>计划一：具体内容</li>
|
||
<li>计划二：具体内容</li>
|
||
<li>计划三：具体内容</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout>
|
||
|
||
<style>
|
||
/* 基础样式 */
|
||
.report-main {
|
||
min-height: 100vh;
|
||
padding-bottom: 2rem;
|
||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||
background: transparent;
|
||
color: #333d4b;
|
||
position: relative;
|
||
}
|
||
|
||
.report-main::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: linear-gradient(135deg,
|
||
rgba(174, 206, 221, 0.1) 0%,
|
||
rgba(177, 217, 212, 0.05) 25%,
|
||
rgba(178, 197, 213, 0.03) 50%,
|
||
rgba(155, 181, 200, 0.05) 75%,
|
||
rgba(122, 153, 176, 0.1) 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%;
|
||
}
|
||
|
||
.container {
|
||
max-width: var(--max-content-width);
|
||
width: 100%;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
|
||
.mx-auto { margin: 0 auto; }
|
||
.px-4 { padding: 0 1rem; }
|
||
|
||
/* 标题区域 */
|
||
.report-header {
|
||
padding: 4rem 0 2rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: #3b82f6;
|
||
margin: 0 0 1rem 0;
|
||
background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
|
||
-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: 1.5rem 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.report-action {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
/* 内容样式 */
|
||
.content-section {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.section-heading {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: #3b82f6;
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.content-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.content-list li {
|
||
background: rgba(91, 119, 142, 0.05);
|
||
border-left: 4px solid #5b778e;
|
||
padding: 1rem 1.5rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: 0 0.5rem 0.5rem 0;
|
||
}
|
||
|
||
/* 分析卡片 */
|
||
.analysis-card {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 116, 144, 0.12));
|
||
padding: 1.5rem;
|
||
border-radius: 0.85rem;
|
||
border: 1px solid rgba(59, 130, 246, 0.35);
|
||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
|
||
backdrop-filter: blur(16px);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.analysis-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: bold;
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.5rem;
|
||
color: #3b82f6;
|
||
}
|
||
|
||
.card-description {
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 实施步骤 */
|
||
.implementation-steps {
|
||
space-y: 2rem;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.step-number {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
color: white;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 1.25rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: #3b82f6;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.step-description {
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 总结卡片 */
|
||
.summary-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.summary-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #3b82f6;
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.summary-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.summary-list li {
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid rgba(91, 119, 142, 0.1);
|
||
color: #4b5563;
|
||
}
|
||
|
||
.summary-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@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;
|
||
}
|
||
.step-item { flex-direction: column; text-align: center; }
|
||
.grid { grid-template-columns: 1fr !important; }
|
||
}
|
||
|
||
@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; }
|
||
.report-content { max-width: 100%; width: 100%; }
|
||
.container {
|
||
padding-left: var(--report-content-padding);
|
||
padding-right: var(--report-content-padding);
|
||
}
|
||
}
|
||
|
||
/* 工具类 */
|
||
.grid { display: grid; }
|
||
.grid-cols-1 { grid-template-columns: 1fr; }
|
||
@media (min-width: 768px) {
|
||
.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
.gap-8 { gap: 2rem; }
|
||
.space-y-6 > * + * { margin-top: 1.5rem; }
|
||
.space-y-8 > * + * { margin-top: 2rem; }
|
||
</style> |