调整样式

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);

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

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