102 lines
2.6 KiB
Vue
102 lines
2.6 KiB
Vue
<template>
|
|
<div class="relative w-full h-full perspective-1000">
|
|
<div
|
|
:class="{ 'rotate-y-180': isFlipped }"
|
|
class="relative w-full h-full transition-transform duration-600 transform-style-preserve-3d"
|
|
@mouseenter="isFlipped = true"
|
|
@mouseleave="isFlipped = false"
|
|
>
|
|
<!-- 正面内容 -->
|
|
<div
|
|
class="absolute inset-0 w-full h-full bg-white rounded-lg p-5 flex flex-col justify-center items-center backface-hidden">
|
|
<div class="h-16 flex justify-center items-center">
|
|
<img :src="iconSrc" alt="" class=" h-16">
|
|
</div>
|
|
<p class="text-black text-xl mt-2.5 font-medium">
|
|
{{ title }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 背面内容 -->
|
|
<div
|
|
class="absolute inset-0 w-full h-full bg-gradient-to-br from-teal-600 to-teal-800 rounded-lg p-5 backface-hidden transform rotate-y-180">
|
|
<NuxtLink
|
|
:to="linkUrl"
|
|
class="block h-full no-underline text-inherit"
|
|
>
|
|
<div class="text-left">
|
|
<h5 class="text-white text-xl font-bold m-0">{{ title }}</h5>
|
|
<div class="h-0.5 bg-white w-10 my-4"/>
|
|
</div>
|
|
<div class="text-white text-sm leading-relaxed text-left opacity-80 line-clamp-3">
|
|
{{ description }}
|
|
</div>
|
|
<div
|
|
class="text-white text-sm text-right w-full mt-1 opacity-90 transition-opacity duration-300 group-hover:opacity-100 group-hover:underline">
|
|
查看详情 >
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '智慧蜂设'
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务，实现智能化养殖，提高管理效率，节省成本。设备先进，质量和服务双保障。'
|
|
},
|
|
iconSrc: {
|
|
type: String,
|
|
default: '/img/index/s1.svg'
|
|
},
|
|
linkUrl: {
|
|
type: String,
|
|
default: '/product/beenFactory'
|
|
}
|
|
})
|
|
|
|
const isFlipped = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.transform-style-preserve-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.rotate-y-180 {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.backface-hidden {
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.rotate-y-180 {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.perspective-1000 {
|
|
perspective: none;
|
|
}
|
|
|
|
.transform-style-preserve-3d {
|
|
transform-style: flat;
|
|
}
|
|
|
|
.rotate-y-180 {
|
|
transform: none;
|
|
}
|
|
}
|
|
</style> |