<template>
  <main-area :title="title"
             class="fullfill"
             :buttonArray="buttonArray">
    <div class="info-title"
         id="cardType">请选择交易方式</div>
    <div>
      <el-image id="card"
                :src="`${staticResourcePath}/img/pic_bc_type_2.png`"
                class="info-content1"
                ecols-button></el-image>
      <el-image id="sfz"
                :src="`${staticResourcePath}/img/shz.png`"
                class="info-content1"
                @click="ChangeItem"></el-image>
      <div class="pwd-input"><br>
        <span style="margin-left: 24%;">借记卡</span>
        <span style="margin-left: 33%;">身份证</span>
      </div>
    </div>

  </main-area>

</template>

<script>

import config from '@/config'
require('@/styles/stm/index.scss')

export default {
  components: {

  },
  data () {
    return {
      buttonArray: [{}, {}, {}, {}, {}, {}, {}, {}],
      staticResourcePath: config.staticResourcePath,
    }
  },

  methods: {
    ChangeItem () {
      // this.dialogVisible = true;
    }
  },

  created () {
    let messages = this.$i18n.messages;
    this.buttonArray = [
      //F1
      {

      },

      //F2
      {

      },

      //F3
      {

      },

      //F4
      {

      },

      //F5
      {

      },

      //F6
      {

      },

      //F7
      {

      },

      //F8
      {
        show: true,
        text: {
          zh: messages.zh.main.btn.returnback,
          en: messages.en.main.btn.returnback,
        },
        setStyle: "end"
      }
    ]
    this.buttonArray = [...this.buttonArray]
  },

  mounted () {

  },

  watch: {

  }

}
</script>

<style lang="scss" scoped>
  .info-content1{
    width:23vw;
    height:20vh;
    margin-left: 15%;
    margin-top: 5%;
  }
  .pwd-input{
    font-size: 30px;
    margin-top: -3%;
  }
</style>>