From 95a7deac4c91bcad039910404bfd3f1c24c7382c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 13 Feb 2026 14:59:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-app/src/App.jsx | 57 +--------------------------- react-app/src/components/TopData.jsx | 4 +- react-app/src/style.css | 27 ------------- 3 files changed, 3 insertions(+), 85 deletions(-) diff --git a/react-app/src/App.jsx b/react-app/src/App.jsx index 51bfcec..df893c2 100644 --- a/react-app/src/App.jsx +++ b/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 ( diff --git a/react-app/src/components/TopData.jsx b/react-app/src/components/TopData.jsx index 93af9bc..c22342e 100644 --- a/react-app/src/components/TopData.jsx +++ b/react-app/src/components/TopData.jsx @@ -139,10 +139,10 @@ function TopData({ onProgressRate }) { initData() - // 初始调整周圈大小 + // 初始调整周圈大小 - 延迟到数据渲染后 setTimeout(() => { adjustWeekCirclesSize() - }, 100) + }, 500) // 增加延迟确保 DOM 已渲染 // 监听窗口大小变化 let resizeTimer diff --git a/react-app/src/style.css b/react-app/src/style.css index 2657c58..641a5f1 100644 --- a/react-app/src/style.css +++ b/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%;