.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; }