eight.wxss 2.3 KB
page {
    background: #f8f8f8;
    padding-bottom: 100rpx;
}

.line {
    /* position: relative; */
    display: flex;
    width: 686rpx;
    font-size: 36rpx;
    font-weight: 600;
    line-height: 144rpx;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 24rpx;
    border-radius: 32rpx;
    align-items: center;
    padding:  0 32rpx;
}

/* .line view:first-child {
    padding: 0 32rpx;
} */

.line image {
    width: 80rpx;
    height: 80rpx;
    vertical-align: middle;
    margin-right: 20rpx;
}

.buka {
    font-size: 24rpx;
    width: 120rpx;
    height: 56rpx;
    border-radius: 60rpx;
    background: rgba(255, 200, 61, 1);
    text-align: center;
    line-height: 56rpx;
}
.yibuka{
    background: rgb(189, 187, 187);
    color: #fff;
}

/* 日历样式 */
.context{
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
  }
  .top{
    height: 80rpx;
    display: flex;
    justify-content: space-around;
  }
  .top image{
    height: 30rpx;
    width: 30rpx;
  }
  .top view{
    font-size: 28rpx;
  }
  .middle{
    display: flex;
    padding: 14rpx 18rpx;
    box-shadow: 0rpx 20rpx 20rpx rgb(238, 238, 238);
  }
  .middle_num{
    width: 107rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
  }
  .calen{
    display: flex;
    /* height: 480rpx; */
    padding: 18rpx 18rpx;
    flex-wrap: wrap; /* 必要的时候拆行或拆列。 */
  }
  .calen_blank{
    width: 102rpx;
    height: 102rpx;
    /* background-color: pink; */
  }
  .calen_num{
    width: 102rpx;
    height: 102rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  }
  .active{
    background-color: #FFFAEF;
    width: 102rpx;
    height: 102rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40rpx;
    border: 1rpx solid #FFC83D;
  }
  
  .clock{
    width: 8rpx;
    height: 8rpx;
    opacity: 1;
    border-radius: 50%;
    background: rgba(255,200.09,61.2,1)
  }
  .no_clock{
    width: 8rpx;
    height: 8rpx;
    opacity: 1;
    border-radius: 50%;
    background: rgba(139,139,141,1)
  }
  .calen>view{
    position: relative;
  }
  .calen>view>view{
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    margin-left: -4rpx;
  }
  .today_after{
    color: #C4C4C4;
  }