diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue index 58574e8..ac73a3b 100644 --- a/vue-app/src/App.vue +++ b/vue-app/src/App.vue @@ -35,71 +35,18 @@ import PersonRanking from './components/PersonRanking.vue' import headerImage from '/img/heard.png' import footerImage from '/img/foot.png' -const MOBILE_BREAKPOINT = 768 -const DESIGN_WIDTH = 1920 const containerRef = ref(null) -// 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' -} - -let resizeTimer = null - -const handleResize = () => { - setScale() -} - const handleProgressRate = (rate) => { - // 可以在这里处理进度率数据 - console.log('进度率:', rate) + // 可以在这里处理进度率数据 + console.log('进度率:', rate) } onMounted(() => { - setScale() - window.addEventListener('resize', () => { - clearTimeout(resizeTimer) - resizeTimer = setTimeout(setScale, 100) - }) + // 移除窗口缩放监听,使用纯响应式布局 }) onUnmounted(() => { - window.removeEventListener('resize', handleResize) - clearTimeout(resizeTimer) + // 清理工作 }) diff --git a/vue-app/src/components/TopData.vue b/vue-app/src/components/TopData.vue index 6ff1090..d96610e 100644 --- a/vue-app/src/components/TopData.vue +++ b/vue-app/src/components/TopData.vue @@ -206,10 +206,10 @@ onMounted(async () => { startProgressAnimation(parseFloat(rate)) }, 800) - // 初始调整周圈大小 + // 初始调整周圈大小 - 延迟到数据渲染后 setTimeout(() => { adjustWeekCirclesSize() - }, 100) + }, 500) // 增加延迟确保 DOM 已渲染 // 监听窗口大小变化 let resizeTimer diff --git a/vue-app/src/style.css b/vue-app/src/style.css index 2657c58..641a5f1 100644 --- a/vue-app/src/style.css +++ b/vue-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%;