响应式

css/style.css

@@ -21,49 +21,33 @@ body {
     color: #fff;
     min-width: 320px;
     overflow-x: hidden;
-    /* PC端缩放相关样式 */
+    margin: 0;
-    transform-origin: left top;
+    padding: 0;
-    transition: transform 0.1s ease-out;
 }
 
 .container {
     width: 100%;
     min-height: 100vh;
+    height: auto;
+    display: flex;
     flex-direction: column;
-    justify-content: space-between;
     background: #000;
-    /* 固定最小宽度，避免缩放时内容挤压 */
-    min-width: 1200px;
 }
 
 .cont{
     width: 90%;
-    max-width: 1400px;
+    max-width: 1600px;
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: clamp(0.5rem, 1.5vw, 2rem);
-    /* 确保内容区域最小宽度 */
-    min-width: 1080px;
 }
 
 /* 移动端下调整宽度 */
+/* 移动端优化 (768px及以下) */
 @media screen and (max-width: 768px) {
-    body {
-        transform: none !important;
-        width: 100% !important;
-        min-width: 320px !important;
-        height: auto !important;
-        overflow-x: hidden !important;
-    }
-
-    .container {
-        min-width: 320px;
-        width: 100%;
-    }
-
     .cont {
         width: 95%;
         max-width: 100%;
-        min-width: auto;
+        padding: 0.5rem;
     }
 }
 
