.week-days { display: flex; justify-content: space-between; padding: 10px 0; } .week-day { flex: 1; text-align: center; font-weight: bold; } .days { display: flex; flex-wrap: wrap; padding: 10px; } .curday, .lastday { font-size: 12px; width: calc(100% / 7); /* 每行7个 */ height: 43px; /* 每个日期的高度 */ width: 14.28%; display: flex; flex-direction: column; /* 垂直排列 */ align-items: center; justify-content: flex-end; /* 向下对齐 */ cursor: pointer; position: relative; /* 使 dot 可以绝对定位 */ border-radius: 50%; } .dot { width: 20px; /* 圆点的直径 */ height: 20px; /* 圆点的直径 */ background-color: blue; /* 圆点的颜色 */ border-radius: 50%; /* 圆形 */ top: 0; /* 在顶部 */ transform: translateY(-50%); /* 向上移动圆点,使其居中 */ } // .curday { // // background-color: #f0f0f0; // } .lastday { // background-color: #e0e0e0; color: #ccc; } .selected { border: 1px solid blue; /* 选中日期的背景色 */ color: rgb(0, 132, 255); /* 选中日期的字体颜色 */ } .daka{ background-color: #a4e17e; }