jzlife_wx_servant/pages/upgrade/serviceOrder/serviceOrder.wxss

page {
  background: #F3F3F3;
  color: #333;
  /* padding:0 24rpx; */
}
view,text{
  box-sizing: border-box;
  color:#333;
  font-size: 34rpx;
}
.whole-page{
  min-height: 2000rpx;

}

/* 服务单 */
.service-order{
  margin:10rpx 24rpx 16rpx;
  width:702rpx;
  background: #fff;
border-radius: 18rpx;
min-height: 300rpx;
padding:0 20rpx 32rpx;
}
.service-title{
  height:96rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 96rpx;
}
.ser-title-left image{
  width:36rpx;
  height:36rpx;
  margin-right:6rpx;
}
.ser-title-left view{
  font-size: 32rpx;
}
.ser-title-right view{
  font-size: 22rpx;
  color: #09AFFF;
}
.ser-title-right image{
  width:24rpx;
  height:24rpx;
  margin-right:6rpx;
}
.ser-title-left,.ser-title-right{
  display: flex;
  align-items: center;
  height: 96rpx;
}
.related-info{
  background: #F6FFED;
border-radius: 18rpx;
padding:24rpx 32rpx 32rpx;
}
.related-info .column{
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  justify-content: space-between;
}
.column .title{
  font-weight: bold;
}
.related-info .row{
  line-height: 60rpx;
}
.notice{
padding:10rpx 12rpx;
background: #E6F7FF;
border-radius: 14rpx;
display: flex;
line-height: 36rpx;
align-items: center;
}
.notice image{
  width:30rpx;
  height:30rpx;
  margin-right:20rpx;
}
.notice view{
  color: #09AFFF;
  font-size: 26rpx;
}
.service-info{
  padding-left:12rpx;
}
.service-info .row{
  line-height: 60rpx;
}
.service-info .order-num{
  height: 60rpx;
  display: flex;
  align-items: center;
}
.copy-img{
 width:36rpx;
 height:36rpx;
 margin-left:4rpx;
}
.service-info .column{
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.callup-img{
  width:36rpx;
  height: 36rpx;
}
.service-info .address{
  display: flex;
  margin:6rpx 0;
  line-height: 48rpx;
}
.service-info .address .detail{
  flex:1;
}
.service-info .address image{
  margin:12rpx 0 0 30rpx;
  width:36rpx;
  height: 36rpx;
}
.operate-block{
  display: flex;
  align-items: center;
  margin-top:22rpx;
  height: 40rpx;
  line-height: 40rpx;
  justify-content: flex-end;
}
.operate-item{
  display: flex;
  height: 40rpx;
  align-items: center;
  margin-left:12rpx;
}
.operate-item image{
  width:28rpx;
  height:28rpx;
  margin-right:4rpx;
}
.operate-item view{
  font-size: 30rpx;
color: #0EAEFC;
}
.operate-item.disable view{
  color: rgba(0,0,0,0.25);
}
/* 日维度 */
.date-board-wrapper{
  width: 702rpx;
height: 250rpx;
background: #FFFFFF;
border-radius: 18rpx;
padding:16rpx 26rpx;
margin:0 24rpx;
}
.date-board{
  width: 650rpx;
height: 218rpx;
background: #E6F7FF;
border-radius: 15rpx;
display:flex;
align-items: center;
margin-bottom:38rpx;
}
view.date-order-left{
  height:218rpx;
  width:172rpx;
  border-right:2rpx solid #e4e4e4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:30rpx;
}
.date-order-left view{
  font-size: 30rpx;
}
view.date-order-left .number{
  font-size: 36rpx;
  height: 50rpx;
  line-height: 50rpx;
  margin-bottom:10rpx;
}
.date-order-right{
  display:flex;
  flex-wrap: wrap;
  height: 218rpx;
  flex:1;
}
.data-item{
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width:158rpx;
}
.data-item .num{
  font-size: 36rpx;
  height: 50rpx;
  color:#E2B650;
}
.data-item .item-tag{
  font-size: 24rpx;
  height: 36rpx;
  line-height: 36rpx;
  border-radius:4rpx;
  color:#fff;
  width:120rpx;
  text-align: center;
  background:#E2B650;
}
.data-item.red .num{

  color: #E85050;
  } 
.data-item.red .item-tag{
  width:74rpx;
background: #FF5050;
} 
.data-item.green .num{

  color: #39CB7F;
  } 
  .data-item.green .num text{
    font-size: 24rpx;
    color: #39CB7F;
  }
.data-item.green .item-tag{
  width:74rpx;
background: #39CB7F;
} 
.data-item.blue .num{

  color: #09AFFF;
  } 
  .data-item.blue .num text{
    font-size: 24rpx;
    color: #09AFFF;
  }
.data-item.blue .item-tag{
   
  width:74rpx;
  background: #09AFFF;
} 
.current-date{
  height: 70rpx;
  display:flex;
  align-items: center;
  padding-left:48rpx;
  background:#F3F3F3;
}
.current-date .day{
  color: #09AFFF;
line-height: 48rpx;
height: 48rpx;
font-size: 30rpx;
border-bottom: 4rpx solid #09afff;
}
.current-date .today{
  width: 64rpx;
height: 40rpx;
background: #FFFFFF;
border-radius: 4rpx;
border: 2rpx solid #1677FF;
font-size: 24rpx;
color:#1677FF;
margin:8rpx 0 0 8rpx;
text-align: center;
}
/* 请假记录 */
.leave-fold{
  width: 702rpx;
height: 66rpx;
background: #FFFFFF;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin:12rpx 24rpx;
padding:0 20rpx 0 40rpx;
}
.fold-left{
  font-size: 32rpx;
}
.fold-right{
  display: flex;
  align-items: center;
  height: 66rpx;

}
.fold-right .leave-num{
  color: #666;
}
.fold-right image{
  width:24rpx;
  height: 24rpx;
  margin-left:6rpx;
}
.leave-item{
  width: 702rpx;
background: #FFFFFF;
border-radius: 18rpx;
padding:28rpx 26rpx 40rpx;
margin:0 24rpx;
}
.leave-title{
  height: 48rpx;
  display:flex;
  align-items: center;
  margin-bottom:16rpx;
}
.leave-title image{
  width:34rpx;
  height: 34rpx;
  margin-right:10rpx;
}
.leave-title view{
  font-size: 32rpx;
  line-height: 48rpx;
}
.leave-line{
  margin-bottom:6rpx;
  line-height: 48rpx;
  display:flex ;
}
.leave-line view:first-child{
  width:150rpx;
}
.leave-line view:last-child{
  flex:1;
}
.dqjsq{
  width:110rpx;
  height: 110rpx;
  background:#fff;
  border-radius: 110rpx;
  position:fixed;
  z-index: 99;
  right:64rpx;
  bottom:254rpx;
}
.calendar-wrapper{
  margin:12rpx 24rpx 0;
  width:702rpx;
  border-radius:18rpx;
  background:#fff;
  min-height: 200rpx;
  padding:30rpx 24rpx 18rpx;
}
.current-month{
  margin:12rpx 0 22rpx;
  height: 48rpx;
font-size: 28rpx;
line-height: 48rpx;
}
.month-title{
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.month-title-left{
  height: 48rpx;
  display: flex;
  align-items: center;
}
.month-title-left view{
  font-size: 32rpx;
}
.month-title-left image{
  margin-left:12rpx;
  width:32rpx;
  height: 32rpx;
}
.month-title-right{
  display: flex;
  align-items: center;
  height: 48rpx;
}
.month-title-right image{
  width:28rpx;
  height: 28rpx;
  margin-left:4rpx;
}
.last-month{
  line-height: 48rpx;
}
.next-month{
  line-height: 48rpx;
  margin-left:14rpx;
}
.month-border-wrapper view.date-order-left{
  justify-content: space-between;
} 
.month-order-item{
  height: 100rpx;
  display:flex;
  flex-direction: column;
  align-items: center;
}
view.date-order-left .month-order-item .number{
  margin-bottom:0;
}
.whole-calendar{
  display: flex;
  flex-wrap: wrap;
}
.calendar-item{
  display: flex;
  flex-direction: column;
  width:92rpx;
  align-items: flex-end;
  padding:14rpx 0 6rpx;
}
.calendar-week{
  font-size: 32rpx;
  color:#999;
  height: 36rpx;
  line-height: 36rpx;
  width: 68rpx;
  text-align: center;
}
.calendar-day{
  height: 30rpx;
  line-height: 30rpx;
  font-size: 32rpx;
  color:#666;
  margin:6rpx 0;
  width: 68rpx;
  text-align: center;
}
.selected-calendar{
  background: rgba(9,175,255,0.05);
border-radius: 12rpx;
}
.selected-calendar .calendar-week{
  color:#09afff;
}
.selected-calendar .calendar-day{
  color:#09afff;
}
.selected-dot{
  margin:0 30rpx 6rpx 0;
  width:6rpx;
  height: 6rpx;
  border-radius: 6rpx;
  background:transparent;
}
.selected-calendar .selected-dot{
  background:#09afff;
}
.calendar-order-item .time{
  /* width: 48rpx;
  height: 18rpx;
  line-height: 18rpx;
  font-size: 12rpx; */
  width: 68rpx;
  height: 32rpx;
  line-height: 32rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
  background: #39CB7F;
  color:#fff;
  text-align:center;
  margin-bottom:8rpx;
}
.calendar-order-item .time.pl{
  background: #09AFFF;
}
.calendar-order-item .time.no-finish{
  background: #fff;
  color:#39CB7F;
  border:2rpx solid #39CB7F;
}
.calendar-order-item .time.pl.no-finish{
  background: #fff;
  color:#09AFFF;
  border:2rpx solid #09AFFF;
}
.eval-wrapper{
  width:14rpx;
  height: 32rpx;
  align-items: center;
  display: flex;
  margin-right:2rpx;
}
.calendar-order-item{
  display: flex;
  width:92rpx;
  justify-content: flex-end;
}
.eval-wrapper image{
  width:14rpx;
  height: 14rpx;
}
.fold-calcendar{
  display: flex;
  align-items: center;
  flex-direction: column;
  width:140rpx;
  margin:0 auto;
}
.fold-calcendar image{
  width:36rpx;
  height: 36rpx;
}
.fold-calcendar view{
  color: #09AFFF;
  font-size: 24rpx;
  margin-left:6rpx;
  line-height: 14rpx;
}
.service-status{
  height:60rpx;
  align-items: center;
  display: flex;
}
.service-status image{
  width:24rpx;
  height:24rpx;
  margin-right:8rpx;
}
.invite-comment{
  background: #E6F7FF;
  border-radius: 7rpx;
  border: 2px solid #91D5FF;
  color: #096DD9;
  font-size: 22rpx;
  width: 92rpx;
height: 32rpx;
text-align:center;
margin:0 10rpx;
line-height: 24rpx;
}
.hp-wrapper{
  display:flex;
  align-items: center;
  margin-right:10rpx;
  width: 96rpx;
height: 32rpx;
background: #F6FFED;
border-radius: 7rpx;
border: 2rpx solid #A0D911;
justify-content: center;

}
.hp-wrapper text{
  color: #73D13D;
  line-height: 24rpx;
  font-size: 22rpx;
}
.cp-wrapper{
  display:flex;
  align-items: center;
  width: 96rpx;
height: 32rpx;
background: #FFF2E8;
border-radius: 7rpx;
border: 2rpx solid #FA541C;
justify-content: center;

}
.cp-wrapper text{
  color: #FA541C;
  line-height: 24rpx;
  font-size: 22rpx;
}
.service-order.cancel-order view{
  color:#aaa;
}
.service-order.cancel-order view.blue-font{
  color:#09AFFF;
}