@@ -641,13 +625,13 @@ body {
 
 /* 头部和尾部图片 */
 .header-image {
-    margin-bottom: 20px;
+    margin-bottom: clamp(10px, 1.5vw, 20px);
     text-align: center;
     width: 100%;
 }
 
 .footer-image {
-    margin-top: 20px;
+    margin-top: clamp(10px, 1.5vw, 20px);
     text-align: center;
     width: 100%;
 }
@@ -665,3 +649,124 @@ body {
 .ranking-item .rank-number {
     color: #000;
 }
+
+/* ========== 响应式布局 - 不同屏幕尺寸优化 ========== */
+
+/* 小屏幕笔记本 (1366x768, 1440x900) */
+@media screen and (min-width: 769px) and (max-width: 1600px) {
+    .cont {
+        width: 95%;
+        padding: clamp(0.5rem, 1.5vw, 1.5rem);
+    }
+
+    .section-title {
+        font-size: clamp(0.8rem, 1.1vw, 0.95rem);
+    }
+
+    .chart-container {
+        min-height: clamp(220px, 28vw, 280px);
+    }
+}
+
+/* 标准全高清 (1920x1080) */
+@media screen and (min-width: 1601px) and (max-width: 2100px) {
+    .cont {
+        width: 90%;
+        max-width: 1700px;
+    }
+
+    .chart-container {
+        min-height: clamp(250px, 28vw, 320px);
+    }
+}
+
+/* 2K 屏幕 (2560x1440) */
+@media screen and (min-width: 2101px) and (max-width: 3200px) {
+    .cont {
+        width: 85%;
+        max-width: 2200px;
+    }
+
+    .section-title {
+        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
+        padding: clamp(6px, 0.9vw, 8px) clamp(12px, 1.6vw, 18px);
+    }
+
+    .top-data {
+        gap: clamp(10px, 1.5vw, 18px);
+        margin-bottom: clamp(15px, 1.8vw, 25px);
+    }
+
+    .chart-container {
+        min-height: clamp(280px, 28vw, 380px);
+    }
+
+    .ranking-item {
+        padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.6vw, 18px);
+        font-size: clamp(0.8rem, 1.1vw, 0.95rem);
+    }
+
+    .header-image,
+    .footer-image {
+        margin: clamp(12px, 1.8vw, 25px) auto;
+    }
+}
+
+/* 4K 屏幕 (3840x2160 及以上) */
+@media screen and (min-width: 3201px) {
+    .cont {
+        width: 80%;
+        max-width: 3000px;
+        padding: clamp(1.5rem, 2vw, 3rem);
+    }
+
+    .section-title {
+        font-size: clamp(1rem, 1.5vw, 1.3rem);
+        padding: clamp(8px, 1vw, 10px) clamp(15px, 2vw, 25px);
+    }
+
+    .top-data {
+        gap: clamp(15px, 2vw, 25px);
+        margin-bottom: clamp(20px, 2.5vw, 30px);
+    }
+
+    .sales-info {
+        padding: clamp(15px, 2vw, 25px);
+        gap: clamp(15px, 2vw, 20px);
+    }
+
+    .countdown {
+        padding: clamp(12px, 1.8vw, 15px);
+    }
+
+    .group-ranking,
+    .person-ranking {
+        padding: clamp(15px, 2vw, 30px);
+        margin-bottom: clamp(15px, 2vw, 25px);
+    }
+
+    .chart-container {
+        min-height: clamp(350px, 30vw, 500px);
+    }
+
+    .ranking-item {
+        padding: clamp(12px, 1.5vw, 18px) clamp(15px, 2vw, 22px);
+        font-size: clamp(0.85rem, 1.2vw, 1rem);
+    }
+
+    .rank-number {
+        width: clamp(22px, 3.5vw, 28px);
+        height: clamp(22px, 3.5vw, 28px);
+    }
+
+    .header-image,
+    .footer-image {
+        margin: clamp(15px, 2.5vw, 30px) auto;
+    }
+
+    /* 4K屏幕下的文字大小优化 */
+    .target-amount,
+    .total-amount {
+        font-size: clamp(1.5rem, 3vw, 2.5rem);
+    }
+}

js/main.js

@@ -5,7 +5,6 @@ const RESIZE_DEBOUNCE_TIME = 300;  // 防抖时间（毫秒）
 const PROGRESS_STEP = 0.4;         // 进度条每帧增量
 const PROGRESS_INTERVAL = 20;      // 进度条更新间隔（毫秒）
 const MOBILE_BREAKPOINT = 768;     // 移动端断点（px）
-const DESIGN_WIDTH = 1920;         // 设计稿宽度（px）
 
 // 年度销售数据（可通过API动态获取）
 let yearData = {
@@ -13,49 +12,6 @@ let yearData = {
     actual: 231154000     // 年度实际销售额（万元）
 };
 
-// PC端等比例缩放函数
-function setScale() {
-    const screenWidth = window.innerWidth;
-
-    // 移动端不缩放，保持响应式布局
-    if (screenWidth <= MOBILE_BREAKPOINT) {
-        document.body.style.transform = 'none';
-        document.body.style.transformOrigin = 'left top';
-        document.body.style.marginLeft = '0px';
-        document.body.style.width = '100%';
-        document.body.style.minWidth = '320px';
-        document.body.style.height = 'auto';
-        document.body.style.overflowX = 'hidden';
-        return;
-    }
-
-    // PC端等比例缩放
-    const scale = screenWidth / DESIGN_WIDTH;
-
-    // 只限制最小缩放比例，允许放大
-    // 最小缩放到60%，最大可以放大填满屏幕
-    const finalScale = Math.max(scale, 0.6);
-
-    // 重置样式以获取真实内容高度
-    document.body.style.transform = 'none';
-    document.body.style.height = 'auto';
-
-    // 获取真实内容高度
-    const contentHeight = document.body.scrollHeight;
-
-    // 计算缩放后的高度
-    const scaledHeight = Math.ceil(contentHeight * finalScale);
-
-    // 应用缩放
-    document.body.style.transform = `scale(${finalScale})`;
-    document.body.style.transformOrigin = 'left top';
-    document.body.style.width = `${DESIGN_WIDTH}px`;
-    document.body.style.minWidth = `${DESIGN_WIDTH}px`;
-    document.body.style.height = `${scaledHeight}px`;
-    document.body.style.marginLeft = '0px';
-    document.body.style.overflowX = 'hidden';
-}
-
 // 模拟数据 - 小组排名
 const groupData = [
     { name: '华东一组', target: 50000000000, actual: 62000000000 },
@@ -556,9 +512,6 @@ function renderPersonChart() {
 
 // 初始化
 document.addEventListener('DOMContentLoaded', async () => {
-    // PC端等比例缩放
-    setScale();
-
     // 获取年度数据并更新顶部显示
     yearData = await fetchYearData();
     const progressRate = updateTopData();
@@ -591,9 +544,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
         // 响应式调整 - 使用防抖优化性能
         window.addEventListener('resize', () => {
-            // 立即更新缩放（不防抖，保证视觉效果流畅）
-            setScale();
-
             // 图表重新渲染使用防抖
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(() => {