<template>
  <div class="w-100 p-r">
    <!-- card registration button -->
    <div class="w-100 h-114px p-r">
      <button class="w-122px h-42px bo-1px bo-EAEAEA bs-0_1_3_B2B2B2_40 bor-3px p-a cen-y r-0 cursor-pointer">
        <span class="f-13px t-c">Card Registration</span>
      </button>
    </div>

    <!-- cards -->
    <div class="d-fx bo_t-1px bo_b-1px bo-EAEAEA h-240px">
      <div class="w-390px h-100 d-fx jc-c ai-c bo-EAEAEA"
        :class="[(index % 3 === 0 ? 'bo_r-1px' : ''), (index % 3 === 2 ? 'bo_l-1px' : '')]"
        v-for="(card, index) in [1,2,3]" :key="index">
        <card-c></card-c>
      </div>
    </div>
    <div>
      <div class="mt-12px p-a r-0 d-fx ai-c">
        <span class="w-4px h-4px b-464646 bor-50"></span>
        <h4 class="f-12px c-464646 fw-300 ml-6px">Up to three cards can be registered.</h4>
      </div>
    </div>
  </div>
</template>

<script>
import CardC from './tabsCard/CardC.vue'

export default {
  name: 'Ic_tabsCard',
  extends: {},
  props: {},
  data(){
    return{};
  },
  components: {
    'card-c': CardC
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate(){},
  mounted(){}
}
</script>
