ShowEasyFrontEnd/FrontEnd/components/service/StepInfo.vue

<template>
  <div class="step-info tw-flex tw-justify-between tw-items-center tw-flex-nowrap">
    <div :class="[
      'step-item',
      'tw-block',
      'tw-text-center',
      'tw-w-full',
      'tw-body-4',
      'tw-text-black',
      'tw-max-w-[66px]',
      'md:tw-max-w-full',
      'xl:tw-text-[18px]',
    ]">
      <span
        class="tw-flex tw-justify-center tw-items-center tw-w-[22px] tw-h-[22px] tw-text-neutrals-0 tw-bg-black tw-mx-auto tw-mb-[10px] tw-rounded-2xl">1</span>
      {{$t('Choose booking')}}
    </div>
    <div
      class="step-line tw-block tw-w-full tw-h-px tw-bg-neutrals-800 tw-mx-[30px] xl:tw-mx-[125px] xl:tw-max-w-[150px]">
    </div>
    <div :class="[
      'step-item',
      'tw-block',
      'tw-text-center',
      'tw-w-full',
      'tw-body-4',
      'tw-min-w-[66px]',
      'tw-max-w-[66px]',
      'md:tw-max-w-full',
      'xl:tw-text-[18px]',
      step_active == '2' ? 'tw-text-primary-1' : '',
      step_active == '3' ? 'tw-text-black' : '',
    ]">
      <span :class="[
        'tw-flex',
        'tw-justify-center',
        'tw-items-center',
        'tw-w-[22px]',
        'tw-h-[22px]',
        'tw-text-neutrals-0',
        'tw-mx-auto',
        'tw-mb-[10px]',
        'tw-rounded-2xl',
        step_active == '2' ? 'tw-bg-primary-1' : '',
        step_active == '3' ? 'tw-bg-black' : '',
      ]">2</span>
      {{$t('Enter info & Pay')}}
    </div>
    <div
      class="step-line tw-block tw-w-full tw-h-px tw-bg-neutrals-800 tw-mx-[30px] xl:tw-mx-[125px] xl:tw-max-w-[150px]">
    </div>
    <div :class="[
      'step-item',
      'tw-block',
      'tw-text-center',
      'tw-w-full',
      'tw-body-4',
      'tw-max-w-[66px]',
      'md:tw-max-w-full',
      'xl:tw-text-[18px]',
      step_active == '3' ? 'tw-text-primary-1' : 'tw-text-neutrals-400',
    ]">
      <span :class="[
        'tw-flex',
        'tw-justify-center',
        'tw-items-center',
        'tw-w-[22px]',
        'tw-h-[22px]',
        'tw-text-neutrals-0',
        'tw-mx-auto',
        'tw-mb-[10px]',
        'tw-rounded-2xl',
        step_active == '3' ? 'tw-bg-primary-1' : 'tw-bg-neutrals-400',
      ]">3</span>
      {{$t('Done')}}
    </div>
  </div>
</template>
<script>
export default {
  name: "StepInfo",
  props: {
    step_active: {
      type: String,
    },
  },
};
</script>
<style lang="scss" scoped>

</style>