152 lines
5.1 KiB
Vue
152 lines
5.1 KiB
Vue
<template>
|
||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||
<div class="container mx-auto px-4 max-w-6xl">
|
||
<!-- 页面标题 -->
|
||
<div class="text-center mb-12 px-4">
|
||
<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 max-w-3xl mx-auto">
|
||
通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 场景应用网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
|
||
<div
|
||
v-for="(scene, index) in scenes"
|
||
:key="index"
|
||
class="group relative cursor-pointer"
|
||
@mouseenter="activeScene = index"
|
||
@mouseleave="activeScene = 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 items-center">
|
||
<!-- 图标区域 -->
|
||
<div :class="scene.bgColor" class="w-16 h-16 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||
<UIcon :class="scene.iconColor" :name="scene.icon" class="w-8 h-8"/>
|
||
</div>
|
||
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
|
||
{{ scene.title }}
|
||
</h3>
|
||
|
||
<!-- 设备列表 -->
|
||
<ul class="space-y-2 text-center ">
|
||
<li
|
||
v-for="(device, deviceIndex) in scene.devices" :key="deviceIndex"
|
||
class="text-gray-600 dark:text-gray-400 text-sm"
|
||
>
|
||
{{ device }}
|
||
</li>
|
||
<li class="text-gray-600 dark:text-gray-400 text-sm">...</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 悬浮详情卡片 -->
|
||
<div v-if="activeScene === index" class="absolute top-0 left-0 h-full z-10 flex flex-col items-center">
|
||
<div :class="scene.hoverBgColor" class="rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||
<h3 class="text-xl font-semibold mb-4">{{ scene.title }}</h3>
|
||
<p class="text-sm opacity-90 mb-6 leading-relaxed">
|
||
{{ scene.description }}
|
||
</p>
|
||
|
||
<UButton
|
||
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 activeScene = ref(null)
|
||
|
||
const scenes = [
|
||
{
|
||
title: '智能家居',
|
||
icon: 'i-heroicons-home-20-solid',
|
||
bgColor: 'bg-red-100 dark:bg-red-900/20',
|
||
iconColor: 'text-red-600 dark:text-red-400',
|
||
hoverBgColor: 'bg-red-600 dark:bg-red-700',
|
||
devices: ['智能门锁', '智能空调', '智能电饭煲', '智能窗帘'],
|
||
description: '通过智能硬件与软件系统集成，实现家居设备的智能化控制和管理，提升生活品质和能源效率。'
|
||
},
|
||
{
|
||
title: '智慧出行',
|
||
icon: 'i-heroicons-truck-20-solid',
|
||
bgColor: 'bg-blue-100 dark:bg-blue-900/20',
|
||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||
hoverBgColor: 'bg-blue-600 dark:bg-blue-700',
|
||
devices: ['共享单车', '共享汽车', '共享滑板车', '共享电动车'],
|
||
description: '提供多样化的共享交通工具解决方案，优化城市出行体验，促进绿色环保和交通效率提升。'
|
||
},
|
||
{
|
||
title: '智慧医疗',
|
||
icon: 'i-heroicons-heart-20-solid',
|
||
bgColor: 'bg-green-100 dark:bg-green-900/20',
|
||
iconColor: 'text-green-600 dark:text-green-400',
|
||
hoverBgColor: 'bg-green-600 dark:bg-green-700',
|
||
devices: ['共享陪护床', '智能安防', '共享打印机', '共享充电宝'],
|
||
description: '为医疗机构提供智能化设备和共享服务解决方案，改善患者体验，提升医疗服务质量和管理效率。'
|
||
},
|
||
{
|
||
title: '智慧园区',
|
||
icon: 'i-heroicons-building-office-20-solid',
|
||
bgColor: 'bg-purple-100 dark:bg-purple-900/20',
|
||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||
hoverBgColor: 'bg-purple-600 dark:bg-purple-700',
|
||
devices: ['智能自提柜', '共享健身房', '共享洗衣机', '智能门禁'],
|
||
description: '为园区提供智能化基础设施和共享服务，打造高效、便捷、智能的园区生活环境和工作环境。'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 确保所有卡片高度一致 */
|
||
.group {
|
||
min-height: 320px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 1024px) {
|
||
.grid {
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.group {
|
||
min-height: 300px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.group {
|
||
min-height: 280px;
|
||
}
|
||
}
|
||
|
||
/* 确保卡片不贴边 */
|
||
.container {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.grid {
|
||
margin-left: -0.5rem;
|
||
margin-right: -0.5rem;
|
||
}
|
||
</style> |