<template>

  <section style="padding: 0 10px">

    <van-row>
      <van-col span="18">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </van-col>
      <van-col span="6" style="margin-top: 5px;">
        <van-button type="info" round block>续费</van-button>
      </van-col>
    </van-row>

    <ul>
      <li class="cardListWrap" @click="toBuyCardPage">
        <div class="van-ellipsis" style="padding: 20px 0  10px 10px">万达停车场plName</div>
        <div class="van-ellipsis" style="padding: 10px 0  20px 10px">万达停车场plAddress</div>
      </li>
      <li class="cardListWrap">
        <div class="van-ellipsis" style="padding: 20px 0  10px 10px">万达停车场plName</div>
        <div class="van-ellipsis" style="padding: 10px 0  20px 10px">万达停车场plAddress</div>
      </li>
    </ul>


    <section style="text-align: center;padding-top: 20px">
      <van-image :src="require('../../assets/images/cards/novipcard.png')" />
      <p>为找到会员卡</p>
    </section>


  </section>

</template>

<script>
import { Toast } from 'vant';
export default {
  name: "cardList",
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    toBuyCardPage(){
      this.$router.push({
          name: "buyCardDetail"
        }
      );
    }
  },
};
</script>

<style scoped>
  .cardListWrap{
    margin-top: 15px;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 106px;
    background: url("../../assets/images/cards/vipcardbg1.png") no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
  }

</style>
