mohadese namavar
86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<template>
|
|
<div class="national-card">
|
|
<h2>{{ $t("nationalCard") }}</h2>
|
|
<p>{{ $t("nationalCardDesc") }}</p>
|
|
<img :src="nationalCard" />
|
|
<label>
|
|
<i :class="tags[confirmToSales].icon"></i>
|
|
<span>{{ tags[confirmToSales].label }}</span>
|
|
</label>
|
|
<div>
|
|
<span>{{ nationalCode }}</span>
|
|
<i class="isax isax-link-21" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { nationalCard, confirmToSales, nationalCode } = inject('data')
|
|
|
|
const tags = reactive({
|
|
true: {
|
|
icon: 'isax isax-tick-circle',
|
|
label: 'تاییده شده'
|
|
},
|
|
false: {
|
|
icon: 'isax isax-close-circle',
|
|
label: 'تاییده نشده'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.national-card {
|
|
@apply w-[21.4rem] h-[28.4rem] lg:w-[24.2rem] lg:h-[34.9rem];
|
|
@apply flex flex-col gap-4 p-6 lg:p-8 bg-neutral-50 rounded-[0.6rem] border-neutral-200;
|
|
@apply border lg:border-2;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-lg lg:text-2xl font-bold font-iran-sans;
|
|
@apply flex items-center gap-4 lg:gap-3.5;
|
|
|
|
&::before {
|
|
@apply content-['_'] w-[0.2rem] h-[1.1rem] lg:h-6 lg:w-1.5 lg:mb-1 rounded-full bg-primary-600;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply text-[#7F7F7F] text-xs lg:text-base font-medium font-vazir;
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
@apply w-[18.4rem] h-[11.6rem] lg:w-[20.2rem] lg:h-[12.8rem] bg-[#F2F2F2] rounded-[0.6rem] overflow-hidden relative;
|
|
|
|
@apply object-cover object-center;
|
|
}
|
|
|
|
label {
|
|
@apply flex items-center gap-2 text-[#7F7F7F];
|
|
|
|
span {
|
|
@apply text-xs font-iran-sans;
|
|
}
|
|
|
|
i {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@apply h-[2.7rem] lg:h-[3.1rem] flex justify-end items-center gap-2 px-4;
|
|
@apply text-[#333333] bg-[#F2F2F2] rounded-lg shrink-0 mt-auto;
|
|
|
|
i {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
span {
|
|
@apply font-iran-sans text-xs lg:text-base;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|