<template>
  <div :class="['scroll-Y' , theme]">
<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->

    <img :src="icon" />
    <div class="pay-success-title">[支付成功]</div>
    <div class="pay-success-info" >{{vehicleNo | formatCarno}}停车费支付成功</div>
    <div class="pay-success-info" style="margin-bottom: 40px">请在<span style="color: var(--k-color-primary);">{{outParkCharging}}分钟</span>内离场</div>
    <div>
      <k-button title="查看缴费记录" style="margin-bottom: 24px;" @click="page_button" />
      <k-button type="outline" title="返回首页" @click="page_button1" />  
    </div>
    
<!--    <div :class="{'page_button': true, 'blue_page_button': custTypeId === 1, 'green_page_button': custTypeId === 2}" @click="page_button">查看缴费记录</div>-->
<!--    <div :class="{'page_button1': true, 'blue_page_button1': custTypeId === 1, 'green_page_button1': custTypeId === 2}" @click="page_button1">返回首页</div>-->
  </div>
</template>

<script>
import parkingFeeSuccessJs from '../../mixins/parkingFeeSuccess'
export default {
  mixins:[parkingFeeSuccessJs]
}
</script>

<style lang="less" scoped>
//@import '../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
  text-align: center;
  img {
    width: 110px;
    height: 110px;
    //margin-top: 250px;
    margin: 126px auto 52px;
  }
  .pay-success-title {
    height: 48px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 34px;
    line-height: 48px;
    margin-bottom: 40px;
    color: #333333;
  }
  .pay-success-info {
    /* 辽A 11111停车费支付成功 */
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 34px;
    line-height: 48px;
    /* identical to box height */
    text-align: center;
    color: #999999;
    margin-bottom: 10px;
  }
  .pay-success-dec {
    /* 请在20分钟内离场 */


    position: absolute;
    width: 279px;
    height: 48px;
    left: 236px;
    top: 594px;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 34px;
    line-height: 48px;
    /* identical to box height */

    text-align: center;

    color: #999999;

  }
}
.page_button {
  width: 86%;
  height: 80px;
  line-height: 80px;
  border-radius: 40px;
  margin-top: 40px;
  margin-left: 7%;
  font-size: 30px;
  color: #fff;
  background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
}
.blue_page_button {
  .color-background-color('blue')
}
.green_page_button {
  .color-background-color('green')
}
.page_button1 {
  width: 86%;
  height: 80px;
  line-height: 80px;
  border-radius: 40px;
  margin-top: 40px;
  margin-left: 7%;
  font-size: 30px;
  color: #7e4fa1;
  border:1px solid  #7e4fa1;
}
.style-color(@value) {
  @color: 'color-@{value}';
  color: @@color;
  border-color: @@color;
}
.blue_page_button1 {
  .style-color('blue')
}
.green_page_button1 {
  .style-color('green')
}
</style>

