mohadese namavar
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<section class="specification">
|
|
<h2>{{ $t('specifications') }}</h2>
|
|
<ul>
|
|
<li v-for="(item, key) in specs" :key="key">
|
|
<label>{{ key }}</label>
|
|
<span>{{ item }}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { specs } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product .specification {
|
|
@apply w-full flex items-start gap-[13.6rem] px-6;
|
|
|
|
h2 {
|
|
@apply hidden lg:flex gap-3 items-center text-primary-600 text-xl font-bold font-vazir;
|
|
|
|
&::before {
|
|
@apply content-['_'] h-6 w-[0.3rem] rounded-full bg-primary-600;
|
|
}
|
|
}
|
|
|
|
& > ul {
|
|
@apply w-full lg:w-max flex flex-col;
|
|
|
|
li {
|
|
@apply flex justify-between lg:justify-start gap-12 border-b-2 py-[1.1rem] lg:py-6;
|
|
|
|
label {
|
|
@apply lg:w-[20.2rem] flex items-center gap-3 text-[#7F7F7F] text-xs lg:text-lg font-medium font-vazir;
|
|
|
|
&::before {
|
|
@apply content-['_'] w-2 h-2 bg-[#7F7F7F] rounded-full;
|
|
}
|
|
}
|
|
|
|
span {
|
|
@apply text-[#333333] text-xs lg:text-lg font-vazir;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|