提交

2026-02-12 09:38:27 +08:00
commit 5ba8456a88
42 changed files with 8372 additions and 0 deletions
@@ -0,0 +1,105 @@
+<template>
+  <div class="container" ref="containerRef">
+    <!-- 头部图片 -->
+    <div class="header-image">
+      <img :src="headerImage" alt="头部装饰图片">
+    </div>
+
+    <div class="cont">
+      <!-- 顶部数据区域 -->
+      <TopData @progress-rate="handleProgressRate" />
+
+      <!-- 小组排名区域 -->
+      <h2 class="section-title">小组排名</h2>
+      <GroupRanking />
+
+      <!-- 个人排名区域 -->
+      <h2 class="section-title">个人排名</h2>
+      <PersonRanking />
+
+      <!-- 尾部图片 -->
+      <div class="footer-image">
+        <img :src="footerImage" alt="尾部装饰图片">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import TopData from './components/TopData.vue'
+import GroupRanking from './components/GroupRanking.vue'
+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>