feat: 完成大健康订单班展示页面开发

详细说明:
- 主题: 心理咨询服务全流程方案
- 配色: 翠绿医疗主题(#10b981, #059669, #34d399)
- 4个专家角色: 用户分析师、心理学家、治疗师、精神病学家
- 核心内容: CBT认知行为疗法、MBCT正念减压、社交暴露训练
- 数据展示: SAS/SDS/PSQI量表评估、12次咨询周期、6个干预阶段
- 功能特性: 深色/浅色主题切换、玻璃态设计、懒加载、视差滚动
- 文件清单:
  * index.html (723行) - 完整页面结构
  * css/styles.css (962行) - 翠绿医疗主题样式
  * js/main.js (268行) - 交互逻辑和统计动画
  * symlinks: agent-avatars/ 和 images/
- 影响模块: 订单班展示系统
- 进度: 8/12订单班完成

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web_frontend/web_result/order-classes/health/agent-avatars

@@ -0,0 +1 @@
+../../../../data/订单班文档资料/大健康/agent头像

web_frontend/web_result/order-classes/health/css/styles.css

@@ -0,0 +1,961 @@
+/* 心理咨询服务全流程方案 - 大健康订单班翠绿医疗设计系统 */
+
+/* ========== 设计变量 ========== */
+:root {
+    /* 翠绿医疗主题 - 大健康风格 */
+    --bg-dark: #f0fdf4;              /* 浅绿背景 */
+    --bg-semi-dark: rgba(240, 253, 244, 0.95);  /* 半透明浅绿 */
+    --bg-overlay: rgba(255, 255, 255, 0.85);    /* 白色遮罩 */
+    --bg-card: rgba(255, 255, 255, 0.9);        /* 卡片背景 */
+    --primary-dark: #065f46;         /* 主色深绿 */
+    --primary-green: #10b981;        /* 主色绿 - 大健康专业 */
+    --accent-emerald: #059669;       /* 翡翠绿强调 - 医疗主题 */
+    --accent-emerald-light: #34d399; /* 浅翡翠绿 */
+    --text-light: #065f46;           /* 深色文字 */
+    --text-gray: #6b7280;            /* 灰色文字 */
+    --border-light: rgba(16, 185, 129, 0.2);  /* 绿色边框 */
+    --hover-bg: rgba(16, 185, 129, 0.15);     /* 悬停背景 */
+    --active-bg: rgba(16, 185, 129, 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-green: 0 2px 8px rgba(16, 185, 129, 0.15);
+
+    /* 过渡 */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+    --transition-slow: 350ms ease;
+
+    /* 布局 */
+    --container-max: 1600px;  /* 增加最大宽度适配1920屏幕 */
+}
+
+/* ========== 深色主题 - 深邃翠绿配色 ========== */
+body.dark-theme {
+    --bg-dark: #064e3b;                      /* 深邃绿黑背景 */
+    --bg-semi-dark: rgba(6, 78, 59, 0.95);   /* 深绿半透明 */
+    --bg-overlay: rgba(5, 150, 105, 0.85);   /* 深绿遮罩层 */
+    --bg-card: rgba(16, 185, 129, 0.9);      /* 深绿卡片背景 */
+    --primary-dark: #064e3b;                 /* 深邃绿黑 */
+    --primary-green: #34d399;                /* 明亮绿 */
+    --accent-emerald: #6ee7b7;               /* 亮翡翠绿 */
+    --accent-emerald-light: #a7f3d0;         /* 超亮翡翠绿 */
+    --text-light: #f0fdf4;                   /* 浅色文字 */
+    --text-gray: #bbf7d0;                    /* 灰色文字 */
+    --border-light: rgba(52, 211, 153, 0.25); /* 绿色边框 */
+    --hover-bg: rgba(16, 185, 129, 0.15);    /* 悬停背景 */
+    --active-bg: rgba(52, 211, 153, 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-green: 0 2px 8px rgba(16, 185, 129, 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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(6, 78, 59, 0.9) 0%, rgba(5, 150, 105, 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(16, 185, 129, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(5, 150, 105, 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(16, 185, 129, 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-green);
+    box-shadow: var(--shadow-green);
+    text-transform: uppercase;
+    transition: all var(--transition-base);
+}
+
+.hero-badge:hover {
+    background: rgba(16, 185, 129, 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-emerald-light);
+    text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(16, 185, 129, 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-green);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-green);
+}
+
+.nav-item.active {
+    background: var(--active-bg);
+    color: var(--primary-green);
+    border-color: var(--primary-green);
+    box-shadow: var(--shadow-green);
+}
+
+/* ========== 内容区块 - 图片背景 ========== */
+.section {
+    padding: var(--spacing-2xl) 0;
+    background: var(--bg-dark);
+    position: relative;
+}
+
+/* 浅色图片背景 - 每个区块使用不同图片 */
+.section:nth-child(1) {
+    background-image:
+        linear-gradient(to bottom, rgba(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 1) 100%),
+        url('../images/干预方法选择示意图.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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(240, 253, 244, 0.9) 0%, rgba(236, 253, 245, 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(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 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(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 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(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 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(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 0.88) 100%),
+        url('../images/干预方法选择示意图.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(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 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(5, 150, 105, 0.90) 0%, rgba(6, 78, 59, 0.88) 100%),
+        url('../images/情绪数据分析表.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 深色主题下的特定元素调整 */
+body.dark-theme .stat-item {
+    background: rgba(16, 185, 129, 0.8);
+    backdrop-filter: blur(5px);
+}
+
+body.dark-theme .stat-item:hover {
+    background: rgba(52, 211, 153, 0.15);
+    border-color: var(--primary-green);
+}
+
+body.dark-theme .stat-value {
+    color: var(--accent-emerald-light);
+}
+
+body.dark-theme th {
+    background: rgba(52, 211, 153, 0.12);
+    color: var(--accent-emerald-light);
+}
+
+body.dark-theme tr:hover {
+    background: rgba(52, 211, 153, 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-green);
+    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-emerald);
+}
+
+.agent-info {
+    flex: 1;
+}
+
+.agent-name {
+    font-size: var(--text-lg);
+    color: var(--primary-green);
+    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-green), 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-green);
+    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-green);
+    border-color: var(--primary-green);
+}
+
+.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-green);
+    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-green);
+    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-green);
+    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-green);
+    padding: var(--spacing-md);
+    text-align: left;
+    font-weight: var(--font-semibold);
+    border-bottom: 2px solid var(--primary-green);
+}
+
+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-green);
+    transform: scale(1.2);
+}
+
+body:not(.dark-theme) .theme-icon-dark {
+    opacity: 0.5;
+}
+
+body.dark-theme .theme-icon-dark {
+    color: var(--primary-green);
+    transform: scale(1.2);
+}
+
+body.dark-theme .theme-icon-light {
+    opacity: 0.5;
+}

web_frontend/web_result/order-classes/health/images

@@ -0,0 +1 @@
+../../../../data/订单班文档资料/大健康/notion文稿/image

web_frontend/web_result/order-classes/health/index.html

@@ -0,0 +1,722 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>心理咨询服务全流程方案 - 大健康订单班</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+</head>
+<body class="dark-theme">
+    <!-- 主题切换按钮 -->
+    <div class="theme-toggle">
+        <button id="themeToggleBtn" class="theme-toggle-btn">
+            <i data-lucide="sun" class="theme-icon theme-icon-light"></i>
+            <i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
+        </button>
+    </div>
+
+    <!-- Hero 区域 -->
+    <section class="hero">
+        <div class="hero-content">
+            <div class="hero-badge">💚 大健康订单班</div>
+            <h1 class="hero-title">心理咨询服务<br>全流程方案</h1>
+            <h2 class="hero-subtitle">科学评估 · 系统干预 · 持续跟踪</h2>
+            <p class="hero-description">
+                <i data-lucide="brain"></i> 认知行为疗法(CBT)核心<br>
+                <i data-lucide="heart"></i> 专业心理测评体系<br>
+                <i data-lucide="activity"></i> 全周期效果追踪
+            </p>
+        </div>
+    </section>
+
+    <!-- 导航栏 -->
+    <nav class="nav">
+        <div class="nav-container">
+            <div class="nav-item active">
+                <i data-lucide="user-search"></i>
+                <span>用户分析</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="target"></i>
+                <span>问题评估</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="clipboard-list"></i>
+                <span>咨询方案</span>
+            </div>
+            <div class="nav-item">
+                <i data-lucide="chart-line"></i>
+                <span>效果评估</span>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Section 1: 用户分析与初步接待 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/用户分析师.jpg" alt="用户分析师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="user-search"></i> 用户分析师
+                    </div>
+                    <h2 class="section-title">用户分析与初步接待</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="user-circle"></i> 来访者基本情况</h3>
+                    <p>来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状，严重影响工作表现和生活质量。</p>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">问题陈述</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>主要症状:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="message-square"></i> 被点名发言时紧张到说不出话</li>
+                                <li><i data-lucide="users"></i> 害怕在团队会议中出丑</li>
+                                <li><i data-lucide="moon"></i> 会议前一晚睡不着觉</li>
+                                <li><i data-lucide="brain"></i> 第二天脑子一片空白</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">初步心理测评</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>专业量表评估:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="alert-triangle"></i> SAS焦虑量表: 65分(中度焦虑)</li>
+                                <li><i data-lucide="frown"></i> SDS抑郁量表: 58分(轻度抑郁)</li>
+                                <li><i data-lucide="moon"></i> PSQI睡眠指数: 13分(睡眠障碍)</li>
+                                <li><i data-lucide="trending-down"></i> 自我效能: 3/10分(偏低)</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="image-container" style="margin-top: var(--spacing-xl);">
+                    <img data-src="images/情绪数据分析表.jpg" alt="情绪数据分析表" loading="lazy">
+                    <div class="image-caption">专业心理测评数据分析报告</div>
+                </div>
+
+                <div class="grid grid-3" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">情绪观察</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="zap"></i> 语速偏快,双手紧握</li>
+                                <li><i data-lucide="eye-off"></i> 眼神回避,不敢直视</li>
+                                <li><i data-lucide="droplet"></i> 谈到考核时眼眶泛红</li>
+                                <li><i data-lucide="activity"></i> 情绪波动明显</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">咨询动机</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="target"></i> 改善公众发言焦虑</li>
+                                <li><i data-lucide="briefcase"></i> 试用期前恢复自信</li>
+                                <li><i data-lucide="trending-up"></i> 提升工作表现</li>
+                                <li><i data-lucide="users"></i> 改善人际关系</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">咨询契约</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="clock"></i> 时长: 50分钟/次</li>
+                                <li><i data-lucide="calendar"></i> 周期: 8-10次</li>
+                                <li><i data-lucide="repeat"></i> 频率: 每周1次</li>
+                                <li><i data-lucide="shield"></i> 严格保密原则</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">SAS焦虑评分</div>
+                        <div class="stat-value sas-score">0分</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">SDS抑郁评分</div>
+                        <div class="stat-value sds-score">0分</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">睡眠质量指数</div>
+                        <div class="stat-value psqi-score">0分</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">自我效能感</div>
+                        <div class="stat-value">3/10</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 2: 问题评估与目标设定 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/心理学家.jpg" alt="心理学家" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="brain"></i> 心理学家
+                    </div>
+                    <h2 class="section-title">问题评估与目标设定</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="search"></i> 问题根源分析</h3>
+                    <p>通过深入分析发现,来访者困扰起始于入职第3个月的全员会议,当时被临时点名发言,因准备不足而出现严重紧张,事后同事的玩笑让她觉得"出丑"。近期又因试用期考核和与同组同事的绩效比较加剧了紧张感。明确诱因为:突发公众表达场景+高压绩效考核。</p>
+                </div>
+
+                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
+                    <img data-src="images/心理状态结构化分析示意图.jpg" alt="心理状态分析" loading="lazy">
+                    <div class="image-caption">心理状态结构化分析模型</div>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">维持机制识别</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>三个层面分析:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="brain"></i> 思维层面: 负性自动化思维("大家都觉得我很差")</li>
+                                <li><i data-lucide="activity"></i> 行为层面: 安全行为(写逐字稿、坐角落、避免眼神)</li>
+                                <li><i data-lucide="heart-pulse"></i> 生理层面: 心跳加速、手心出汗、呼吸急促</li>
+                                <li><i data-lucide="refresh-cw"></i> 循环强化: 短期缓解导致长期恶化</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">生活功能影响</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>多维度受损:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="briefcase"></i> 工作: 无法完整表达,影响团队协作</li>
+                                <li><i data-lucide="moon"></i> 睡眠: 入睡延长至40-60分钟</li>
+                                <li><i data-lucide="users"></i> 人际: 主动交流减少,午餐独自解决</li>
+                                <li><i data-lucide="trending-down"></i> 效能: 自评仅3分(正常6-7分)</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="image-container" style="margin-top: var(--spacing-xl);">
+                    <img data-src="images/目标设定可视化示意图.jpg" alt="目标设定" loading="lazy">
+                    <div class="image-caption">科学目标设定可视化模型</div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>目标阶段</th>
+                                <th>具体目标</th>
+                                <th>评估指标</th>
+                                <th>预期时间</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>短期目标</td>
+                                <td>识别负性思维,掌握放松训练</td>
+                                <td>记录思维≥3条/次,焦虑9→6分</td>
+                                <td>1-4次咨询</td>
+                            </tr>
+                            <tr>
+                                <td>中期目标</td>
+                                <td>小组会议主动发言,改善睡眠</td>
+                                <td>发言≥2次/周,PSQI≤8分</td>
+                                <td>5-8次咨询</td>
+                            </tr>
+                            <tr>
+                                <td>长期目标</td>
+                                <td>公众场合独立发言,焦虑正常化</td>
+                                <td>SAS≤45分,焦虑≤4/10分</td>
+                                <td>8-12次咨询</td>
+                            </tr>
+                            <tr>
+                                <td>维持目标</td>
+                                <td>自我效能提升并保持稳定</td>
+                                <td>效能≥7分,保持1月以上</td>
+                                <td>后续巩固</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">咨询周期</div>
+                        <div class="stat-value">8-10次</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">目标焦虑评分</div>
+                        <div class="stat-value target-anxiety">0/10</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">目标睡眠指数</div>
+                        <div class="stat-value">≤8分</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">预期总周期</div>
+                        <div class="stat-value">3-4月</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 3: 咨询方案制定 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/治疗师.jpg" alt="治疗师" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="stethoscope"></i> 治疗师
+                    </div>
+                    <h2 class="section-title">咨询方案制定</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="clipboard-list"></i> 干预方法选择</h3>
+                    <p>采用认知行为疗法(CBT)为主,帮助来访者识别并修正负性自动化思维(如"我一定会出丑")。辅以正念减压(MBCT),提升其觉察与情绪调节能力。在人际层面适度引入社交暴露训练,逐步减少会议发言恐惧。</p>
+                </div>
+
+                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
+                    <img data-src="images/干预方法选择示意图.jpg" alt="干预方法" loading="lazy">
+                    <div class="image-caption">科学干预方法体系架构</div>
+                </div>
+
+                <div class="grid grid-3">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">认知行为疗法(CBT)</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>核心技术:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="eye"></i> 识别负性自动化思维</li>
+                                <li><i data-lucide="edit"></i> 认知重构与替换</li>
+                                <li><i data-lucide="list"></i> 思维记录与分析</li>
+                                <li><i data-lucide="check-circle"></i> 行为实验验证</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">正念减压(MBCT)</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>练习方法:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="wind"></i> 正念呼吸10分钟/日</li>
+                                <li><i data-lucide="scan"></i> 身体扫描练习</li>
+                                <li><i data-lucide="heart"></i> 非评判性接纳</li>
+                                <li><i data-lucide="compass"></i> 提升情绪觉察力</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">社交暴露训练</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>渐进式练习:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="users"></i> 模拟会议演练</li>
+                                <li><i data-lucide="mic"></i> 逐步延长发言时长</li>
+                                <li><i data-lucide="trending-up"></i> 小组→全员会议</li>
+                                <li><i data-lucide="target"></i> 减少安全行为依赖</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-2" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">咨询周期安排</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>12次会谈计划:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="calendar"></i> 前6次: 集中干预期,每周1次</li>
+                                <li><i data-lucide="calendar-check"></i> 后6次: 巩固期,每2周1次</li>
+                                <li><i data-lucide="clock"></i> 单次时长: 50分钟</li>
+                                <li><i data-lucide="trending-up"></i> 总周期: 3-4个月</li>
+                                <li><i data-lucide="settings"></i> 根据进展可调整</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">放松训练技巧</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>实用方法:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="wind"></i> 腹式呼吸训练</li>
+                                <li><i data-lucide="activity"></i> 渐进性肌肉放松</li>
+                                <li><i data-lucide="image"></i> 想象放松技术</li>
+                                <li><i data-lucide="target"></i> 焦虑场景应用</li>
+                                <li><i data-lucide="trending-down"></i> 目标: 9/10→6/10</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>咨询阶段</th>
+                                <th>次数</th>
+                                <th>核心内容</th>
+                                <th>预期成果</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>评估建立期</td>
+                                <td>第1-2次</td>
+                                <td>深化评估,讲解CBT模型,记录思维</td>
+                                <td>建立咨询关系,理解焦虑机制</td>
+                            </tr>
+                            <tr>
+                                <td>认知重构期</td>
+                                <td>第3-4次</td>
+                                <td>认知重构练习,替换负性思维</td>
+                                <td>掌握认知技术,思维灵活度↑</td>
+                            </tr>
+                            <tr>
+                                <td>技能训练期</td>
+                                <td>第5-6次</td>
+                                <td>呼吸放松,肌肉放松,焦虑应对</td>
+                                <td>焦虑控制能力提升(9→6分)</td>
+                            </tr>
+                            <tr>
+                                <td>暴露练习期</td>
+                                <td>第7-8次</td>
+                                <td>模拟演练,真实场景发言练习</td>
+                                <td>会议发言≥2次/周,时长3分钟</td>
+                            </tr>
+                            <tr>
+                                <td>正念整合期</td>
+                                <td>第9-10次</td>
+                                <td>正念练习,非评判性接纳紧张</td>
+                                <td>情绪调节能力提升</td>
+                            </tr>
+                            <tr>
+                                <td>巩固结案期</td>
+                                <td>第11-12次</td>
+                                <td>复盘成果,预防复发,再测量表</td>
+                                <td>SAS≤45分,具备自我维持能力</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">总咨询次数</div>
+                        <div class="stat-value therapy-sessions">0次</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">核心技术数</div>
+                        <div class="stat-value">3种</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">练习频率</div>
+                        <div class="stat-value">每日</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">咨询阶段</div>
+                        <div class="stat-value therapy-stages">0个</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Section 4: 效果评估与后期巩固 -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <img src="agent-avatars/精神病学家.jpg" alt="精神病学家" class="agent-avatar">
+                <div class="agent-info">
+                    <div class="agent-name">
+                        <i data-lucide="award"></i> 精神病学家
+                    </div>
+                    <h2 class="section-title">效果评估与后期巩固</h2>
+                </div>
+            </div>
+
+            <div class="section-content">
+                <div class="expert-intro">
+                    <h3><i data-lucide="chart-line"></i> 效果评估</h3>
+                    <p>通过对比前后测评数据、回顾目标达成度和来访者主观感受,科学评估干预成效。此阶段要确保来访者能将咨询中习得的认知、行为和情绪调节技巧融入日常生活,实现长期心理健康。</p>
+                </div>
+
+                <div class="image-container" style="margin-bottom: var(--spacing-xl);">
+                    <img data-src="images/临床心理结案报告.jpg" alt="结案报告" loading="lazy">
+                    <div class="image-caption">临床心理咨询结案报告</div>
+                </div>
+
+                <div class="grid grid-2">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">量表数据对比</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>前后测对比:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="trending-down"></i> SAS: 65分→42分(下降35%)</li>
+                                <li><i data-lucide="trending-down"></i> SDS: 58分→46分(下降20%)</li>
+                                <li><i data-lucide="trending-down"></i> PSQI: 13分→6分(改善54%)</li>
+                                <li><i data-lucide="trending-up"></i> 效能: 3/10→7.5/10(提升150%)</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">目标达成情况</h3>
+                        </div>
+                        <div class="card-body">
+                            <p><strong>各阶段成果:</strong></p>
+                            <ul class="feature-list">
+                                <li><i data-lucide="check-circle"></i> 短期: 识别思维≥5条/周 ✅</li>
+                                <li><i data-lucide="check-circle"></i> 中期: 稳定发言2-3分钟 ✅</li>
+                                <li><i data-lucide="check-square"></i> 长期: 焦虑控制4-5/10 ⚡</li>
+                                <li><i data-lucide="trending-up"></i> 需继续练习巩固</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-3" style="margin-top: var(--spacing-xl);">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">随访计划</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="phone"></i> 1个月后电话回访</li>
+                                <li><i data-lucide="video"></i> 检查焦虑与睡眠</li>
+                                <li><i data-lucide="user-check"></i> 3个月后面对面</li>
+                                <li><i data-lucide="clipboard-check"></i> 再次量表评估</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">复发预防</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="alert-triangle"></i> 识别预警信号</li>
+                                <li><i data-lucide="book-open"></i> 复习认知技术</li>
+                                <li><i data-lucide="activity"></i> 持续放松练习</li>
+                                <li><i data-lucide="phone-call"></i> 必要时及时求助</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">巩固建议</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="feature-list">
+                                <li><i data-lucide="calendar"></i> 每日正念10分钟</li>
+                                <li><i data-lucide="edit"></i> 每周思维记录</li>
+                                <li><i data-lucide="users"></i> 参加支持小组</li>
+                                <li><i data-lucide="book"></i> 阅读自助书籍</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-container" style="margin-top: var(--spacing-xl);">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>评估维度</th>
+                                <th>干预前</th>
+                                <th>干预后</th>
+                                <th>改善幅度</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>SAS焦虑量表</td>
+                                <td>65分(中度焦虑)</td>
+                                <td>42分(正常)</td>
+                                <td>↓35%</td>
+                            </tr>
+                            <tr>
+                                <td>SDS抑郁量表</td>
+                                <td>58分(轻度抑郁)</td>
+                                <td>46分(正常)</td>
+                                <td>↓20%</td>
+                            </tr>
+                            <tr>
+                                <td>PSQI睡眠指数</td>
+                                <td>13分(严重障碍)</td>
+                                <td>6分(轻度失眠)</td>
+                                <td>↓54%</td>
+                            </tr>
+                            <tr>
+                                <td>自我效能感</td>
+                                <td>3/10分</td>
+                                <td>7.5/10分</td>
+                                <td>↑150%</td>
+                            </tr>
+                            <tr>
+                                <td>会议焦虑评分</td>
+                                <td>9/10分</td>
+                                <td>4-5/10分</td>
+                                <td>↓50%</td>
+                            </tr>
+                            <tr>
+                                <td>发言频率</td>
+                                <td>0次/周</td>
+                                <td>2-3次/周</td>
+                                <td>显著提升</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="stats" style="margin-top: var(--spacing-xl);">
+                    <div class="stat-item">
+                        <div class="stat-label">焦虑改善率</div>
+                        <div class="stat-value improvement-rate">0%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">睡眠改善率</div>
+                        <div class="stat-value">54%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">效能提升率</div>
+                        <div class="stat-value">150%</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">随访次数</div>
+                        <div class="stat-value">2次</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer: 项目成果总结 -->
+    <section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
+        <div class="container">
+            <h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
+                <i data-lucide="award"></i> 心理咨询服务成果总结
+            </h2>
+
+            <div class="grid grid-3">
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">💚 服务流程</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="user-search"></i> 用户分析与初步接待</li>
+                            <li><i data-lucide="clipboard"></i> 专业心理测评体系</li>
+                            <li><i data-lucide="target"></i> 问题评估与目标设定</li>
+                            <li><i data-lucide="brain"></i> 认知行为疗法(CBT)</li>
+                            <li><i data-lucide="heart"></i> 正念减压训练(MBCT)</li>
+                            <li><i data-lucide="users"></i> 社交暴露渐进练习</li>
+                            <li><i data-lucide="chart-line"></i> 效果评估与数据对比</li>
+                            <li><i data-lucide="phone"></i> 后期随访与巩固</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">⚡ 核心技术</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="eye"></i> 负性思维识别与重构</li>
+                            <li><i data-lucide="wind"></i> 腹式呼吸放松训练</li>
+                            <li><i data-lucide="activity"></i> 渐进性肌肉放松</li>
+                            <li><i data-lucide="compass"></i> 正念呼吸10分钟/日</li>
+                            <li><i data-lucide="users"></i> 模拟会议演练</li>
+                            <li><i data-lucide="trending-up"></i> 渐进式暴露疗法</li>
+                            <li><i data-lucide="shield"></i> 安全行为消退</li>
+                            <li><i data-lucide="book-open"></i> 复发预防计划</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-header" style="order: 1;">
+                        <h3 class="card-title">🎯 干预成果</h3>
+                    </div>
+                    <div class="card-body" style="order: 2;">
+                        <ul class="feature-list">
+                            <li><i data-lucide="trending-down"></i> SAS焦虑: 65→42分(-35%)</li>
+                            <li><i data-lucide="trending-down"></i> SDS抑郁: 58→46分(-20%)</li>
+                            <li><i data-lucide="moon"></i> PSQI睡眠: 13→6分(-54%)</li>
+                            <li><i data-lucide="trending-up"></i> 自我效能: 3→7.5分(+150%)</li>
+                            <li><i data-lucide="message-square"></i> 发言频率: 0→2-3次/周</li>
+                            <li><i data-lucide="clock"></i> 咨询周期: 12次/3-4月</li>
+                            <li><i data-lucide="check-circle"></i> 目标达成: 短中期✅</li>
+                            <li><i data-lucide="phone"></i> 随访计划: 1月+3月</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
+                <p>💚 心理咨询服务全流程方案圆满完成!</p>
+                <p style="margin-top: var(--spacing-sm);">© 2024 大健康订单班 | 专业心理健康服务解决方案</p>
+            </div>
+        </div>
+    </section>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

web_frontend/web_result/order-classes/health/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="%23f0fdf4"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%2310b981"%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: '.sas-score', value: 65, suffix: '分' },
+        { selector: '.sds-score', value: 58, suffix: '分' },
+        { selector: '.psqi-score', value: 13, suffix: '分' },
+        { selector: '.target-anxiety', value: 4, suffix: '/10' },
+        { selector: '.therapy-sessions', value: 12, suffix: '次' },
+        { selector: '.therapy-stages', value: 6, suffix: '个' },
+        { selector: '.improvement-rate', value: 35, 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="%23f0fdf4"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%2310b981"%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();
+            }
+        });
+    }
+}