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="bankingDetails.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="bankingDetails.accountNumber"
            />
          </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="bankingDetails.accountHolder"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bankingDetails: {
      bank: undefined,
      accountNumber: undefined,
      accountHolder: undefined,
    },
  },
};
</script>

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