mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 11:43:04 +08:00
39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex flex-col space-y-2 p-5" :class="{ 'hovered': isHovered }" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
|
|
<h5 class="mt-44 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="isHovered">{{project.title}}</h5>
|
|
<div class="flex items-center">
|
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400" v-if="isHovered">{{project.intro}}</p>
|
|
<button v-if="isHovered" @click="handleButtonClick" class="inline-flex items-center bg-sky-200 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
|
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
props:{
|
|
project:{
|
|
type:Object,
|
|
required:true,
|
|
},
|
|
},
|
|
data(){
|
|
return{
|
|
isHovered:false,
|
|
};
|
|
},
|
|
methods:{
|
|
handleMouseOver(){
|
|
this.isHovered = true;
|
|
},
|
|
handleMouseLeave(){
|
|
this.isHovered = false;
|
|
},
|
|
handleButtonClick(){
|
|
console.log('Button Clicked');
|
|
},
|
|
},
|
|
};
|
|
</script> |