ct/app/components/index/item4.vue

<template>
  <div class="bg-white dark:bg-gray-900 py-16">
    <div class="container mx-auto px-4 max-w-6xl">
      <!-- 页面标题 -->
      <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-4 gap-8">
        <div
            v-for="(platform, index) in platforms"
            :key="index"
            class="group relative cursor-pointer"
            @mouseenter="activePlatform = index"
            @mouseleave="activePlatform = 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="w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-xl flex items-center justify-center mb-6 relative">
              <!-- 六边形装饰 -->
              <div class="absolute inset-0 border-2 border-red-200 dark:border-red-800 rounded-xl rotate-45"/>
              <!-- 平台图标 -->
              <UIcon :name="platform.icon" class="w-10 h-10 text-red-600 dark:text-red-400 z-10"/>
            </div>

            <!-- 平台名称 -->
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
              {{ platform.title }}
            </h3>

            <!-- 平台描述 -->
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed flex-1">
              {{ platform.description }}
            </p>
          </div>

          <!-- 悬浮详情卡片 -->
          <div v-if="activePlatform === index" class="absolute top-0 left-0 w-full h-full z-10">
            <div
                class="bg-red-600 dark:bg-red-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col items-center">
              <!-- 悬浮图标 -->
              <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                <UIcon :name="platform.icon" class="w-8 h-8 text-white"/>
              </div>

              <h3 class="text-xl font-semibold text-center mb-4">{{ platform.title }}</h3>
              <p class="text-sm opacity-90 text-center mb-6 leading-relaxed flex-1">
                {{ platform.detailedDescription }}
              </p>

              <UButton
                  class="w-full border-white/30 hover:bg-white/10 transition-colors"
                  color="white"
                  size="sm"
                  variant="outline"
              >
                立即咨询
              </UButton>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const activePlatform = ref(null)

const platforms = [
  {
    title: 'iOS开发',
    icon: 'i-simple-icons-apple',
    description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
    detailedDescription: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。我们拥有丰富的iOS开发经验，能够为企业提供定制化的移动应用解决方案。'
  },
  {
    title: 'Android开发',
    icon: 'i-simple-icons-android',
    description: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。',
    detailedDescription: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。覆盖各类Android设备，确保应用在不同屏幕尺寸和系统版本上的完美运行。'
  },
  {
    title: '微信开发',
    icon: 'i-simple-icons-wechat',
    description: '针对企业需求提供专业微信公众平台开发服务。',
    detailedDescription: '针对企业需求提供专业微信公众平台开发服务。包括公众号、小程序、企业微信等微信生态产品的定制开发与集成。'
  },
  {
    title: '小程序开发',
    icon: 'i-simple-icons-miniprogram',
    description: '无需安装APP，就可以带来更流畅快速的体验。',
    detailedDescription: '无需安装APP，就可以带来更流畅快速的体验。提供轻量级应用解决方案，降低用户使用门槛，提升用户体验。'
  }
]
</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;
  }
}
</style>