.container { } .top-box { margin-top: 100rpx; } .top-item { position: relative; height: 380rpx; /* margin-top: -118rpx; */ } .top-item >img { width: 100%; height: 380rpx; /* background: url('https://qiniu.bms16.com/FguJzvAGtd4AdhDKXVLUo7XiMxWQ') no-repeat; background-size: cover; */ } .top-content { position: absolute; right: 50rpx; bottom: 100rpx; } .content-upper { align-items: flex-start; margin-bottom: 24rpx; } .content-upper > view:nth-of-type(1) { color: #2A3A5A; font-size: 36rpx; font-family: PingFangSC, PingFang SC; line-height: 36rpx; font-weight: 600; margin-bottom: 16rpx; } .plate-number { background-color: #F3F8FF; border-radius: 0rpx 24rpx 24rpx 0rpx; padding: 6rpx 24rpx 8rpx 16rpx; } .plate-number > view { color: #5E6F90; font-size: 26rpx; line-height: 26rpx; font-weight: 500; } .under-right { margin-left: 66rpx; } .under-left > view:nth-of-type(1), .under-right > view:nth-of-type(1) { color: #0074FF; font-size: 72rpx; font-family: DIN, DIN; line-height: 80rpx; font-weight: bold; margin-bottom: 12rpx; } .under-left > view:nth-of-type(1) > text, .under-right > view:nth-of-type(1) > text { font-size: 32rpx; } .content-under img { width: 128rpx; height: 30rpx; } .plan-info { padding: 48rpx 24rpx 40rpx 32rpx; background-color: #ffffff; margin-bottom: 16rpx; } .plan-info > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; margin-bottom: 32rpx; height: 40rpx; line-height: 40rpx; } .plan-type{ width: 700rpx; position: relative; } .plan-type-1 { margin-bottom: 40rpx; width: 700rpx; overflow-y: auto; } .plan-type-1::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 10rpx; background-image: radial-gradient(at right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%); border-radius: 8rpx; } .plan-type > view:nth-of-type(3) { /* margin-right: 0rpx; */ } .ptype-item { background-color: #E7F2FF; border-radius: 24rpx; border: 4rpx solid #E7F2FF; width: 204rpx; padding: 24rpx 12rpx; display: flex; width: 32%; margin-right: 10rpx; } .ptyped-item { background-color: #ffffff; border: 4rpx solid #0074FF; box-sizing: border-box; border-radius: 24rpx; /* width: 248rpx; */ padding: 24rpx 12rpx; display: flex; align-items: center; width: 32%; margin-right: 10rpx; } .selectedPtype { /* width: 248rpx; */ /* flex: 1; */ height: 162rpx; /* display: flex; justify-content: space-between; align-items: flex-end; */ background-color: #ffffff; border: 4rpx solid #0074FF; box-sizing: border-box; border-radius: 24rpx; padding: 20rpx 20rpx 32rpx; margin-right: 16rpx; } .selectptype { /* flex: 1; */ /* width: 176rpx; */ height: 162rpx; /* display: flex; */ /* justify-content: space-between; align-items: flex-end; */ background-color: #EEF6FF; border: 4rpx solid #EEF6FF; box-sizing: border-box; border-radius: 24rpx; padding: 20rpx 20rpx 32rpx; margin-right: 16rpx; } .ptype-title { font-weight: 500; font-size: 28rpx; text-align: center; color: #2A3A5A; } .ptype-text { color: #2A3A5A; } .ptype-text text { font-family: DIN, DIN; font-weight: bold; font-size: 64rpx; color: #2A3A5A; } .ptyped-text { font-family: DIN, DIN; font-weight: bold; font-size: 64rpx; /* color: #2A3A5A; */ color: #F95151; } /* .ptyped-text text { font-size: 40rpx; } */ .plan-time > view:nth-of-type(1) { color: #2A3A5A; font-size: 32rpx; font-weight: bold; } .quantity-count > input { width: 88rpx; height: 48rpx; border-radius: 24rpx; background-color: #F3F8FF; text-align: center; color: #2A3A5A; } .count-btn { width: 48rpx; height: 48rpx; vertical-align: middle; } .fbtn { color: #9FA7B7; margin-right: 16rpx; } .sbtn { /* color: #9FA7B7; */ margin-left: 16rpx; } .coupon-info { margin-top: 32rpx; } .coupon-info > view:nth-of-type(1) { color: #2A3A5A; font-size: 32rpx; font-weight: bold; } .coupon-info > view:nth-of-type(2) { color: #F95151; font-size: 32rpx; } .coupon-info img { width: 28rpx; height: 28rpx; vertical-align: middle; margin-left: 8px; } .car-info { background-color: #ffffff; margin-top: 16rpx; padding: 48rpx 32rpx 40rpx; } .car-title > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .car-title > view:nth-of-type(2) { color: #9FA7B7; font-size: 32rpx; } .car-top { margin-top: 40rpx; margin-bottom: 32rpx; } .car-top > img { width: 144rpx; height: 144rpx; border-radius: 24rpx; margin-right: 24rpx; } .top-flex > view:nth-of-type(1) { color: #2A3A5A; font-size: 36rpx; margin-bottom: 16rpx; } .top-flex > view:nth-of-type(2) { color: #9FA7B7; font-size: 28rpx; margin-bottom: 24rpx; } .top-flex > view:nth-of-type(3) { color: #828DA2; font-size: 28rpx; } .top-flex > view:nth-of-type(3) img { vertical-align: middle; width: 32rpx; height: 32rpx; margin-right: 4rpx; } .car-bottom { border-radius: 16rpx; } .c-bottom-left { padding: 16rpx 34rpx 16rpx 24rpx; /* background: linear-gradient( 90deg, #ffffff, #D4E8FF); */ background-color: #D4E8FF; position: relative; overflow: hidden; border: none; border-radius: 16rpx 0 0 16rpx; } .c-bottom-left:before { position: absolute; top: 0; right: -35rpx; width: 35rpx; /* 锐角部分宽度 */ height: 100%; background-color: #ffffff; transform-origin: 100% 0; transform: skewX(-30deg); /* 锐角大小 */ } .c-bottom-left img { vertical-align: middle; width: 32rpx; height: 32rpx; margin-right: 12rpx; } .car-bottom > view:nth-of-type(2) { width: 60%; color: #0074FF; font-size: 28rpx; border-radius: 0 16rpx 16rpx 0; display: flex; justify-content: flex-end; padding: 18rpx 16rpx 18rpx 0; background: linear-gradient( to right, #ffffff, #D4E8FF); } .car-bottom > view:nth-of-type(2) img { width: 28rpx; height: 28rpx; vertical-align: middle; margin-left: 12rpx; } .deposit-info { background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .deposit-info > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; } .select-deposit { background-color: #EEF6FF; border-radius: 16rpx; padding: 32rpx 24rpx; /* display: flex; justify-content: space-between; */ } .selected-deposit { border: 4rpx solid #0074FF; box-sizing: border-box; border-radius: 16rpx; padding: 32rpx 24rpx; /* display: flex; justify-content: space-between; */ } .deposit-item-tip{ font-size: 24rpx; color: #828DA2; margin-top: 20rpx; } .deposit-item >view { color: #2A3A5A; font-size: 32rpx; font-weight: bold; } .deposit-item >view > text { color: #828DA2; font-weight: 400; } .select-img { width: 40rpx; height: 40rpx; margin-right: 24rpx; vertical-align: middle; } .info-img { width: 28rpx; height: 28rpx; margin-left: 12rpx; vertical-align: middle; } .blue-text { color: #0074FF; font-size: 32rpx; font-weight: bold; } .black-text { color: #2A3A5A; font-size: 36rpx; font-weight: bold; } .guarantee-info { background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .guarantee-info > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; } .guarantee-title { margin-bottom: 40rpx; } .guarantee-title > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .guarantee-title > view:nth-of-type(2) { color: #9FA7B7; font-size: 32rpx; font-weight: 400; } .select-guarantee { background-color: #F3F8FF; border-radius: 24rpx; } .selected-guarantee { border: 4rpx solid #0074FF; box-sizing: border-box; border-radius: 24rpx; } .select-guarantee, .selected-guarantee { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32rpx 20rpx; box-sizing: border-box; } .guarantee-top { color: #2A3A5A; font-size: 28rpx; font-weight: bold; align-items: center; } .guarantee-top img { width: 62rpx; height: 56rpx; margin-bottom: 16rpx; } .guarantee-center { margin-top: 32rpx; } .center-item { font-size: 24rpx; width: 178rpx; margin-bottom: 16rpx; } .center-item > view:nth-of-type(1) { color: #828DA2; } .center-item > view:nth-of-type(2) { color: #0074FF; } .guarantee-border { border-bottom: 2rpx dashed #CFDCEF; width: 100%; margin-top: 24rpx; margin-bottom: 14rpx; } .guarantee-bottom { align-items: center; } .guarantee-bottom > view:nth-of-type(1) { color: #F95151; font-size: 38rpx; margin-bottom: 14rpx; } .blue-t { color: #0074FF; font-size: 24rpx; } .black-t { color: #2A3A5A; font-size: 24rpx; } .guarantee-bottom img { width: 24rpx; height: 24rpx; } .assort-info { background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .assort-info > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; } .assort-text view { display: flex; flex: 1; /* width: 342rpx; */ padding: 24rpx; color: #2A3A5A; font-size: 32rpx; font-weight: bold; background-color: #F3F8FF; } .assort-text > view:nth-of-type(1) { border-radius: 16rpx 0 0 16rpx; margin-right: 4rpx; } .assort-text > view:nth-of-type(2) { border-radius: 0 16rpx 16rpx 0; } .payment-info { width: 100%; background-color: #ffffff; /* padding: 28rpx 32rpx 48rpx; */ padding: 0 32rpx 48rpx; position: fixed; bottom: 0; } .modal-group { position: fixed; bottom: 0; left: 0; z-index: 10; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.4); } .payment-info-main { background-color: #ffffff; /* padding: 28rpx 32rpx 48rpx; */ position: fixed; width: 100%; bottom: 0; border-top-left-radius: 32rpx; /* 左上角圆角 */ border-top-right-radius: 32rpx; /* 右上角圆角 */ } .payment-info-top{ padding: 28rpx 32rpx 0 32rpx; } .detail-title-text{ font-weight: 600; font-size: 40rpx; color: #2A3A5A; margin-bottom: 48rpx; } .detail-text{ font-weight: 500; font-size: 36rpx; color: #2A3A5A; margin-bottom: 48rpx; } .detail-money-row{ font-weight: 500; font-size: 36rpx; color: #2A3A5A; margin-bottom: 48rpx; display: flex; justify-content: flex-end; } .detail-text-money{ font-weight: 500; font-size: 60rpx; color: #F95151; } .payment-main { padding: 28rpx 32rpx 48rpx; box-shadow: 0rpx -2rpx 0rpx 0rpx #F4F5F6; } .payment-top { color: #2A3A5A; font-size: 28rpx; } .payment-blue-text { color: #0074FF; font-size: 28rpx; } .payment-top img { width: 32rpx; height: 32rpx; margin-right: 16rpx; vertical-align: middle; } .payment-bottom { margin-top: 42rpx; width: 100%; } .bottom-left { align-items: baseline; } .b-text { color: #0074FF; font-size: 28rpx; margin-left: 16rpx; } .bottom-left img { width: 49rpx; height: 49rpx; vertical-align: middle; margin-left: 4rpx; } .payment-bottom > view:nth-of-type(2) { color: #ffffff; font-size: 32rpx; font-weight: bold; /* padding: 28rpx 86rpx; */ height: 88rpx; line-height: 88rpx; width: 380rpx; text-align: center; /* border-radius: 44rpx; */ border-radius: 44rpx; background: linear-gradient( to right, #0074FF 0%, #00D7FF 100%); } .calendar-b { position: fixed; bottom: 0; left: 0; z-index: 10; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.4); } .calendar-box { border-radius: 32rpx 32rpx 0rpx 0rpx; background-color: #ffffff; z-index: 100; position: fixed; bottom: 0; width: 100%; height: 60%; } .store-title { padding: 40rpx 40rpx 0 32rpx; color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .store-title img { width: 48rpx; height: 48rpx; z-index: 1000; } .calendar-box > view:nth-of-type(2) { margin: 40rpx 32rpx 0 32rpx; color: #2A3A5A; font-size: 26rpx; background-color: #F3F8FF; border-radius: 16rpx; padding: 22rpx 0 22rpx 24rpx; } .store-info { padding: 48rpx 40rpx 0 32rpx; } .store-info > img { width: 144rpx; height: 144rpx; margin-right: 24rpx; border-radius: 16rpx; } .info-center > view:nth-of-type(1) { color: #2A3A5A; font-size: 36rpx; margin-bottom: 16rpx; } .info-center > view:nth-of-type(2) { color: #9FA7B7; font-size: 28rpx; margin-bottom: 24rpx; } .info-center > view:nth-of-type(3) { color: #828DA2; font-size: 28rpx; } .info-center img { width: 26rpx; height: 26rpx; vertical-align: middle; } .info-bottom { color: #2A3A5A; font-size: 32rpx; } .info-bottom img { width: 36rpx; height: 36rpx; margin-bottom: 14rpx; } .info-border { margin-top: 80rpx; border-bottom: 2rpx solid #F4F5F6; } .sumbit { margin: 24rpx 32rpx 48rpx; color: #ffffff; font-size: 32rpx; background-color: #0074FF; border-radius: 40rpx; padding-top: 24rpx; padding-bottom: 24rpx; text-align: center; } .ride-info { background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .guarantee-title { margin-bottom: 40rpx; } .guarantee-title > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .guarantee-title > view:nth-of-type(2) { color: #9FA7B7; font-size: 32rpx; font-weight: 400; } .ride-border { border-radius: 24rpx; background: #F3F8FF; /* border: 4rpx solid #0074FF; */ padding: 28rpx 32rpx 16rpx; } .top-left { color: #2A3A5A; font-size: 32rpx; font-weight: bold; } .top-left img { width: 62rpx; height: 56rpx; margin-right: 12rpx; vertical-align: middle; } .top-right { color: #F95151; font-size: 38rpx; font-weight: bold; } .dashed-border { margin-bottom: 22rpx; border-bottom: 2rpx dashed #CFDCEF; } .content-top { color: #2A3A5A; font-size: 28rpx; margin-bottom: 24rpx; } .tab-item { margin-bottom: 16rpx; } .tab-title { color: #828DA2; font-size: 24rpx; } .tab-price { color: #0074FF; font-size: 24rpx; font-weight: bold; } .return-type{ padding: 48rpx 32rpx 40rpx 30rpx; background-color: #fff; margin-bottom: 20rpx; } .tip-title-text{ color: #828DA2; font-size: 32rpx; font-weight: 400; } .return-type-title{ color: #2A3A5A; font-size: 40rpx; font-weight: 600; margin-bottom: 40rpx; } .store-icon{ width: 40rpx; height: 40rpx; } .return-type-main{ } .can-return-view{ padding: 32rpx 16rpx 32rpx 24rpx; background-color: #EEF6FF; border-radius: 16rpx; width: 100%; } .can-return-text{ margin-left: 16rpx; font-weight: 500; font-size: 32rpx; color: #2A3A5A; } .grey-text{ color: #828DA2; font-size: 32rpx; font-weight: 400; } .store-num{ font-weight: 500; font-size: 36rpx; color: #0074FF; } .to-store-icon{ width: 28rpx; height: 28rpx; } .current-store{ align-items: center; background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .current-store > view:nth-of-type(1) { color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .current-store-text{ font-weight: 500; font-size: 32rpx; color: #2A3A5A; } .pay-type { background-color: #ffffff; padding: 40rpx 32rpx 32rpx; margin-bottom: 16rpx; } .pay-type-tital { color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .pay-type-item { display: flex; } .change-info { background-color: #ffffff; padding: 48rpx 32rpx 40rpx; margin-bottom: 16rpx; } .change-title { margin-bottom: 40rpx; color: #2A3A5A; font-size: 40rpx; font-weight: bold; } .change-border { width: 686rpx; height: 156rpx; background: #EEF6FF; border-radius: 16rpx; padding: 32rpx 24rpx; } .change-top{ font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 32rpx; color: #2A3A5A; line-height: 32rpx; text-align: left; font-style: normal; } .change-top > img{ width: 40rpx; height: 40rpx; margin-right: 16rpx; } .change-num{ font-family: DIN; font-weight: 500; font-size: 36rpx; color: #828DA2; line-height: 32rpx; text-align: right; font-style: normal; } .change-bottom{ font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 32rpx; color: #0074FF; line-height: 32rpx; text-align: left; font-style: normal; } .change-bottom > text{ font-family: DIN; font-weight: 500; font-size: 36rpx; color: #0074FF; line-height: 32rpx; text-align: right; font-style: normal; margin: 0 4rpx; } .change-dec{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #828DA2; line-height: 36rpx; text-align: justify; font-style: normal; } .total-time{ font-size: 32rpx; color: #2A3A5A; font-weight: 500; margin-right: 24rpx; }