change content

2024-07-20 18:17:31 +03:30
parent ba0c128832
commit dec2788106
25 changed files with 1191 additions and 959 deletions
@@ -9,37 +9,79 @@
        <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="cursor-pointer h-[2.604vw] w-[2.604vw]"
-          @click="this.$refs.carousel.next()"
- viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
-            <path 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="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
-            @click="this.$refs.carousel.prev()"
-     viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
-              <g clip-path="url(#clip0_836_14507)">
-              <path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-              </g>
-              <defs>
+            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)"/>
+                <rect
+                  width="24"
+                  height="24"
+                  fill="white"
+                  transform="translate(13 13)"
+                />
              </clipPath>
-              </defs>
-              </svg>
-              
-              
+            </defs>
+          </svg>
        </div>
      </div>

      <div class="mt-[1vw] space-y-[1vw] text-[#878787]">
-        <p class="flex items-center">
+        <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"
@@ -50,13 +92,16 @@
            <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 text-black"
-          >
-            فواید و مضرات مصرف گندم
+          <span class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold">
+            انواع کلوچه های سلامت محور در مدل های <br />
+            زنجبیلی ، کلاسیک ، دارچینی ، خرمایی و ...
          </span>
        </p>
-        <p class="items-center hidden md:flex">
+        <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"
@@ -68,10 +113,14 @@
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
-            فواید و مضرات مصرف گندم
+            انواع دسر ها شامل تارتها و دسر های کافه ای
          </span>
        </p>
-        <p class="items-center hidden md:flex">
+        <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"
@@ -83,10 +132,14 @@
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
-            فواید و مضرات مصرف گندم
+            انواع ترافلهای شکلاتی و خرمایی در طعم های اختصاصی
          </span>
        </p>
-        <p class="items-center hidden md:flex">
+        <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"
@@ -98,10 +151,14 @@
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
-            فواید و مضرات مصرف گندم
+            انواع حلواهای بوتیکی سلامت محور اختصاصی
          </span>
        </p>
-        <p class="items-center hidden md:flex">
+        <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"
@@ -113,21 +170,102 @@
            <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="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
+          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="ms-3 h-[1.25vw] w-[1.25vw]"
+            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"
@@ -136,6 +274,7 @@
              stroke-linejoin="round"
            />
            <path
+              class="group-hover/edit:stroke-black"
              d="M20.4999 12H3.66992"
              stroke="#383E43"
              stroke-width="1.5"
@@ -147,87 +286,115 @@
        </button>
      </div>
    </div>
-
-    <Carousel
-      ref="carousel"
-      class="md:w-[75%] mt-[8vw] md:mt-0  w-full"
-      :wrap-around="true"
-      :breakpoints="breakpoints"
-    >
-      <Slide v-for="slide in 10" :key="slide">
-        <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="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
-          ></div>
-        </div>
-      </Slide>
-
 
-    </Carousel>
-
-
-    <!-- 
-    <div
-      class="mt-[8vw] md:mt-0 w-full grid grid-cols-1 md:grid-cols-3 border-s-none md:border-s-[1px] ms-0 md:ms-[3vw] ps-0 md:ps-[1vw]"
-    >
-
-
-      <div
-        class="w-[64.103vw] md:w-[20.156vw] h-[85.641vw] md:h-[28.021vw]
-         border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">
-
-        <div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
-         border-[1.5px] rounded-[500px]"></div>
-
-
-      </div>
-
-
-
-
-
-      <div
-        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
+      <Carousel
+        @slide-end="handleSlideStart"
+        ref="myCarousel"
+        class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
+        :wrap-around="true"
+        :breakpoints="breakpoints"
      >
-        <div
-          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
-        ></div>
-      </div>
-      <div
-        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
-      >
-        <div
-          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
-        ></div>
-      </div>
-    </div> -->
+        <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',
+  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',
+        snapAlign: "end",
      },
      700: {
        itemsToShow: 3.3,
-        snapAlign: 'center',
+        snapAlign: "center",
      },
      // 1024 and up
      1024: {
        itemsToShow: 3.3,
-        snapAlign: 'start',
+        snapAlign: "start",
      },
-    }
-  })
-})
-</script>
+    },
+  }),
+
+
+  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>