fix: 更新财经商贸页面的产品宣传海报设计数量

详细说明:
- 将产品宣传海报设计数量从3套更新为2套，以反映最新的设计进度
- 更新相关文本内容以保持一致性
- 修改文件: web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts, web_frontend/web_result/order-classes/finance/index.html

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);
 }
 

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

@@ -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>

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;
+    }
 }