@day-height: 50ipx;
.itv-scroller-calendar{
    height: 100%;
    display: flex;
    flex-direction: column;
    .itv-scorller-title{
        height: 50ipx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: @itv-font-size-large;
    }
    .itv-scroller-calendar-week{
        display: flex;
        box-shadow: @itv-shadow-down;
        .itv-week{
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
            height: 34ipx;
           
        }
    }
    .calendar-month{
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .tips-month{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            color: @itv-primary-color;
            opacity: 0.1;
            font-size: 100ipx;
            z-index: 0;
        }
        .calendar-day{
            width: 14.28571%;
            display: flex;
            height: @day-height;
            align-items: center;
            justify-content: center;
            font-size: @itv-font-size-base;
            color: @itv-color-text-base;
            position: relative;
            z-index: 1;
            &.prev-month{
                opacity: 0;
            }
            &.active {
                color: @itv-color-text-white;
                background-color: @itv-primary-color;
            }
            &.selected {
                background-color: @itv-primary-color-bg;
            }
            .day-item{
                width: 100%;
                height: 100%;
                text-align: center;
                padding-top: 12ipx;
                .day-now{
                    font-size: @itv-font-size-small;
                }
            }
        }
    }
}