ct/app/components/index/item2.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>