<template>
  <div class="home">
    <div class="bj"></div>
      <div class="box">
        <h2>账户余额</h2>
        <h3>¥230.00</h3>
      </div>
      <van-field
  readonly
  clickable
  label="充值方式"
  :value="value"
  placeholder="点击选择充值方式"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
      <div class="box1">
        <input type="text" placeholder="充值金额">
        <h2>
          <b  v-for="listt in listt" :class="{active: listton == listt}" @click="selected(listt)">￥{{listt.shuzi}}</b>
        </h2>
      </div>
      <div class="box2">
        <router-link to="Member_czcg">确认充值</router-link>
      </div>
  </div>
</template>


<script>
// @ is an alias to /src
export default {
  components: {
  },
  mounted() {
    console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      listton:'',
      listt:[
        {
          shuzi:"20",
        },
        {
          shuzi:"50",
        },
        {
          shuzi:"100",
        },
      ],
      value: '',
      columns: ['微信', '银行卡'],
      showPicker: false,
    };
  },
  methods: {
    selected: function(listt) {
      this.listton = listt
    },
    showPopup() {
      this.show = true;
    },
     onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -2;
}
.box{ background: #fff; padding: 40px 30px; display: flex; align-items: center; justify-content: space-between; font-size: 28px;}
.box1{ margin-top: 20px; background: #fff; padding: 30px 0px;
 input{
   width: 100%;
   font-size: 28px;
   border: 0px;
   padding: 20px;
   box-sizing: border-box;
   border-bottom: 1px solid #f5f5f5;
 }
 h2{ padding-top: 20px;
 padding-left: 10px;
 b{
   width: 217px;
height: 72px;
line-height: 72px;
text-align: center;
display: inline-block;
margin: 10px 10px;
border: 2px solid #46C3B0;
border-radius: 8px;
font-size: 36px;
color: #46C3B0;
 }
  b.active{
    background: #46C3B0;
    color: #fff;
  }
 }
}
.box2{
  margin-top: 100px;
  a{
    width: 690px;
height: 78px;
line-height: 78px;
border: 2px solid #46C3B0;
border-radius: 14px;
display: block;
text-align: center;
background: #46C3B0;
color: #fff;
font-size: 28px;
margin: 0px auto;
  }
}
</style>
