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

434
src/pages/report/template/simple.astro Normal file
View File

@@ -0,0 +1,434 @@
---
/**
* 技术报告简化模板
* 适用于快速创建基础技术报告
*
* 使用说明:
* 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 {
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: 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(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: 1200px; margin: 0 auto; }
.report-content { max-width: 100%; width: 100%; }
.container { padding: 0 1rem; }
}
/* 工具类 */
.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>