From 4165a9a78f82855a4d5dfa4d63c3b83282e95e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 13 Feb 2026 15:53:06 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 38 +++++++++++++-- react-app/src/components/TopData.jsx | 5 +- react-app/src/style.css | 69 +++++++++++++++------------- vue-app/src/components/TopData.vue | 3 ++ vue-app/src/style.css | 69 +++++++++++++++------------- 5 files changed, 112 insertions(+), 72 deletions(-) diff --git a/css/style.css b/css/style.css index f261b61..77fb258 100644 --- a/css/style.css +++ b/css/style.css @@ -281,6 +281,7 @@ body { min-width: 0; border-bottom: 1px solid #523A14; padding-bottom: 8px; + overflow: hidden; /* PC端防止内容溢出 */ } .last-quarter{ border-bottom: none; @@ -303,26 +304,34 @@ body { /* 周数圆圈容器 */ .weeks-container { display: flex; - flex-wrap: wrap; - gap: clamp(3px, 0.5vw, 5px); + flex-wrap: nowrap; /* PC端不换行 */ + gap: clamp(2px, 0.4vw, 5px); flex: 1; + overflow-x: hidden; /* 隐藏溢出内容 */ + overflow-y: hidden; + min-width: 0; /* 允许flex子项缩小 */ + justify-content: flex-start; /* 从左侧开始排列 */ } /* 单个周数圆圈 */ .week-circle { - width: clamp(18px, 2.5vw, 24px); - height: clamp(18px, 2.5vw, 24px); + width: clamp(12px, 2.5vw, 24px); + height: clamp(12px, 2.5vw, 24px); border-radius: 50%; border: 2px solid #815B37; background: rgba(129, 91, 55, 0.2); display: flex; align-items: center; justify-content: center; - font-size: clamp(0.625rem, 1vw, 0.75rem); + font-size: clamp(0.5rem, 1vw, 0.75rem); color: #f5bbab; font-weight: bold; cursor: pointer; transition: all 0.3s ease; + flex-shrink: 1; /* PC端允许周圈缩小以适应容器 */ + min-width: 10px; /* 最小尺寸 */ + min-height: 10px; + flex-basis: clamp(12px, 2.5vw, 24px); /* 弹性基础尺寸 */ } .week-circle:hover { @@ -531,6 +540,21 @@ body { font-size: clamp(0.875rem, 2.5vw, 1.125rem); } + /* 移动端年度进度允许换行 */ + .countdown { + overflow: visible; /* 移动端允许溢出换行 */ + } + + .quarter-item { + overflow: visible; /* 移动端允许内容换行 */ + } + + .weeks-container { + flex-wrap: wrap; /* 移动端允许换行 */ + overflow-x: visible; + overflow-y: visible; + } + .quarter-label { font-size: clamp(0.75rem, 2vw, 0.875rem); padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px); @@ -541,6 +565,10 @@ body { width: clamp(16px, 4vw, 20px); height: clamp(16px, 4vw, 20px); font-size: clamp(0.5rem, 1.5vw, 0.625rem); + flex-shrink: 0; /* 移动端不缩小 */ + min-width: auto; + min-height: auto; + flex-basis: auto; } .ranking-item { diff --git a/react-app/src/components/TopData.jsx b/react-app/src/components/TopData.jsx index c22342e..ec1cc82 100644 --- a/react-app/src/components/TopData.jsx +++ b/react-app/src/components/TopData.jsx @@ -8,8 +8,11 @@ function TopData({ onProgressRate }) { const MOBILE_BREAKPOINT = 768 const weekContainersRef = useRef(null) - // 动态调整周圈大小以适应容器宽度 + // 动态调整周圈大小以适应容器宽度（仅PC端） const adjustWeekCirclesSize = () => { + // 只在PC端（>768px）时执行动态调整 + if (window.innerWidth <= 768) return + const weekContainers = document.querySelectorAll('.weeks-container') weekContainers.forEach(container => { diff --git a/react-app/src/style.css b/react-app/src/style.css index 641a5f1..98b2ab6 100644 --- a/react-app/src/style.css +++ b/react-app/src/style.css @@ -211,7 +211,7 @@ body { flex-direction: column; align-items: center; justify-content: center; - overflow: hidden; /* 防止溢出 */ + overflow: hidden; /* PC端防止溢出 */ } .countdown h3 { @@ -239,7 +239,7 @@ body { min-width: 0; border-bottom: 1px solid #523A14; padding-bottom: 8px; - overflow: hidden; /* 防止内容溢出 */ + overflow: hidden; /* PC端防止内容溢出 */ } .last-quarter{ border-bottom: none; @@ -262,7 +262,7 @@ body { /* 周数圆圈容器 */ .weeks-container { display: flex; - flex-wrap: nowrap; /* 不换行 */ + flex-wrap: nowrap; /* PC端不换行 */ gap: clamp(2px, 0.4vw, 5px); flex: 1; overflow-x: hidden; /* 隐藏溢出内容 */ @@ -286,7 +286,7 @@ body { font-weight: bold; cursor: pointer; transition: all 0.3s ease; - flex-shrink: 1; /* 允许周圈缩小以适应容器 */ + flex-shrink: 1; /* PC端允许周圈缩小以适应容器 */ min-width: 10px; /* 最小尺寸 */ min-height: 10px; flex-basis: clamp(12px, 2.5vw, 24px); /* 弹性基础尺寸 */ @@ -490,40 +490,35 @@ body { font-size: clamp(0.875rem, 2.5vw, 1.125rem); } - /* 年度进度移动端优化 - 确保不换行 */ + /* 移动端年度进度允许换行 */ .countdown { - padding: clamp(6px, 1.2vw, 10px); - } - - .countdown h3 { - font-size: clamp(0.75rem, 1.5vw, 1rem); - margin-bottom: clamp(8px, 1.2vw, 12px); - } - - .quarters-container { - gap: clamp(4px, 1vw, 6px); + overflow: visible; /* 移动端允许溢出换行 */ } .quarter-item { - gap: clamp(4px, 0.8vw, 6px); - padding-bottom: clamp(6px, 1vw, 8px); - } - - .quarter-label { - font-size: clamp(0.7rem, 1.5vw, 0.85rem); - padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1.2vw, 10px); - min-width: clamp(28px, 5vw, 38px); - } - - .week-circle { - width: clamp(14px, 3.5vw, 18px); - height: clamp(14px, 3.5vw, 18px); - font-size: clamp(0.5rem, 1.2vw, 0.625rem); - border-width: 1.5px; + overflow: visible; /* 移动端允许内容换行 */ } .weeks-container { - gap: clamp(2px, 0.5vw, 4px); + flex-wrap: wrap; /* 移动端允许换行 */ + overflow-x: visible; + overflow-y: visible; + } + + .quarter-label { + font-size: clamp(0.75rem, 2vw, 0.875rem); + padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px); + min-width: clamp(30px, 5vw, 40px); + } + + .week-circle { + width: clamp(16px, 4vw, 20px); + height: clamp(16px, 4vw, 20px); + font-size: clamp(0.5rem, 1.5vw, 0.625rem); + flex-shrink: 0; /* 移动端不缩小 */ + min-width: auto; + min-height: auto; + flex-basis: auto; } .ranking-item { @@ -583,6 +578,14 @@ body { /* 超小屏幕优化 (480px及以下) */ @media (max-width: 480px) { + .header h1 { + font-size: clamp(1.25rem, 5vw, 1.5rem); + } + + .header p { + font-size: clamp(0.75rem, 3vw, 1rem); + } + .quarters-container { gap: clamp(5px, 2vw, 8px); } @@ -718,14 +721,14 @@ body { } /* 窄容器优化 - 适配所有高DPI小笔记本 */ -@media screen and (max-width: 1400px) { +@media screen and (min-width: 769px) and (max-width: 1400px) { .top-data { grid-template-columns: 2fr minmax(280px, 1fr); } } /* 极窄容器优化 */ -@media screen and (max-width: 1200px) { +@media screen and (min-width: 769px) and (max-width: 1200px) { .top-data { grid-template-columns: 1fr 1fr; } diff --git a/vue-app/src/components/TopData.vue b/vue-app/src/components/TopData.vue index d96610e..5fbef02 100644 --- a/vue-app/src/components/TopData.vue +++ b/vue-app/src/components/TopData.vue @@ -81,6 +81,9 @@ const currentWeek = ref(getCurrentWeek()) // 动态调整周圈大小以适应容器宽度 const adjustWeekCirclesSize = () => { + // 只在PC端（>768px）时执行动态调整 + if (window.innerWidth <= 768) return + const weekContainers = document.querySelectorAll('.weeks-container') weekContainers.forEach(container => { diff --git a/vue-app/src/style.css b/vue-app/src/style.css index 641a5f1..98b2ab6 100644 --- a/vue-app/src/style.css +++ b/vue-app/src/style.css @@ -211,7 +211,7 @@ body { flex-direction: column; align-items: center; justify-content: center; - overflow: hidden; /* 防止溢出 */ + overflow: hidden; /* PC端防止溢出 */ } .countdown h3 { @@ -239,7 +239,7 @@ body { min-width: 0; border-bottom: 1px solid #523A14; padding-bottom: 8px; - overflow: hidden; /* 防止内容溢出 */ + overflow: hidden; /* PC端防止内容溢出 */ } .last-quarter{ border-bottom: none; @@ -262,7 +262,7 @@ body { /* 周数圆圈容器 */ .weeks-container { display: flex; - flex-wrap: nowrap; /* 不换行 */ + flex-wrap: nowrap; /* PC端不换行 */ gap: clamp(2px, 0.4vw, 5px); flex: 1; overflow-x: hidden; /* 隐藏溢出内容 */ @@ -286,7 +286,7 @@ body { font-weight: bold; cursor: pointer; transition: all 0.3s ease; - flex-shrink: 1; /* 允许周圈缩小以适应容器 */ + flex-shrink: 1; /* PC端允许周圈缩小以适应容器 */ min-width: 10px; /* 最小尺寸 */ min-height: 10px; flex-basis: clamp(12px, 2.5vw, 24px); /* 弹性基础尺寸 */ @@ -490,40 +490,35 @@ body { font-size: clamp(0.875rem, 2.5vw, 1.125rem); } - /* 年度进度移动端优化 - 确保不换行 */ + /* 移动端年度进度允许换行 */ .countdown { - padding: clamp(6px, 1.2vw, 10px); - } - - .countdown h3 { - font-size: clamp(0.75rem, 1.5vw, 1rem); - margin-bottom: clamp(8px, 1.2vw, 12px); - } - - .quarters-container { - gap: clamp(4px, 1vw, 6px); + overflow: visible; /* 移动端允许溢出换行 */ } .quarter-item { - gap: clamp(4px, 0.8vw, 6px); - padding-bottom: clamp(6px, 1vw, 8px); - } - - .quarter-label { - font-size: clamp(0.7rem, 1.5vw, 0.85rem); - padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1.2vw, 10px); - min-width: clamp(28px, 5vw, 38px); - } - - .week-circle { - width: clamp(14px, 3.5vw, 18px); - height: clamp(14px, 3.5vw, 18px); - font-size: clamp(0.5rem, 1.2vw, 0.625rem); - border-width: 1.5px; + overflow: visible; /* 移动端允许内容换行 */ } .weeks-container { - gap: clamp(2px, 0.5vw, 4px); + flex-wrap: wrap; /* 移动端允许换行 */ + overflow-x: visible; + overflow-y: visible; + } + + .quarter-label { + font-size: clamp(0.75rem, 2vw, 0.875rem); + padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px); + min-width: clamp(30px, 5vw, 40px); + } + + .week-circle { + width: clamp(16px, 4vw, 20px); + height: clamp(16px, 4vw, 20px); + font-size: clamp(0.5rem, 1.5vw, 0.625rem); + flex-shrink: 0; /* 移动端不缩小 */ + min-width: auto; + min-height: auto; + flex-basis: auto; } .ranking-item { @@ -583,6 +578,14 @@ body { /* 超小屏幕优化 (480px及以下) */ @media (max-width: 480px) { + .header h1 { + font-size: clamp(1.25rem, 5vw, 1.5rem); + } + + .header p { + font-size: clamp(0.75rem, 3vw, 1rem); + } + .quarters-container { gap: clamp(5px, 2vw, 8px); } @@ -718,14 +721,14 @@ body { } /* 窄容器优化 - 适配所有高DPI小笔记本 */ -@media screen and (max-width: 1400px) { +@media screen and (min-width: 769px) and (max-width: 1400px) { .top-data { grid-template-columns: 2fr minmax(280px, 1fr); } } /* 极窄容器优化 */ -@media screen and (max-width: 1200px) { +@media screen and (min-width: 769px) and (max-width: 1200px) { .top-data { grid-template-columns: 1fr 1fr; }