小程序自定义日历效果(2)

/* pages/calendar/calendar.wxss */ .top-handle { height: 80rpx; } .prev { text-align: right; height: 80rpx; } .next { height: 80rpx; } .prev-handle { width: 80rpx; height: 100%; } .next-handle { width: 80rpx; height: 100%; } .date-area { width: 50%; height: 80rpx; text-align: center; } .weeks { height: 50rpx; line-height: 50rpx; opacity: 0.5 } .week { text-align: center; } .days { height: 500rpx; } .grid { width: 107.1428571429rpx; } .day { width: 100%; height: 100%; color: #000; font-size: 26rpx; font-weight: 200; } .border-instinct{ position: relative; left: 0; top: 0; color: #fff; } .border-radius { border-radius:5px 0 0 5px; position: relative; left: 0; top: 0; color: #fff; } .border-right-radius { border-radius:0 5px 5px 0; position: relative; left: 0; top: 0; color: #fff; } .pink-bg { background-color: #ffe5b4; color: #f6ac1d; } .dependence-bg { background-color: #d9246b; } .purple-bg { background-color: #b8b8f1; } .right-triangle::after { content: ""; display: block; width: 0; height: 0; border: 15rpx solid transparent; border-left-color: #ff629a; position: absolute; right: -22rpx; top: 18rpx; } .left-triangle::before { content: ""; display: block; width: 0; height: 0; border: 15rpx solid transparent; border-right-color: #ff629a; position: absolute; left: -22rpx; top: 18rpx; } .tips { text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; } .types { background-color: #ffedf4; height: 50rpx; } .type-dot { width: 25rpx; height: 25rpx; border-radius: 50%; margin-right: 10rpx; } .type-dot-ymq { color:#FF7CA0; background-color: #FF7CA0; } .type-dot-ycq { color: rgb(255, 200, 202); background-color: rgb(255, 200, 202); } .type-dot-aqq { color: rgb(118, 191, 92); background-color: rgb(118, 191, 92); } .type-dot-yyq { color: #FF7CA0; background-color: #FF7CA0; } .type-dot-plr { color: rgb(211, 189, 215); background-color: rgb(211, 189, 215); } .types-desc { padding: 0 20rpx; } .type-name { margin-top: 50rpx; margin-bottom: 30rpx; } .type-desc { padding: 0 35rpx; line-height: 38rpx; } .explain { border-top: 1px solid #eee; width: 90%; margin: 20rpx 5% 20rpx 5%; padding: 20rpx 0; } .explain-title { font-weight: bold; margin-bottom: 15rpx; } .explain-item { padding: 8rpx 20rpx; color: #fff; } .left-border-radius { border-top-left-radius: 20rpx; border-bottom-left-radius: 20rpx; } .right-border-radius { border-top-right-radius: 20rpx; border-bottom-right-radius: 20rpx; } .picker-btns { height: 120rpx; line-height: 120rpx; border-bottom: 1rpx solid #FF7CA0; } .picker-confirm { margin-right: 50rpx; } .picker-cancel { margin-left: 50rpx; } .picker-view { color:#FF7CA0; text-align: center; } .box { display: flex; } .box-lr { flex-direction: row; } .box-rl { flex-direction: row-reverse; } .box-tb { flex-direction: column; } .box-bt { flex-direction: column-reverse; } .box-pack-center { justify-content: center; } .day-week{ color:#ccc; } .box-pack-start { justify-content: flex-start; } .box-pack-end { justify-content: flex-end; } .box-pack-between { justify-content: space-between; } .box-pack-around { justify-content: space-around; } .box-align-center { align-items: center; } .years-month{ color: #000; } .box-align-start { align-items: flex-start; } .box-align-end { align-items: flex-end; } .self-align-center { align-self: center; margin: 0 auto; } .self-align-start { align-self: flex-start; } .self-align-end { align-self: flex-end; } .self-align-stretch { align-self: stretch; } .box-wrap { flex-wrap: wrap; } .box-nowrap { flex-wrap: nowrap; } .flex { flex-grow: 1; background: #fff; } .shrink { flex-shrink: 1; } .bg { background-image: linear-gradient(to bottom, #faefe7, #ffcbd7); overflow: hidden; } .brown-color { color: #784344; } .pink-color { color: #ff629a; } .white-color { color: #fff; } .fs24 { font-size: 24rpx; } .fs28 { font-size: 28rpx; } .fs32 { font-size: 32rpx; } .fs36 { font-size: 36rpx; } /*灰色显示 */ .grays{ color: #ccc; }