|
|
@@ -0,0 +1,1258 @@
|
|
|
+<template>
|
|
|
+ <div v-if="orderDetail && orderDetail.parkingRecord && orderDetail.parkingRecord.vehicleNo">
|
|
|
+ <div class="scroll-Y">
|
|
|
+ <div >
|
|
|
+ <!-- <div @click="scan">扫一扫</div> -->
|
|
|
+ <div class="warp">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ warp_index: true,
|
|
|
+ warp_index1: true,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ orderDetail.parkingRecord.vehicleNo | formatCarno }}
|
|
|
+ <!-- {{ $route.query.carno | formatCarno }} -->
|
|
|
+ </div>
|
|
|
+ <div class="warp_index">
|
|
|
+ <div>停车场</div>
|
|
|
+ <div class="warp_index_color">{{ orderDetail.parkInfo.parkName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="warp_index">
|
|
|
+ <div>入场时间</div>
|
|
|
+ <div class="warp_index_color">{{ orderDetail.parkingRecord.enterTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="warp_index">
|
|
|
+ <div>已停车时长</div>
|
|
|
+ <div class="warp_index_color">{{ orderDetail.parkingRecord.serviceMin }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="warp_index">
|
|
|
+ <div>应缴</div>
|
|
|
+ <div class="warp_index_color">
|
|
|
+ {{ (orderDetail.parkingRecord.totalFeeInYuan) | currency }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="warp">
|
|
|
+ <div
|
|
|
+ class="warp_index warp_index_da"
|
|
|
+ v-if="enableConsume"
|
|
|
+ >
|
|
|
+ <div>停车优惠</div>
|
|
|
+ <div class="warp_index_color" @click="discounts">
|
|
|
+ <div
|
|
|
+ style="margin-right: 10px"
|
|
|
+ :class="discountDesc === '暂无可用优惠' ? '' : 'text-red'"
|
|
|
+ >
|
|
|
+ {{ discountDesc }}
|
|
|
+ </div>
|
|
|
+ <van-icon name="arrow" />
|
|
|
+ <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="warp_index warp_index_da"
|
|
|
+ v-if="orderDetail && orderDetail.discountInfo"
|
|
|
+ >
|
|
|
+ <div>积分减免</div>
|
|
|
+ <div class="warp_index_color" @click="showPointsMathPopup('bottom')">
|
|
|
+ <div
|
|
|
+ style="margin-right: 10px"
|
|
|
+ :class="
|
|
|
+ integralDesc === '今日已达上限' ? 'text-disable' : 'text-red'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ integralDesc }}
|
|
|
+ </div>
|
|
|
+ <van-icon name="arrow" />
|
|
|
+ <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="warp_index warp_index_da"
|
|
|
+ v-if="orderDetail && orderDetail.discountInfo"
|
|
|
+ >
|
|
|
+ <div>优惠劵</div>
|
|
|
+ <div class="warp_index_color" @click="coupon">
|
|
|
+ <div
|
|
|
+ style="margin-right: 10px"
|
|
|
+ :class="coupons.length > 0 ? 'text-red' : 'text-disable'"
|
|
|
+ >
|
|
|
+ {{ couponDesc }}
|
|
|
+ </div>
|
|
|
+ <van-icon name="arrow" />
|
|
|
+ <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 纸质券 -->
|
|
|
+ <div
|
|
|
+ class="warp_index warp_index_da"
|
|
|
+ v-if="enablePaperCoupons"
|
|
|
+ >
|
|
|
+ <div>纸质优惠劵</div>
|
|
|
+ <div class="warp_index_color" @click="paperCoupon">
|
|
|
+ <div style="margin-right: 10px" class="text-red">
|
|
|
+ 扫描纸质优惠劵二维码
|
|
|
+ </div>
|
|
|
+ <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ warp_index: true,
|
|
|
+ color_warp_index: custTypeId !== 0,
|
|
|
+ warp_index_da: true,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div>优惠金额:</div>
|
|
|
+ <div class="warp_index_color" style="color: #333">
|
|
|
+ -{{ usingTotalDiscount | currency }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{ warp_index: true, color_warp_index: custTypeId !== 0 }"
|
|
|
+ >
|
|
|
+ <div>应付金额:</div>
|
|
|
+ <div class="warp_index_color" style="color: #333">
|
|
|
+ {{ actualPayFee | currency }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="top_content"
|
|
|
+ v-if="orderDetail.parkInfo && orderDetail.parkInfo.description"
|
|
|
+ >
|
|
|
+ <div class="title_box">
|
|
|
+ <span class="title">缴费说明</span>
|
|
|
+ </div>
|
|
|
+ <div class="info" :class="!isShowDescription ? 'info_show' : ''">
|
|
|
+<!-- <span>{{ orderDetail.parkInfo.description }}</span>-->
|
|
|
+ <div v-html="setDescription()"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="top_down"
|
|
|
+ @click="togglePayinstruction"
|
|
|
+ v-if="!isShowDescription && orderDetail.parkInfo.description.length > 60"
|
|
|
+ >
|
|
|
+ <van-icon name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="top_down"
|
|
|
+ @click="togglePayinstruction"
|
|
|
+ v-if="isShowDescription && orderDetail.parkInfo.description.length > 60"
|
|
|
+ >
|
|
|
+ <van-icon name="arrow-up" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flewx">
|
|
|
+ <div class="flewx-content">
|
|
|
+ 合计<span style="color: #333; font-size: 36px; padding-left: 20px">{{
|
|
|
+ actualPayFee | currency
|
|
|
+ }}</span>
|
|
|
+ 元
|
|
|
+ <span style="color: #dc5948; padding-left: 30px; font-size: 28px"
|
|
|
+ >已优惠{{ usingTotalDiscount | currency }}元</span
|
|
|
+ >
|
|
|
+ <!-- <van-count-down :time="3 * 60 * 1000" /> -->
|
|
|
+ <div class="count-down-box">
|
|
|
+ <van-count-down
|
|
|
+ v-if="orderDetail.parkingRecord.vehicleNo"
|
|
|
+ format="mm:ss"
|
|
|
+ :time="refreshTime * 1000"
|
|
|
+ @finish="resetCountDown()"
|
|
|
+ >
|
|
|
+ <!-- -->
|
|
|
+ </van-count-down>
|
|
|
+ <span class="desc">后同步最新费用</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'flewx_index3',
|
|
|
+ payBtnDisabled && 'btn-disabled',
|
|
|
+ btnLoading && 'btn-disabled',
|
|
|
+ ]"
|
|
|
+ @click="toPay"
|
|
|
+ >
|
|
|
+ 支付
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup
|
|
|
+ v-model="popup"
|
|
|
+ position="bottom"
|
|
|
+ :animation="false"
|
|
|
+ :maskClick="false"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ >
|
|
|
+ <div class="popue_box" v-if="orderDetail && orderDetail.discountInfo">
|
|
|
+ <div class="popue_box_index1">积分减免</div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>减免规则</div>
|
|
|
+ <div style="color: #989898">{{ pointsPerHour }}积分抵扣{{ orderDetail.parkInfo.parkMallCode === 5 ? unitAmount + '元' : '1小时' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>可用积分</div>
|
|
|
+ <div style="color: #999999">{{ available }}分</div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index">
|
|
|
+ <div>抵扣{{ orderDetail.parkInfo.parkMallCode === 5 ? '金额' : '时长' }}</div>
|
|
|
+ <div class="popue_box_index" style="width: 325px">
|
|
|
+ <div class="popue_box_index4_xs">
|
|
|
+ <div class="popue_box_index4_xs_index1" @click="$store.dispatch('order/pointsMath',{type: 'minus', callback: pointsMathCallback})">
|
|
|
+ -
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index4_xs_index2">{{ pointsTime }}</div>
|
|
|
+ <div class="popue_box_index4_xs_index3" @click="$store.dispatch('order/pointsMath',{type: 'add', callback: pointsMathCallback})">
|
|
|
+ +
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #808080">
|
|
|
+ {{ orderDetail.parkInfo.parkMallCode === 5 ? '元' : '小时' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popue_box_index5">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ popue_box_index4_by: true,
|
|
|
+ }"
|
|
|
+ @click="cancelPointsMathPopup()"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ popue_box_index4_by1: true,
|
|
|
+ }"
|
|
|
+ @click="savePointsMathPopup()"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import parkingFeeDetailJs from '../../mixins/parkingFeeDetail'
|
|
|
+export default {
|
|
|
+ mixins:[parkingFeeDetailJs]
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.scroll-Y {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background: #f4f7ff;
|
|
|
+ padding-bottom: 300px;
|
|
|
+ //padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .parkingFee {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .parkingFee-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #c69c6d;
|
|
|
+
|
|
|
+ .top_content {
|
|
|
+ padding: 30px 30px;
|
|
|
+ margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
|
|
+ margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ //width: 750px;
|
|
|
+ //height: 280px;
|
|
|
+ background: #fafbff;
|
|
|
+ border: 1px solid #d8dae0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #898989;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ // padding: 0px 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ // padding-left: 18px;
|
|
|
+ font-size: 30px;
|
|
|
+ width: 100%;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_show {
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_down {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ // font-size: 20PX;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_menu {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 15px 15px 0 0;
|
|
|
+
|
|
|
+ .menu_item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 33.3%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 102px;
|
|
|
+ height: 102px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .parkingFee-bottom {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 14px 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ // 车牌号查询
|
|
|
+ .parkingFee-search {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 26px 25px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .search_tip {
|
|
|
+ color: #999;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchPrice {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 40%;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-radius: 24px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .list_item {
|
|
|
+ padding: 38px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 缴费说明
|
|
|
+.payInstruct_wrap {
|
|
|
+ width: 300px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+
|
|
|
+ .scroll {
|
|
|
+ height: 600px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .payInstruct_title {
|
|
|
+ font-size: 30px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payInstruct_con {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 车牌号 & 虚拟键盘
|
|
|
+.input-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ margin: auto;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ margin: 1rem auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .li {
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid rgba(206, 208, 210, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 2px;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #323233;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #3e67ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-right: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.class-van-button-small {
|
|
|
+ min-width: 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 10px 3px;
|
|
|
+ box-shadow: 10px 10px 10px #aaa;
|
|
|
+}
|
|
|
+
|
|
|
+.class-plate-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 24px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.plate_number {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .plate_number_wrap {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #eaf1f9;
|
|
|
+ padding: 0 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .close-box {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #3e67ff;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 1.25rem;
|
|
|
+
|
|
|
+ div {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .plate_chinese_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 9%;
|
|
|
+ height: 2.5rem;
|
|
|
+ line-height: 2.5rem;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 28px;
|
|
|
+ .class-van-button-small;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.allBoard {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .allBoard_wrap {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #eaf1f9;
|
|
|
+ padding: 0 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-box {
|
|
|
+ padding-top: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #3e67ff;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 1.25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plate_number_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 9%;
|
|
|
+ height: 2.5rem;
|
|
|
+ line-height: 2.5rem;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 28px;
|
|
|
+ .class-van-button-small;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vehicleMgt-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 35px;
|
|
|
+
|
|
|
+ .vehicleMgt-title {
|
|
|
+ display: flex;
|
|
|
+ padding: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .vehicleMgt-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.delBtn {
|
|
|
+ color: #c69c6d;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ font-size: 20px;
|
|
|
+ width: 124px;
|
|
|
+ border: 1px solid #c69c6d;
|
|
|
+ border-radius: 19px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.payThe {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .pay_index {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ background-color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay_title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 15px 30px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dk_desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payjf {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 18px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paySelect {
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Arial;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 100);
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 80px;
|
|
|
+ width: 260px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paySelect1 {
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Arial;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 100);
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ .pay-se-l {
|
|
|
+ height: 50px;
|
|
|
+ width: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payjfzk {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #8b8c8b;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 210px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay_time {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-left: 180px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay_time1 {
|
|
|
+ margin-top: 26px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pay_jiaof {
|
|
|
+ width: 80%;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ background-color: #c69c6d;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 20px auto;
|
|
|
+}
|
|
|
+
|
|
|
+// 停车券弹窗
|
|
|
+.ticketPopup {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px 20px 0 0;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30px 42px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #999;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .useRule-text {
|
|
|
+ position: absolute;
|
|
|
+ right: 42px;
|
|
|
+ color: rgb(58, 130, 248);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup_scroll {
|
|
|
+ height: 70vh;
|
|
|
+ background: #f2f2f2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup_content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .item-image {
|
|
|
+ border: 2px solid #f2f2f2;
|
|
|
+ border-right: 2px dashed #f2f2f2;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 16px 0 0 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &.cro {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+ border: 2px solid #f2f2f2;
|
|
|
+ border-radius: 0 8px 8px 0;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.cro_ {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .h3 {
|
|
|
+ font-size: 28px;
|
|
|
+ line-height: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h3.color_disabled {
|
|
|
+ color: #838181;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #838181;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .erwm_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7931e;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ width: 122px;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 对勾
|
|
|
+ .dot {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 2.25rem;
|
|
|
+ height: 2.375rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗按钮
|
|
|
+.popup_button {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .desc .num {
|
|
|
+ color: #c69c6d;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ok_btn {
|
|
|
+ height: 110px;
|
|
|
+ line-height: 110px;
|
|
|
+ text-align: center;
|
|
|
+ background: #c69c6d;
|
|
|
+ color: #fff !important;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.warp {
|
|
|
+ width: clac(100% - 60px);
|
|
|
+ margin: 30px;
|
|
|
+ // background-color: #fff;
|
|
|
+ background: #fafbff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border: 1px solid #d8dae0;
|
|
|
+
|
|
|
+ .warp_index {
|
|
|
+ // width: 650px;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ margin-left: 27.5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 30px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warp_index1 {
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 40px;
|
|
|
+ padding: 40px 0 60px;
|
|
|
+
|
|
|
+ font-size: 38px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0c0c0c;
|
|
|
+ line-height: 53px;
|
|
|
+ // border-bottom: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color_warp_index {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgc-blue {
|
|
|
+ .bgc-color('blue');
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgc-green {
|
|
|
+ .bgc-color('green');
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgc-color(@value) {
|
|
|
+ @color: 'color-@{value}';
|
|
|
+ color: #fff;
|
|
|
+ background-color: @@color;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warp_index_da {
|
|
|
+ padding: 30px 0;
|
|
|
+ // border-bottom: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warp_index_color {
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flewx {
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ padding-bottom: 20px;
|
|
|
+
|
|
|
+ .flewx-content {
|
|
|
+ position: absolute;
|
|
|
+ left: 16px;
|
|
|
+
|
|
|
+ .count-down-box {
|
|
|
+ display: flex;
|
|
|
+ font-weight: 400;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30px;
|
|
|
+
|
|
|
+ .van-count-down {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flewx_index3 {
|
|
|
+ width: 150px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 45px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34px;
|
|
|
+ line-height: 70px;
|
|
|
+ color: #fff;
|
|
|
+ // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background: #064c8a;
|
|
|
+ box-shadow: 2px 3px 5px #888888;
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue_flewx_index3 {
|
|
|
+ .color_flewx_index3('blue');
|
|
|
+ }
|
|
|
+
|
|
|
+ .green_flewx_index3 {
|
|
|
+ .color_flewx_index3('green');
|
|
|
+ }
|
|
|
+
|
|
|
+ .color_flewx_index3(@value) {
|
|
|
+ @color: 'color-@{value}';
|
|
|
+ background-image: none;
|
|
|
+ background-color: @@color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-disabled {
|
|
|
+ color: hsla(0, 0%, 100%, 0.6);
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-color: rgb(128, 128, 128);
|
|
|
+ background-image: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.popue_box {
|
|
|
+ height: 530px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ .popue_box_index {
|
|
|
+ width: 92%;
|
|
|
+ margin-left: 4%;
|
|
|
+ font-size: 30px;
|
|
|
+ height: 90px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index1 {
|
|
|
+ font-size: 32px;
|
|
|
+ width: 92%;
|
|
|
+ margin-left: 4%;
|
|
|
+ font-weight: 700;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_xs {
|
|
|
+ width: 250px;
|
|
|
+ height: 55px;
|
|
|
+ border: 2px solid #e5e6ec;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .popue_box_index4_xs_index1 {
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ background-color: #f5f8fb;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 54px;
|
|
|
+ border-right: 1px solid #e5e6ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_xs_index3 {
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ background-color: #f5f8fb;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 54px;
|
|
|
+ border-left: 1px solid #e5e6ec;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index5 {
|
|
|
+ font-size: 30px;
|
|
|
+ width: 92%;
|
|
|
+ margin-left: 4%;
|
|
|
+ font-weight: 700;
|
|
|
+ height: 140px;
|
|
|
+ line-height: 90px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_by {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: #064c8a;
|
|
|
+ font-weight: 700;
|
|
|
+ border: 1px solid #064c8a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue_popue_box_index4_by {
|
|
|
+ .color_popue_box_index4_by('blue');
|
|
|
+ }
|
|
|
+
|
|
|
+ .green_popue_box_index4_by {
|
|
|
+ .color_popue_box_index4_by('green');
|
|
|
+ }
|
|
|
+
|
|
|
+ .color_popue_box_index4_by(@value) {
|
|
|
+ @color: 'color-@{value}';
|
|
|
+ color: @@color;
|
|
|
+ border: 1px solid @@color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popue_box_index4_by1 {
|
|
|
+ width: 320px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background-color: #064c8a;
|
|
|
+ border: 1px solid #064c8a;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.text-purple {
|
|
|
+ color: #703a98;
|
|
|
+}
|
|
|
+
|
|
|
+.text-red {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.text-disable {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.top_content {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ padding: 30px 30px;
|
|
|
+ margin-left: 30px;
|
|
|
+ margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
|
|
+ margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ //width: 750px;
|
|
|
+ //height: 280px;
|
|
|
+ background: #fafbff;
|
|
|
+ border: 1px solid #d8dae0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #898989;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ // padding: 0px 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ // padding-left: 18px;
|
|
|
+ font-size: 30px;
|
|
|
+ width: 100%;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_show {
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_down {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ // font-size: 20PX;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
john
