|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | @import url("./Li-Calendar.css"); | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | .calendar-Time-header{ | 
|---|
|  |  |  | /* text-align: center; | 
|---|
|  |  |  | height: 50upx; | 
|---|
|  |  |  | line-height: 50upx; | 
|---|
|  |  |  | vertical-align: middle; | 
|---|
|  |  |  | padding: 20upx; */ | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .header-left { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .header-left image { | 
|---|
|  |  |  | width: 30rpx; | 
|---|
|  |  |  | height: 30rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .header-left text { | 
|---|
|  |  |  | font-size: 32rpx; | 
|---|
|  |  |  | font-family: PingFangSC-Semibold, PingFang SC; | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | color: #222222; | 
|---|
|  |  |  | margin: 0 40rpx | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .header-right { | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | font-family: PingFangSC-Regular, PingFang SC; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | color: $uni-color-primary; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-TimeH{ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-lastMonth{ | 
|---|
|  |  |  | width: 100upx; | 
|---|
|  |  |  | font-size: 35upx; | 
|---|
|  |  |  | margin-right: 10%; | 
|---|
|  |  |  | padding: 0 5px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-nextMonth{ | 
|---|
|  |  |  | width: 100upx; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | margin-left: 10%; | 
|---|
|  |  |  | font-size: 35upx; | 
|---|
|  |  |  | padding: 0 5px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-backToToday{ | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | font-size: 24upx; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | right: 5px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-row:before, | 
|---|
|  |  |  | .calendar-row:after { | 
|---|
|  |  |  | display: table; | 
|---|
|  |  |  | content: ' '; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-row:after { | 
|---|
|  |  |  | clear: both; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-col { | 
|---|
|  |  |  | width: 14.285714%; | 
|---|
|  |  |  | max-width: 14.285714%; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | float: left; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | min-height: 80upx; | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | /* color: #999999; */ | 
|---|
|  |  |  | color: #222222; | 
|---|
|  |  |  | white-space: nowrap; | 
|---|
|  |  |  | text-overflow: ellipsis; | 
|---|
|  |  |  | -o-text-overflow: ellipsis; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .aligncanter { | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | /* border-bottom: 1rpx solid #E5E5E5; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-header { | 
|---|
|  |  |  | color: gray; | 
|---|
|  |  |  | height: 40upx; | 
|---|
|  |  |  | line-height: 40upx; | 
|---|
|  |  |  | vertical-align: middle; | 
|---|
|  |  |  | font-size: 24upx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-day { | 
|---|
|  |  |  | height: 80upx; | 
|---|
|  |  |  | transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-content { | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-date{ | 
|---|
|  |  |  | /* color: #000; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-today { | 
|---|
|  |  |  | /* border-radius: 6upx; | 
|---|
|  |  |  | background-color: $uni-color-primary; */ | 
|---|
|  |  |  | color: $uni-color-primary; | 
|---|
|  |  |  | /* -moz-box-shadow: 0px 2upx 10upx #ABABAB; | 
|---|
|  |  |  | -webkit-box-shadow: 0px 2upx 10upx #ABABAB; | 
|---|
|  |  |  | box-shadow: 0px 2upx 10upx #ABABAB; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-today .calendar-point{ | 
|---|
|  |  |  | color: white !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-today .calendar-text{ | 
|---|
|  |  |  | color: white !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-col-lastMonth .calendar-text{ | 
|---|
|  |  |  | color: gray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-col-nextMonth .calendar-text{ | 
|---|
|  |  |  | color: gray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* .calendar-today .calendar-date{ | 
|---|
|  |  |  | color: white; | 
|---|
|  |  |  | } */ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-active { | 
|---|
|  |  |  | color:#FFFFFF !important; | 
|---|
|  |  |  | background-color: $uni-color-primary; | 
|---|
|  |  |  | /* -moz-box-shadow: 0px 2upx 10upx #ABABAB; | 
|---|
|  |  |  | -webkit-box-shadow: 0px 2upx 10upx #ABABAB; | 
|---|
|  |  |  | box-shadow: 0px 2upx 10upx #ABABAB; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 范围标记 */ | 
|---|
|  |  |  | .calendar-range { | 
|---|
|  |  |  | /* color:#01AAED; */ | 
|---|
|  |  |  | border-radius: 0px; | 
|---|
|  |  |  | background-color: #D9D9D9; | 
|---|
|  |  |  | -moz-box-shadow: none; | 
|---|
|  |  |  | -webkit-box-shadow: none; | 
|---|
|  |  |  | box-shadow: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .ClearBoth { | 
|---|
|  |  |  | clear: both; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-col-nextMonth{ | 
|---|
|  |  |  | color:gray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-col-lastMonth{ | 
|---|
|  |  |  | color:gray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-btn-disabled{ | 
|---|
|  |  |  | color:gainsboro; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-point{ | 
|---|
|  |  |  | width: 28rpx; | 
|---|
|  |  |  | height: 28rpx; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | background-color: #F62710; | 
|---|
|  |  |  | border-radius: 50%; | 
|---|
|  |  |  | font-size: 16upx; | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | top:2upx; | 
|---|
|  |  |  | right: 2upx; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-text{ | 
|---|
|  |  |  | padding: 4rpx 0; | 
|---|
|  |  |  | width:100%;font-size: 20upx;color: #F62710;top:40upx;left: 0px;position: absolute;overflow:hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .dayValue{ | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | /* color: #000000; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .calendar-day-6-7{ | 
|---|
|  |  |  | /* color: orangered; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 超出日期范围 */ | 
|---|
|  |  |  | .calendar-out-of-Date{ | 
|---|
|  |  |  | background-color: #EAEAEA; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .calendar-out-of-Date .calendar-date{ | 
|---|
|  |  |  | color: gray; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 以下为实现0.5px底部边界 */ | 
|---|
|  |  |  | .under_line{position: relative;} | 
|---|
|  |  |  | .under_line:before, | 
|---|
|  |  |  | .under_line:after{position: absolute;content: " ";height: 1px;width: 100%;left: 0;transform-origin: 0 0;-webkit-transform-origin: 0 0;} | 
|---|
|  |  |  | /* .fineLine:before{顶部top: 0;background: #000;} */ | 
|---|
|  |  |  | .under_line:after{bottom: 0;} | 
|---|
|  |  |  | @media only screen and (-webkit-min-device-pixel-ratio: 1.5){.under_line:after,.under_line:before{-webkit-transform: scaleY(.667);}} | 
|---|
|  |  |  | @media only screen and (-webkit-min-device-pixel-ratio: 2){.under_line:after,.under_line:before{-webkit-transform: scaleY(.5);}} | 
|---|
|  |  |  | /* 以上为实现0.5px底部边界 */ | 
|---|
|  |  |  | </style> | 
|---|