.info {
    padding: 30rpx 30rpx 60rpx 30rpx;
    box-sizing: border-box;
    // background: linear-gradient(0deg, #ffe2d2, #fdf6f0);
    font-size: 28rpx;
}

.time-root {
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: -35rpx;
    border-radius: 30rpx 30rpx 0 0;
    // background-color: #fff;

    .time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: #f6f7fb;
        border-radius: 15rpx;

        text {
            display: inline-block;
            padding: 0 20rpx;
            box-sizing: border-box;
        }

        view {
            width: 100%;
            text-align: center;
            padding: 20rpx;
            box-sizing: border-box;
        }

        .timeActive {
            box-sizing: border-box;
            padding: 18rpx;
            border: 2rpx solid $jx-primary;
            border-radius: 15rpx;
        }
    }
}

.tip {
    font-size: 26rpx;
    margin-bottom: 15rpx;
    color: red;
}

.button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    // background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    box-shadow: -10rpx 0rpx 10rpx rgb(166, 166, 166);


    view {
        background: linear-gradient(90deg, #ffe14f, #fdc450);
        border-radius: 50rpx;
        padding: 20rpx 0;
        text-align: center;
        box-sizing: border-box;
    }
}

@media (prefers-color-scheme: light) {
    .info{
         background: linear-gradient(0deg, #ffe2d2, #fdf6f0);
    }

    .time-root,
    .button{
        background-color: #fff;
    }

    .time{
        background-color: #f6f7fb;
    }
}

@media (prefers-color-scheme: dark) {
    .info{
        background:linear-gradient(180deg, #7b7878, #bdbdbd);
    }

    .time-root{
        background-color: #888;
    }

    .time,
    .button{
        background-color: #000;
    }
    
    .button{
        color:#000;
    }
}