HAM!DREZA
145 lines
4.5 KiB
Vue
145 lines
4.5 KiB
Vue
<template>
|
|
<div id="parent" class="px-5 md:px-0 wrapper flex justify-center py-[20vw] md:py-[10vw]">
|
|
<div
|
|
class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
|
|
>
|
|
<div class="text-[#383E43] w-full md:w-[58.35%]">
|
|
<h1 class="text-[#A62186] text-[7.277vw] md:text-[2.604vw] font-bold">
|
|
Honors
|
|
</h1>
|
|
<h2 class="text-[5.751vw] md:text-[2.188vw] mt-[5vw] md:mt-[1.5vw]">
|
|
افتخارات شینان
|
|
</h2>
|
|
<p
|
|
class="text-[3.59vw] md:text-[1.186vw] mt-[5vw] md:mt-[0.8vw] w-full md:w-[75%]"
|
|
>
|
|
در جشنواره روز ملی نان که توسط دانشگاه علوم پزشکی برگزار شد، این مجموعه توسط امام جمعه و استاندار
|
|
محترم و رئیس اداره غله به عنوان برگزیده این جشنواره معرفی و موفق به کسب تندیس برتر این جشنواره گردید.
|
|
</p>
|
|
|
|
<!-- <div id="textCard"
|
|
class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
|
|
>
|
|
<svg
|
|
class="rotate-90 md:rotate-0 w-[8vw] h-[8vw] md:w-[1.2vw] md:h-[3.188vw] mt-[0.7vw]"
|
|
viewBox="0 0 10 42"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="5" cy="5" r="4.5" fill="#383E43" stroke="#383E43" />
|
|
<circle cx="5" cy="21" r="4.5" stroke="#383E43" />
|
|
<circle cx="5" cy="37" r="4.5" stroke="#383E43" />
|
|
</svg>
|
|
|
|
<div>
|
|
<div
|
|
class="bg-red-200 p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]"
|
|
>
|
|
<p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
|
|
<p
|
|
class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
|
|
>
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
|
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
|
|
در ستون و سطرآنچنان که لازم است
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div id="cards" class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
|
|
<img
|
|
class="h-full w-full object-cover rounded-[1.302vw]"
|
|
src="/public/images/honor.jpg"
|
|
alt=""
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted, ref } from "vue";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import Scrollbar from "smooth-scrollbar";
|
|
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
|
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
|
|
|
|
const main = ref();
|
|
let ctx;
|
|
const pnl = ref();
|
|
onMounted(() => {
|
|
if (window.innerWidth < 768) {
|
|
document.getElementById("parent").classList.remove("wrapper")
|
|
document.getElementById("cards").classList.remove("card")
|
|
document.getElementById("textCard").classList.remove("text-card")
|
|
}
|
|
// ctx = gsap.context((self) => {
|
|
// const cards = gsap.utils.toArray(".card");
|
|
// const texts = gsap.utils.toArray(".text-card");
|
|
// gsap.set(cards, { height: 100});
|
|
// gsap.set(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
|
|
// // gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });
|
|
|
|
// const tl = gsap.timeline({
|
|
// defaults: {
|
|
// duration: 1,
|
|
// ease: "power1.inOut",
|
|
// },
|
|
// scrollTrigger: {
|
|
// trigger: ".wrapper",
|
|
// start: "top top",
|
|
// end: "+=150%",
|
|
// pin: ".wrapper",
|
|
// scrub: true,
|
|
|
|
// },
|
|
// });
|
|
// texts.forEach((text, i) => {
|
|
// tl.to(
|
|
// text,
|
|
// {
|
|
// y: -window.innerHeight * 0.001,
|
|
// yPercent: 0,
|
|
// },
|
|
// "<"
|
|
// ).to(text, {
|
|
// autoAlpha: 0,
|
|
// duration: 5,
|
|
// });
|
|
// });
|
|
|
|
|
|
// const tl2 = gsap.timeline({
|
|
// defaults: {
|
|
// duration: 1,
|
|
// ease: "power1.inOut",
|
|
// },
|
|
// scrollTrigger: {
|
|
// trigger: ".wrapper",
|
|
// start: "top top",
|
|
// end: "+=150%",
|
|
// scrub: true,
|
|
// },
|
|
// });
|
|
|
|
// cards.forEach((card, i) => {
|
|
// tl2.to(card, {
|
|
// height: 0,
|
|
// autoAlpha: 0,
|
|
// duration: 5,
|
|
// });
|
|
// });
|
|
|
|
// });
|
|
});
|
|
</script>
|
|
|