fix: 更新财经商贸页面的产品宣传海报设计数量
详细说明: - 将产品宣传海报设计数量从3套更新为2套，以反映最新的设计进度 - 更新相关文本内容以保持一致性 - 修改文件: web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts, web_frontend/web_result/order-classes/finance/index.html
This commit is contained in:
Yep_Q
BIN
data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg
Normal file
BIN
data/订单班文档资料/智能开发/notion文稿/image/作业考试模块.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg
Normal file
BIN
data/订单班文档资料/智能开发/notion文稿/image/支付订单模块.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
@@ -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+张可复用素材）' },
|
||||
],
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -524,7 +524,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Alternating Layout: 检测结果可视化 -->
|
||||
<div class="alternating-layout">
|
||||
<div class="alternating-layout" style="margin-top: var(--spacing-3xl);">
|
||||
<div class="image-container">
|
||||
<img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
|
||||
<div class="image-caption">检测结果数据可视化</div>
|
||||
@@ -796,71 +796,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI核心能力展示 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="expert-intro">
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-md);">
|
||||
<i data-lucide="cpu"></i> AI核心能力
|
||||
</h2>
|
||||
<p style="text-align: center; color: var(--text-secondary); max-width: 800px; margin: 0 auto;">
|
||||
本项目采用先进的AI技术，实现从数据采集到报告生成的全流程自动化，大幅提升检测效率与准确性。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Icon Grid -->
|
||||
<div class="icon-grid" style="margin-top: var(--spacing-2xl);">
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🧹</div>
|
||||
<h4 class="icon-card-title">自动数据清洗</h4>
|
||||
<p class="icon-card-value">去噪、校正、标准化</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🧠</div>
|
||||
<h4 class="icon-card-title">智能主判定</h4>
|
||||
<p class="icon-card-value">合格/观察/不合格</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">⚖️</div>
|
||||
<h4 class="icon-card-title">阈值自动比对</h4>
|
||||
<p class="icon-card-value">实时对标工艺窗口</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📊</div>
|
||||
<h4 class="icon-card-title">可信度评估</h4>
|
||||
<p class="icon-card-value">0.94平均可信度</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📈</div>
|
||||
<h4 class="icon-card-title">趋势预测</h4>
|
||||
<p class="icon-card-value">工艺偏移预警</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">⚠️</div>
|
||||
<h4 class="icon-card-title">异常自动预警</h4>
|
||||
<p class="icon-card-value">低可信/越界提醒</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">📄</div>
|
||||
<h4 class="icon-card-title">报告一键生成</h4>
|
||||
<p class="icon-card-value">≤2分钟出具PDF</p>
|
||||
</div>
|
||||
|
||||
<div class="icon-card">
|
||||
<div class="icon-card-icon">🔄</div>
|
||||
<h4 class="icon-card-title">持续学习优化</h4>
|
||||
<p class="icon-card-value">模型迭代升级</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -312,7 +312,7 @@
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="image"></i> 视觉营销体系</h3>
|
||||
<p>3套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。</p>
|
||||
<p>2套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
@@ -496,24 +496,65 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-chart" style="margin-top: var(--spacing-xl);">
|
||||
<h3>投放效果指标</h3>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">广告ROI</span>
|
||||
<span class="stat-value ad-roi">0%</span>
|
||||
<div class="circular-stats" style="margin-top: var(--spacing-xl);">
|
||||
<h3 style="margin-bottom: var(--spacing-xl); text-align: center;">投放效果指标</h3>
|
||||
<div class="circular-stats-grid">
|
||||
<!-- 广告ROI圆形图 -->
|
||||
<div class="circular-stat-item">
|
||||
<div class="circular-chart">
|
||||
<svg viewBox="0 0 200 200" class="circular-progress-svg">
|
||||
<!-- 背景圆环 -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--border-light)"
|
||||
stroke-width="16"/>
|
||||
<!-- 进度圆环 (420% / 350% = 120%, 显示为满圆) -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--primary-blue)"
|
||||
stroke-width="16"
|
||||
stroke-dasharray="502.65"
|
||||
stroke-dashoffset="0"
|
||||
stroke-linecap="round"
|
||||
transform="rotate(-90 100 100)"
|
||||
class="progress-circle roi-progress"/>
|
||||
</svg>
|
||||
<div class="circular-chart-content">
|
||||
<div class="circular-value ad-roi">0%</div>
|
||||
<div class="circular-label">实际ROI</div>
|
||||
<div class="circular-target">目标: 350%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circular-stat-label">广告投资回报率</div>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">点击率CTR</span>
|
||||
<span class="stat-value">3.2%</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 70%"></div>
|
||||
|
||||
<!-- CTR圆形图 -->
|
||||
<div class="circular-stat-item">
|
||||
<div class="circular-chart">
|
||||
<svg viewBox="0 0 200 200" class="circular-progress-svg">
|
||||
<!-- 背景圆环 -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--border-light)"
|
||||
stroke-width="16"/>
|
||||
<!-- 进度圆环 (3.2% / 5% = 64%) -->
|
||||
<circle cx="100" cy="100" r="80"
|
||||
fill="none"
|
||||
stroke="var(--accent-gold)"
|
||||
stroke-width="16"
|
||||
stroke-dasharray="502.65"
|
||||
stroke-dashoffset="180.95"
|
||||
stroke-linecap="round"
|
||||
transform="rotate(-90 100 100)"
|
||||
class="progress-circle ctr-progress"/>
|
||||
</svg>
|
||||
<div class="circular-chart-content">
|
||||
<div class="circular-value ctr-value">3.2%</div>
|
||||
<div class="circular-label">点击率</div>
|
||||
<div class="circular-target">目标: 5%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circular-stat-label">广告点击转化率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -69,10 +69,18 @@
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="user-circle"></i> 来访者基本情况</h3>
|
||||
<p>来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状，严重影响工作表现和生活质量。</p>
|
||||
</div>
|
||||
<p>来访者为27岁女性，互联网公司运营专员，工作半年；独居于一线城市合租公寓，日均通勤45分钟；近期生活节奏紧张，饮食不规律。家庭结构为父母在外地，沟通频率低，情感支持有限。近三个月反复出现社交焦虑症状,严重影响工作表现和生活质量。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<!-- Split Layout: 左右分栏 + 浮动数据卡片 -->
|
||||
<div class="split-layout">
|
||||
<!-- 左栏: 大图 + 问题陈述卡片 -->
|
||||
<div class="split-column-left">
|
||||
<div class="image-container">
|
||||
<img data-src="images/情绪数据分析表.jpg" alt="情绪数据分析表" loading="lazy">
|
||||
<div class="image-caption">专业心理测评数据分析报告</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">问题陈述</h3>
|
||||
@@ -87,92 +95,80 @@
|
||||
</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>
|
||||
<!-- 右栏: 4个浮动数据卡片 -->
|
||||
<div class="split-column-right">
|
||||
<div class="floating-data-card">
|
||||
<div class="floating-data-label">SAS焦虑量表</div>
|
||||
<div class="floating-data-value">65分</div>
|
||||
<div class="floating-data-note">中度焦虑</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 class="floating-data-card">
|
||||
<div class="floating-data-label">SDS抑郁量表</div>
|
||||
<div class="floating-data-value">58分</div>
|
||||
<div class="floating-data-note">轻度抑郁</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 class="floating-data-card">
|
||||
<div class="floating-data-label">PSQI睡眠指数</div>
|
||||
<div class="floating-data-value">13分</div>
|
||||
<div class="floating-data-note">睡眠障碍</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 class="floating-data-card">
|
||||
<div class="floating-data-label">自我效能感</div>
|
||||
<div class="floating-data-value">3/10分</div>
|
||||
<div class="floating-data-note">偏低</div>
|
||||
</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="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>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: 问题评估与目标设定 -->
|
||||
@@ -649,7 +645,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Footer: 项目成果总结 - 多样化布局 -->
|
||||
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||
<section class="section section-footer">
|
||||
<div class="container">
|
||||
<!-- 主标题 -->
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-3xl);">
|
||||
|
||||
Reference in New Issue
Block a user