UnivateProperties/src/components/shared/bankAccount.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <br />
    <div class="col-md-12" style="text-align:centre">
      <div class="myWell">
        <h4>Banking Details</h4>
      </div>
      <div class="form-group row"></div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Bank *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="bank" v-model="bank.bank" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Account Number *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="accountnumber" v-model="bank.accNumber" />
          </div>
        </div>
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Account Holder *</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>
            </span>
            <input class="form-control" type="text" name="accountholder" v-model="bank.accHolder" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BankAccount',
  props: {
    bank: {
      bank: undefined,
      accNumber: undefined,
      accHolder: undefined,
    },
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>