xinyouhe/sales_data_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端样式

Browse Source
This commit is contained in:
浅念
2026-02-13 15:53:06 +08:00
parent 557deaaa84
commit 4165a9a78f
5 changed files with 112 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+33 -5
View File
@@ -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 {
react-app/src/components/TopData.jsx
+4 -1
View File
@@ -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 => {
react-app/src/style.css
+36 -33
View File
@@ -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;
}
vue-app/src/components/TopData.vue
+3
View File
@@ -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 => {
vue-app/src/style.css
+36 -33
View File
@@ -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;
}