移动端样式

css/style.css

@@ -281,6 +281,7 @@ body {
     min-width: 0;
     border-bottom: 1px solid #523A14;
     padding-bottom: 8px;
+    overflow: hidden; /* PC端防止内容溢出 */
 }
 .last-quarter{
     border-bottom: none;
@@ -303,26 +304,34 @@ body {
 /* 周数圆圈容器 */
 .weeks-container {
     display: flex;
-    flex-wrap: wrap;
-    gap: clamp(3px, 0.5vw, 5px);
+    flex-wrap: nowrap; /* PC端不换行 */
+    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; /* PC端允许周圈缩小以适应容器 */
+    min-width: 10px; /* 最小尺寸 */
+    min-height: 10px;
+    flex-basis: clamp(12px, 2.5vw, 24px); /* 弹性基础尺寸 */
 }
 
 .week-circle:hover {
@@ -531,6 +540,21 @@ body {
         font-size: clamp(0.875rem, 2.5vw, 1.125rem);
     }
 
+    /* 移动端年度进度允许换行 */
+    .countdown {
+        overflow: visible; /* 移动端允许溢出换行 */
+    }
+
+    .quarter-item {
+        overflow: visible; /* 移动端允许内容换行 */
+    }
+
+    .weeks-container {
+        flex-wrap: wrap; /* 移动端允许换行 */
+        overflow-x: visible;
+        overflow-y: visible;
+    }
+
     .quarter-label {
         font-size: clamp(0.75rem, 2vw, 0.875rem);
         padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px);
@@ -541,6 +565,10 @@ body {
         width: clamp(16px, 4vw, 20px);
         height: clamp(16px, 4vw, 20px);
         font-size: clamp(0.5rem, 1.5vw, 0.625rem);
+        flex-shrink: 0; /* 移动端不缩小 */
+        min-width: auto;
+        min-height: auto;
+        flex-basis: auto;
     }
 
     .ranking-item {