/* 日历头部 */ .calendar-view { display: flex; align-items:flex-end; text-align: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #ccc; padding: 20rpx; margin-bottom: 30rpx; } .calendar-view text{ color: #666; font-size: 28rpx; } .calendar-view .gray{ color: #D9DADA; } .calendar-view .gray::before{ border-color: #D9DADA !important; } .calendar-view .center { font-size: 36rpx; color: #ee3a43; } .calendar-view .left::before { content: ''; height: 15rpx; width: 15rpx; border-top: 1px solid #666; border-left:1px solid #666; display: inline-block; transform: rotate(-45deg); } .calendar-view .right::after { content: ''; height: 15rpx; width: 15rpx; border-top: 1px solid #666; border-right:1px solid #666; display: inline-block; transform: rotate(45deg); } .current-date{ font-size: 36rpx; font-weight: 700; padding: 0 20rpx; margin: 20rpx 0 10rpx; background: #fff; } .current-date text{ display: inline-block; padding: 20rpx 0; /* border-bottom: 4rpx solid #EE3A43; */ } .current-date .line{ width: 56rpx; height: 4rpx; background: #ee3a43; } /* 新版 */ @font-face { font-family: "iconfont"; src: url('iconfont.eot?t=1596614903470'); /* IE9 */ src: url('iconfont.eot?t=1596614903470#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABxQAAAKvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBVIFEATYCJAMQCwoABCAFhG0HQhswBsgekiRFQgQU8AMAmmCIh3/HXu9L8hFVWwXoyALpqqoqwAEfD6g66abEPBux/13TPwBUeZ0lAldI75LS0ctlzLY8NwVk3NQm5Co3lqhaWPE+z+X0pi+Q1bez3MZatCYtPuoFGAcU4F7UiyIroBPkltpFHBi88q89JtA0p1jEYe/wNMQryKpAPHbYMMT3CooStetCdeZgEd9U1NPX9ADgQf8+/kFlxJNUMrLx5LpHhPaf+GUsavP/JpxJQpHgHq8gYx0oxO1s41yUiMQoTWOibQN1dYmf+Dn0MhYO2zgfttC/PEKSiSrS3QabXjPzE3ON4GdII/FrrEsGhPjr/dYGcOyzM56gg6PM1BXvcbZIxY7zzRyS4znJs/m2VmjuRNq9edF1kcx9FbW85/nRgbXX6s5q/AX+vsGh/kBhUUHAYszwFx4acaAA6l7k9bgjo8Vbue4acDcbCqFqcBru+htf4l/I4EnzzQAa8lT+kNoAyG/TJuTdyDcsG+NB4r05rfm73irgx/jRrw4XMB+gyga24dQGHCqlg8RKyZ3cWuWLEWhFQlMTmOwwFLrCPwH3E+omB/I1sy2yunmysOuoaNlEVd0Omtb0HW8ZYaJEaWDVnoPQd4ek6zuyvkeysE+omPpCVT+i0HQaWRe2LIYjsYsRzImIrEvIIagKZQmeaHoniW1Owqzr0NIsYbqjjCpKy4ftPqIQdsUWfd5WyTlFlKky6nWeI5KkIo2pTiLwUjvnWmNZGZ37UKmgypDoAENgHCFCrJYgDgKVgsrxXOLo+5MImzkSjK3oFuazCEbnmB6pUKocQPZ5FZDuV97RzbOpxHEUQjEqGdLrzCMkEhWizc9zIgRcKfuBmqZRGR1Fod7S5/3yH56AJnJDiRQ5SlRU3yhUlcRoMStek/ASdUgSAAA=') format('woff2'), url('iconfont.woff?t=1596614903470') format('woff'), url('iconfont.ttf?t=1596614903470') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1596614903470#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; font-weight: normal; } .icon-unfold:before { content: "\e661"; } .icon-fold:before { content: "\e6de"; } .icon-playfill:before { content: "\e74f"; } .flex { display: flex; justify-content: space-between; align-items: center; } .direction-column { flex-direction: column; } .flex1 { flex: 1; } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-start { display: flex; justify-content: flex-start; align-items: center; } .flex-end { display: flex; justify-content: flex-end; align-items: center; } .flex-around { display: flex; justify-content: space-around; align-items: center; } .flex-wrap { flex-wrap: wrap; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-stretch { align-items: stretch; } .calendar { background-color: #fff; } .calendar .title { font-size: 28rpx; color: #333; padding: 20rpx; line-height: 40rpx; } .calendar .title .year-month { margin-right: 20rpx; } .calendar .title .icon { padding: 0 16rpx; font-size: 32rpx; color: #999; } .calendar .title .open { background-color: #f6f6f6; color: #999; font-size: 22rpx; line-height: 36rpx; border-radius: 18rpx; padding: 0 14rpx; } .calendar .calendar-week { line-height: 40rpx; font-size: 28rpx; color: #999; } .calendar .calendar-week .view { width: 100rpx; text-align: center; } .calendar .calendar-main { padding: 30rpx 0rpx 0; transition: height 0.3s; align-content: flex-start; overflow: hidden; } .calendar .calendar-main .day { position: relative; width: calc(100%/7); color: #666; text-align: center; margin-bottom: 20rpx; } .calendar .calendar-main .day .bg { height: 80rpx; width: 80rpx; line-height: 80rpx; font-size: 28rpx; font-weight: bold; margin: auto; position: relative; } .calendar .calendar-main .day .selectDate { border-radius: 50%; text-align: center; background: rgba(238,58,67,.1); border: 1rpx solid #EE3A43; color: #EE3A43; margin: 0 auto; } .calendar .calendar-main .day .other-month { color: #D9DADA; } .calendar .calendar-main .day .spot { width: 30rpx; height: 30rpx; background-color: #EE3A43; color: #fff; line-height: 30rpx; font-size: 16rpx; border-radius: 50%; margin: 6rpx auto 0; position: absolute; top: -6px; right: 0; border-bottom-left-radius: 0; } .monthList-item{ padding: 0 10rpx; margin-right: 15rpx; } .selected-month{ border-bottom: 1rpx solid #EE3A43; color: #EE3A43; } .calendar .calendar-main .day .red{ color: #EE3A43; } .gray{ color: #878787; }