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