515 lines
18 KiB
Vue
515 lines
18 KiB
Vue
<script lang="ts" setup>
|
||
// 创特App开发事业部数据
|
||
const appDevelopmentDivision = {
|
||
title: '创特App开发事业部',
|
||
subtitle: '帮助企业快速实现移动化',
|
||
description: '专业的移动应用开发团队，为企业提供全方位的移动化解决方案'
|
||
}
|
||
|
||
// APP开发核心价值
|
||
const coreValues = [
|
||
{
|
||
id: 1,
|
||
icon: 'i-lucide-smartphone',
|
||
title: '成熟的应用框架',
|
||
description: '丰富的应用模板，1000+移动应用开发，14款工具打造完整工作流，轻松完成复杂的业务应用'
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: 'i-lucide-globe',
|
||
title: '全场景的移动技术',
|
||
description: '全球最大的HTML5移动技术与服务提供商，从内容制作到上线发布，从商业实践到运营分析，实现完整的生态链支持和服务'
|
||
},
|
||
{
|
||
id: 3,
|
||
icon: 'i-lucide-message-circle',
|
||
title: '一次开发，多端适配',
|
||
description: '涵盖企业web app、独立app、微信服务号、微信企业号、其他轻应用，一次开发多端运行'
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: 'i-lucide-zap',
|
||
title: '极致的应用体验',
|
||
description: '媲美游戏的炫酷界面，性能极致优化，操控顺畅流利，响应式设计，多屏完美自适应'
|
||
},
|
||
{
|
||
id: 5,
|
||
icon: 'i-lucide-briefcase',
|
||
title: '一站式移动办公门户',
|
||
description: '单点登录，任务推送，业务处理和流程协作的多业务协同和应用集成环境，个性化定制，无需改变用户原有使用习惯'
|
||
},
|
||
{
|
||
id: 6,
|
||
icon: 'i-lucide-workflow',
|
||
title: '强大的工作流',
|
||
description: '支持多业务整合集成，全面的流程定义和扩展，多实例和流程模型让开发快捷高效'
|
||
},
|
||
{
|
||
id: 7,
|
||
icon: 'i-lucide-package',
|
||
title: '海量扩展资源',
|
||
description: '门户主题、风格样式、UI组件、后端服务组件、模板、多语言均可任意引入和定制扩展'
|
||
},
|
||
{
|
||
id: 8,
|
||
icon: 'i-lucide-code',
|
||
title: '主流技术标准',
|
||
description: '支持云端一体开发部署，HTML5国际技术标准，主流可靠，更可扩展业务逻辑和规则'
|
||
}
|
||
]
|
||
|
||
// 企业服务能力
|
||
const enterpriseServices = [
|
||
{
|
||
id: 1,
|
||
title: '战略咨询',
|
||
icon: 'i-lucide-lightbulb',
|
||
description: '专业的移动化战略规划与咨询服务'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '定制开发',
|
||
icon: 'i-lucide-settings',
|
||
description: '根据企业需求定制专属移动应用'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '运维服务',
|
||
icon: 'i-lucide-server',
|
||
description: '7×24小时专业运维保障服务'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '运营分发',
|
||
icon: 'i-lucide-share',
|
||
description: '多渠道应用分发与运营推广服务'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '商业分析',
|
||
icon: 'i-lucide-bar-chart',
|
||
description: '数据驱动的商业分析与决策支持'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '管理后台',
|
||
icon: 'i-lucide-monitor',
|
||
description: '功能完善的管理后台系统'
|
||
}
|
||
]
|
||
|
||
// 技术特性
|
||
const technicalProperties = [
|
||
{
|
||
id: 1,
|
||
title: '跨平台多适配',
|
||
description: '支持iOS、Android、Web等多平台统一开发'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '全通讯能力服务',
|
||
description: '集成多种通讯方式，保障信息传递畅通'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '统一业务流程平台',
|
||
description: '标准化业务流程，提升工作效率'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '数据安全策略',
|
||
description: '多层次安全防护，保障数据安全'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '完备的管控体系',
|
||
description: '完善的权限管理和系统监控'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '云端一体，随需而用',
|
||
description: '云原生架构，弹性扩展，按需使用'
|
||
}
|
||
]
|
||
|
||
// 统计数据
|
||
const statistics = [
|
||
{
|
||
id: 1,
|
||
number: '1000+',
|
||
label: '1000+移动应用开发',
|
||
description: '丰富的移动应用开发经验'
|
||
},
|
||
{
|
||
id: 2,
|
||
number: '300+',
|
||
label: '服务于300+企业',
|
||
description: '为众多企业提供专业服务'
|
||
},
|
||
{
|
||
id: 3,
|
||
number: '40+',
|
||
label: '40+移动战略合作伙伴',
|
||
description: '广泛的合作伙伴网络'
|
||
},
|
||
{
|
||
id: 4,
|
||
number: '100',
|
||
label: 'TOP100开发合作商',
|
||
description: '行业领先的开发服务商'
|
||
}
|
||
]
|
||
|
||
// 设备展示数据
|
||
const deviceShowcase = [
|
||
{
|
||
id: 1,
|
||
type: 'desktop',
|
||
title: '桌面应用',
|
||
image: 'https://picsum.photos/400/300?random=desktop',
|
||
description: '企业级桌面应用解决方案'
|
||
},
|
||
{
|
||
id: 2,
|
||
type: 'mobile',
|
||
title: '移动应用',
|
||
image: 'https://picsum.photos/400/300?random=mobile',
|
||
description: '原生移动应用开发'
|
||
},
|
||
{
|
||
id: 3,
|
||
type: 'tablet',
|
||
title: '平板应用',
|
||
image: 'https://picsum.photos/400/300?random=tablet',
|
||
description: '平板设备优化应用'
|
||
},
|
||
{
|
||
id: 4,
|
||
type: 'watch',
|
||
title: '智能手表',
|
||
image: 'https://picsum.photos/400/300?random=watch',
|
||
description: '可穿戴设备应用开发'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||
<!-- Hero Section - 创特App开发事业部 -->
|
||
<section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
|
||
<!-- 背景 -->
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||
<!-- 背景纹理 -->
|
||
<div class="absolute inset-0 opacity-10">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 文字内容 -->
|
||
<div class="text-white">
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||
{{ appDevelopmentDivision.title }}
|
||
</h1>
|
||
<p class="text-2xl md:text-3xl font-semibold text-blue-200 dark:text-blue-300 mb-6">
|
||
{{ appDevelopmentDivision.subtitle }}
|
||
</p>
|
||
<p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 leading-relaxed">
|
||
{{ appDevelopmentDivision.description }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 手机展示 -->
|
||
<div class="relative flex justify-center items-center">
|
||
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
|
||
<!-- 手机外壳 -->
|
||
<div class="absolute inset-0 bg-black rounded-3xl p-2 shadow-2xl">
|
||
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
|
||
<!-- 状态栏 -->
|
||
<div class="h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-between px-4">
|
||
<div class="text-xs text-gray-600 dark:text-gray-300">4:21 PM</div>
|
||
<div class="flex items-center space-x-1">
|
||
<div class="w-4 h-2 bg-green-500 rounded-sm"/>
|
||
<div class="w-4 h-2 bg-yellow-500 rounded-sm"/>
|
||
<div class="w-4 h-2 bg-red-500 rounded-sm"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 应用界面 -->
|
||
<div class="p-6 h-full bg-gradient-to-b from-red-50 to-white dark:from-gray-800 dark:to-gray-700">
|
||
<!-- Logo区域 -->
|
||
<div class="text-center mb-8">
|
||
<div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<span class="text-white font-bold text-2xl">K</span>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">LOGIN</h3>
|
||
</div>
|
||
|
||
<!-- 登录表单 -->
|
||
<div class="space-y-4">
|
||
<div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
|
||
<input
|
||
class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
|
||
placeholder="Username or Email"
|
||
type="text"
|
||
>
|
||
</div>
|
||
<div class="bg-gray-100 dark:bg-gray-600 rounded-lg p-3">
|
||
<input
|
||
class="w-full bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400"
|
||
placeholder="Password"
|
||
type="password"
|
||
>
|
||
</div>
|
||
<button
|
||
class="w-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 py-3 rounded-lg font-semibold">
|
||
LOGIN
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 底部链接 -->
|
||
<div class="mt-6 text-center space-y-2">
|
||
<a class="text-sm text-gray-600 dark:text-gray-400" href="#">Forgot Password?</a>
|
||
<div>
|
||
<a class="text-sm text-gray-600 dark:text-gray-400" href="#">CREATE ACCOUNT</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- APP开发的核心价值 -->
|
||
<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">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
APP开发的核心价值
|
||
</h2>
|
||
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"/>
|
||
</div>
|
||
|
||
<!-- 核心价值网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||
<div
|
||
v-for="value in coreValues"
|
||
:key="value.id"
|
||
class="group text-center p-6 bg-gray-50 dark:bg-gray-700 rounded-2xl hover:bg-white dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
|
||
>
|
||
<!-- 图标 -->
|
||
<div
|
||
class="w-16 h-16 mx-auto mb-4 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center group-hover:bg-blue-100 dark:group-hover:bg-blue-900 transition-colors duration-300">
|
||
<UIcon
|
||
:name="value.icon"
|
||
class="w-8 h-8 text-gray-600 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 标题 -->
|
||
<h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
|
||
{{ value.title }}
|
||
</h3>
|
||
|
||
<!-- 描述 -->
|
||
<p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ value.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-4">
|
||
我们能为企业快速实现APP的
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- 设备展示 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mb-16">
|
||
<div
|
||
v-for="device in deviceShowcase"
|
||
:key="device.id"
|
||
class="group text-center"
|
||
>
|
||
<div class="relative mb-6">
|
||
<img
|
||
:alt="device.title"
|
||
:src="device.image"
|
||
class="w-full h-48 object-cover rounded-2xl shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-105"
|
||
>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"/>
|
||
<div class="absolute bottom-4 left-4 right-4">
|
||
<h3 class="text-white font-semibold text-lg">{{ device.title }}</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300">{{ device.description }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业服务 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||
<div
|
||
v-for="service in enterpriseServices"
|
||
:key="service.id"
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
|
||
>
|
||
<div class="flex items-center mb-4">
|
||
<div
|
||
class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-800 transition-colors duration-300">
|
||
<UIcon
|
||
:name="service.icon"
|
||
class="w-6 h-6 text-blue-600 dark:text-blue-400"
|
||
/>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
|
||
{{ service.title }}
|
||
</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ service.description }}
|
||
</p>
|
||
</div>
|
||
</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">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
技术特性
|
||
</h2>
|
||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300">
|
||
TECHNICAL PROPERTIES
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 技术特性网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||
<div
|
||
v-for="property in technicalProperties"
|
||
:key="property.id"
|
||
class="group bg-gray-900 dark:bg-gray-700 text-white rounded-2xl p-6 hover:bg-gray-800 dark:hover:bg-gray-600 transition-all duration-300 hover:shadow-lg"
|
||
>
|
||
<h3 class="text-xl font-semibold mb-3 group-hover:text-blue-400 transition-colors duration-300">
|
||
{{ property.title }}
|
||
</h3>
|
||
<p class="text-gray-300 dark:text-gray-200 leading-relaxed">
|
||
{{ property.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-4">
|
||
简化IT，连接一切
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- 统计数据 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="stat in statistics"
|
||
:key="stat.id"
|
||
class="text-center group"
|
||
>
|
||
<!-- 数字展示 -->
|
||
<div class="relative mb-6">
|
||
<div class="w-32 h-32 mx-auto relative">
|
||
<!-- 半圆环 -->
|
||
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
|
||
<circle
|
||
class="text-blue-200 dark:text-blue-800"
|
||
cx="50"
|
||
cy="50"
|
||
fill="none"
|
||
r="40"
|
||
stroke="currentColor"
|
||
stroke-width="4"
|
||
/>
|
||
<circle
|
||
class="text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
|
||
cx="50"
|
||
cy="50"
|
||
fill="none"
|
||
r="40"
|
||
stroke="currentColor"
|
||
stroke-dasharray="251.2"
|
||
stroke-dashoffset="125.6"
|
||
stroke-width="4"
|
||
/>
|
||
</svg>
|
||
<!-- 数字 -->
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<span
|
||
class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
|
||
{{ stat.number }}
|
||
</span>
|
||
</div>
|
||
</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">
|
||
{{ stat.label }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
{{ stat.description }}
|
||
</p>
|
||
</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-4 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.grid-cols-4 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |