diff --git a/data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg b/data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg new file mode 100644 index 00000000..9fb35778 Binary files /dev/null and b/data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg differ diff --git a/data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg b/data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg new file mode 100644 index 00000000..cb8fa024 Binary files /dev/null and b/data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg differ diff --git a/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts b/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts index 01d30753..7112e312 100644 --- a/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts +++ b/web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts @@ -210,7 +210,7 @@ export const financeSimulation = (): SimulationData => ({ { type: 'system', content: '' }, { type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg', imageAlt: '小红书卡片设计4' }, { type: 'system', content: '' }, - { type: 'success', content: '✓ 3套产品宣传海报设计完成（深层补水/科学配方/场景化）' }, + { type: 'success', content: '✓ 2套产品宣传海报设计完成（深层补水/科学配方/场景化）' }, { type: 'success', content: '✓ 4套小红书种草卡片设计完成（素人测评/成分科普/前后对比/场景推荐）' }, { type: 'success', content: '✓ 视觉素材库建立（产品图+场景图+信息图，50+张可复用素材）' }, ], diff --git a/web_frontend/web_result/order-classes/chemical/css/styles.css b/web_frontend/web_result/order-classes/chemical/css/styles.css index 72ad1e33..1d40ebf3 100644 --- a/web_frontend/web_result/order-classes/chemical/css/styles.css +++ b/web_frontend/web_result/order-classes/chemical/css/styles.css @@ -287,7 +287,7 @@ body.dark-theme .hero { .section:nth-child(1) { background-image: linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), - url('../images/硅晶圆检测项目.jpg'); + url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -296,7 +296,7 @@ body.dark-theme .hero { .section:nth-child(2) { background-image: linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), - url('../images/光学镜头检测硅晶圆示意图.jpg'); + url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -305,7 +305,7 @@ body.dark-theme .hero { .section:nth-child(3) { background-image: linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), - url('../images/外观热力图(颗粒划痕腐蚀).jpg'); + url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -314,7 +314,7 @@ body.dark-theme .hero { .section:nth-child(4) { background-image: linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), - url('../images/检测结果主图.jpg'); + url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -343,7 +343,7 @@ body.dark-theme .hero { body.dark-theme .section:nth-child(1) { background-image: linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%), - url('../images/硅晶圆检测项目.jpg'); + url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -352,7 +352,7 @@ body.dark-theme .section:nth-child(1) { body.dark-theme .section:nth-child(2) { background-image: linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%), - url('../images/光学镜头检测硅晶圆示意图.jpg'); + url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -361,7 +361,7 @@ body.dark-theme .section:nth-child(2) { body.dark-theme .section:nth-child(3) { background-image: linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%), - url('../images/外观热力图(颗粒划痕腐蚀).jpg'); + url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -370,7 +370,7 @@ body.dark-theme .section:nth-child(3) { body.dark-theme .section:nth-child(4) { background-image: linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%), - url('../images/检测结果主图.jpg'); + url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80'); background-size: cover; background-position: center; background-attachment: fixed; @@ -1089,3 +1089,54 @@ body.dark-theme .theme-icon-light { flex: 1 1 100%; } } + +/* ========== Section背景图片修正 ========== */ +/* 使用更具体的选择器来匹配实际的section元素 */ +body > section.section:nth-of-type(2) { + background-image: + linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), + url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80') !important; +} + +body > section.section:nth-of-type(3) { + background-image: + linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), + url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80') !important; +} + +body > section.section:nth-of-type(4) { + background-image: + linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), + url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80') !important; +} + +body > section.section:nth-of-type(5) { + background-image: + linear-gradient(to bottom, rgba(245, 243, 255, 0.9) 0%, rgba(237, 233, 254, 1) 100%), + url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80') !important; +} + +/* 深色主题 */ +body.dark-theme > section.section:nth-of-type(2) { + background-image: + linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%), + url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600&q=80') !important; +} + +body.dark-theme > section.section:nth-of-type(3) { + background-image: + linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%), + url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=1600&q=80') !important; +} + +body.dark-theme > section.section:nth-of-type(4) { + background-image: + linear-gradient(to bottom, rgba(15, 10, 31, 0.92) 0%, rgba(20, 15, 35, 0.88) 100%), + url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80') !important; +} + +body.dark-theme > section.section:nth-of-type(5) { + background-image: + linear-gradient(to bottom, rgba(20, 15, 35, 0.90) 0%, rgba(15, 10, 31, 0.88) 100%), + url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80') !important; +} diff --git a/web_frontend/web_result/order-classes/chemical/index.html b/web_frontend/web_result/order-classes/chemical/index.html index d8eeb3e8..1eae0b88 100644 --- a/web_frontend/web_result/order-classes/chemical/index.html +++ b/web_frontend/web_result/order-classes/chemical/index.html @@ -524,7 +524,7 @@ -
+
检测结果
检测结果数据可视化
@@ -796,71 +796,6 @@
- -
-
-
-

- AI核心能力 -

-

- 本项目采用先进的AI技术，实现从数据采集到报告生成的全流程自动化，大幅提升检测效率与准确性。 -

-
- - -
-
-
🧹
-

自动数据清洗

-

去噪、校正、标准化

-
- -
-
🧠
-

智能主判定

-

合格/观察/不合格

-
- -
-
⚖️
-

阈值自动比对

-

实时对标工艺窗口

-
- -
-
📊
-

可信度评估

-

0.94平均可信度

-
- -
-
📈
-

趋势预测

-

工艺偏移预警

-
- -
-
⚠️
-

异常自动预警

-

低可信/越界提醒

-
- -
-
📄
-

报告一键生成

-

≤2分钟出具PDF

-
- -
-
🔄
-

持续学习优化

-

模型迭代升级

-
-
-
-
- diff --git a/web_frontend/web_result/order-classes/developer/css/styles.css b/web_frontend/web_result/order-classes/developer/css/styles.css index 4c3ac2b0..4d708e8f 100644 --- a/web_frontend/web_result/order-classes/developer/css/styles.css +++ b/web_frontend/web_result/order-classes/developer/css/styles.css @@ -604,8 +604,9 @@ body.dark-theme tr:hover { } .image-container:hover img { - transform: scale(1.1); + /* transform: scale(1.1); */ /* 取消放大效果 */ filter: brightness(1.1); + cursor: pointer; /* 添加点击提示 */ } .image-caption { @@ -959,3 +960,73 @@ body.dark-theme .theme-icon-dark { body.dark-theme .theme-icon-light { opacity: 0.5; } + +/* ========== 图片查看器 - 点击放大功能 ========== */ +.image-viewer-modal { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.95); + animation: fadeIn 0.3s ease; +} + +.image-viewer-modal.active { + display: flex; + align-items: center; + justify-content: center; +} + +.image-viewer-content { + position: relative; + max-width: 90%; + max-height: 90%; + animation: zoomIn 0.3s ease; +} + +.image-viewer-content img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: var(--radius-lg); + box-shadow: 0 0 50px rgba(139, 92, 246, 0.5); +} + +.image-viewer-close { + position: absolute; + top: 20px; + right: 20px; + font-size: 48px; + color: white; + cursor: pointer; + background: rgba(139, 92, 246, 0.3); + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + transition: all var(--transition-base); + border: 2px solid var(--primary-purple); + font-weight: 300; + line-height: 1; +} + +.image-viewer-close:hover { + background: rgba(139, 92, 246, 0.6); + transform: rotate(90deg) scale(1.1); +} + +@keyframes zoomIn { + from { + transform: scale(0.8); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} diff --git a/web_frontend/web_result/order-classes/finance/css/styles.css b/web_frontend/web_result/order-classes/finance/css/styles.css index e77501a1..f56ea44d 100644 --- a/web_frontend/web_result/order-classes/finance/css/styles.css +++ b/web_frontend/web_result/order-classes/finance/css/styles.css @@ -17,14 +17,14 @@ --hover-bg: rgba(245, 158, 11, 0.15); /* 悬停背景 */ --active-bg: rgba(37, 99, 235, 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 */ + /* 间距系统 - 优化为紧凑布局 */ + --spacing-xs: 0.5rem; /* 8px - 减小从12px */ + --spacing-sm: 0.75rem; /* 12px - 减小从20px */ + --spacing-md: 1.25rem; /* 20px - 减小从32px */ + --spacing-lg: 2rem; /* 32px - 减小从48px */ + --spacing-xl: 2.5rem; /* 40px - 减小从64px */ + --spacing-2xl: 3rem; /* 48px - 减小从96px */ + --spacing-3xl: 4rem; /* 64px - 减小从128px */ /* 字体系统 */ --font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; @@ -567,11 +567,11 @@ body.dark-theme tr:hover { } .grid-3 { - grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */ + grid-template-columns: repeat(3, 1fr); /* 3列布局 */ } .grid-4 { - grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */ + grid-template-columns: repeat(4, 1fr); /* 4列布局 */ } /* ========== 卡片 - 图片优先布局 ========== */ @@ -615,10 +615,10 @@ body.dark-theme tr:hover { flex: 1; } -/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */ +/* ========== 图片容器 - 紧凑布局 ========== */ .image-container { width: 100%; - aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */ + aspect-ratio: 16/9; /* 更紧凑的比例,16:9宽屏比例 */ overflow: hidden; border-radius: 0; /* 在卡片内时不需要圆角 */ margin-bottom: 0; /* 移除底部边距 */ @@ -635,13 +635,11 @@ body.dark-theme tr:hover { 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); + filter: brightness(1.0); } .image-caption { @@ -786,6 +784,121 @@ body.dark-theme tr:hover { color: var(--primary-blue); } +/* ========== 圆形统计图表 ========== */ +.circular-stats { + padding: var(--spacing-xl); + background: var(--bg-overlay); + backdrop-filter: blur(10px); + border-radius: var(--radius-xl); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-lg); +} + +.circular-stats h3 { + font-size: var(--text-2xl); + color: var(--primary-blue); + font-weight: var(--font-bold); +} + +.circular-stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-2xl); + align-items: center; + justify-items: center; +} + +.circular-stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-lg); + width: 100%; + max-width: 300px; +} + +.circular-chart { + position: relative; + width: 200px; + height: 200px; +} + +.circular-progress-svg { + width: 100%; + height: 100%; + transform: rotate(-90deg); +} + +.progress-circle { + transition: stroke-dashoffset 1.5s ease-out; +} + +.roi-progress { + animation: drawCircle 1.5s ease-out forwards; +} + +.ctr-progress { + animation: drawCircle 1.5s ease-out forwards; +} + +@keyframes drawCircle { + from { + stroke-dashoffset: 502.65; + } +} + +.circular-chart-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.circular-value { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--primary-blue); + line-height: 1.2; + margin-bottom: var(--spacing-xs); +} + +.circular-label { + font-size: var(--text-sm); + color: var(--text-gray); + font-weight: var(--font-medium); + margin-bottom: var(--spacing-xs); +} + +.circular-target { + font-size: var(--text-xs); + color: var(--text-gray); + opacity: 0.8; +} + +.circular-stat-label { + font-size: var(--text-lg); + color: var(--text-light); + font-weight: var(--font-semibold); + text-align: center; +} + +/* 深色主题下的圆形图表调整 */ +body.dark-theme .circular-value { + color: var(--accent-gold-light); +} + +body.dark-theme .circular-stat-label { + color: var(--text-light); +} + +/* 响应式 - 移动端单列显示 */ +@media (max-width: 768px) { + .circular-stats-grid { + grid-template-columns: 1fr; + } +} + /* ========== 表格 ========== */ .table-container { overflow-x: auto; @@ -857,13 +970,11 @@ tr:hover { width: 100%; aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */ object-fit: cover; - transition: transform var(--transition-slow); filter: brightness(0.9); order: 1; /* 图片放在最前面 */ } .product-card:hover .product-image { - transform: scale(1.05); filter: brightness(1.0); } diff --git a/web_frontend/web_result/order-classes/finance/index.html b/web_frontend/web_result/order-classes/finance/index.html index 0c02abe9..ed297a33 100644 --- a/web_frontend/web_result/order-classes/finance/index.html +++ b/web_frontend/web_result/order-classes/finance/index.html @@ -312,7 +312,7 @@

视觉营销体系

-

3套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。

+

2套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。

@@ -496,24 +496,65 @@
-
-

投放效果指标

-
-
- 广告ROI - 0% +
+

投放效果指标

+
+ +
+
+ + + + + + +
+
0%
+
实际ROI
+
目标: 350%
+
+
+
广告投资回报率
-
-
-
-
-
-
- 点击率CTR - 3.2% -
-
-
+ + +
+
+ + + + + + +
+
3.2%
+
点击率
+
目标: 5%
+
+
+
广告点击转化率
diff --git a/web_frontend/web_result/order-classes/finance/js/main.js b/web_frontend/web_result/order-classes/finance/js/main.js index 75fcf205..a308fea2 100644 --- a/web_frontend/web_result/order-classes/finance/js/main.js +++ b/web_frontend/web_result/order-classes/finance/js/main.js @@ -163,6 +163,9 @@ function updateStats() { animateValue(element, 0, stat.value, 2000, stat.suffix); } }); + + // 圆形进度图表动画 + animateCircularProgress(); } // 数字动画函数 @@ -275,4 +278,27 @@ function initThemeToggle() { } }); } +} + +// 圆形进度图表动画 +function animateCircularProgress() { + // 计算圆的周长: 2 * π * r, r = 80 + const circumference = 2 * Math.PI * 80; // 502.65 + + // ROI 圆环动画 (420% / 350% = 120%, 超过目标，显示满圆) + const roiElement = document.querySelector('.ad-roi'); + const roiCircle = document.querySelector('.roi-progress'); + if (roiCircle && roiElement) { + const roiPercent = 420 / 350; // 120% + const roiOffset = circumference * (1 - Math.min(roiPercent, 1)); // 满圆时offset为0 + roiCircle.style.strokeDashoffset = roiOffset; + } + + // CTR 圆环动画 (3.2% / 5% = 64%) + const ctrCircle = document.querySelector('.ctr-progress'); + if (ctrCircle) { + const ctrPercent = 3.2 / 5; // 64% + const ctrOffset = circumference * (1 - ctrPercent); // 180.95 + ctrCircle.style.strokeDashoffset = ctrOffset; + } } \ No newline at end of file diff --git a/web_frontend/web_result/order-classes/health/css/styles.css b/web_frontend/web_result/order-classes/health/css/styles.css index dfd2f469..ca5eb751 100644 --- a/web_frontend/web_result/order-classes/health/css/styles.css +++ b/web_frontend/web_result/order-classes/health/css/styles.css @@ -339,6 +339,17 @@ body.dark-theme .hero { background-attachment: fixed; } +/* Footer section - 专属背景 */ +.section-footer { + background-image: + linear-gradient(to bottom, rgba(240, 253, 244, 0.92) 0%, rgba(236, 253, 245, 0.95) 100%), + url('https://images.unsplash.com/photo-1505751172876-fa1923c5c528?w=1920&q=80') !important; + background-size: cover !important; + background-position: center !important; + background-attachment: fixed !important; + padding: var(--spacing-3xl) 0 !important; +} + /* 深色主题下的区块背景 - 每个区块使用对应图片 */ body.dark-theme .section:nth-child(1) { background-image: @@ -395,6 +406,16 @@ body.dark-theme .section:nth-child(n+5):nth-child(even) { background-attachment: fixed; } +/* Footer section - 深色主题背景 */ +body.dark-theme .section-footer { + background-image: + linear-gradient(to bottom, rgba(6, 78, 59, 0.92) 0%, rgba(5, 150, 105, 0.90) 100%), + url('https://images.unsplash.com/photo-1505751172876-fa1923c5c528?w=1920&q=80') !important; + background-size: cover !important; + background-position: center !important; + background-attachment: fixed !important; +} + /* 深色主题下的特定元素调整 */ body.dark-theme .stat-item { background: rgba(16, 185, 129, 0.8); @@ -531,7 +552,7 @@ body.dark-theme tr:hover { } .grid-3 { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); } .grid-4 { @@ -605,7 +626,7 @@ body.dark-theme tr:hover { } .image-container:hover img { - transform: scale(1.03); /* 减小放大效果,避免内容看不清 */ + transform: scale(1.0); /* 取消放大效果 */ filter: brightness(1.0); /* 轻微提亮 */ } @@ -1294,6 +1315,174 @@ body.dark-theme .floating-data-card { } } +/* ========== Section 2 Bento Grid不规则布局 ========== */ +.section-2-bento { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-2xl); + margin: var(--spacing-2xl) 0; + align-items: start; +} + +/* Bento项目尺寸控制 */ +.bento-item-large { + grid-column: span 2; /* 跨2列 - 突出重要内容 */ + grid-row: span 1; +} + +.bento-item-medium { + grid-column: span 1; /* 单列 - 次要内容 */ + grid-row: span 1; +} + +/* Bento卡片样式增强 */ +.section-2-bento .card { + background: linear-gradient(135deg, + rgba(16, 185, 129, 0.08) 0%, + rgba(5, 150, 105, 0.05) 100%); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 2px solid var(--border-light); + border-radius: var(--radius-2xl); + padding: var(--spacing-2xl); + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: var(--shadow-md); + height: 100%; + display: flex; + flex-direction: column; +} + +.section-2-bento .card:hover { + transform: translateY(-12px) scale(1.02); + box-shadow: 0 16px 40px rgba(16, 185, 129, 0.25), + 0 8px 20px rgba(0, 0, 0, 0.12); + border-color: var(--primary-green); +} + +.section-2-bento .card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.08) 100%); + opacity: 0; + transition: opacity var(--transition-base); + border-radius: var(--radius-2xl); + pointer-events: none; +} + +.section-2-bento .card:hover::before { + opacity: 1; +} + +.section-2-bento .card-header { + padding: 0 0 var(--spacing-lg) 0; + background: transparent; + border-bottom: 2px solid var(--border-light); + margin-bottom: var(--spacing-lg); +} + +.section-2-bento .card-title { + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary-green); + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.section-2-bento .card-title i { + width: 28px !important; + height: 28px !important; +} + +.section-2-bento .card-body { + padding: 0; + flex: 1; +} + +.section-2-bento .feature-list { + list-style: none; + padding: 0; + margin: 0; +} + +.section-2-bento .feature-list li { + padding: var(--spacing-md) 0; + border-bottom: 1px solid var(--border-light); + color: var(--text-gray); + display: flex; + align-items: flex-start; + gap: var(--spacing-sm); + font-size: var(--text-base); + line-height: 1.8; + transition: all var(--transition-fast); +} + +.section-2-bento .feature-list li:hover { + color: var(--primary-green); + padding-left: var(--spacing-sm); + background: rgba(16, 185, 129, 0.05); +} + +.section-2-bento .feature-list li:last-child { + border-bottom: none; +} + +.section-2-bento .feature-list li i { + width: 20px !important; + height: 20px !important; + margin-top: 2px; + flex-shrink: 0; + color: var(--primary-green); +} + +/* 深色主题适配 */ +body.dark-theme .section-2-bento .card { + background: linear-gradient(135deg, + rgba(52, 211, 153, 0.15) 0%, + rgba(16, 185, 129, 0.1) 100%); +} + +body.dark-theme .section-2-bento .card:hover { + box-shadow: 0 16px 40px rgba(52, 211, 153, 0.3), + 0 8px 20px rgba(0, 0, 0, 0.2); +} + +/* 响应式布局 */ +@media (max-width: 1024px) { + .section-2-bento { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-xl); + } + + .bento-item-large { + grid-column: span 1; /* 平板设备等宽 */ + } +} + +@media (max-width: 768px) { + .section-2-bento { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } + + .section-2-bento .card { + padding: var(--spacing-lg); + } + + .section-2-bento .card-title { + font-size: var(--text-xl); + } + + .section-2-bento .feature-list li { + font-size: var(--text-sm); + padding: var(--spacing-sm) 0; + } +} + /* ========== 图片加载状态 ========== */ img { transition: opacity var(--transition-base); diff --git a/web_frontend/web_result/order-classes/health/index.html b/web_frontend/web_result/order-classes/health/index.html index 7c6e5611..da4e1b1d 100644 --- a/web_frontend/web_result/order-classes/health/index.html +++ b/web_frontend/web_result/order-classes/health/index.html @@ -69,10 +69,18 @@

