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/RoadMap.vue
+41 -25
View File
@@ -3,15 +3,14 @@
class="flex flex-col items-center border-t-[1px] border-[#E5E5E5] z-[1] min-h-[40vw] bg-[#FAF6F9] mt-[8vw]"
>
<h2
class="font-semibold text-[5.11vw] lg:text-[1.69vw] text-[#383E43] mt-24"
class="font-semibold text-[5.11vw] md:text-[1.69vw] text-[#383E43] mt-24"
>
نقشه راه از تولید به مصرف محصولات شینان
</h2>
<div ref="main" class="relative mt-[10vw] lg:mt-0 flex justify-center">
<div ref="main" class="relative mt-[10vw] md:mt-0 flex justify-center">
<svg
id="motionSVG"
class="hidden lg:block box z-[1] absolute mt-[8vw] lg:mt-[2.4vw] h-[15.385vw] w-[15.385vw] lg:h-[5.625vw] lg:w-[5.625vw]"
id="motionSVG"
class="hidden md:block box z-[1] absolute mt-[8vw] md:mt-[2.4vw] h-[15.385vw] w-[15.385vw] md:h-[5.625vw] md:w-[5.625vw]"
viewBox="0 0 108 108"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +23,7 @@
stroke-width="2"
stroke-dasharray="10 10"
/>
<circle cx="54" cy="54" r="23" fill="white"/>
<circle cx="54" cy="54" r="23" fill="white" />
<path
d="M57.3375 46.5L50.6625 46.5C46.5125 46.5 44.825 49.4375 46.8875 53.025L47.8125 54.625C48.0375 55.0125 48.45 55.25 48.9 55.25L59.1 55.25C59.55 55.25 59.9625 55.0125 60.1875 54.625L61.1125 53.025C63.175 49.4375 61.4875 46.5 57.3375 46.5Z"
fill="#383E43"
@@ -36,7 +35,7 @@
</svg>
<svg
class="motionPath hidden lg:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
class="motionPath hidden md:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
viewBox="0 0 1558 2066"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -50,33 +49,46 @@
/>
</svg>
<svg
class="box2 block md:hidden !mt-[18vw] absolute"
id="motionSVG2"
width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="29.5" stroke="#383E43" stroke-dasharray="5 5"/>
<circle cx="30" cy="30" r="18" fill="white"/>
<path d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z" fill="#383E43"/>
<path d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z" fill="#383E43"/>
</svg>
<svg
class="motionPath2 block absolute md:hidden mt-[20vw]"
width="98vw"
height="359.487vw"
class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
viewBox="0 0 390 1402"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="motionPath2"
id="motionPath"
d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
stroke="#383E43"
stroke-dasharray="5 5"
/>
</svg>
<svg
class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
id="motionSVG"
width="60"
height="60"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="30"
r="29.5"
stroke="#383E43"
stroke-dasharray="5 5"
/>
<circle cx="30" cy="30" r="18" fill="white" />
<path
d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z"
fill="#383E43"
/>
<path
d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z"
fill="#383E43"
/>
</svg>
</div>
<home-page-road-map-componentsBanner />
<home-page-road-map-componentsProductionStage />
@@ -99,8 +111,12 @@ let ctx;
onMounted(() => {
ctx = gsap.context((self) => {
gsap.to(".motionPath #motionPath",
{strokeDashoffset: -300, repeat: -1, ease: "none", duration: 5});
gsap.to(".motionPath #motionPath", {
strokeDashoffset: -300,
repeat: -1,
ease: "none",
duration: 5,
});
gsap.to("#motionSVG", {
scrollTrigger: {
trigger: "#motionSVG",