css

liukangdong

2024-06-03 94233d44a5ee67a6dbf2effde6e963e04feb4644

 h5/components/Li-Calendar/Li-Calendar.vue

@@ -697,6 +697,224 @@
   }

</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>