parking_h5_all/pages/parkingLists/parkingLists.scss

.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: 80rpx;
  z-index: 1000;
  width: 100%;
  height: 345rpx;
}
.parking-current-address .swiper {
  height: 430rpx;
}
.parking-current-address .swiper-item {
  background-color: #fff;
  transform: scaleY(0.9);
  margin: 0 10rpx;
  border-radius: 25rpx;
  padding: 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) {
  display: flex;
  flex-direction: row;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f4f7ff)); /*谷歌*/
  background: linear-gradient(to right, #fff 0%, #f4f7ff 50%, #fff 100%);
  justify-content: space-around;
  height: 71rpx;
  line-height: 71rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 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: 24rpx;
}
.parking-address-list {
  position: absolute;
  z-index: 99;
  width: 100%;
  padding: 32rpx 28rpx;
  bottom: 0;
  max-height: 65vh;
  overflow-y: scroll;
  // background-image: linear-gradient(top, rgba(246, 245, 255, 0) 0%, rgba(246, 245, 255, 1) 100%);
  background-image: url('./../../static/img/parking-search-list-bg.png');
  background-size: 100% 100%;
}
.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: 48%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
}
.swiper-item-button button:first-child {
  border: solid 1px #008cff;
  color: #008cff;
  margin-right: 4%;
}
.swiper-item-button button:last-child {
  background-color: #008cff;
  color: #fff;
}
.swiper-item-button .disabled {
  background-color: #d2d2d2 !important;
}
.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;
}
.address-box {
  width: calc(100% - 60rpx);
	height: 70vh;
  padding: 15rpx 0;
  position: absolute;
  left: 30rpx;
  bottom: 0;
  z-index: 1000;
  background-color: #f9f9f9;
	transition: height .5s linear;
  &-down-icon {
    width: 32rpx;
    height: 28rpx;
    margin: 0 auto;
    background: url('./../../static/img/down-icon.svg') no-repeat center center;
    background-size: 100% 100%;
		transform: rotate(0deg);
		transition: transform 0.5s linear;
  }
  .up-icon {
    transform: rotate(180deg);
  }
  &-scroll {
    overflow: hidden;
  }
  &-list {
    padding: 12rpx 30rpx;
    &-item {
      padding: 30rpx 40rpx;
      background-color: #fff;
      box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      .abli-header {
        padding-bottom: 26rpx;
        margin-bottom: 26rpx;
        border-bottom: dashed 1px #e1e5eb;
        &-title {
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;
          margin-bottom: 16rpx;
        }
        &-subtitle {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 26rpx;
          margin-left: 30rpx;
        }
        &-surplus {
          display: flex;
          justify-content: space-between;
          &-left {
            font-size: 26rpx;
            color: #999999;
            text {
              font-size: 30rpx;
              color: #ff6d6d;
              margin-left: 10rpx;
            }
          }
          &-right {
            padding: 6rpx 17rpx;
            background-color: #008cff;
            border-radius: 4rpx;
            color: #fff;
            font-size: 24rpx;
          }
          .disabled {
            background-color: #cccccc;
          }
        }
      }
      .abli-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          display: flex;
          align-items: center;
          &-navigation {
            color: #008cff;
            font-size: 26rpx;
            border-right: solid 1px #cccccc;
            padding-right: 20rpx;
            &::before {
              content: '';
              display: inline-block;
              width: 40rpx;
              height: 31rpx;
              background: url('./../../static/img/navigation-icon.svg') no-repeat center center;
              background-size: 100% 100%;
              margin-right: 10rpx;
              vertical-align: middle;
            }
          }
          &-distance {
            padding-left: 20rpx;
            color: #666666;
            font-size: 26rpx;
          }
        }
        &-right {
          color: #999999;
          font-size: 22rpx;
        }
      }
    }
  }
}
.address-down {
	height: 60vh;
}
.address-up {
	height: 20vh;
}