响应式

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)
 }
 
 onMounted(() => {
-  setScale()
+    // 移除窗口缩放监听，使用纯响应式布局
-  window.addEventListener('resize', () => {
-    clearTimeout(resizeTimer)
-    resizeTimer = setTimeout(setScale, 100)
-  })
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
+    // 清理工作
-  clearTimeout(resizeTimer)
 })
 </script>

vue-app/src/components/TopData.vue

@@ -206,10 +206,10 @@ onMounted(async () => {
     startProgressAnimation(parseFloat(rate))
   }, 800)
 
-  // 初始调整周圈大小
+  // 初始调整周圈大小 - 延迟到数据渲染后
   setTimeout(() => {
     adjustWeekCirclesSize()
-  }, 100)
+  }, 500) // 增加延迟确保 DOM 已渲染
 
   // 监听窗口大小变化
   let resizeTimer

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