<template>
  <div class="box">
<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
    <img :src="custTypeId === 0 ? require('../../../static/images/rent.png') : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`" v-if="custTypeId >= 0"/>
    <div>[月租车,可直接离场]</div>
    <div :class="{'searchPrice': true, 'blueSearchPrice': custTypeId === 1, 'greenSearchPrice': custTypeId === 2}" @click="search">重新查询</div>
  </div>
</template>

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


<style lang="less" scoped>
//@import '../../../styles/common.less';
.box {
  text-align: center;
  img {
    width: 200px;
    height: 200px;
    margin-top: 200px;
  }
  div {
    margin-top: 20px;
    font-weight:bold;
  }
  .searchPrice {
    color: #fff !important;
    margin: 0 auto;
    margin-top: 40px;
    height: 90px;
    width: 80%;
    line-height: 90px;
    border-radius: 80px;
    font-size: 17px;
    background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
  }
  .blueSearchPrice {
    .colorSearchPrice('blue')
  }
  .greenSearchPrice {
    .colorSearchPrice('green')
  }
  .colorSearchPrice(@value) {
    @color: 'color-@{value}';
    background-image: none;
    background-color: @@color;
  }
}
</style>
