286 lines
10 KiB
Vue
286 lines
10 KiB
Vue
<script lang="ts" setup>
|
||
// 品质保证数据
|
||
const qualityAssurance = {
|
||
title: '品质保证 源码交付',
|
||
year: '2016',
|
||
company: 'New Yu Xi',
|
||
description: '专业的软件开发团队，提供高品质的源码交付服务'
|
||
}
|
||
|
||
// 五大技术核心
|
||
const coreTechnologies = [
|
||
{
|
||
id: 1,
|
||
title: 'Web开发',
|
||
icon: 'i-lucide-monitor',
|
||
description: '专业的Web应用开发，支持各种现代框架'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'iOS APP',
|
||
icon: 'i-lucide-smartphone',
|
||
description: '原生iOS应用开发，App Store上架服务'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'Android APP',
|
||
icon: 'i-lucide-smartphone',
|
||
description: '原生Android应用开发，Google Play上架服务'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '微信开发',
|
||
icon: 'i-lucide-message-circle',
|
||
description: '微信小程序、公众号、企业微信开发'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: 'HTML5开发',
|
||
icon: 'i-lucide-globe',
|
||
description: '跨平台HTML5应用开发，响应式设计'
|
||
}
|
||
]
|
||
|
||
// 七大保障
|
||
const sevenGuarantees = [
|
||
{
|
||
id: 1,
|
||
chineseTitle: '前瞻',
|
||
englishTitle: 'prospect',
|
||
image: 'https://picsum.photos/400/300?random=prospect',
|
||
description: '平台系统是管理系统的一部分，在系统设计时尽可能照顾各方面的需要，在实现这些功能的时候，考虑下一步发展规划'
|
||
},
|
||
{
|
||
id: 2,
|
||
chineseTitle: '安全',
|
||
englishTitle: 'safe',
|
||
image: 'https://picsum.photos/400/300?random=safe',
|
||
description: '有健全的安全防范措施，从硬件、软件以及行政管理等方面严格管理，保证产品源代码安全'
|
||
},
|
||
{
|
||
id: 3,
|
||
chineseTitle: '实用',
|
||
englishTitle: 'practical',
|
||
image: 'https://picsum.photos/400/300?random=practical',
|
||
description: '打造高质量产品，对于各个场合都会有很强的实用性'
|
||
},
|
||
{
|
||
id: 4,
|
||
chineseTitle: '可靠',
|
||
englishTitle: 'reliable',
|
||
image: 'https://picsum.photos/400/300?random=reliable',
|
||
description: '在网络设计时关键部位有高可靠性设备，对于重要的网络节点采用先进的高可靠性技术'
|
||
},
|
||
{
|
||
id: 5,
|
||
chineseTitle: '开放',
|
||
englishTitle: 'to open up',
|
||
image: 'https://picsum.photos/400/300?random=open',
|
||
description: '网络系统开放性要好，支持多网络协议'
|
||
},
|
||
{
|
||
id: 6,
|
||
chineseTitle: '标准',
|
||
englishTitle: 'standard',
|
||
image: 'https://picsum.photos/400/300?random=standard',
|
||
description: '在网络设备和系统平台选型时，符合国际网络标准及工业标准，使系统的硬件环境、通信环境、软件环境相互间依赖减至最小，使其各自发挥自身优势'
|
||
},
|
||
{
|
||
id: 7,
|
||
chineseTitle: '先进',
|
||
englishTitle: 'advanced',
|
||
image: 'https://picsum.photos/400/300?random=advanced',
|
||
description: '采用国际先进的互联网技术采用国际先进的网络技术模式采用国际先进的技术路线采用国际先进的体系结构'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||
<!-- Hero Section - 品质保证 源码交付 -->
|
||
<section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
|
||
<!-- 背景 -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||
<!-- 星空效果 -->
|
||
<div class="absolute inset-0">
|
||
<div
|
||
v-for="i in 50"
|
||
:key="i"
|
||
class="absolute w-1 h-1 bg-white rounded-full animate-pulse"
|
||
:style="{
|
||
left: Math.random() * 100 + '%',
|
||
top: Math.random() * 100 + '%',
|
||
animationDelay: Math.random() * 3 + 's'
|
||
}"
|
||
></div>
|
||
</div>
|
||
|
||
<!-- 地球效果 -->
|
||
<div class="absolute right-8 top-1/2 transform -translate-y-1/2 w-64 h-64 md:w-80 md:h-80">
|
||
<div class="w-full h-full rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-500 dark:to-blue-700 relative overflow-hidden">
|
||
<!-- 地球纹理 -->
|
||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
|
||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
|
||
<!-- 城市灯光效果 -->
|
||
<div
|
||
v-for="i in 20"
|
||
:key="i"
|
||
class="absolute w-1 h-1 bg-white rounded-full animate-ping"
|
||
:style="{
|
||
left: Math.random() * 100 + '%',
|
||
top: Math.random() * 100 + '%',
|
||
animationDelay: Math.random() * 2 + 's'
|
||
}"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center text-white">
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
|
||
{{ qualityAssurance.title }}
|
||
</h1>
|
||
<div class="text-6xl md:text-7xl lg:text-8xl font-bold text-blue-300 dark:text-blue-400 mb-4">
|
||
{{ qualityAssurance.year }}
|
||
</div>
|
||
<div class="text-2xl md:text-3xl font-semibold text-blue-200 dark:text-blue-300">
|
||
{{ qualityAssurance.company }}
|
||
</div>
|
||
<p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 mt-6 max-w-2xl mx-auto">
|
||
{{ qualityAssurance.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 五大技术核心 -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<div class="inline-block w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full mb-4"></div>
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2">
|
||
五大技术核心
|
||
</h2>
|
||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300">
|
||
Five core technology
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 技术展示 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 md:gap-8">
|
||
<div
|
||
v-for="tech in coreTechnologies"
|
||
:key="tech.id"
|
||
class="group text-center"
|
||
>
|
||
<!-- 圆形图标 -->
|
||
<div class="relative mx-auto mb-6 w-24 h-24 md:w-28 md:h-28 lg:w-32 lg:h-32">
|
||
<div class="w-full h-full rounded-full border-2 border-blue-200 dark:border-blue-700 bg-white dark:bg-gray-700 flex items-center justify-center group-hover:border-blue-500 dark:group-hover:border-blue-400 transition-all duration-300 group-hover:scale-110">
|
||
<UIcon
|
||
:name="tech.icon"
|
||
class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标题 -->
|
||
<h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
|
||
{{ tech.title }}
|
||
</h3>
|
||
|
||
<!-- 描述 -->
|
||
<p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ tech.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 七大保障 -->
|
||
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- 标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2">
|
||
七大保障
|
||
</h2>
|
||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-4">
|
||
Seven guarantee
|
||
</p>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
|
||
</div>
|
||
|
||
<!-- 保障卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
|
||
<div
|
||
v-for="(guarantee, index) in sevenGuarantees"
|
||
:key="guarantee.id"
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
|
||
:class="index === 6 ? 'md:col-span-2 lg:col-span-1 xl:col-span-1' : ''"
|
||
>
|
||
<!-- 图片区域 -->
|
||
<div class="relative h-48 md:h-56 overflow-hidden">
|
||
<img
|
||
:src="guarantee.image"
|
||
:alt="guarantee.chineseTitle"
|
||
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||
>
|
||
<!-- 叠加层 -->
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
|
||
|
||
<!-- 标题 -->
|
||
<div class="absolute bottom-4 left-4 right-4">
|
||
<h3 class="text-2xl md:text-3xl font-bold text-white mb-1">
|
||
{{ guarantee.chineseTitle }}
|
||
</h3>
|
||
<p class="text-sm md:text-base text-blue-200 italic">
|
||
{{ guarantee.englishTitle }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 描述区域 -->
|
||
<div class="p-6">
|
||
<p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ guarantee.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画 */
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.grid-cols-5 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.grid-cols-5 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |