110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col h-12 mt-2 mx-2 p-2 transition-all duration-500 ease-in-out hover:h-70 bg-yellow-50"
|
|
@mouseenter="hoverd = true"
|
|
@mouseleave="hoverd = false"
|
|
>
|
|
<div class="flex rounded-md justify-evenly w-full items-start">
|
|
<nav class="flex flex-row w-full items-center">
|
|
<h1 class="text-2xl mx-2 font-black">Ghaem Ghh</h1>
|
|
<div class="flex flex-row justify-center gap-10 w-[60%]">
|
|
<h1 @mouseenter="ChangeState('Product')" class="nav-list">
|
|
Products
|
|
</h1>
|
|
<h1 @mouseenter="ChangeState('Solution')" class="nav-list">
|
|
Solutions
|
|
</h1>
|
|
<h1 @mouseenter="ChangeState('Center')" class="nav-list">
|
|
Knowledge Center
|
|
</h1>
|
|
<h1 @mouseenter="ChangeState('Company')" class="nav-list">Company</h1>
|
|
</div>
|
|
<div class="flex flex-row w-[30%] justify-center gap-10">
|
|
<button class="nav-list">Contanct Us</button>
|
|
<button class="bg-gray-950 text-amber-50 p-1 px-4 rounded-lg">
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<TransitionGroup
|
|
enter-active-class="transition-all duration-500 ease-out"
|
|
enter-from-class="opacity-0 translate-y-3 blur-xl"
|
|
enter-to-class="opacity-100 translate-y-0 blur-none"
|
|
leave-active-class="transition-all duration-400 ease-in"
|
|
leave-from-class="opacity-100 translate-y-0 blur-none"
|
|
leave-to-class="opacity-0 translate-y-0 blur-xl"
|
|
>
|
|
<div v-if="hoverd" class="flex flex-col justify-between w-full">
|
|
<div
|
|
v-for="a in 1"
|
|
:key="a"
|
|
class="flex flex-row justify-evenly mt-10 gap-10"
|
|
>
|
|
<div>
|
|
<h1 class="font-mono text-sm font-light">
|
|
1-{{ selecteddata }} Header
|
|
</h1>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
Link to an {{ selecteddata }}
|
|
</p>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
Link to an another {{ selecteddata }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-mono text-sm font-light">
|
|
2-{{ selecteddata }} Header
|
|
</h1>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
Buy me a cup of {{ selecteddata }}
|
|
</p>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
I can't think of any {{ selecteddata }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-mono text-sm font-light">
|
|
3-{{ selecteddata }} Header
|
|
</h1>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
I guess it is {{ selecteddata }}
|
|
</p>
|
|
<p
|
|
class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
|
|
>
|
|
Not yet i {{ selecteddata }}
|
|
</p>
|
|
</div>
|
|
<div class="w-60 h-45 object-fill">
|
|
<img :src="pic" class="rounded-xl" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import pic from "/public/pic.jpg";
|
|
import { nextTick, ref } from "vue";
|
|
const selecteddata = ref("Product");
|
|
const hoverd = ref(false);
|
|
const randomnumber = ref(0);
|
|
async function ChangeState(text) {
|
|
selecteddata.value = text;
|
|
hoverd.value = false;
|
|
await nextTick;
|
|
hoverd.value = true;
|
|
}
|
|
</script>
|