响应式
This commit is contained in:
浅念
+131
-26
@@ -21,49 +21,33 @@ body {
|
||||
color: #fff;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
/* PC端缩放相关样式 */
|
||||
transform-origin: left top;
|
||||
transition: transform 0.1s ease-out;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #000;
|
||||
/* 固定最小宽度，避免缩放时内容挤压 */
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.cont{
|
||||
width: 90%;
|
||||
max-width: 1400px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
/* 确保内容区域最小宽度 */
|
||||
min-width: 1080px;
|
||||
padding: clamp(0.5rem, 1.5vw, 2rem);
|
||||
}
|
||||
|
||||
/* 移动端下调整宽度 */
|
||||
/* 移动端优化 (768px及以下) */
|
||||
@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%;
|
||||
}
|
||||
|
||||
.cont {
|
||||
width: 95%;
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -641,13 +625,13 @@ body {
|
||||
|
||||
/* 头部和尾部图片 */
|
||||
.header-image {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: clamp(10px, 1.5vw, 20px);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-image {
|
||||
margin-top: 20px;
|
||||
margin-top: clamp(10px, 1.5vw, 20px);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -665,3 +649,124 @@ body {
|
||||
.ranking-item .rank-number {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* ========== 响应式布局 - 不同屏幕尺寸优化 ========== */
|
||||
|
||||
/* 小屏幕笔记本 (1366x768, 1440x900) */
|
||||
@media screen and (min-width: 769px) and (max-width: 1600px) {
|
||||
.cont {
|
||||
width: 95%;
|
||||
padding: clamp(0.5rem, 1.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(0.8rem, 1.1vw, 0.95rem);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
min-height: clamp(220px, 28vw, 280px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 标准全高清 (1920x1080) */
|
||||
@media screen and (min-width: 1601px) and (max-width: 2100px) {
|
||||
.cont {
|
||||
width: 90%;
|
||||
max-width: 1700px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
min-height: clamp(250px, 28vw, 320px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 2K 屏幕 (2560x1440) */
|
||||
@media screen and (min-width: 2101px) and (max-width: 3200px) {
|
||||
.cont {
|
||||
width: 85%;
|
||||
max-width: 2200px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
|
||||
padding: clamp(6px, 0.9vw, 8px) clamp(12px, 1.6vw, 18px);
|
||||
}
|
||||
|
||||
.top-data {
|
||||
gap: clamp(10px, 1.5vw, 18px);
|
||||
margin-bottom: clamp(15px, 1.8vw, 25px);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
min-height: clamp(280px, 28vw, 380px);
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.6vw, 18px);
|
||||
font-size: clamp(0.8rem, 1.1vw, 0.95rem);
|
||||
}
|
||||
|
||||
.header-image,
|
||||
.footer-image {
|
||||
margin: clamp(12px, 1.8vw, 25px) auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4K 屏幕 (3840x2160 及以上) */
|
||||
@media screen and (min-width: 3201px) {
|
||||
.cont {
|
||||
width: 80%;
|
||||
max-width: 3000px;
|
||||
padding: clamp(1.5rem, 2vw, 3rem);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1rem, 1.5vw, 1.3rem);
|
||||
padding: clamp(8px, 1vw, 10px) clamp(15px, 2vw, 25px);
|
||||
}
|
||||
|
||||
.top-data {
|
||||
gap: clamp(15px, 2vw, 25px);
|
||||
margin-bottom: clamp(20px, 2.5vw, 30px);
|
||||
}
|
||||
|
||||
.sales-info {
|
||||
padding: clamp(15px, 2vw, 25px);
|
||||
gap: clamp(15px, 2vw, 20px);
|
||||
}
|
||||
|
||||
.countdown {
|
||||
padding: clamp(12px, 1.8vw, 15px);
|
||||
}
|
||||
|
||||
.group-ranking,
|
||||
.person-ranking {
|
||||
padding: clamp(15px, 2vw, 30px);
|
||||
margin-bottom: clamp(15px, 2vw, 25px);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
min-height: clamp(350px, 30vw, 500px);
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
padding: clamp(12px, 1.5vw, 18px) clamp(15px, 2vw, 22px);
|
||||
font-size: clamp(0.85rem, 1.2vw, 1rem);
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
width: clamp(22px, 3.5vw, 28px);
|
||||
height: clamp(22px, 3.5vw, 28px);
|
||||
}
|
||||
|
||||
.header-image,
|
||||
.footer-image {
|
||||
margin: clamp(15px, 2.5vw, 30px) auto;
|
||||
}
|
||||
|
||||
/* 4K屏幕下的文字大小优化 */
|
||||
.target-amount,
|
||||
.total-amount {
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
-50
@@ -5,7 +5,6 @@ const RESIZE_DEBOUNCE_TIME = 300; // 防抖时间（毫秒）
|
||||
const PROGRESS_STEP = 0.4; // 进度条每帧增量
|
||||
const PROGRESS_INTERVAL = 20; // 进度条更新间隔（毫秒）
|
||||
const MOBILE_BREAKPOINT = 768; // 移动端断点（px）
|
||||
const DESIGN_WIDTH = 1920; // 设计稿宽度（px）
|
||||
|
||||
// 年度销售数据（可通过API动态获取）
|
||||
let yearData = {
|
||||
@@ -13,49 +12,6 @@ let yearData = {
|
||||
actual: 231154000 // 年度实际销售额（万元）
|
||||
};
|
||||
|
||||
// PC端等比例缩放函数
|
||||
function 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;
|
||||
|
||||
// 只限制最小缩放比例，允许放大
|
||||
// 最小缩放到60%，最大可以放大填满屏幕
|
||||
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 groupData = [
|
||||
{ name: '华东一组', target: 50000000000, actual: 62000000000 },
|
||||
@@ -556,9 +512,6 @@ function renderPersonChart() {
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// PC端等比例缩放
|
||||
setScale();
|
||||
|
||||
// 获取年度数据并更新顶部显示
|
||||
yearData = await fetchYearData();
|
||||
const progressRate = updateTopData();
|
||||
@@ -591,9 +544,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
// 响应式调整 - 使用防抖优化性能
|
||||
window.addEventListener('resize', () => {
|
||||
// 立即更新缩放（不防抖，保证视觉效果流畅）
|
||||
setScale();
|
||||
|
||||
// 图表重新渲染使用防抖
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user