test
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 19s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s

This commit is contained in:
孙诚
2026-01-15 18:54:08 +08:00
parent df3a06051b
commit caf6f3fe60
2 changed files with 48 additions and 17 deletions

View File

@@ -69,8 +69,8 @@ const totalCount = ref(0);
const scrollContainer = ref(null);
const thresholds = ref([2, 4, 7]); // Default thresholds
const CELL_SIZE = 10;
const CELL_GAP = 2;
const CELL_SIZE = 15;
const CELL_GAP = 3;
const WEEK_WIDTH = CELL_SIZE + CELL_GAP;
const formatDate = (d) => {
@@ -310,11 +310,10 @@ onMounted(() => {
.weekday-col-fixed {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 19px; /* Align with cells (month row height 15px + margin 4px) */
margin-right: 6px;
font-size: 9px;
height: 101px; /* Total height: 15 (month) + 4 (margin) + 82 (grid) */
height: 142px; /* Total height: 15 (month) + 4 (margin) + 123 (grid) */
color: var(--van-text-color-2);
flex-shrink: 0;
z-index: 10;
@@ -322,26 +321,58 @@ onMounted(() => {
}
.weekday-label {
height: 10px;
line-height: 10px;
margin-top: 10px;
height: 15px;
line-height: 15px;
margin-top: 15px; /* (15 cell + 3 gap)*2 - 15 height - previous margin? No. */
/*
Row 0: 0px top
Row 1: 18px top (15+3) - Label "二" aligns here? No, "二" is usually row 1 (index 1, 2nd row)
If we want to align with 2nd, 4th, 6th rows (indices 1, 3, 5):
Row 0: y=0
Row 1: y=18
Row 2: y=36
Row 3: y=54
Row 4: y=72
Row 5: y=90
Row 6: y=108
Label 1 ("二") at Row 1 (y=18)
Label 2 ("四") at Row 3 (y=54)
Label 3 ("六") at Row 5 (y=90)
Padding-top of container is 19px.
First label margin-top: 18px
Second label margin-top: (54 - (18+15)) = 21px
Third label margin-top: (90 - (54+15)) = 21px
Let's try standard spacing.
Gap between tops is 36px (2 rows).
Height of label is 15px.
Margin needed is 36 - 15 = 21px.
First label top needs to be at 18px relative to grid start.
Container padding-top aligns with grid start (row 0 top).
So first label margin-top should be 18px.
*/
margin-top: 21px;
}
.weekday-label:first-child { margin-top: 14px; }
.weekday-label:first-child { margin-top: 18px; }
.heatmap-grid {
display: flex;
gap: 2px;
gap: 3px;
}
.heatmap-week {
display: flex;
flex-direction: column;
gap: 2px;
gap: 3px;
}
.heatmap-cell {
width: 10px;
height: 10px;
width: 15px;
height: 15px;
border-radius: 2px;
background-color: var(--van-gray-2);
box-sizing: border-box;
@@ -404,12 +435,12 @@ onMounted(() => {
.legend {
display: flex;
align-items: center;
gap: 2px;
gap: 3px;
}
.legend-item {
width: 10px;
height: 10px;
width: 15px;
height: 15px;
border-radius: 2px;
}
</style>

View File

@@ -78,7 +78,7 @@ onMounted(async () => {
await nextTick();
setTimeout(() => {
// 计算页面高度滚动3/4高度以显示更多日期
const height = document.querySelector(".calendar-container").clientHeight * 0.50;
const height = document.querySelector(".calendar-container").clientHeight * 0.43;
document.querySelector(".van-calendar__body").scrollBy({
top: -height,
behavior: "smooth",
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
}
.calendar-container :deep(.van-calendar) {
height: calc(auto + 20px) !important;
height: calc(auto + 40px) !important;
flex: 1;
overflow: auto;
margin: 0;