mohadese namavar
94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div class="summary">
|
|
<h1>{{ title }}</h1>
|
|
<h2>
|
|
<span>{{ titleEN }}</span>
|
|
<hr />
|
|
</h2>
|
|
<div>
|
|
<i class="isax isax-star-15" />
|
|
<span>{{ stars }}</span>
|
|
<a href="#comments">
|
|
{{ comments.length }} {{ $t('viewpoint') }}
|
|
</a>
|
|
</div>
|
|
<h3>{{ $t('keyFeatures') }}</h3>
|
|
<ul>
|
|
<li v-for="(value, key) in shortDesc" :key="key">
|
|
<label>{{ key }}:</label>
|
|
<span>{{ value }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { title, titleEN, stars, comments, shortDesc } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product>.wrapper>.summary {
|
|
@apply w-full lg:w-auto lg:min-w-[17.5rem] grow px-6 lg:px-0 lg:max-w-[47.9rem] lg:h-[29.9rem] flex flex-col mt-9 lg:mt-0 lg:mr-6 max-lg:order-2;
|
|
|
|
h1 {
|
|
@apply text-[#191919] font-bold font-vazir text-base lg:text-2xl;
|
|
}
|
|
|
|
h2 {
|
|
@apply flex items-center gap-3 mt-3 lg:mt-4 text-sm lg:text-base;
|
|
|
|
span {
|
|
@apply text-[#B2B2B2] font-vazir;
|
|
}
|
|
|
|
hr {
|
|
@apply hidden lg:block h-px lg:h-0.5 grow bg-[#E5E5E5];
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply flex items-center gap-1 font-vazir mt-1.5 lg:mt-2.5;
|
|
|
|
i {
|
|
@apply text-xl text-[#FFB628];
|
|
}
|
|
|
|
span {
|
|
@apply flex items-center gap-4 ml-4 text-[#191919] text-base lg:text-xl;
|
|
|
|
&::after {
|
|
@apply content-['_'] w-1.5 h-1.5 bg-neutral-200 rounded-full;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@apply text-primary-500 text-base lg:text-xl;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
@apply text-zinc-900 font-bold font-vazir mt-12 text-base lg:text-2xl;
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-[1.1rem] lg:gap-7 mt-6 lg:mt-8;
|
|
|
|
li {
|
|
@apply flex items-center gap-3 font-vazir;
|
|
|
|
label {
|
|
@apply flex items-center gap-3 text-[#7F7F7F] text-xs lg:text-lg font-medium;
|
|
|
|
&::before {
|
|
@apply content-['_'] w-2 h-2 bg-[#7F7F7F] rounded-full;
|
|
}
|
|
}
|
|
|
|
span {
|
|
@apply text-[#333] text-xs lg:text-lg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|