mohadese namavar
122 lines
4.2 KiB
Vue
122 lines
4.2 KiB
Vue
<template>
|
|
<section class="product-brand">
|
|
<img :src="image" :alt="title" />
|
|
<div>
|
|
<h1>{{ title }}</h1>
|
|
<h2>{{ name }}</h2>
|
|
<h3>
|
|
<i class="isax isax-verify"></i>
|
|
<span>{{ category }}</span>
|
|
</h3>
|
|
<p>{{ desc }}</p>
|
|
</div>
|
|
<div>
|
|
<Button v-for="(btn, i) in navigation" :key="i" v-bind="btn" />
|
|
<Swiper v-bind="swiper">
|
|
<SwiperSlide v-for="(item, i) in images" :key="i">
|
|
<img :src="item.src" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from "../../initialize/brand";
|
|
const { swiper, navigation } = init;
|
|
|
|
defineProps({
|
|
image: { type: String, default: "/images/verity.svg" },
|
|
title: { type: String, default: "VERITY" },
|
|
name: { type: String, default: "وریتی" },
|
|
category: { type: String, default: "محصولات الکترونیکی و دیجیتال" },
|
|
desc: {
|
|
type: String,
|
|
default:
|
|
"برند وریتی مارکی آشنا و شناخته شده در بازار IT کشور است که با در نظر گرفتن نیاز افراد مختلف جامعه همواره تلاش کرده محصولاتی با قیمت مناسب و سطح کیفی بالا را روانه بازار کند. این موضوع باعث استقبال خوب توزیع کنندگان و کاربران لوازم جانبی کامپیوتر و موبایل، از محصولات برند Verity شده است و این امر موجب شده تا بازار فروش خوبی را در داخل کشور به دست آورد. تنوع محصولات وریتی در سه زمینه راهکارهای ذخیره سازی، لوازم جانبی کامپیوتر و لوازم جانبی موبایل است.",
|
|
},
|
|
images: {
|
|
type: Array,
|
|
default: [
|
|
{ src: "/images/verity-banner.svg" },
|
|
{ src: "/images/verity-banner.svg" },
|
|
{ src: "/images/verity-banner.svg" },
|
|
{ src: "/images/verity-banner.svg" },
|
|
{ src: "/images/verity-banner.svg" },
|
|
],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-brand {
|
|
@apply w-full lg:h-[31.5rem] bg-[#FAFAFA] flex flex-col lg:flex-row gap-2 lg:gap-12 justify-center lg:pt-20 border-b-2 border-[#E5E5E5];
|
|
|
|
& > img {
|
|
@apply w-28 h-28 object-contain object-center max-lg:hidden;
|
|
}
|
|
|
|
& > div:nth-of-type(1) {
|
|
@apply flex flex-col gap-1 lg:gap-3 max-lg:items-center max-lg:p-6;
|
|
|
|
h1 {
|
|
@apply text-[#333333] text-[2em] leading-7 mt-3 font-bold font-vazir;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-[#999999] text-xl font-medium font-vazir;
|
|
}
|
|
|
|
h3 {
|
|
@apply flex items-center gap-2 text-primary-600;
|
|
|
|
i {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
span {
|
|
@apply font-medium font-vazir leading-normal;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply w-full lg:w-[47.9rem] text-right text-[#333333] text-sm leading-5 max-lg:text-justify lg:text-lg font-normal font-vazir lg:leading-[2.3rem] mt-4;
|
|
}
|
|
}
|
|
|
|
& > div:nth-of-type(2) {
|
|
@apply flex gap-3 h-max w-full lg:w-max max-w-full max-lg:order-first;
|
|
|
|
.swiper {
|
|
@apply w-full max-w-[25rem] h-60 lg:h-[22rem] mx-0;
|
|
|
|
.swiper-wrapper {
|
|
@apply w-full lg:w-max h-max;
|
|
.swiper-slide {
|
|
@apply w-max h-max lg:rounded-[0.6rem] overflow-hidden;
|
|
img {
|
|
@apply w-full h-60 lg:w-[25rem] lg:h-80 object-cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-pagination {
|
|
@apply -bottom-1.5 max-lg:hidden;
|
|
|
|
.swiper-pagination-bullet {
|
|
@apply w-7 rounded-full mx-1.5 bg-[#E5E5E5] opacity-100;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
@apply bg-[#47B556];
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply self-center -mt-3 text-[2.5em] last-of-type:order-last max-lg:hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|