add journal-date

miniprogram/components/calendar/index.less

@@ -0,0 +1,114 @@
+/* components/calendar/index.less */
+.calendar {
+	flex: 1;
+	height: 100%;
+	display: flex;
+	padding: 32rpx;
+	overflow: hidden;
+	flex-direction: column;
+
+	.year {
+		display: flex;
+		padding: 16rpx 0;
+		align-items: center;
+		margin-bottom: 24rpx;
+		justify-content: space-between;
+
+		.btn {
+			width: 64rpx;
+			height: 64rpx;
+			display: flex;
+			background: var(--theme-bg-card);
+			align-items: center;
+			border-radius: 12rpx;
+			justify-content: center;
+
+			&:active {
+				opacity: .7;
+			}
+		}
+
+		.text {
+			color: var(--theme-text);
+			font-size: 32rpx;
+			font-weight: 600;
+		}
+	}
+
+	.weekdays {
+		display: grid;
+		margin-bottom: 16rpx;
+		grid-template-columns: repeat(7, 1fr);
+
+		.weekday {
+			color: var(--theme-text-secondary);
+			padding: 16rpx 0;
+			font-size: 24rpx;
+			text-align: center;
+		}
+	}
+
+	.months {
+		flex: 1;
+		height: 0;
+		padding-bottom: 256rpx;
+
+		.month {
+			margin-bottom: 48rpx;
+
+			.title {
+				color: var(--theme-text);
+				padding: 16rpx 0;
+				font-size: 28rpx;
+				font-weight: 600;
+				margin-bottom: 16rpx;
+			}
+
+			.days {
+				display: grid;
+				grid-gap: 8rpx;
+				grid-template-columns: repeat(7, 1fr);
+
+				.day {
+					display: flex;
+					position: relative;
+					align-items: center;
+					aspect-ratio: 1;
+					border-radius: 12rpx;
+					flex-direction: column;
+					justify-content: center;
+					background: var(--theme-bg-card);
+
+					.number {
+						color: var(--theme-text);
+						font-size: 28rpx;
+					}
+
+					.dot {
+						width: 8rpx;
+						height: 8rpx;
+						border-radius: 50%;
+						background: var(--theme-primary);
+					}
+
+					&.other-month {
+						opacity: .4;
+					}
+
+					&.has-journal {
+						background: var(--theme-bg-journal);
+
+						.day-number {
+							color: var(--theme-wx);
+							font-weight: bold;
+						}
+
+						&:active {
+							opacity: .7;
+						}
+					}
+				}
+			}
+		}
+	}
+}