Hermes CI FixandHermes AI
e1a9b25afa
- nginx 安全加固 (CSP, HSTS, 缓存策略) - 共享 style.css - 138个页面全部接入 Co-authored-by: Hermes AI <agent@hermes>
635 lines
17 KiB
HTML
635 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>博海售后维修管理系统 - 演示文稿</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #0a1628;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.slides-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.slide {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 60px 80px;
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
background: linear-gradient(135deg, #0a1628 0%, #132244 50%, #0d1f3c 100%);
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 科技感背景装饰 */
|
|
.slide::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle at 30% 40%, rgba(33,150,243,0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 60%, rgba(33,150,243,0.02) 0%, transparent 50%);
|
|
animation: bgGlow 8s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes bgGlow {
|
|
0% { transform: translate(0, 0) rotate(0deg); }
|
|
100% { transform: translate(-2%, -2%) rotate(3deg); }
|
|
}
|
|
|
|
/* 网格线 */
|
|
.slide::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(33,150,243,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(33,150,243,0.05) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 发光线条 */
|
|
.glow-line {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #2196F3, transparent);
|
|
opacity: 0.5;
|
|
animation: glowLine 3s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-line:nth-child(1) { top: 15%; width: 30%; left: 10%; animation-delay: 0s; }
|
|
.glow-line:nth-child(2) { bottom: 20%; width: 40%; right: 10%; animation-delay: 1s; }
|
|
.glow-line:nth-child(3) { top: 50%; width: 20%; left: 5%; animation-delay: 2s; }
|
|
|
|
@keyframes glowLine {
|
|
0%, 100% { opacity: 0.3; transform: scaleX(1); }
|
|
50% { opacity: 0.8; transform: scaleX(1.2); }
|
|
}
|
|
|
|
.slide-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== 封面页 ===== */
|
|
.cover-title {
|
|
font-size: clamp(36px, 5vw, 64px);
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, #64B5F6, #2196F3, #1565C0);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 20px;
|
|
letter-spacing: 4px;
|
|
animation: fadeInUp 1s ease-out;
|
|
}
|
|
|
|
.cover-sub {
|
|
font-size: clamp(18px, 2.5vw, 28px);
|
|
color: #90CAF9;
|
|
font-weight: 300;
|
|
letter-spacing: 6px;
|
|
margin-bottom: 40px;
|
|
animation: fadeInUp 1s ease-out 0.3s both;
|
|
}
|
|
|
|
.cover-org {
|
|
font-size: clamp(14px, 1.5vw, 18px);
|
|
color: rgba(144, 202, 249, 0.6);
|
|
letter-spacing: 3px;
|
|
animation: fadeInUp 1s ease-out 0.6s both;
|
|
}
|
|
|
|
.cover-line {
|
|
width: 80px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #2196F3, #64B5F6);
|
|
margin: 30px auto;
|
|
border-radius: 2px;
|
|
animation: fadeInUp 1s ease-out 0.45s both;
|
|
}
|
|
|
|
/* 浮动粒子 */
|
|
.particles {
|
|
position: absolute;
|
|
width: 100%; height: 100%;
|
|
top: 0; left: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 4px; height: 4px;
|
|
background: rgba(33,150,243,0.4);
|
|
border-radius: 50%;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
|
|
.particle:nth-child(2) { left: 30%; top: 70%; animation-delay: 1s; }
|
|
.particle:nth-child(3) { left: 50%; top: 30%; animation-delay: 2s; }
|
|
.particle:nth-child(4) { left: 70%; top: 60%; animation-delay: 0.5s; }
|
|
.particle:nth-child(5) { left: 85%; top: 25%; animation-delay: 1.5s; }
|
|
.particle:nth-child(6) { left: 20%; top: 80%; animation-delay: 2.5s; }
|
|
.particle:nth-child(7) { left: 60%; top: 15%; animation-delay: 3s; }
|
|
.particle:nth-child(8) { left: 90%; top: 75%; animation-delay: 3.5s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
|
|
50% { transform: translateY(-20px) scale(1.5); opacity: 0.8; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ===== 通用 ===== */
|
|
.page-title {
|
|
font-size: clamp(28px, 3.5vw, 48px);
|
|
font-weight: 700;
|
|
color: #E3F2FD;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #2196F3, #64B5F6);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.page-desc {
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
color: rgba(144, 202, 249, 0.7);
|
|
margin-top: 20px;
|
|
margin-bottom: 40px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* ===== 目录 ===== */
|
|
.toc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 40px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.toc-item {
|
|
background: rgba(33,150,243,0.08);
|
|
border: 1px solid rgba(33,150,243,0.2);
|
|
border-radius: 16px;
|
|
padding: 30px 20px;
|
|
transition: all 0.3s ease;
|
|
cursor: default;
|
|
}
|
|
|
|
.toc-item:hover {
|
|
background: rgba(33,150,243,0.15);
|
|
border-color: rgba(33,150,243,0.4);
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(33,150,243,0.1);
|
|
}
|
|
|
|
.toc-num {
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, #2196F3, #64B5F6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.toc-label {
|
|
font-size: 16px;
|
|
color: #BBDEFB;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== 核心功能 ===== */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: rgba(33,150,243,0.06);
|
|
border: 1px solid rgba(33,150,243,0.15);
|
|
border-radius: 16px;
|
|
padding: 28px 20px;
|
|
text-align: left;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
background: rgba(33,150,243,0.12);
|
|
border-color: rgba(33,150,243,0.3);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 28px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.feature-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #E3F2FD;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 13px;
|
|
color: rgba(144, 202, 249, 0.7);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== 技术架构 ===== */
|
|
.arch-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.arch-layer {
|
|
background: rgba(33,150,243,0.06);
|
|
border: 1px solid rgba(33,150,243,0.15);
|
|
border-radius: 12px;
|
|
padding: 20px 30px;
|
|
min-width: 200px;
|
|
flex: 1;
|
|
}
|
|
|
|
.arch-layer-title {
|
|
font-size: 14px;
|
|
color: #64B5F6;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.arch-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.arch-tag {
|
|
background: rgba(33,150,243,0.15);
|
|
color: #90CAF9;
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 架构图连线 */
|
|
.arch-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(33,150,243,0.3);
|
|
font-size: 20px;
|
|
width: 100%;
|
|
gap: 0;
|
|
}
|
|
|
|
/* ===== 尾页 ===== */
|
|
.ending-title {
|
|
font-size: clamp(32px, 4vw, 52px);
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #64B5F6, #2196F3);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.ending-org {
|
|
color: #90CAF9;
|
|
font-size: clamp(16px, 1.5vw, 20px);
|
|
margin-bottom: 10px;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.ending-contact {
|
|
color: rgba(144, 202, 249, 0.5);
|
|
font-size: clamp(12px, 1.2vw, 16px);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* ===== 页码 ===== */
|
|
.page-indicator {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 10px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(33,150,243,0.3);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dot.active {
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, #2196F3, #64B5F6);
|
|
box-shadow: 0 0 10px rgba(33,150,243,0.4);
|
|
}
|
|
|
|
/* ===== 导航提示 ===== */
|
|
.nav-hint {
|
|
position: fixed;
|
|
bottom: 60px;
|
|
right: 30px;
|
|
color: rgba(33,150,243,0.3);
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.slide { padding: 30px 20px; }
|
|
.toc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
|
.features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
|
.page-indicator { bottom: 15px; }
|
|
.nav-hint { display: none; }
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="slides-container" id="slides">
|
|
<div class="particles">
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
</div>
|
|
|
|
<div class="glow-line"></div>
|
|
<div class="glow-line"></div>
|
|
<div class="glow-line"></div>
|
|
|
|
<!-- 第1页：封面 -->
|
|
<div class="slide active" data-index="0">
|
|
<div class="slide-content">
|
|
<div class="cover-title">博海售后维修管理系统</div>
|
|
<div class="cover-line"></div>
|
|
<div class="cover-sub">科技赋能售后 · 效率驱动未来</div>
|
|
<div class="cover-org">陕西博海网络科技有限公司</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第2页：目录 -->
|
|
<div class="slide" data-index="1">
|
|
<div class="slide-content">
|
|
<div class="page-title">目 录</div>
|
|
<div class="page-desc">CONTENTS</div>
|
|
<div class="toc-grid">
|
|
<div class="toc-item">
|
|
<div class="toc-num">01</div>
|
|
<div class="toc-label">系统概述</div>
|
|
</div>
|
|
<div class="toc-item">
|
|
<div class="toc-num">02</div>
|
|
<div class="toc-label">核心功能</div>
|
|
</div>
|
|
<div class="toc-item">
|
|
<div class="toc-num">03</div>
|
|
<div class="toc-label">技术架构</div>
|
|
</div>
|
|
<div class="toc-item">
|
|
<div class="toc-num">04</div>
|
|
<div class="toc-label">小程序展示</div>
|
|
</div>
|
|
<div class="toc-item">
|
|
<div class="toc-num">05</div>
|
|
<div class="toc-label">联系我们</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第3页：核心功能 -->
|
|
<div class="slide" data-index="2">
|
|
<div class="slide-content">
|
|
<div class="page-title">核心功能</div>
|
|
<div class="page-desc">CORE FEATURES</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📋</div>
|
|
<div class="feature-name">工单管理</div>
|
|
<div class="feature-desc">快速创建、智能派单、实时跟踪、完工闭环，全流程数字化管理</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👥</div>
|
|
<div class="feature-name">客户管理</div>
|
|
<div class="feature-desc">客户档案、设备信息、维修历史一键查询，提升服务体验</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔧</div>
|
|
<div class="feature-name">工程师调度</div>
|
|
<div class="feature-desc">智能排班、就近派单、技能匹配，最大化人效</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📊</div>
|
|
<div class="feature-name">数据看板</div>
|
|
<div class="feature-desc">实时统计、趋势分析、KPI 监控，数据驱动决策</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⭐</div>
|
|
<div class="feature-name">评价体系</div>
|
|
<div class="feature-desc">服务评价、满意度调查、持续改进，打造口碑</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第4页：技术架构 -->
|
|
<div class="slide" data-index="3">
|
|
<div class="slide-content">
|
|
<div class="page-title">技术架构</div>
|
|
<div class="page-desc">TECHNOLOGY STACK</div>
|
|
<div class="arch-container">
|
|
<div class="arch-layer">
|
|
<div class="arch-layer-title">🎨 前端</div>
|
|
<div class="arch-stack">
|
|
<span class="arch-tag">Vue 3</span>
|
|
<span class="arch-tag">Element Plus</span>
|
|
<span class="arch-tag">TypeScript</span>
|
|
<span class="arch-tag">微信小程序</span>
|
|
</div>
|
|
</div>
|
|
<div class="arch-connector">⬇</div>
|
|
<div class="arch-layer">
|
|
<div class="arch-layer-title">⚙️ 后端</div>
|
|
<div class="arch-stack">
|
|
<span class="arch-tag">FastAPI</span>
|
|
<span class="arch-tag">SQLAlchemy</span>
|
|
<span class="arch-tag">SQLite</span>
|
|
<span class="arch-tag">Pydantic</span>
|
|
</div>
|
|
</div>
|
|
<div class="arch-connector">⬇</div>
|
|
<div class="arch-layer">
|
|
<div class="arch-layer-title">🚀 部署</div>
|
|
<div class="arch-stack">
|
|
<span class="arch-tag">Nginx</span>
|
|
<span class="arch-tag">Docker</span>
|
|
<span class="arch-tag">Let's Encrypt</span>
|
|
<span class="arch-tag">systemd</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:25px;color:rgba(144,202,249,0.4);font-size:13px;letter-spacing:1px;">
|
|
CI/CD: Gitea Actions · 自动化测试 · 自动部署
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第5页：尾页 -->
|
|
<div class="slide" data-index="4">
|
|
<div class="slide-content">
|
|
<div style="margin-bottom:30px;font-size:60px;">🚀</div>
|
|
<div class="ending-title">感谢观看</div>
|
|
<div class="ending-org">陕西博海网络科技有限公司</div>
|
|
<div class="ending-contact">地址：陕西省 · 博海科技</div>
|
|
<div class="ending-contact" style="margin-top:5px;">专注电脑 · 打印机 · 办公设备维修与安装售后</div>
|
|
<div style="margin-top:40px; display:flex; justify-content:center; gap:20px;">
|
|
<div style="width:40px;height:2px;background:linear-gradient(90deg,transparent,#2196F3);border-radius:2px;"></div>
|
|
<div style="width:40px;height:2px;background:linear-gradient(90deg,#2196F3,transparent);border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页码指示器 -->
|
|
<div class="page-indicator" id="indicator"></div>
|
|
<div class="nav-hint">← → 键翻页</div>
|
|
|
|
<script>
|
|
const slides = document.querySelectorAll('.slide');
|
|
const total = slides.length;
|
|
let current = 0;
|
|
|
|
// 初始化指示器
|
|
const indicator = document.getElementById('indicator');
|
|
for (let i = 0; i < total; i++) {
|
|
const dot = document.createElement('div');
|
|
dot.className = 'dot' + (i === 0 ? ' active' : '');
|
|
dot.dataset.index = i;
|
|
dot.addEventListener('click', () => goTo(i));
|
|
indicator.appendChild(dot);
|
|
}
|
|
|
|
function goTo(index) {
|
|
if (index < 0) index = 0;
|
|
if (index >= total) index = total - 1;
|
|
if (index === current) return;
|
|
|
|
slides[current].classList.remove('active');
|
|
slides[index].classList.add('active');
|
|
current = index;
|
|
|
|
// 更新指示器
|
|
document.querySelectorAll('.dot').forEach((d, i) => {
|
|
d.classList.toggle('active', i === current);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
|
|
e.preventDefault();
|
|
goTo(current + 1);
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
goTo(current - 1);
|
|
}
|
|
});
|
|
|
|
// 点击翻页
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('.dot')) return;
|
|
if (e.clientX > window.innerWidth / 2) {
|
|
goTo(current + 1);
|
|
} else {
|
|
goTo(current - 1);
|
|
}
|
|
});
|
|
|
|
// 触摸
|
|
let touchStartX = 0;
|
|
document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
|
|
document.addEventListener('touchend', (e) => {
|
|
const diff = touchStartX - e.changedTouches[0].clientX;
|
|
if (Math.abs(diff) > 80) {
|
|
goTo(current + (diff > 0 ? 1 : -1));
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |