响应式

react-app/src/App.jsx

@@ -7,68 +7,13 @@ import footerImage from '/img/foot.png'
 
 function App() {
   const containerRef = useRef(null)
-  const MOBILE_BREAKPOINT = 768
-  const DESIGN_WIDTH = 1920
-
-  // PC端等比例缩放函数
-  const setScale = () => {
-    const screenWidth = window.innerWidth
-
-    // 移动端不缩放，保持响应式布局
-    if (screenWidth <= MOBILE_BREAKPOINT) {
-      document.body.style.transform = 'none'
-      document.body.style.transformOrigin = 'left top'
-      document.body.style.marginLeft = '0px'
-      document.body.style.width = '100%'
-      document.body.style.minWidth = '320px'
-      document.body.style.height = 'auto'
-      document.body.style.overflowX = 'hidden'
-      return
-    }
-
-    // PC端等比例缩放
-    const scale = screenWidth / DESIGN_WIDTH
-    const finalScale = Math.max(scale, 0.6)
-
-    // 重置样式以获取真实内容高度
-    document.body.style.transform = 'none'
-    document.body.style.height = 'auto'
-
-    // 获取真实内容高度
-    const contentHeight = document.body.scrollHeight
-
-    // 计算缩放后的高度
-    const scaledHeight = Math.ceil(contentHeight * finalScale)
-
-    // 应用缩放
-    document.body.style.transform = `scale(${finalScale})`
-    document.body.style.transformOrigin = 'left top'
-    document.body.style.width = `${DESIGN_WIDTH}px`
-    document.body.style.minWidth = `${DESIGN_WIDTH}px`
-    document.body.style.height = `${scaledHeight}px`
-    document.body.style.marginLeft = '0px'
-    document.body.style.overflowX = 'hidden'
-  }
 
   const handleProgressRate = (rate) => {
     console.log('进度率:', rate)
   }
 
   useEffect(() => {
-    setScale()
+    // 移除窗口缩放监听，使用纯响应式布局
-
-    let resizeTimer = null
-    const handleResize = () => {
-      clearTimeout(resizeTimer)
-      resizeTimer = setTimeout(setScale, 100)
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-      clearTimeout(resizeTimer)
-    }
   }, [])
 
   return (

react-app/src/components/TopData.jsx

@@ -139,10 +139,10 @@ function TopData({ onProgressRate }) {
 
     initData()
 
-    // 初始调整周圈大小
+    // 初始调整周圈大小 - 延迟到数据渲染后
     setTimeout(() => {
       adjustWeekCirclesSize()
-    }, 100)
+    }, 500) // 增加延迟确保 DOM 已渲染
 
     // 监听窗口大小变化
     let resizeTimer

react-app/src/style.css

@@ -1,15 +1,3 @@
-/* PC端等比例缩放，根字号固定 */
-html {
-    font-size: 16px;
-}
-
-/* 移动端基础字号 */
-@media screen and (max-width: 768px) {
-    html {
-        font-size: 14px;
-    }
-}
-
 * {
     margin: 0;
     padding: 0;
@@ -21,9 +9,6 @@ body {
     color: #fff;
     min-width: 320px;
     overflow-x: hidden;
-    /* PC端缩放相关样式 */
-    transform-origin: left top;
-    transition: transform 0.1s ease-out;
 }
 
 .container {
@@ -32,8 +17,6 @@ body {
     flex-direction: column;
     justify-content: space-between;
     background: #000;
-    /* 固定最小宽度，避免缩放时内容挤压 */
-    min-width: 1200px;
 }
 
 .cont{
@@ -41,20 +24,10 @@ body {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 1rem;
-    /* 确保内容区域最小宽度 */
-    min-width: 1080px;
 }
 
 /* 移动端下调整宽度 */
 @media screen and (max-width: 768px) {
-    body {
-        transform: none !important;
-        width: 100% !important;
-        min-width: 320px !important;
-        height: auto !important;
-        overflow-x: hidden !important;
-    }
-
     .container {
         min-width: 320px;
         width: 100%;