来访者基本情况

-

来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状，严重影响工作表现和生活质量。

-
+

来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状,严重影响工作表现和生活质量。

+
-
+ +
+ +
+
+ 情绪数据分析表 +
专业心理测评数据分析报告
+
+

问题陈述

@@ -87,92 +95,80 @@
- -
-
-

初步心理测评

-
-
-

专业量表评估:

-
    -
  • SAS焦虑量表: 65分(中度焦虑)
    • -
  • SDS抑郁量表: 58分(轻度抑郁)
    • -
  • PSQI睡眠指数: 13分(睡眠障碍)
    • -
  • 自我效能: 3/10分(偏低)
    • -
-
-
-
- 情绪数据分析表 -
专业心理测评数据分析报告
-
- -
-
-
-

情绪观察

-
-
-
    -
  • 语速偏快,双手紧握
    • -
  • 眼神回避,不敢直视
    • -
  • 谈到考核时眼眶泛红
    • -
  • 情绪波动明显
    • -
-
+ +
+
+
SAS焦虑量表
+
65分
+
中度焦虑
-
-
-

咨询动机

-
-
-
    -
  • 改善公众发言焦虑
    • -
  • 试用期前恢复自信
    • -
  • 提升工作表现
    • -
  • 改善人际关系
    • -
