diff --git a/Web/src/components/ContributionHeatmap.vue b/Web/src/components/ContributionHeatmap.vue index 7d15ff9..40441e0 100644 --- a/Web/src/components/ContributionHeatmap.vue +++ b/Web/src/components/ContributionHeatmap.vue @@ -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; } \ No newline at end of file diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue index e63abe9..b6df074 100644 --- a/Web/src/views/CalendarView.vue +++ b/Web/src/views/CalendarView.vue @@ -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;