.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 150rpx;
    background-color: #f7f7f7;
}

.input {
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    height: 100rpx;
}

.input input {
    width: 70%;
    height: 60rpx;
    border: #52a0fd 1rpx solid;
    border-radius: 5rpx;
    padding: 20rpx;
}

.input button {
    width: 25%;
    height: 100rpx;
}

.nav .item image {
    position: relative;
    bottom: 5rpx;
    width: 30rpx;
    margin-left: 20rpx;
}

.nav .currentItem {
    color: #52a0fd;
}

.nav .currentItem image {
    position: relative;
    bottom: 5rpx;
    width: 30rpx;
    margin-left: 20rpx;
    transform: rotate(180deg);
    transition: all 0.3s;
}

.type {
    text-align: center;
    padding: 40rpx;
    transform: translateY(-150%);
    opacity: 0;
    transition: all 0.3s;
    background-color: #ffffff86;
    z-index: 99;
}

.type.active {
    transform: translateY(0);
    opacity: 1;
}

.type .item {
    color: #ffffff;
    background-color: #52a0fd;
    border-radius: 5rpx;
    padding: 10rpx 0;
    margin-bottom: 40rpx;
}

.type .item.center {
    margin: 30rpx 0;
}

.pickedTime {
    position: relative;
    bottom: 590rpx;
    text-align: center;
}

.pickedTime .picker {
    display: inline-block;
    background-color: #529ffd86;
    font-size: 30rpx;
    padding: 10rpx;
    border-radius: 10rpx;
    color: #ffffff;
}

.pickedTime .search {
    display: inline-block;
    width: 120rpx;
    height: 60rpx;
    line-height: 50rpx;
    padding: 5rpx;
    margin-left: 40rpx;
}

.list {
    position: relative;
    bottom: 590rpx;
    margin-top: 20rpx;
    z-index: -1;
}

.list.active {
    z-index: 1;
}

.list .item {
    width: 95%;
    border: 1px solid #ffffff93;
    margin: auto;
    overflow: hidden;
    background-color: #0000000a;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
}

.list .itemXX {
    text-align: center;
}

.list .item .head {
    position: relative;
    padding: 20rpx;
    font-size: 30rpx;
    border-bottom: 1px solid #ffffffbb;
}

.notice {
    position: absolute;
    width: 250rpx;
    text-align: center;
    top: 28rpx;
    right: -80rpx;
    transform: rotate(45deg);
    font-size: 35rpx;
}

.notice.noAppoint {
    color: red;
    background-color: #ffcc66;
}

.notice.confirm {
    color: #ffffff;
    background-color: #ffcc66;
}

.notice.refund {
    color: #ffffff;
    background-color: #ff0000;
}

.notice.complete {
    color: #ffffff;
    background-color: #19be27;
}

.list .item .body {
    padding: 20rpx 20rpx;
    border-bottom: 1px solid #ffffffbb;
}

.list .item .body .items {
    margin-bottom: 10rpx;
}


.list .item .footer {
    display: flex;
    margin: 25rpx 0;
    padding: 0 170rpx;
}

.list .item .footer button {

    background-color: #52a0fd;
}