diff --git a/css/style.css b/css/style.css
index c9d2720..f0cc53d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,7 +38,7 @@ body {
     width: 90%;
     max-width: 1600px;
     margin: 0 auto;
-    padding: clamp(0.5rem, 1.5vw, 2rem);
+    /* padding: clamp(0.5rem, 1.5vw, 2rem); */
 }
 
 /* 移动端下调整宽度 */
@@ -78,6 +78,7 @@ body {
     grid-template-columns: 2fr 1fr;
     gap: clamp(6px, 1.5vw, 14px);
     margin-bottom: clamp(10px, 1.5vw, 20px);
+    min-height: 0; /* 允许grid子项收缩 */
 }
 
 .sales-info {
@@ -252,6 +253,7 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: hidden; /* 防止溢出 */
 }
 
 .countdown h3 {
@@ -259,6 +261,7 @@ body {
     color: #e7552f;
     margin-bottom: clamp(10px, 1.5vw, 15px);
     font-weight: bold;
+    white-space: nowrap; /* 标题不换行 */
 }
 
 /* 季度容器 */
@@ -278,6 +281,7 @@ body {
     min-width: 0;
     border-bottom: 1px solid #523A14;
     padding-bottom: 8px;
+    overflow: hidden; /* 防止内容溢出 */
 }
 .last-quarter{
     border-bottom: none;
@@ -300,26 +304,34 @@ body {
 /* 周数圆圈容器 */
 .weeks-container {
     display: flex;
-    flex-wrap: wrap;
-    gap: clamp(3px, 0.5vw, 5px);
+    flex-wrap: nowrap; /* 不换行 */
+    gap: clamp(2px, 0.4vw, 5px);
     flex: 1;
+    overflow-x: hidden; /* 隐藏溢出内容 */
+    overflow-y: hidden;
+    min-width: 0; /* 允许flex子项缩小 */
+    justify-content: flex-start; /* 从左侧开始排列 */
 }
 
 /* 单个周数圆圈 */
 .week-circle {
-    width: clamp(18px, 2.5vw, 24px);
-    height: clamp(18px, 2.5vw, 24px);
+    width: clamp(12px, 2.5vw, 24px);
+    height: clamp(12px, 2.5vw, 24px);
     border-radius: 50%;
     border: 2px solid #815B37;
     background: rgba(129, 91, 55, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: clamp(0.625rem, 1vw, 0.75rem);
+    font-size: clamp(0.5rem, 1vw, 0.75rem);
     color: #f5bbab;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
+    flex-shrink: 1; /* 允许周圈缩小以适应容器 */
+    min-width: 10px; /* 最小尺寸 */
+    min-height: 10px;
+    flex-basis: clamp(12px, 2.5vw, 24px); /* 弹性基础尺寸 */
 }
 
 .week-circle:hover {
@@ -528,16 +540,40 @@ body {
         font-size: clamp(0.875rem, 2.5vw, 1.125rem);
     }
 
+    /* 年度进度移动端优化 - 确保不换行 */
+    .countdown {
+        padding: clamp(6px, 1.2vw, 10px);
+    }
+
+    .countdown h3 {
+        font-size: clamp(0.75rem, 1.5vw, 1rem);
+        margin-bottom: clamp(8px, 1.2vw, 12px);
+    }
+
+    .quarters-container {
+        gap: clamp(4px, 1vw, 6px);
+    }
+
+    .quarter-item {
+        gap: clamp(4px, 0.8vw, 6px);
+        padding-bottom: clamp(6px, 1vw, 8px);
+    }
+
     .quarter-label {
-        font-size: clamp(0.75rem, 2vw, 0.875rem);
-        padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px);
-        min-width: clamp(30px, 5vw, 40px);
+        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
+        padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1.2vw, 10px);
+        min-width: clamp(28px, 5vw, 38px);
     }
 
     .week-circle {
-        width: clamp(16px, 4vw, 20px);
-        height: clamp(16px, 4vw, 20px);
-        font-size: clamp(0.5rem, 1.5vw, 0.625rem);
+        width: clamp(14px, 3.5vw, 18px);
+        height: clamp(14px, 3.5vw, 18px);
+        font-size: clamp(0.5rem, 1.2vw, 0.625rem);
+        border-width: 1.5px;
+    }
+
+    .weeks-container {
+        gap: clamp(2px, 0.5vw, 4px);
     }
 
     .ranking-item {
@@ -623,6 +659,126 @@ body {
     }
 }
 
+/* 笔记本小屏幕特别优化 (1024px - 1366px) */
+@media screen and (min-width: 1024px) and (max-width: 1366px) {
+    /* 年度进度区域紧凑显示 */
+    .countdown {
+        padding: clamp(6px, 1vw, 8px);
+    }
+
+    .countdown h3 {
+        font-size: clamp(0.7rem, 1vw, 0.9rem);
+        margin-bottom: clamp(6px, 1vw, 10px);
+    }
+
+    .quarters-container {
+        gap: clamp(3px, 0.8vw, 4px);
+    }
+
+    .quarter-item {
+        gap: clamp(3px, 0.6vw, 5px);
+        padding-bottom: clamp(5px, 0.7vw, 6px);
+    }
+
+    .quarter-label {
+        font-size: clamp(0.7rem, 1vw, 0.85rem);
+        padding: clamp(2px, 0.3vw, 3px) clamp(5px, 0.8vw, 8px);
+        min-width: clamp(28px, 4vw, 35px);
+    }
+
+    .week-circle {
+        width: clamp(14px, 2vw, 18px);
+        height: clamp(14px, 2vw, 18px);
+        font-size: clamp(0.5rem, 0.8vw, 0.625rem);
+        border-width: 1px;
+    }
+
+    .weeks-container {
+        gap: clamp(1px, 0.3vw, 3px);
+    }
+}
+
+/* 高分辨率小笔记本优化 (125%-200% DPI缩放)
+   比如：13寸1920x1080 (150%缩放实际约1280px), 14寸2560x1440 (200%缩放实际约1280px) */
+@media screen and (min-width: 1280px) and (max-width: 1600px) {
+    /* 当年度进度容器宽度不足时的自动缩放 */
+    .countdown {
+        padding: clamp(6px, 1vw, 10px);
+        /* 使用容器查询的方式，如果内容太多则整体缩小 */
+        min-width: 0;
+    }
+
+    .countdown h3 {
+        font-size: clamp(0.75rem, 1.1vw, 1.1rem);
+        margin-bottom: clamp(8px, 1.2vw, 12px);
+    }
+
+    .quarters-container {
+        gap: clamp(4px, 0.9vw, 6px);
+    }
+
+    .quarter-item {
+        gap: clamp(4px, 0.7vw, 7px);
+        padding-bottom: clamp(6px, 0.8vw, 8px);
+    }
+
+    .quarter-label {
+        font-size: clamp(0.72rem, 1.05vw, 0.9rem);
+        padding: clamp(2px, 0.35vw, 4px) clamp(6px, 0.85vw, 10px);
+        min-width: clamp(30px, 4.2vw, 38px);
+    }
+
+    .week-circle {
+        width: clamp(15px, 2.1vw, 20px);
+        height: clamp(15px, 2.1vw, 20px);
+        font-size: clamp(0.5rem, 0.85vw, 0.65rem);
+        border-width: 1.5px;
+    }
+
+    .weeks-container {
+        gap: clamp(2px, 0.35vw, 4px);
+    }
+}
+
+/* 极致紧凑模式 - 高DPI小屏幕 (13-14寸高分辨率笔记本)
+   检测16:9或16:10宽高比 + 中等分辨率 */
+@media screen and (min-width: 1200px) and (max-width: 1440px) and (min-aspect-ratio: 16/10) {
+    .countdown {
+        padding: clamp(5px, 0.9vw, 8px);
+    }
+
+    .countdown h3 {
+        font-size: clamp(0.7rem, 1vw, 0.95rem);
+        margin-bottom: clamp(6px, 1vw, 10px);
+    }
+
+    .quarters-container {
+        gap: clamp(3px, 0.7vw, 5px);
+    }
+
+    .quarter-item {
+        gap: clamp(3px, 0.6vw, 6px);
+        padding-bottom: clamp(5px, 0.7vw, 7px);
+    }
+
+    .quarter-label {
+        font-size: clamp(0.68rem, 1vw, 0.82rem);
+        padding: clamp(2px, 0.3vw, 4px) clamp(5px, 0.8vw, 9px);
+        min-width: clamp(28px, 4vw, 35px);
+    }
+
+    .week-circle {
+        width: clamp(14px, 2vw, 18px);
+        height: clamp(14px, 2vw, 18px);
+        font-size: clamp(0.48rem, 0.8vw, 0.6rem);
+        border-width: 1px;
+    }
+
+    .weeks-container {
+        gap: clamp(1.5px, 0.3vw, 3px);
+    }
+}
+
 /* 头部和尾部图片 */
 .header-image {
     margin-bottom: clamp(10px, 1.5vw, 20px);
@@ -650,13 +806,29 @@ body {
     color: #000;
 }
 
+/* 窄容器优化 - 适配所有高DPI小笔记本
+   当容器宽度小于400px时（比如高分辨率小笔记本的系统缩放） */
+@media screen and (max-width: 1400px) {
+    .top-data {
+        /* 如果年度进度区域太窄，调整比例 */
+        grid-template-columns: 2fr minmax(280px, 1fr);
+    }
+}
+
+/* 极窄容器优化 - 当容器实际显示宽度很小 */
+@media screen and (max-width: 1200px) {
+    .top-data {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
 /* ========== 响应式布局 - 不同屏幕尺寸优化 ========== */
 
 /* 小屏幕笔记本 (1366x768, 1440x900) */
 @media screen and (min-width: 769px) and (max-width: 1600px) {
     .cont {
         width: 95%;
-        padding: clamp(0.5rem, 1.5vw, 1.5rem);
+        /* padding: clamp(0.5rem, 1.5vw, 1.5rem); */
     }
 
     .section-title {
@@ -666,6 +838,38 @@ body {
     .chart-container {
         min-height: clamp(220px, 28vw, 280px);
     }
+
+    /* 年度进度区域优化 */
+    .countdown {
+        padding: clamp(6px, 1vw, 10px);
+    }
+
+    .countdown h3 {
+        font-size: clamp(0.75rem, 1.1vw, 1.1rem);
+        margin-bottom: clamp(8px, 1.2vw, 12px);
+    }
+
+    .quarter-item {
+        gap: clamp(4px, 0.8vw, 6px);
+        padding-bottom: clamp(6px, 0.8vw, 8px);
+    }
+
+    .quarter-label {
+        font-size: clamp(0.75rem, 1.1vw, 0.95rem);
+        padding: clamp(2px, 0.4vw, 4px) clamp(6px, 0.9vw, 10px);
+        min-width: clamp(32px, 4.5vw, 40px);
+    }
+
+    .week-circle {
+        width: clamp(16px, 2.2vw, 22px);
+        height: clamp(16px, 2.2vw, 22px);
+        font-size: clamp(0.5625rem, 0.9vw, 0.6875rem);
+        border-width: 1.5px;
+    }
+
+    .weeks-container {
+        gap: clamp(2px, 0.4vw, 4px);
+    }
 }
 
 /* 标准全高清 (1920x1080) */
diff --git a/js/main.js b/js/main.js
index f6b16b7..5eb5c7a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -593,6 +593,74 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     initQuarters();
 
+    // 动态调整周圈大小以适应容器宽度
+    function adjustWeekCirclesSize() {
+        const weekContainers = document.querySelectorAll('.weeks-container');
+
+        weekContainers.forEach(container => {
+            // 获取容器的实际宽度
+            const containerWidth = container.offsetWidth;
+
+            // 获取所有周圈
+            const weekCircles = container.querySelectorAll('.week-circle');
+            if (weekCircles.length === 0) return;
+
+            // 计算所有周圈的总宽度（包括间距）
+            const gap = 3; // 默认间距
+            const totalGap = gap * (weekCircles.length - 1);
+            const circleCount = weekCircles.length;
+
+            // 计算理想的周圈大小
+            const idealSize = (containerWidth - totalGap) / circleCount;
+
+            // 设置最小和最大尺寸限制
+            const minSize = 10;
+            const maxSize = 24;
+
+            // 计算最终尺寸
+            let finalSize = Math.max(minSize, Math.min(idealSize, maxSize));
+
+            // 如果内容仍然溢出，计算缩放比例
+            const totalContentWidth = (finalSize * circleCount) + totalGap;
+            let scale = 1;
+
+            if (totalContentWidth > containerWidth) {
+                scale = containerWidth / totalContentWidth;
+                // 限制最小缩放比例，避免过小
+                scale = Math.max(0.5, scale);
+            }
+
+            // 应用样式到所有周圈
+            weekCircles.forEach(circle => {
+                circle.style.width = finalSize + 'px';
+                circle.style.height = finalSize + 'px';
+                circle.style.fontSize = (finalSize * 0.4) + 'px'; // 字体大小随圆圈缩放
+                circle.style.borderWidth = Math.max(1, finalSize / 8) + 'px'; // 边框随圆圈缩放
+            });
+
+            // 如果需要缩放整个容器
+            if (scale < 1) {
+                container.style.transform = `scaleX(${scale})`;
+                container.style.transformOrigin = 'left';
+            } else {
+                container.style.transform = 'none';
+            }
+        });
+    }
+
+    // 初始调整
+    setTimeout(() => {
+        adjustWeekCirclesSize();
+    }, 100);
+
+    // 监听窗口大小变化并重新调整
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            adjustWeekCirclesSize();
+        }, RESIZE_DEBOUNCE_TIME);
+    });
+
     // 延迟启动进度条动画，使用动态计算的完成率
     setTimeout(() => {
         startProgressAnimation(progressRate);