hrms-mgt/src/modules/05_placement/components/probation/Criterion.vue

<template>
  <div class="col-12 row q-pb-sm">
    <div class="col-12 text-top0 items-center q-pa-md">
      เกณฑ์การประเมินความคาดหวัง
    </div>
    <div class="q-gutter-sm row">
      <div class="col-12 row items-center">
        <div class="col-2 row justify-center">
          <q-btn outline color="grey-6" :label="'1'"> </q-btn>
        </div>
        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
      </div>
      <div class="col-12 row items-center">
        <div class="col-2 row justify-center">
          <q-btn outline color="grey-6" :label="'2'"> </q-btn>
        </div>
        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
      </div>
      <div class="col-12 row items-center">
        <div class="col-2 row justify-center">
          <q-btn outline color="grey-6" :label="'3'"> </q-btn>
        </div>
        <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
      </div>
      <div class="col-12 row items-center">
        <div class="col-2 row justify-center">
          <q-btn outline color="grey-6" :label="'4'"> </q-btn>
        </div>
        <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
      </div>
      <div class="col-12 row items-center">
        <div class="col-2 row justify-center">
          <q-btn outline color="grey-6" :label="'5'"> </q-btn>
        </div>
        <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
</style>