diff --git a/web_frontend/web_result/order-classes/developer/agent-avatars b/web_frontend/web_result/order-classes/developer/agent-avatars
new file mode 120000
index 00000000..3ad22dc7
--- /dev/null
+++ b/web_frontend/web_result/order-classes/developer/agent-avatars
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/智能开发/agent头像
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/developer/css/styles.css b/web_frontend/web_result/order-classes/developer/css/styles.css
new file mode 100644
index 00000000..4c3ac2b0
--- /dev/null
+++ b/web_frontend/web_result/order-classes/developer/css/styles.css
@@ -0,0 +1,961 @@
+/* 在线教育平台开发项目 - 智能开发订单班紫罗兰科技设计系统 */
+
+/* ========== 设计变量 ========== */
+:root {
+ /* 紫罗兰科技主题 - 智能开发风格 */
+ --bg-dark: #faf5ff; /* 浅紫背景 */
+ --bg-semi-dark: rgba(250, 245, 255, 0.95); /* 半透明浅紫 */
+ --bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
+ --bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
+ --primary-dark: #1e1b4b; /* 主色深紫 */
+ --primary-purple: #8b5cf6; /* 主色紫 - 智能开发专业 */
+ --accent-violet: #a855f7; /* 紫罗兰强调 - 科技主题 */
+ --accent-violet-light: #c084fc; /* 浅紫罗兰 */
+ --text-light: #1e1b4b; /* 深色文字 */
+ --text-gray: #6b7280; /* 灰色文字 */
+ --border-light: rgba(139, 92, 246, 0.2); /* 紫色边框 */
+ --hover-bg: rgba(139, 92, 246, 0.15); /* 悬停背景 */
+ --active-bg: rgba(139, 92, 246, 0.2); /* 激活背景 */
+
+ /* 间距系统 - 针对大屏幕优化 */
+ --spacing-xs: 0.75rem; /* 12px */
+ --spacing-sm: 1.25rem; /* 20px */
+ --spacing-md: 2rem; /* 32px */
+ --spacing-lg: 3rem; /* 48px */
+ --spacing-xl: 4rem; /* 64px */
+ --spacing-2xl: 6rem; /* 96px */
+ --spacing-3xl: 8rem; /* 128px */
+
+ /* 字体系统 */
+ --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
+ --font-display: 'Inter', sans-serif;
+
+ /* 字体大小 - 针对大屏幕优化 */
+ --text-xs: 0.875rem; /* 14px */
+ --text-sm: 1rem; /* 16px */
+ --text-base: 1.125rem; /* 18px */
+ --text-lg: 1.375rem; /* 22px */
+ --text-xl: 1.625rem; /* 26px */
+ --text-2xl: 2rem; /* 32px */
+ --text-3xl: 2.5rem; /* 40px */
+ --text-4xl: 3rem; /* 48px */
+ --text-5xl: 4rem; /* 64px */
+
+ /* 字重 */
+ --font-light: 300;
+ --font-normal: 400;
+ --font-medium: 500;
+ --font-semibold: 600;
+ --font-bold: 700;
+
+ /* 圆角 */
+ --radius-sm: 0.375rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-2xl: 1.5rem;
+ --radius-full: 9999px;
+
+ /* 阴影 - 轻盈专业主题 */
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+ --shadow-md: 0 2px 4px rgba(0,0,0,0.08);
+ --shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
+ --shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
+ --shadow-purple: 0 2px 8px rgba(139, 92, 246, 0.15);
+
+ /* 过渡 */
+ --transition-fast: 150ms ease;
+ --transition-base: 250ms ease;
+ --transition-slow: 350ms ease;
+
+ /* 布局 */
+ --container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
+}
+
+/* ========== 深色主题 - 深邃紫罗兰配色 ========== */
+body.dark-theme {
+ --bg-dark: #1e1b4b; /* 深邃紫黑背景 */
+ --bg-semi-dark: rgba(30, 27, 75, 0.95); /* 深紫半透明 */
+ --bg-overlay: rgba(49, 46, 129, 0.85); /* 深紫遮罩层 */
+ --bg-card: rgba(67, 56, 202, 0.9); /* 深紫卡片背景 */
+ --primary-dark: #1e1b4b; /* 深邃紫黑 */
+ --primary-purple: #a78bfa; /* 明亮紫 */
+ --accent-violet: #c084fc; /* 亮紫罗兰 */
+ --accent-violet-light: #e9d5ff; /* 超亮紫罗兰 */
+ --text-light: #f5f3ff; /* 浅色文字 */
+ --text-gray: #d8b4fe; /* 灰色文字 */
+ --border-light: rgba(167, 139, 250, 0.25); /* 紫色边框 */
+ --hover-bg: rgba(139, 92, 246, 0.15); /* 悬停背景 */
+ --active-bg: rgba(167, 139, 250, 0.2); /* 激活背景 */
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+ --shadow-md: 0 2px 4px rgba(0,0,0,0.5);
+ --shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
+ --shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
+ --shadow-purple: 0 2px 8px rgba(139, 92, 246, 0.25);
+}
+
+/* ========== 重置样式 ========== */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font-family: var(--font-primary);
+ font-size: var(--text-base);
+ line-height: 1.6;
+ color: var(--text-light);
+ background-color: var(--bg-dark);
+ overflow-x: hidden;
+}
+
+/* ========== Hero 区域 - 全屏图片背景 ========== */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:
+ linear-gradient(135deg, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 0.95) 100%),
+ url('../images/首页.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+ position: relative;
+ overflow: hidden;
+}
+
+/* 深色主题下的Hero渐变 */
+body.dark-theme .hero {
+ background:
+ linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(49, 46, 129, 0.8) 100%),
+ url('../images/首页.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.hero::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-image:
+ radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
+ pointer-events: none;
+ animation: glow 8s ease-in-out infinite;
+}
+
+@keyframes glow {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.6; }
+}
+
+.hero-content {
+ text-align: center;
+ color: var(--text-light);
+ z-index: 1;
+ position: relative;
+ padding: var(--spacing-xl);
+ max-width: 900px;
+}
+
+.hero-badge {
+ display: inline-block;
+ padding: var(--spacing-md) var(--spacing-xl);
+ background: rgba(139, 92, 246, 0.15);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-radius: var(--radius-full);
+ font-size: var(--text-lg);
+ font-weight: var(--font-semibold);
+ letter-spacing: 0.1em;
+ margin-bottom: var(--spacing-xl);
+ border: 3px solid var(--primary-purple);
+ box-shadow: var(--shadow-purple);
+ text-transform: uppercase;
+ transition: all var(--transition-base);
+}
+
+.hero-badge:hover {
+ background: rgba(139, 92, 246, 0.25);
+ transform: translateY(-2px);
+}
+
+.hero-title {
+ font-size: clamp(3.5rem, 10vw, 6.5rem);
+ font-weight: var(--font-bold);
+ margin-bottom: var(--spacing-lg);
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+ color: var(--accent-violet-light);
+ text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(139, 92, 246, 0.4);
+}
+
+.hero-subtitle {
+ font-size: clamp(1.5rem, 4vw, 2.5rem);
+ font-weight: var(--font-light);
+ opacity: 0.95;
+ margin-bottom: var(--spacing-xl);
+ color: var(--text-light);
+}
+
+.hero-description {
+ font-size: var(--text-xl);
+ opacity: 0.85;
+ max-width: 800px;
+ margin: 0 auto;
+ line-height: 1.8;
+}
+
+/* ========== 导航 - 深色玻璃态 ========== */
+.nav {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background: var(--bg-semi-dark);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-bottom: 1px solid var(--border-light);
+ padding: var(--spacing-md) 0;
+ box-shadow: var(--shadow-md);
+}
+
+.nav-container {
+ display: flex;
+ justify-content: center;
+ gap: var(--spacing-sm);
+ flex-wrap: wrap;
+ padding: 0 var(--spacing-md);
+}
+
+.nav-item {
+ padding: var(--spacing-sm) var(--spacing-lg);
+ background: var(--bg-overlay);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--border-light);
+ border-radius: var(--radius-lg);
+ cursor: pointer;
+ transition: all var(--transition-base);
+ font-weight: var(--font-medium);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ color: var(--text-gray);
+}
+
+.nav-item i {
+ width: 20px;
+ height: 20px;
+ stroke-width: 2;
+}
+
+.nav-item span {
+ font-size: var(--text-base);
+}
+
+.nav-item:hover {
+ background: var(--hover-bg);
+ color: var(--primary-purple);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-purple);
+}
+
+.nav-item.active {
+ background: var(--active-bg);
+ color: var(--primary-purple);
+ border-color: var(--primary-purple);
+ box-shadow: var(--shadow-purple);
+}
+
+/* ========== 内容区块 - 图片背景 ========== */
+.section {
+ padding: var(--spacing-2xl) 0;
+ background: var(--bg-dark);
+ position: relative;
+}
+
+/* 浅色图片背景 - 每个区块使用不同图片 */
+.section:nth-child(1) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/课程直播间.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.section:nth-child(2) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/热门课程.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.section:nth-child(3) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/注册界面.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.section:nth-child(4) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/API配置界面.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 通用奇偶区块(当超过4个section时) */
+.section:nth-child(n+5):nth-child(odd) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/课程内容.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+.section:nth-child(n+5):nth-child(even) {
+ background-image:
+ linear-gradient(to bottom, rgba(250, 245, 255, 0.9) 0%, rgba(245, 243, 255, 1) 100%),
+ url('../images/智能学习数据分析.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 深色主题下的区块背景 - 每个区块使用对应图片 */
+body.dark-theme .section:nth-child(1) {
+ background-image:
+ linear-gradient(to bottom, rgba(30, 27, 75, 0.92) 0%, rgba(49, 46, 129, 0.88) 100%),
+ url('../images/课程直播间.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(2) {
+ background-image:
+ linear-gradient(to bottom, rgba(49, 46, 129, 0.90) 0%, rgba(30, 27, 75, 0.88) 100%),
+ url('../images/热门课程.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(3) {
+ background-image:
+ linear-gradient(to bottom, rgba(30, 27, 75, 0.92) 0%, rgba(49, 46, 129, 0.88) 100%),
+ url('../images/注册界面.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(4) {
+ background-image:
+ linear-gradient(to bottom, rgba(49, 46, 129, 0.90) 0%, rgba(30, 27, 75, 0.88) 100%),
+ url('../images/API配置界面.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 通用奇偶区块(当超过4个section时) */
+body.dark-theme .section:nth-child(n+5):nth-child(odd) {
+ background-image:
+ linear-gradient(to bottom, rgba(30, 27, 75, 0.92) 0%, rgba(49, 46, 129, 0.88) 100%),
+ url('../images/课程内容.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+body.dark-theme .section:nth-child(n+5):nth-child(even) {
+ background-image:
+ linear-gradient(to bottom, rgba(49, 46, 129, 0.90) 0%, rgba(30, 27, 75, 0.88) 100%),
+ url('../images/智能学习数据分析.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+/* 深色主题下的特定元素调整 */
+body.dark-theme .stat-item {
+ background: rgba(67, 56, 202, 0.8);
+ backdrop-filter: blur(5px);
+}
+
+body.dark-theme .stat-item:hover {
+ background: rgba(167, 139, 250, 0.15);
+ border-color: var(--primary-purple);
+}
+
+body.dark-theme .stat-value {
+ color: var(--accent-violet-light);
+}
+
+body.dark-theme th {
+ background: rgba(167, 139, 250, 0.12);
+ color: var(--accent-violet-light);
+}
+
+body.dark-theme tr:hover {
+ background: rgba(167, 139, 250, 0.08);
+}
+
+.container {
+ max-width: var(--container-max);
+ margin: 0 auto;
+ padding: 0 var(--spacing-md);
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-xl);
+ padding: var(--spacing-lg);
+ background: var(--bg-card);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border-radius: var(--radius-xl);
+ border: 2px solid var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.agent-avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: var(--radius-xl);
+ object-fit: cover;
+ border: 3px solid var(--primary-purple);
+ box-shadow: var(--shadow-md);
+ transition: all var(--transition-base);
+}
+
+.agent-avatar:hover {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--accent-violet);
+}
+
+.agent-info {
+ flex: 1;
+}
+
+.agent-name {
+ font-size: var(--text-lg);
+ color: var(--primary-purple);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ margin-bottom: var(--spacing-sm);
+ font-weight: var(--font-semibold);
+}
+
+.section-title {
+ font-size: var(--text-4xl);
+ font-weight: var(--font-bold);
+ color: var(--text-light);
+ letter-spacing: -0.01em;
+ text-shadow: none;
+ position: relative;
+ padding-bottom: var(--spacing-sm);
+}
+
+.section-title::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 180px;
+ height: 4px;
+ background: linear-gradient(90deg, var(--primary-purple), transparent);
+ border-radius: 2px;
+}
+
+.section-content {
+ max-width: 100%;
+ margin: 0 auto;
+}
+
+.expert-intro {
+ background: var(--bg-card);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border-radius: var(--radius-xl);
+ padding: var(--spacing-lg);
+ margin-bottom: var(--spacing-xl);
+ border: 2px solid var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.expert-intro h3 {
+ font-size: var(--text-2xl);
+ color: var(--primary-purple);
+ margin-bottom: var(--spacing-lg);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.expert-intro p {
+ color: var(--text-gray);
+ line-height: 1.8;
+ font-size: var(--text-lg);
+}
+
+/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
+.grid {
+ display: grid;
+ gap: var(--spacing-2xl);
+}
+
+.grid-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-4 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+/* ========== 卡片 - 图片优先布局 ========== */
+.card {
+ background: var(--bg-card);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-radius: var(--radius-2xl);
+ overflow: hidden;
+ border: 2px solid var(--border-light);
+ transition: all var(--transition-base);
+ box-shadow: var(--shadow-md);
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.card:hover {
+ transform: translateY(-8px);
+ box-shadow: var(--shadow-xl), var(--shadow-purple);
+ border-color: var(--primary-purple);
+}
+
+.card-header {
+ padding: var(--spacing-xl);
+ background: var(--bg-semi-dark);
+ border-bottom: 2px solid var(--border-light);
+ order: 2;
+}
+
+.card-title {
+ font-size: var(--text-2xl);
+ font-weight: var(--font-semibold);
+ color: var(--primary-purple);
+ margin-bottom: var(--spacing-sm);
+}
+
+.card-body {
+ padding: var(--spacing-xl);
+ order: 3;
+ flex: 1;
+}
+
+/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
+.image-container {
+ width: 100%;
+ aspect-ratio: 3/2;
+ overflow: hidden;
+ border-radius: 0;
+ margin-bottom: 0;
+ background: rgba(0,0,0,0.5);
+ position: relative;
+ box-shadow: none;
+ border: none;
+ transition: all var(--transition-base);
+ order: 1;
+ flex-shrink: 0;
+}
+
+.image-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform var(--transition-slow);
+ filter: brightness(0.9);
+}
+
+.image-container:hover img {
+ transform: scale(1.1);
+ filter: brightness(1.1);
+}
+
+.image-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: var(--spacing-md);
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+ color: var(--text-light);
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ text-align: center;
+ transform: translateY(100%);
+ transition: transform var(--transition-base);
+}
+
+.image-container:hover .image-caption {
+ transform: translateY(0);
+}
+
+/* ========== 列表 ========== */
+.feature-list {
+ list-style: none;
+ padding: 0;
+}
+
+.feature-list li {
+ padding: var(--spacing-sm) 0;
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-gray);
+ transition: all var(--transition-fast);
+}
+
+.feature-list li:hover {
+ color: var(--primary-purple);
+ padding-left: var(--spacing-sm);
+}
+
+.feature-list li:last-child {
+ border-bottom: none;
+}
+
+/* ========== 统计数据 ========== */
+.stats {
+ display: flex;
+ gap: var(--spacing-md);
+ padding: var(--spacing-lg);
+ background: var(--bg-overlay);
+ backdrop-filter: blur(10px);
+ border-radius: var(--radius-lg);
+ border: 1px solid var(--border-light);
+}
+
+.stat-item {
+ flex: 1;
+ text-align: center;
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ background: var(--bg-card);
+ border: 1px solid transparent;
+ transition: all var(--transition-base);
+}
+
+.stat-item:hover {
+ background: var(--hover-bg);
+ transform: translateY(-4px);
+ border-color: var(--border-light);
+ box-shadow: var(--shadow-md);
+}
+
+.stat-label {
+ font-size: var(--text-sm);
+ color: var(--text-gray);
+ margin-bottom: var(--spacing-xs);
+}
+
+.stat-value {
+ font-size: var(--text-2xl);
+ font-weight: var(--font-bold);
+ color: var(--primary-purple);
+ text-shadow: none;
+}
+
+/* ========== 表格 ========== */
+.table-container {
+ overflow-x: auto;
+ margin: var(--spacing-xl) 0;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-lg);
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ background: var(--bg-card);
+ backdrop-filter: blur(10px);
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+}
+
+th {
+ background: var(--active-bg);
+ color: var(--primary-purple);
+ padding: var(--spacing-md);
+ text-align: left;
+ font-weight: var(--font-semibold);
+ border-bottom: 2px solid var(--primary-purple);
+}
+
+td {
+ padding: var(--spacing-md);
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-gray);
+}
+
+tr:last-child td {
+ border-bottom: none;
+}
+
+tr:hover {
+ background: var(--hover-bg);
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 768px) {
+ :root {
+ --spacing-sm: 0.75rem;
+ --spacing-md: 1rem;
+ --spacing-lg: 1.5rem;
+ --spacing-xl: 2rem;
+ --spacing-2xl: 3rem;
+ --spacing-3xl: 4rem;
+ }
+
+ .hero {
+ background-attachment: scroll;
+ }
+
+ .section:nth-child(odd),
+ .section:nth-child(even) {
+ background-attachment: scroll;
+ }
+
+ .hero-content {
+ padding: var(--spacing-lg);
+ }
+
+ .nav-container {
+ gap: var(--spacing-xs);
+ }
+
+ .nav-item {
+ padding: var(--spacing-xs) var(--spacing-md);
+ font-size: var(--text-sm);
+ }
+
+ .section {
+ padding: var(--spacing-2xl) 0;
+ }
+
+ .grid-2,
+ .grid-3,
+ .grid-4 {
+ grid-template-columns: 1fr;
+ }
+
+ .section-header {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .stats {
+ flex-direction: column;
+ }
+}
+
+/* ========== 动画 ========== */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.fade-in {
+ animation: fadeIn 0.6s ease forwards;
+}
+
+.slide-in {
+ animation: slideIn 0.6s ease forwards;
+}
+
+/* ========== 工具类 ========== */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.mt-xl { margin-top: var(--spacing-xl); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+
+.hidden { display: none; }
+.block { display: block; }
+.flex { display: flex; }
+.grid { display: grid; }
+
+.gap-sm { gap: var(--spacing-sm); }
+.gap-md { gap: var(--spacing-md); }
+.gap-lg { gap: var(--spacing-lg); }
+
+/* ========== 图片加载状态 ========== */
+img {
+ transition: opacity var(--transition-base);
+}
+
+img.loaded {
+ opacity: 1;
+}
+
+img.error {
+ opacity: 0.5;
+ filter: grayscale(1);
+}
+
+/* ========== SVG图标尺寸统一管理 ========== */
+.hero-description i[data-lucide] {
+ width: 24px !important;
+ height: 24px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.agent-name i[data-lucide] {
+ width: 20px !important;
+ height: 20px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.expert-intro h3 i[data-lucide] {
+ width: 40px !important;
+ height: 40px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 10px !important;
+}
+
+.feature-list li i[data-lucide] {
+ width: 18px !important;
+ height: 18px !important;
+ display: inline-block !important;
+ vertical-align: middle !important;
+ margin-right: 8px !important;
+}
+
+.nav-item i[data-lucide] {
+ width: 20px !important;
+ height: 20px !important;
+ display: block !important;
+ margin: 0 auto 4px !important;
+}
+
+/* ========== 主题切换按钮 ========== */
+.theme-toggle {
+ position: fixed;
+ top: 24px;
+ right: 24px;
+ z-index: 1000;
+}
+
+.theme-toggle-btn {
+ position: relative;
+ width: 64px;
+ height: 32px;
+ background: var(--bg-card);
+ border: 2px solid var(--border-light);
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 6px;
+ transition: all var(--transition-base);
+ box-shadow: var(--shadow-md);
+}
+
+.theme-toggle-btn:hover {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-lg);
+}
+
+.theme-toggle-btn:active {
+ transform: scale(0.95);
+}
+
+.theme-icon {
+ width: 18px !important;
+ height: 18px !important;
+ transition: all var(--transition-base);
+ color: var(--text-gray);
+}
+
+body:not(.dark-theme) .theme-icon-light {
+ color: var(--primary-purple);
+ transform: scale(1.2);
+}
+
+body:not(.dark-theme) .theme-icon-dark {
+ opacity: 0.5;
+}
+
+body.dark-theme .theme-icon-dark {
+ color: var(--primary-purple);
+ transform: scale(1.2);
+}
+
+body.dark-theme .theme-icon-light {
+ opacity: 0.5;
+}
diff --git a/web_frontend/web_result/order-classes/developer/images b/web_frontend/web_result/order-classes/developer/images
new file mode 120000
index 00000000..4ffd1e76
--- /dev/null
+++ b/web_frontend/web_result/order-classes/developer/images
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/智能开发/notion文稿/image
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/developer/index.html b/web_frontend/web_result/order-classes/developer/index.html
new file mode 100644
index 00000000..3c285976
--- /dev/null
+++ b/web_frontend/web_result/order-classes/developer/index.html
@@ -0,0 +1,672 @@
+
+
+
+
+
+ 在线教育平台开发项目 - 智能开发订单班
+
+
+
+
+
+
+
+
+
+
+
+
+
💻 智能开发订单班
+
在线教育平台
全栈开发项目
+
K12直播教学与智能学习管理系统
+
+ 实时直播互动教学
+ 智能回放与点播
+ AI学习进度追踪
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
项目背景
+
随着互联网教育的快速发展,K12教育领域对于在线学习的需求日益增长,尤其是直播和回放课程的需求不断上升。本项目旨在开发一个高效、稳定、互动性强的在线教育平台,支持直播教学、直播回放、课后作业管理、学生进度追踪、在线考试与反馈等功能。平台通过实时互动与多样化学习方式,提升学生的学习体验,帮助教师更好地管理课程和学生。
+
+
+
+
![平台首页]()
+
在线教育平台首页展示
+
+
+
+
+
+
+
+ - 直播教学与回放:实时互动、连麦举手
+ - 作业与考试管理:自动批改、实时反馈
+ - 学习进度追踪:AI分析、个性化建议
+ - 高并发支持:10万+在线、流畅无延迟
+
+
+
+
+
+
+
+
+ - 学生端:直播观看、作业提交、进度查看
+ - 教师端:课程管理、作业批改、学员互动
+ - 机构端:课程发布、资源调度、财务管理
+ - 运维端:权限管理、数据监控、系统维护
+
+
+
+
+
+
+
+
+
![直播间]()
+
+
+
+
实时直播互动,支持举手连麦、聊天问答、白板演示等多种互动方式。
+
+
+
+
+
+
![课程内容]()
+
+
+
+
完善的课程创建、编辑、发布流程,支持多种课程形式和资料上传。
+
+
+
+
+
+
![数据分析]()
+
+
+
+
AI驱动的学习数据分析,提供个性化学习路径和智能推荐。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
技术架构
+
平台采用前后端分离架构,使用微服务设计模式,确保系统的高可用性、可扩展性和高并发处理能力。前端使用React构建,后端基于Spring Boot微服务框架,数据库采用MySQL主从复制+Redis缓存,直播服务使用阿里云/腾讯云视频直播解决方案。
+
+
+
+
+
+
+
React + TypeScript
+
+ - React 18 + Hooks
+ - Redux Toolkit状态管理
+ - Ant Design UI组件库
+ - Vite构建工具
+
+
+
+
+
+
+
+
Spring Boot微服务
+
+ - Spring Boot 2.7
+ - Spring Security + JWT
+ - MyBatis Plus ORM
+ - Spring Cloud微服务
+
+
+
+
+
+
+
+
云原生部署
+
+ - MySQL 8.0主从复制
+ - Redis 6.0缓存集群
+ - 阿里云视频直播
+ - Docker + K8s部署
+
+
+
+
+
+
+
+
+
+ | 架构层次 |
+ 技术选型 |
+ 核心功能 |
+ 性能指标 |
+
+
+
+
+ | 前端层 |
+ React + TypeScript + Vite |
+ 用户界面、交互逻辑 |
+ 首屏加载<2s |
+
+
+ | 网关层 |
+ Spring Cloud Gateway |
+ 路由转发、负载均衡 |
+ QPS>10000 |
+
+
+ | 服务层 |
+ Spring Boot微服务 |
+ 业务逻辑处理 |
+ 响应时间<200ms |
+
+
+ | 数据层 |
+ MySQL + Redis |
+ 数据存储与缓存 |
+ 读写分离,缓存命中率>80% |
+
+
+ | 直播层 |
+ 阿里云视频直播 |
+ 直播推流、拉流 |
+ 延迟<3s,支持10万并发 |
+
+
+ | 存储层 |
+ 阿里云OSS |
+ 视频、文件存储 |
+ CDN加速,全球可用 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
功能模块
+
平台包含用户系统、课程管理、直播系统、作业考试、支付订单、数据分析等6大核心模块。每个模块都经过精心设计,确保用户体验流畅、功能完善、数据安全。
+
+
+
+
+
+
![用户注册]()
+
+
+
+
+ - 多方式注册登录
+ - JWT身份认证
+ - RBAC权限管理
+ - Token自动刷新
+
+
+
+
+
+
+
![课程展示]()
+
+
+
+
+ - 课程创建编辑
+ - 智能搜索推荐
+ - 资料上传管理
+ - 课程安排调度
+
+
+
+
+
+
+
![直播间]()
+
+
+
+
+ - 实时直播推流
+ - 互动聊天问答
+ - 举手连麦功能
+ - 直播回放点播
+
+
+
+
+
+
+
![数据分析]()
+
+
+
+
+ - 学习进度统计
+ - 成绩数据分析
+ - AI智能推荐
+ - 个性化建议
+
+
+
+
+
+
+
+
+
+
智能批改与反馈
+
+ - 作业在线布置与提交
+ - 自动批改客观题
+ - 教师批改主观题
+ - 成绩反馈与统计
+ - 在线考试与监考
+ - 限时答题与自动提交
+
+
+
+
+
+
+
+
安全便捷支付
+
+ - 支付宝/微信支付
+ - 购物车与订单管理
+ - 优惠券与促销活动
+ - 订单状态追踪
+ - 退款与售后处理
+ - 财务报表统计
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
技术实现
+
平台采用多项优化技术确保高性能和高可用性。包括数据库读写分离、Redis缓存优化、CDN加速、消息队列异步处理、微服务治理等。通过合理的架构设计和技术选型,平台能够稳定支撑10万+并发用户同时在线。
+
+
+
+
+
+
![API配置]()
+
+
+
+
+ - 统一鉴权认证
+ - 流量限流熔断
+ - 动态路由转发
+ - 实时监控告警
+
+
+
+
+
+
+
![数据管理]()
+
+
+
+
+ - 读写分离架构
+ - Redis多级缓存
+ - 分库分表设计
+ - 冷热数据分离
+
+
+
+
+
+
+
![课程数据]()
+
+
+
+
+ - CDN全球加速
+ - 静态资源压缩
+ - 消息队列异步
+ - 负载均衡优化
+
+
+
+
+
+
+
+
+
+ | 优化项 |
+ 技术方案 |
+ 实现效果 |
+ 性能指标 |
+
+
+
+
+ | 数据库优化 |
+ MySQL主从复制+读写分离 |
+ 读写性能提升3倍 |
+ QPS>5000 |
+
+
+ | 缓存优化 |
+ Redis集群+多级缓存 |
+ 响应时间降低80% |
+ 缓存命中率>85% |
+
+
+ | 直播优化 |
+ 阿里云CDN+智能调度 |
+ 全球流畅观看 |
+ 延迟<3s |
+
+
+ | 前端优化 |
+ Webpack分包+懒加载 |
+ 首屏加载提速50% |
+ FCP<1.5s |
+
+
+ | 异步处理 |
+ RabbitMQ消息队列 |
+ 系统吞吐量提升5倍 |
+ TPS>10000 |
+
+
+ | 服务治理 |
+ Nacos+Sentinel |
+ 服务高可用99.9% |
+ 故障自愈<30s |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 项目成果总结
+
+
+
+
+
+
+
+ - React 18 + TypeScript前端
+ - Spring Boot微服务后端
+ - MySQL主从+Redis集群
+ - 阿里云视频直播服务
+ - Spring Cloud微服务治理
+ - Docker + K8s容器化
+ - JWT认证+RBAC权限
+ - RabbitMQ消息队列
+
+
+
+
+
+
+
+
+ - 实时直播互动教学
+ - 直播回放智能点播
+ - 作业考试自动批改
+ - AI学习进度追踪
+ - 在线支付订单管理
+ - 数据分析智能推荐
+ - 多角色权限管理
+ - 系统监控运维管理
+
+
+
+
+
+
+
+
+ - 支持10万+并发在线
+ - API响应<200ms
+ - 首屏加载<2秒
+ - 直播延迟<3秒
+ - 数据库QPS>5000
+ - 消息TPS>10000
+ - 系统可用性99.9%
+ - CDN全球加速
+
+
+
+
+
+
+
💻 在线教育平台全栈开发项目圆满完成!
+
© 2024 智能开发订单班 | K12在线教育解决方案
+
+
+
+
+
+
+
diff --git a/web_frontend/web_result/order-classes/developer/js/main.js b/web_frontend/web_result/order-classes/developer/js/main.js
new file mode 100644
index 00000000..3e939adf
--- /dev/null
+++ b/web_frontend/web_result/order-classes/developer/js/main.js
@@ -0,0 +1,269 @@
+// 在线教育平台开发项目 - 主要JavaScript逻辑
+
+// 页面初始化
+document.addEventListener('DOMContentLoaded', function() {
+ console.log('💻 智能开发订单班在线教育平台页面加载完成');
+
+ // 初始化Lucide图标
+ if (typeof lucide !== 'undefined') {
+ lucide.createIcons();
+ }
+
+ // 初始化组件
+ initNavigation();
+ initAnimations();
+ initLazyLoading();
+ initSmoothScroll();
+ updateStats();
+ initThemeToggle();
+});
+
+// 导航功能
+function initNavigation() {
+ const navItems = document.querySelectorAll('.nav-item');
+ const sections = document.querySelectorAll('.section');
+
+ // 点击导航项滚动到对应区块
+ navItems.forEach((item, index) => {
+ item.addEventListener('click', () => {
+ // 移除所有活跃状态
+ navItems.forEach(nav => nav.classList.remove('active'));
+ // 添加当前活跃状态
+ item.classList.add('active');
+
+ // 滚动到对应区块
+ if (sections[index]) {
+ const targetSection = sections[index];
+ const offsetTop = targetSection.offsetTop - 100;
+
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // 滚动时更新导航活跃状态
+ window.addEventListener('scroll', () => {
+ let current = '';
+ sections.forEach((section, index) => {
+ const sectionTop = section.offsetTop - 150;
+ if (scrollY >= sectionTop) {
+ current = index;
+ }
+ });
+
+ navItems.forEach((item, index) => {
+ item.classList.remove('active');
+ if (index === current) {
+ item.classList.add('active');
+ }
+ });
+ });
+}
+
+// 动画初始化
+function initAnimations() {
+ // 使用 Intersection Observer 实现滚动动画
+ const observerOptions = {
+ root: null,
+ rootMargin: '0px',
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ // 观察所有需要动画的元素
+ const animatedElements = document.querySelectorAll('.card, .expert-intro');
+ animatedElements.forEach(el => {
+ el.style.opacity = '0';
+ observer.observe(el);
+ });
+}
+
+// 图片懒加载
+function initLazyLoading() {
+ const images = document.querySelectorAll('img[data-src]');
+
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ const src = img.getAttribute('data-src');
+
+ // 创建新图片对象来预加载
+ const tempImg = new Image();
+ tempImg.onload = function() {
+ img.src = src;
+ img.classList.add('loaded');
+ };
+ tempImg.onerror = function() {
+ // 如果图片加载失败,使用紫色主题占位图
+ img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23faf5ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%238b5cf6"%3E图片加载中%3C/text%3E%3C/svg%3E';
+ img.classList.add('error');
+ };
+ tempImg.src = src;
+
+ img.removeAttribute('data-src');
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ images.forEach(img => {
+ imageObserver.observe(img);
+ });
+}
+
+// 平滑滚动
+function initSmoothScroll() {
+ // 为所有锚点链接添加平滑滚动
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const targetId = this.getAttribute('href');
+ if (targetId === '#') return;
+
+ const target = document.querySelector(targetId);
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+}
+
+// 更新统计数据 - 在线教育平台数据
+function updateStats() {
+ // 动画数字增长效果 - 在线教育平台相关数据
+ const stats = [
+ { selector: '.concurrent-users', value: 10, suffix: '万' },
+ { selector: '.feature-modules', value: 6, suffix: '个' },
+ { selector: '.microservices-count', value: 8, suffix: '个' },
+ { selector: '.redis-nodes', value: 6, suffix: '节点' },
+ { selector: '.live-latency', value: 3, suffix: '秒' },
+ { selector: '.db-qps', value: 5000, suffix: '' },
+ { selector: '.message-tps', value: 1, suffix: '万' }
+ ];
+
+ stats.forEach(stat => {
+ const element = document.querySelector(stat.selector);
+ if (element) {
+ animateValue(element, 0, stat.value, 2000, stat.suffix);
+ }
+ });
+}
+
+// 数字动画函数
+function animateValue(element, start, end, duration, suffix = '') {
+ const startTime = performance.now();
+
+ function update(currentTime) {
+ const elapsed = currentTime - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // 使用缓动函数
+ const easeOutQuad = progress * (2 - progress);
+ let current;
+
+ // 处理小数值
+ if (end < 10 && end % 1 !== 0) {
+ current = (start + (end - start) * easeOutQuad).toFixed(1);
+ } else {
+ current = Math.floor(start + (end - start) * easeOutQuad);
+ }
+
+ element.textContent = current + suffix;
+
+ if (progress < 1) {
+ requestAnimationFrame(update);
+ }
+ }
+
+ requestAnimationFrame(update);
+}
+
+// 错误处理
+window.addEventListener('error', function(e) {
+ if (e.target.tagName === 'IMG') {
+ console.warn('图片加载失败:', e.target.src);
+ e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23faf5ff"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%238b5cf6"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
+ e.target.classList.add('error');
+ }
+}, true);
+
+// 移动端优化
+if ('ontouchstart' in window) {
+ document.body.classList.add('touch-device');
+
+ // 移动端点击优化
+ let touchStartTime;
+ document.addEventListener('touchstart', () => {
+ touchStartTime = Date.now();
+ });
+
+ document.addEventListener('touchend', (e) => {
+ const touchEndTime = Date.now();
+ if (touchEndTime - touchStartTime < 200) {
+ // 快速点击
+ e.preventDefault();
+ }
+ });
+}
+
+// 性能监控
+if (window.performance && window.performance.timing) {
+ window.addEventListener('load', () => {
+ setTimeout(() => {
+ const timing = window.performance.timing;
+ const loadTime = timing.loadEventEnd - timing.navigationStart;
+ console.log(`页面加载时间: ${loadTime}ms`);
+
+ // 如果加载时间过长,提示用户
+ if (loadTime > 3000) {
+ console.warn('页面加载时间较长,可能需要优化');
+ }
+ }, 0);
+ });
+}
+
+// 主题切换功能
+function initThemeToggle() {
+ const themeToggleBtn = document.getElementById('themeToggleBtn');
+
+ // 从localStorage读取用户的主题偏好
+ const savedTheme = localStorage.getItem('theme');
+ // 如果没有保存的偏好,默认使用暗色主题
+ if (savedTheme === 'dark' || savedTheme === null) {
+ document.body.classList.add('dark-theme');
+ }
+
+ // 点击切换主题
+ if (themeToggleBtn) {
+ themeToggleBtn.addEventListener('click', () => {
+ document.body.classList.toggle('dark-theme');
+
+ // 保存用户偏好
+ if (document.body.classList.contains('dark-theme')) {
+ localStorage.setItem('theme', 'dark');
+ } else {
+ localStorage.setItem('theme', 'light');
+ }
+
+ // 重新初始化图标以确保正确显示
+ if (typeof lucide !== 'undefined') {
+ lucide.createIcons();
+ }
+ });
+ }
+}