147 lines
5.0 KiB
Vue
147 lines
5.0 KiB
Vue
<template>
|
||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||
<div class="container mx-auto px-4 max-w-8xl">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||
物联网解决方案
|
||
|
||
</h1>
|
||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||
针对不同类型使用场景需求，量身定制解决方案
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 共享服务网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
|
||
<div
|
||
v-for="(service, index) in services"
|
||
:key="index"
|
||
class="group relative cursor-pointer"
|
||
@mouseenter="activeCard = index"
|
||
@mouseleave="activeCard = null"
|
||
>
|
||
<!-- 默认卡片 -->
|
||
<div
|
||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col">
|
||
<!-- 图标（悬浮时隐藏） -->
|
||
<div
|
||
class="w-16 h-16 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center mb-4 mx-auto transition-opacity duration-300 group-hover:opacity-0">
|
||
<UIcon :name="service.icon" class="w-8 h-8 text-primary-600 dark:text-primary-400"/>
|
||
</div>
|
||
|
||
<!-- 主要内容 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center mb-2">
|
||
{{ service.title }}
|
||
</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center line-clamp-2">
|
||
{{ service.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮详情卡片 -->
|
||
<div v-if="activeCard === index" class="absolute top-0 left-0 w-full h-full z-10">
|
||
<div class="bg-primary-600 dark:bg-primary-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||
<div class="flex-1">
|
||
<h3 class="text-lg font-semibold mb-4">{{ service.title }}</h3>
|
||
<p class="text-sm opacity-90 mb-4 leading-relaxed">
|
||
{{ service.detail }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 查看详情按钮 -->
|
||
<UButton
|
||
:to="service.link"
|
||
class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
|
||
color="white"
|
||
size="sm"
|
||
variant="outline"
|
||
>
|
||
查看详情
|
||
</UButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const activeCard = ref(null)
|
||
|
||
const services = [
|
||
{
|
||
title: '共享陪护床',
|
||
icon: 'i-lucide-bed',
|
||
description: '解决医院陪护家属未配有床位，休息不便的问题...',
|
||
detail: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同时，给患者家属更舒适的修养环境。',
|
||
link: '/solutions/bed'
|
||
},
|
||
{
|
||
title: '共享单车',
|
||
icon: 'i-lucide-bike',
|
||
description: '解决大型园区或短距离出行麻烦，提高出行效率...',
|
||
detail: '解决大型园区或短距离出行麻烦，提高出行效率，为校园、园区、社区提供便捷的绿色出行解决方案。',
|
||
link: '/solutions/bike'
|
||
},
|
||
{
|
||
title: '共享电单车',
|
||
icon: 'i-lucide-zap',
|
||
description: '解决人们最后三公里的出行，促进环保和健康出行...',
|
||
detail: '解决人们最后三公里的出行，促进环保和健康出行，为城市短途交通提供智能、便捷的电动助力解决方案。',
|
||
link: '/solutions/ebike'
|
||
},
|
||
{
|
||
title: '共享电动车',
|
||
icon: 'i-lucide-car',
|
||
description: '电动车相比续航能力更强，适用于各种出行场景...',
|
||
detail: '电动车相比续航能力更强，适用于各种出行场景，为城市中长途出行提供高效、可靠的电动交通工具。',
|
||
link: '/sharedSolutions/eBike'
|
||
},
|
||
{
|
||
title: '共享滑板车',
|
||
icon: 'i-lucide-scooter',
|
||
description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合...',
|
||
detail: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合现代城市微出行需求，为年轻人提供时尚、灵活的出行选择。',
|
||
link: '/solutions/skateboard'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.line-clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 确保所有卡片高度一致 */
|
||
.group {
|
||
min-height: 260px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 1024px) {
|
||
.grid {
|
||
gap: 1rem;
|
||
}
|
||
|
||
.group {
|
||
min-height: 220px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.group {
|
||
min-height: 200px;
|
||
}
|
||
}
|
||
</style> |