-
+
+
SDS抑郁量表
+
58分
+
轻度抑郁
-
-
-

咨询契约

-
-
-
    -
  • 时长: 50分钟/次
    • -
  • 周期: 8-10次
    • -
  • 频率: 每周1次
    • -
  • 严格保密原则
    • -
-
+
+
PSQI睡眠指数
+
13分
+
睡眠障碍
-
-
-
-
SAS焦虑评分
-
0分
-
-
-
SDS抑郁评分
-
0分
-
-
-
睡眠质量指数
-
0分
-
-
-
自我效能感
-
3/10
+
+
自我效能感
+
3/10分
+
偏低
+
+
+
+ + +
+
+
+

情绪观察

+
+
+
    +
  • 语速偏快,双手紧握
    • +
  • 眼神回避,不敢直视
    • +
  • 谈到考核时眼眶泛红
    • +
  • 情绪波动明显
    • +
+
+
+ +
+
+

咨询动机

+
+
+
    +
  • 改善公众发言焦虑
    • +
  • 试用期前恢复自信
    • +
  • 提升工作表现
    • +
  • 改善人际关系
    • +
+
+
+ +
+
+

咨询契约

+
+
+
    +
  • 时长: 50分钟/次
    • +
  • 周期: 8-10次
    • +
  • 频率: 每周1次
    • +
  • 严格保密原则
    • +
-
@@ -649,7 +645,7 @@ -
+