From 8f9997828d560434ca3c3ba99b2056982f0630da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Fri, 13 Feb 2026 15:59:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/main.js                           | 23 +++++++++++++++++++----
 react-app/src/components/TopData.jsx | 21 +++++++++++++++++----
 vue-app/src/components/TopData.vue   | 21 +++++++++++++++++----
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/js/main.js b/js/main.js
index 194a86d..9f1fa3c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -595,17 +595,32 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // 动态调整周圈大小以适应容器宽度
     function adjustWeekCirclesSize() {
-        if (window.innerWidth <= 768) return
         const weekContainers = document.querySelectorAll('.weeks-container');
 
-        weekContainers.forEach(container => {
-            // 获取容器的实际宽度
-            const containerWidth = container.offsetWidth;
+        // 只在PC端（>768px）时执行动态调整，移动端清除内联样式
+        const isMobile = window.innerWidth <= 768;
 
+        weekContainers.forEach(container => {
             // 获取所有周圈
             const weekCircles = container.querySelectorAll('.week-circle');
             if (weekCircles.length === 0) return;
 
+            // 移动端：清除所有内联样式，让 CSS 样式生效
+            if (isMobile) {
+                weekCircles.forEach(circle => {
+                    circle.style.width = '';
+                    circle.style.height = '';
+                    circle.style.fontSize = '';
+                    circle.style.borderWidth = '';
+                });
+                container.style.transform = '';
+                return;
+            }
+
+            // PC端：动态调整周圈大小
+            // 获取容器的实际宽度
+            const containerWidth = container.offsetWidth;
+
             // 计算所有周圈的总宽度（包括间距）
             const gap = 3; // 默认间距
             const totalGap = gap * (weekCircles.length - 1);
diff --git a/react-app/src/components/TopData.jsx b/react-app/src/components/TopData.jsx
index ec1cc82..c1821de 100644
--- a/react-app/src/components/TopData.jsx
+++ b/react-app/src/components/TopData.jsx
@@ -10,16 +10,29 @@ function TopData({ onProgressRate }) {
 
   // 动态调整周圈大小以适应容器宽度（仅PC端）
   const adjustWeekCirclesSize = () => {
-    // 只在PC端（>768px）时执行动态调整
-    if (window.innerWidth <= 768) return
-
     const weekContainers = document.querySelectorAll('.weeks-container')
 
+    // 只在PC端（>768px）时执行动态调整，移动端清除内联样式
+    const isMobile = window.innerWidth <= 768
+
     weekContainers.forEach(container => {
-      const containerWidth = container.offsetWidth
       const weekCircles = container.querySelectorAll('.week-circle')
       if (weekCircles.length === 0) return
 
+      // 移动端：清除所有内联样式，让 CSS 样式生效
+      if (isMobile) {
+        weekCircles.forEach(circle => {
+          circle.style.width = ''
+          circle.style.height = ''
+          circle.style.fontSize = ''
+          circle.style.borderWidth = ''
+        })
+        container.style.transform = ''
+        return
+      }
+
+      // PC端：动态调整周圈大小
+      const containerWidth = container.offsetWidth
       const gap = 3
       const totalGap = gap * (weekCircles.length - 1)
       const circleCount = weekCircles.length
diff --git a/vue-app/src/components/TopData.vue b/vue-app/src/components/TopData.vue
index 5fbef02..14596fe 100644
--- a/vue-app/src/components/TopData.vue
+++ b/vue-app/src/components/TopData.vue
@@ -81,16 +81,29 @@ const currentWeek = ref(getCurrentWeek())
 
 // 动态调整周圈大小以适应容器宽度
 const adjustWeekCirclesSize = () => {
-  // 只在PC端（>768px）时执行动态调整
-  if (window.innerWidth <= 768) return
-
   const weekContainers = document.querySelectorAll('.weeks-container')
 
+  // 只在PC端（>768px）时执行动态调整，移动端清除内联样式
+  const isMobile = window.innerWidth <= 768
+
   weekContainers.forEach(container => {
-    const containerWidth = container.offsetWidth
     const weekCircles = container.querySelectorAll('.week-circle')
     if (weekCircles.length === 0) return
 
+    // 移动端：清除所有内联样式，让 CSS 样式生效
+    if (isMobile) {
+      weekCircles.forEach(circle => {
+        circle.style.width = ''
+        circle.style.height = ''
+        circle.style.fontSize = ''
+        circle.style.borderWidth = ''
+      })
+      container.style.transform = ''
+      return
+    }
+
+    // PC端：动态调整周圈大小
+    const containerWidth = container.offsetWidth
     const gap = 3
     const totalGap = gap * (weekCircles.length - 1)
     const circleCount = weekCircles.length