HAM!DREZA
400 lines
13 KiB
Vue
400 lines
13 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
|
|
>
|
|
<div
|
|
class="w-full md:w-[25%] flex flex-col ps-[8vw] md:ps-0 border-e-[1px]"
|
|
>
|
|
<div class="flex justify-between">
|
|
<p
|
|
class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
|
|
>
|
|
دیگر محصولات
|
|
</p>
|
|
<div class="hidden md:flex h-[50px] me-[0.5vw]">
|
|
<svg
|
|
class="group/edit cursor-pointer h-[2.604vw] w-[2.604vw]"
|
|
@click="prev"
|
|
viewBox="0 0 50 50"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
class="group-hover/edit:stroke-black"
|
|
cx="25"
|
|
cy="25"
|
|
r="24.5"
|
|
transform="rotate(-180 25 25)"
|
|
stroke="#878787"
|
|
/>
|
|
<path
|
|
class="group-hover/edit:stroke-black"
|
|
d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199"
|
|
stroke="#878787"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
class="group/edit cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
|
|
@click="next"
|
|
viewBox="0 0 50 50"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
class="group-hover/edit:stroke-black"
|
|
cx="25"
|
|
cy="25"
|
|
r="24.5"
|
|
stroke="#878787"
|
|
/>
|
|
<g clip-path="url(#clip0_836_14507)">
|
|
<path
|
|
class="group-hover/edit:stroke-black"
|
|
d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
|
|
stroke="#878787"
|
|
stroke-width="2"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_836_14507">
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="white"
|
|
transform="translate(13 13)"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-[1vw] space-y-[1vw] text-[#878787]">
|
|
<p
|
|
:class="{ 'text-black': itemindex === 9 }"
|
|
@click="changeSlide(9)"
|
|
class="flex items-center hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold">
|
|
انواع کلوچه های سلامت محور در مدل های <br />
|
|
زنجبیلی ، کلاسیک ، دارچینی ، خرمایی و ...
|
|
</span>
|
|
</p>
|
|
<p
|
|
@click="changeSlide(1)"
|
|
:class="{ 'text-black': itemindex === 1 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع دسر ها شامل تارتها و دسر های کافه ای
|
|
</span>
|
|
</p>
|
|
<p
|
|
@click="changeSlide(2)"
|
|
:class="{ 'text-black': itemindex === 2 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع ترافلهای شکلاتی و خرمایی در طعم های اختصاصی
|
|
</span>
|
|
</p>
|
|
<p
|
|
@click="changeSlide(3)"
|
|
:class="{ 'text-black': itemindex === 3 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع حلواهای بوتیکی سلامت محور اختصاصی
|
|
</span>
|
|
</p>
|
|
<p
|
|
@click="changeSlide(4)"
|
|
:class="{ 'text-black': itemindex === 4 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
سمنوی ساده و بدون شکر و سمنوی مغزیجات
|
|
</span>
|
|
</p>
|
|
|
|
<p
|
|
@click="changeSlide(5)"
|
|
:class="{ 'text-black': itemindex === 5 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع بیسکوییت جوانه گندم سلامت محور در ۶ مدل
|
|
</span>
|
|
</p>
|
|
|
|
<p
|
|
@click="changeSlide(6)"
|
|
:class="{ 'text-black': itemindex === 6 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع کرم های صبحانه سلامت محور
|
|
</span>
|
|
</p>
|
|
|
|
<p
|
|
@click="changeSlide(7)"
|
|
:class="{ 'text-black': itemindex === 7 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع آرد بسته بندی گندم ، جو و جودوسر
|
|
</span>
|
|
</p>
|
|
|
|
<p
|
|
@click="changeSlide(-1)"
|
|
:class="{ 'text-black': itemindex === -1 }"
|
|
class="items-center hidden md:flex hover:text-black cursor-pointer"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
|
|
<circle cx="8" cy="8" r="2" fill="#383E43" />
|
|
</svg>
|
|
<span class="ps-3 text-[0.938vw] font-semibold">
|
|
انواع پک سوغاتی اداری و سازمانی vip
|
|
</span>
|
|
</p>
|
|
|
|
<button
|
|
class="group/edit hidden md:flex text-[0.833vw] hover:border-black border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
|
|
>
|
|
<span class="group-hover/edit:text-black"> ادامه مطلب </span>
|
|
<svg
|
|
class="group-hover/edit:-translate-x-2 transition duration-300 group-hover/edit:duration-300 ms-3 h-[1.25vw] w-[1.25vw]"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
class="group-hover/edit:stroke-black"
|
|
d="M9.57 5.93018L3.5 12.0002L9.57 18.0702"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
class="group-hover/edit:stroke-black"
|
|
d="M20.4999 12H3.66992"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Carousel
|
|
@slide-end="handleSlideStart"
|
|
ref="myCarousel"
|
|
class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
|
|
:wrap-around="true"
|
|
:breakpoints="breakpoints"
|
|
>
|
|
<Slide v-for="(slide, index) in 9" :key="index">
|
|
|
|
<div
|
|
|
|
class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
|
|
|
|
>
|
|
<div
|
|
:class="`test-${index}`"
|
|
|
|
class="mx-[3vw] mediagallery md:mx-[1vw] w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
|
|
>
|
|
|
|
</div>
|
|
</div>
|
|
</Slide>
|
|
</Carousel>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from "vue";
|
|
const myCarousel = ref(null);
|
|
|
|
|
|
const list = ref([])
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
name: "Breakpoints",
|
|
data: () => ({
|
|
itemindex: 0,
|
|
list: [],
|
|
datas: [
|
|
{ htm: '<h1>parag</h1>' ,url: "https://www.google.com/imgres?q=QWSAD%27&imgurl=https%3A%2F%2Fyt3.googleusercontent.com%2Fytc%2FAIdro_lzldHSacRGWtHljOIVE6nwxc8vW74S1HBiy9ls1AU7wBQ%3Ds900-c-k-c0x00ffffff-no-rj&imgrefurl=https%3A%2F%2Fm.youtube.com%2F%40shiitakiaandqwsad3859&docid=dq5X-El72TSwGM&tbnid=J3taltW7PWqUPM&vet=12ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA..i&w=900&h=900&hcb=2&ved=2ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA" },
|
|
{ name: 10, url: "/public/images/products/1.jpg" },
|
|
{ name: 10, url: "public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
{ name: 10, url: "./../../public/images/products/1.jpg" },
|
|
],
|
|
breakpoints: {
|
|
// 700px and up
|
|
300: {
|
|
itemsToShow: 1.4,
|
|
snapAlign: "end",
|
|
},
|
|
700: {
|
|
itemsToShow: 3.3,
|
|
snapAlign: "center",
|
|
},
|
|
// 1024 and up
|
|
1024: {
|
|
itemsToShow: 3.3,
|
|
snapAlign: "start",
|
|
},
|
|
},
|
|
}),
|
|
|
|
|
|
methods: {
|
|
prev: function () {
|
|
this.$refs.myCarousel.prev();
|
|
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
|
|
},
|
|
next: function () {
|
|
this.$refs.myCarousel.next();
|
|
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
|
|
},
|
|
|
|
handleSlideStart(data) {
|
|
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
|
|
console.log(data);
|
|
},
|
|
changeSlide(index) {
|
|
this.$refs.myCarousel.slideTo(index);
|
|
this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
|
|
},
|
|
},
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.carousel__slide--next .carousel-item:nth-child(1) {
|
|
border: 1px solid black;
|
|
}
|
|
.carousel__slide {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.carousel__slide--next {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style> |