134 lines
4.8 KiB
Vue
134 lines
4.8 KiB
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> |