.parking { background-color: #008CFF; position: relative; } .parking-header { padding: 36rpx 40rpx; display: flex; justify-content: space-between; } .parking-header .icon { margin-left: 42rpx; } .parking-details { position: absolute; width: calc(100% - 60rpx); margin: 0 auto; bottom: 68rpx; z-index: 1000; left: 30rpx; background-color: #fff; border-radius: 26.5rpx; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) } .parking-details-header { display: flex; flex-direction: row; justify-content: space-between; padding: 40rpx; } .parking-details-left-address { font-size: 28rpx; font-weight: 700; } .parking-details-left-number { display: flex; flex-direction: row; color: rgba(47, 47, 47, 0.5); justify-content: space-between; margin-top: 10rpx; } .parking-details-left-number text { font-size: 40rpx; color: rgba(0, 140, 255, 1); } .parking-details-button { background-color: #008CFF; height: 103rpx; line-height: 103rpx; border-bottom-left-radius: 26.5rpx; border-bottom-right-radius: 26.5rpx; text-align: center; color: #fff; font-size: 28rpx; font-family: PingFangSC-Medium; } .parking-details-right-time, .parking-details-right-distance { height: 44rpx; line-height: 44rpx; color: #008CFF; display: flex; flex-direction: row; margin-bottom: 20rpx; margin-top: 30rpx; } .parking-details-right-time image, .parking-details-right-distance image { width: 44rpx; height: 44rpx; margin-right: 10rpx; } .parking-details-right-time text, .parking-details-right-distance text { display: block; font-weight: 500; } .parking-current-address { position: absolute; bottom: 84rpx; z-index: 1000; width: 100%; height: 345rpx; } .parking-current-address .swiper { height: 400rpx; } .parking-current-address .swiper-item { background-color: #fff; transform: scaleY(0.9); margin: 0 10rpx; border-radius: 25rpx; padding: 20rpx 30rpx; } .parking-current-address .swiper-item>view:first-child { font-size: 32rpx; color: #484848; line-height: 50rpx; } .parking-current-address .swiper-item>view:nth-child(2) { font-size: 24rpx; color: #969696; line-height: 50rpx; } .parking-current-address .swiper-item>view:nth-child(3) { background-image: url('./../../static/img/remaining-position-bg.png'); background-position: center center; // background-size: 100% 100%; display: flex; flex-direction: row; justify-content: space-around; line-height: 120rpx; height: 120rpx; border-radius: 20rpx; margin-top: 20rpx; } .parking-current-address .swiper-item>view:nth-child(4) { display: flex; flex-direction: row; justify-content: space-around; } .parking-current-address .swiper-item>view:nth-child(5) { text-align: center; margin-top: 30rpx; color: #A4A4A4; font-size: 20rpx; } .parking-address-list { position: absolute; z-index: 99; width: calc(100% - 28rpx); left: 14rpx; bottom: 0; max-height: 65vh; overflow-y: scroll; } .parking-address-list-item { background-color: #fff; border-radius: 25rpx; display: flex; flex-direction: row; justify-content: space-between; padding: 26rpx; margin-top: 20rpx; } .pali-left { width: 74%; } .pali-left view:first-child { font-size: 32rpx; font-weight: 500; color: #484848; } .pali-left view:last-child { font-size: 24rpx; font-weight: 400; color: #969696; margin-top: 10rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .pali-right image { width: 58rpx; height: 58rpx; } .pali-right view { color: #969696; font-size: 20rpx; } .yellow-font { color: #FA6400; margin-left: 10rpx; } .swiper-item-font { color: #6D6D6D; font-size: 28rpx; } .swiper-item-button button { width: 45%; height: 90rpx; } .swiper-item-button button:first-child { border: solid 1px #008CFF; color: #008CFF; } .swiper-item-button button:last-child { background-color: #008CFF; color: #fff; } .loading { width: 100%; height: calc(100vh - 100rpx); line-height: calc(100vh - 100rpx); position: absolute; z-index: 99999; text-align: center; background-color: rgba(0, 0, 0, 0.1); } .parking-address-details { position: absolute; bottom: 50rpx; z-index: 1000000; background: transparent; width: 100%; } .parking-address-details-title { width: calc(100% - 30rpx); margin: 0 auto; background: url(../../static/img/parking-info-bg.png) center center; background-size: 100% 100%; } .padt-header { display: flex; flex-direction: row; justify-content: space-between; padding: 25rpx; } .padt-header>view>view:nth-child(1) { color: #484848; font-size: 32rpx; } .padt-header>view.padt-header-title>view:nth-child(2) { color: #969696; font-size: 24rpx; margin-top: 16rpx; } .padt-header-icon { text-align: center; } .padt-header-icon view { font-size: 18rpx; color: #3A3A3A; } .padt-header image { width: 45rpx; height: 45rpx; } .padt-timeline { padding-left: 25rpx; padding-bottom: 25rpx; font-size: 25rpx; color: #727275; } .padt-timeline text { color: #FA6B0B; margin-left: 5rpx; font-size: 29rpx; } .parking-address-details-numer { background-color: #fff; border-radius: 25rpx; width: calc(100% - 30rpx); margin: 10rpx auto 0; padding: 35rpx 25rpx; display: flex; flex-direction: row; } .parking-address-details-numer>view { width: 48%; height: 110rpx; padding: 15rpx; text-align: center; background: linear-gradient(359deg, #FFFFFF 0%, #F6F6FF 100%); border-radius: 15px; } .parking-address-details-numer>view>view:first-child { color: #008CFF; font-size: 56rpx; font-weight: 400; } .parking-address-details-numer>view>view:last-child { color: #838383; font-size: 24rpx; font-weight: 400; } .parking-address-details-numer>view:last-child { margin-left: 4%; } .parking-address-details-price { background-color: #fff; border-radius: 25rpx; width: calc(100% - 30rpx); margin: 10rpx auto 0; } .parking-address-details-price>view:first-child { font-size: 24rpx; color: #787878; font-weight: 400; text-align: center; padding-top: 24rpx; } .parking-address-details-price>view>text:first-child { font-size: 66rpx; color: #008CFF; } .parking-address-details-price>view:last-child { width: 100%; height: 81rpx; line-height: 81rpx; background: linear-gradient(180deg, #EFEFFF 0%, #FFFFFF 100%); border-bottom-left-radius: 25rpx; border-bottom-right-radius: 25rpx; text-align: center; margin-top: 36rpx; } .parking-address-details-button { width: calc(100% - 80rpx); height: 96rpx; line-height: 96rpx; margin: 103rpx auto 57rpx; background-color: #008CFF; border-radius: 10rpx; text-align: center; font-size: 28rpx; color: #fff; }