WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

软件应用开发-app

Browse Source
This commit is contained in:
WindowBird 2025-10-07 15:24:33 +08:00
parent 347cc64a59
commit ac0aa53392
2 changed files with 528 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

515
app/components/softwareDevelopment/app/index.vue Normal file
View File

@ -0,0 +1,515 @@
<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>

13
app/pages/softwareDevelopment/app.vue Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts" setup>
</script>
<template>
<view>
<SoftwareDevelopmentApp/>
</view>
</template>
<style scoped>
</style>