jws-frontend/src/pages/05_quotation/peview/ViewHeader.vue

<script lang="ts" setup>
// NOTE: Import stores

// NOTE  Import Types
// NOTE: Import Components
</script>

<template>
  <div class="row items-center q-mb-lg">
    <div class="column" style="width: 50%">
      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
    </div>
    <div
      class="column"
      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
    >
      ใบเสนอราคา
    </div>
  </div>

  <article class="detail-card">
    <section class="detail-customer-info">
      <article>
        <b>
          บริษัท นำคนต่างด้าวมาทำงานในประเทศ จ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด
          (สำนักงานใหญ่)
        </b>
        <span>
          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
          10140
        </span>
        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
        <span>เบอร์โทร 02-018-8688</span>
        <span>https://www.jobsworkerservice.com</span>
      </article>
      <article>
        <b>ลูกค้า</b>
        <span>
          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
          10140
        </span>
        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
        <span>เบอร์โทร 02-018-8688</span>
        <span>https://www.jobsworkerservice.com</span>
      </article>
    </section>
    <section class="detail-quotation-info">
      <div>
        <div>เลขที่ใบเสนอราคา</div>
        <div>QT240120S0003</div>
      </div>
      <div>
        <div>วันที่ใบเสนอราคา</div>
        <div>20/01/2024 10:36</div>
      </div>
      <div>
        <div>ผู้ขาย</div>
        <div>นายสดใส ใจงาม 084-363-5222</div>
      </div>
      <div>
        <div>เงื่อนไขการชำระ</div>
        <div>เงินสด - เต็มจำนวน</div>
      </div>
      <div>
        <div>ชื่องาน</div>
        <div>MOU Myanmar (Re-turn)</div>
      </div>
      <div>
        <div>ผู้ติดต่อ</div>
        <div>สุนี เจริญงาม</div>
      </div>
      <div>
        <div>วันครบกำหนดชำระ</div>
        <div>27/01/2024</div>
      </div>
    </section>
  </article>
</template>

<style scoped>
.detail-card {
  display: flex;
  gap: 16px;

  & > * {
    flex-grow: 1;
  }

  & > :first-child {
    max-width: 57.5%;
  }
}

.detail-customer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;

  & > * {
    display: flex;
    flex-direction: column;

    & > :first-child {
      color: var(--orange-5);
    }
  }
}

.detail-quotation-info {
  & > * {
    display: flex;

    & > :first-child {
      color: var(--orange-5);
    }

    & > * {
      width: 50%;
    }
  }
}
</style>