.calendar { border-radius: 10px; background-color: transparent; .subtitle { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 500; color: #333333; line-height: 25px; height: var(--van-calendar-header-title-height); padding: 0 22px; .right { transform: rotateZ(180deg); } .disabled { opacity: 0.6; } } :global { .van-calendar__header { box-shadow: none; } .van-calendar__selected-day { width: 38px !important; height: 45px !important; border-radius: 5px; overflow: hidden; .van-calendar__bottom-info { color: #fff !important; } } .van-calendar__weekday { color: #777; font-size: 14px; } .van-calendar__day { font-size: 15px; &::after { position: absolute; top: 50%; right: 0; bottom: 0; left: 50%; width: 45px; height: 50px; background: #2dc7aa; content: ' '; opacity: 0.12; transform: translate(-50%, -50%); border-radius: 2px; } } .van-calendar__days { padding: 12px 0; } .van-calendar__bottom-info { bottom: 3px; } .full { .van-calendar__bottom-info { color: #ff6363; } } .van-calendar__day.full::after, .van-calendar__day--disabled.full::after { display: inline-block !important; background-color: #ffd7a6; } // 禁用不显示背景 .van-calendar__day--disabled::after { display: none !important; } } } .container { display: flex; align-items: center; flex-wrap: wrap; padding-bottom: 14px; } .noDay { display: flex; align-items: center; justify-content: center; flex: 1; padding: 25px 0 35px; .clock { width: 30px; } span { padding-left: 10px; font-size: 14px; font-weight: 500; color: #999; } } // .tag { // background-color: red; // padding: 8px 10px; // margin-bottom: 10px; // font-size: 12px; // color: #333333 !important; // border-color: #d8d8d8 !important; // &.active { // color: var(--van-primary) !important; // background: #e0f7f3; // border-color: var(--van-primary) !important; // } // } .dayBtn { display: flex; align-items: center; }