MP-zxs/pages/indexPages/yyqhPages/selectTime/selectTime.wxss

/* pages/indexPages/yyqhPages/selectTime/selectTime.wxss */
.containers {
    width: 100%;
    height: calc(100vh - 190rpx);
    background: #f5f5f5;
}

.baseInfo-box {
    width: 100%;
    display: grid;
    grid-template-columns: 1;
    overflow: hidden;
}

.baseInfo-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.baseInfos {
    padding: 40rpx 30rpx;
    width: 100%;
    height: min-content;
    box-sizing: border-box;
    background-image: linear-gradient(180deg, #CCE1FF 0%, #f8fbff 120%);
}

.baseBg {
    position: absolute;
    z-index: 1;
    width: 60%;
    bottom: -30rpx;
    right: 0;
}

.base-item {
    position: relative;
    z-index: 2;
    padding: 10rpx;
    width: 100%;
    line-height: 45rpx;
    display: flex;
    align-items: flex-start;
}

.base-item-label {
    width: 150rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #333333;
}

.base-item-value {
    width: 0;
    flex: 1;
    font-family: "苹方M";
    font-size: 32rpx;
    color: #333333;
}

.times {
    position: relative;
    padding: 50rpx 30rpx;
    width: 100%;
    height: 250rpx;
    background: #ffffff;
    border-radius: 30rpx;
    box-shadow: 0px 20rpx 20rpx 0px rgba(69, 143, 229, 0.09);
    box-sizing: border-box;
    transition: height 0.35s;
}

.timesActive {
    height: 430rpx;
}

.showHiden {
    position: absolute;
    left: calc(50% - 70rpx);
    bottom: -30rpx;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background: #ffffff;
}

.showHiden::after {
    position: absolute;
    content: "";
    left: calc(50% - 10rpx);
    bottom: 20rpx;
    width: 20rpx;
    height: 20rpx;
    border: 2px solid #4686f6;
    border-top: none;
    border-right: none;
    rotate: -45deg;
    box-sizing: border-box;
}

.timesActive>.showHiden::after {
    bottom: 15rpx;
    rotate: 135deg;
}

.times-box {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
}

.time {
    padding: 25rpx 0;
    margin-left: 26rpx;
    width: 140rpx;
    height: 150rpx;
    border-radius: 20rpx;
    color: #4D4D4D;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.35s;
}

.timeActive {
    color: #FFFFFF;
    background: #4686f6;
    box-shadow: 0rpx 10rpx 30rpx -10rpx #4687f6f8;
}

.time:nth-child(1),
.time:nth-child(2),
.time:nth-child(4),
.time:nth-child(4) {
    margin-bottom: 26rpx;
}

.day {
    width: 100%;
    height: 50%;
    font-family: "苹方M";
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date {
    width: 100%;
    height: 50%;
    font-family: "苹方M";
    font-size: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectTimes {
    margin-top: 80rpx;
    padding: 30rpx;
    width: 100%;
    border-radius: 30rpx;
    background: #ffffff;
    box-shadow: 0px 20rpx 40rpx 0px rgba(69, 143, 229, 0.09);
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.selectTime {
    padding: 15rpx 0;
    margin-left: 22.5rpx;
    margin-top: 25rpx;
    width: 200rpx;
    height: 100rpx;
    border-radius: 35rpx;
    background: #ECF2FD;
    box-sizing: border-box;
    transition: all 0.2s;
}

.selectTimeActive {
    background: #4686F6;
    box-shadow: 0px 6rpx 12rpx 0px rgba(70, 134, 246, 0.40);
}

.selectTimeNone {
    background: #EAEAEA;
}

.number {
    width: 100%;
    height: 50%;
    font-family: "苹方M";
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectTimeActive>.number {
    color: #FFFFFF;
}

.selectTimeNone>.number {
    color: #666666;
}

.sjd {
    width: 100%;
    height: 50%;
    font-family: "苹方M";
    font-size: 24rpx;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectTimeActive>.sjd {
    color: #FFFFFF;
}

.selectTimeNone>.sjd {
    color: #666666;
}

.bottom {
    padding: 40rpx 30rpx 70rpx 40rpx;
    width: 100%;
    height: 190rpx;
    background: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selectedInfo {
    width: fit-content;
    font-family: "苹方M";
    font-size: 28rpx;
    color: #000000;
}

.button {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-family: "苹方R";
    font-size: 32rpx;
    color: #FFFFFF;
    border-radius: 40rpx;
    background: #FF9200;
    box-shadow: 2rpx 6rpx 12rpx 0px rgba(246, 143, 6, 0.35);
}

.active {
    opacity: 0.6;
}