修改移动端

css/style.css

@@ -281,7 +281,6 @@ body {
     min-width: 0;
     border-bottom: 1px solid #523A14;
     padding-bottom: 8px;
-    overflow: hidden; /* 防止内容溢出 */
 }
 .last-quarter{
     border-bottom: none;
@@ -304,34 +303,26 @@ body {
 /* 周数圆圈容器 */
 .weeks-container {
     display: flex;
-    flex-wrap: nowrap; /* 不换行 */
-    gap: clamp(2px, 0.4vw, 5px);
+    flex-wrap: wrap;
+    gap: clamp(3px, 0.5vw, 5px);
     flex: 1;
-    overflow-x: hidden; /* 隐藏溢出内容 */
-    overflow-y: hidden;
-    min-width: 0; /* 允许flex子项缩小 */
-    justify-content: flex-start; /* 从左侧开始排列 */
 }
 
 /* 单个周数圆圈 */
 .week-circle {
-    width: clamp(12px, 2.5vw, 24px);
-    height: clamp(12px, 2.5vw, 24px);
+    width: clamp(18px, 2.5vw, 24px);
+    height: clamp(18px, 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.5rem, 1vw, 0.75rem);
+    font-size: clamp(0.625rem, 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 {
@@ -540,40 +531,16 @@ 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.7rem, 1.5vw, 0.85rem);
-        padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1.2vw, 10px);
-        min-width: clamp(28px, 5vw, 38px);
+        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);
     }
 
     .week-circle {
-        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);
+        width: clamp(16px, 4vw, 20px);
+        height: clamp(16px, 4vw, 20px);
+        font-size: clamp(0.5rem, 1.5vw, 0.625rem);
     }
 
     .ranking-item {
@@ -808,7 +775,7 @@ body {
 
 /* 窄容器优化 - 适配所有高DPI小笔记本
    当容器宽度小于400px时（比如高分辨率小笔记本的系统缩放） */
-@media screen and (max-width: 1400px) {
+@media screen and (min-width: 769px) and (max-width: 1400px) {
     .top-data {
         /* 如果年度进度区域太窄，调整比例 */
         grid-template-columns: 2fr minmax(280px, 1fr);
@@ -816,7 +783,7 @@ body {
 }
 
 /* 极窄容器优化 - 当容器实际显示宽度很小 */
-@media screen and (max-width: 1200px) {
+@media screen and (min-width: 769px) and (max-width: 1200px) {
     .top-data {
         grid-template-columns: 1fr 1fr;
     }

js/main.js

@@ -595,6 +595,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // 动态调整周圈大小以适应容器宽度
     function adjustWeekCirclesSize() {
+        if (window.innerWidth <= 768) return
         const weekContainers = document.querySelectorAll('.weeks-container');
 
         weekContainers.forEach(container => {