jws-frontend/src/pages/12_debit-note/document-view/ViewFooter.vue

<script setup lang="ts">
defineProps<{
  data?: {
    name: string;
    buyer: string;
    buyDate: string;

    company: string;
    approver: string;
    approveDate: string;
  };
}>();
</script>
<template>
  <div class="footer-container">
    <div class="footer-top">
      <div>ในนาม {{ data?.name || '-' }}</div>
      <div>ในนาม {{ data?.company || '-' }}</div>
    </div>

    <img src="/images/jws-stamp.png" alt="${0}" />

    <div class="footer-bottom">
      <section>
        <div>
          <span class="data-placeholder"></span>
          <span>ผู้สั่งซื้อสินค้า</span>
        </div>
        <div>
          <span class="data-placeholder"></span>
          <span>วันที่</span>
        </div>
      </section>
      <section>
        <div>
          <span class="data-placeholder"></span>
          <span>ผู้อนุมัติ</span>
        </div>
        <div>
          <span class="data-placeholder"></span>
          <span>วันที่</span>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
.footer-container {
  display: flex;
  position: relative;
  justify-content: center;
  height: 1.5in;
}

.footer-top {
  position: absolute;
  width: 100;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;

  & > * {
    width: 38%;
  }
}
.footer-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;

  & > * {
    display: flex;
    width: 38%;
    justify-content: space-around;

    & > * {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
}

.data-placeholder {
  display: block;
  min-width: 1.2in;
  border-bottom: 1px dotted black;
  margin-bottom: 2mm;
}
</style>