You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.3 KiB
91 lines
2.3 KiB
<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>
|