浅念
106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<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>
|