danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed css bugs

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-09 11:41:05 +03:30
parent a41a54788d
commit 0ac988a9c7
14 changed files with 224 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/MediaSlider.vue
+26 -22
View File
@@ -1,17 +1,17 @@
<template>
<div
class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]"
class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
>
<div
class="w-full lg:w-[25%] flex flex-col ps-[8vw] lg:ps-0 border-e-[1px]"
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] lg:mt-0 lg:py-0 py-[3vw] text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-semibold"
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 lg:flex h-[50px] me-[0.5vw]">
<div class="hidden md:flex h-[50px] me-[0.5vw]">
<svg
class="cursor-pointer "
@click="this.$refs.carousel.next()"
@@ -41,7 +41,7 @@
<div class="mt-[1vw] space-y-[1vw] text-[#878787]">
<p class="flex items-center">
<svg
class="w-[3.333vw] lg:w-[16px] h-[3.333vw] lg:h-[16px]"
class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
height="16"
viewBox="0 0 16 16"
fill="none"
@@ -51,12 +51,12 @@
<circle cx="8" cy="8" r="2" fill="#383E43" />
</svg>
<span
class="ps-3 text-[3.59vw] lg:text-[0.938vw] font-semibold text-black"
class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold text-black"
>
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<p class="items-center hidden md:flex">
<svg
width="16"
height="16"
@@ -71,7 +71,7 @@
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<p class="items-center hidden md:flex">
<svg
width="16"
height="16"
@@ -86,7 +86,7 @@
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<p class="items-center hidden md:flex">
<svg
width="16"
height="16"
@@ -101,7 +101,7 @@
فواید و مضرات مصرف گندم
</span>
</p>
<p class="items-center hidden lg:flex">
<p class="items-center hidden md:flex">
<svg
width="16"
height="16"
@@ -118,7 +118,7 @@
</p>
<button
class="hidden lg:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
class="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
>
ادامه مطلب
<svg
@@ -152,16 +152,16 @@
<Carousel
ref="carousel"
class="lg:w-[75%] mt-[8vw] lg:mt-0 w-full"
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] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
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] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
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>
@@ -172,15 +172,15 @@
<!--
<div
class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
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] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw]
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] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw]
<div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
border-[1.5px] rounded-[500px]"></div>
@@ -191,17 +191,17 @@
<div
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
<div
class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
>
<div
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</div> -->
@@ -216,8 +216,12 @@ export default defineComponent({
breakpoints: {
// 700px and up
300: {
itemsToShow: 1.4,
snapAlign: 'end',
},
700: {
itemsToShow: 1,
itemsToShow: 3.3,
snapAlign: 'center',
},
// 1024 and up