431 lines
15 KiB
Vue
431 lines
15 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 软件应用开发页面
|
||
* 基于玉犀科技官网的软件应用开发内容
|
||
*/
|
||
|
||
// 页面SEO配置
|
||
useSeoMeta({
|
||
title: '软件应用开发 - 玉犀科技',
|
||
description: '玉犀科技提供微信开发、APP开发、小程序开发等软件应用开发服务，专业的移动应用解决方案',
|
||
keywords: '微信开发,APP开发,小程序开发,移动应用,软件开发,玉犀科技',
|
||
robots: 'index, follow'
|
||
})
|
||
|
||
// 软件开发服务数据
|
||
const softwareServices = ref([
|
||
{
|
||
id: 'wechat',
|
||
title: '微信开发',
|
||
subtitle: '定制开发可使您的微信公众平台更突出价值',
|
||
description: '针对企业需求提供专业微信公众平台开发服务，包括公众号开发、小程序开发、企业微信开发等，帮助企业实现数字化转型。',
|
||
features: [
|
||
'公众号开发',
|
||
'小程序开发',
|
||
'企业微信开发',
|
||
'微信支付集成',
|
||
'用户管理系统',
|
||
'数据分析统计'
|
||
],
|
||
technologies: ['Vue.js', 'React', 'Node.js', '微信API'],
|
||
image: 'https://picsum.photos/800/600?random=wechat-dev',
|
||
link: '/yuxi/software-development/wechat'
|
||
},
|
||
{
|
||
id: 'app',
|
||
title: 'APP开发',
|
||
subtitle: '小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验',
|
||
description: '提供高效的APP开发、手机APP制作与APP管理等服务，支持iOS和Android双平台开发，为用户提供优质的移动应用体验。',
|
||
features: [
|
||
'iOS原生开发',
|
||
'Android原生开发',
|
||
'跨平台开发',
|
||
'UI/UX设计',
|
||
'应用商店发布',
|
||
'版本更新管理'
|
||
],
|
||
technologies: ['Swift', 'Kotlin', 'Flutter', 'React Native'],
|
||
image: 'https://picsum.photos/800/600?random=app-dev',
|
||
link: '/yuxi/software-development/app'
|
||
},
|
||
{
|
||
id: 'miniprogram',
|
||
title: '小程序开发',
|
||
subtitle: '提供高效的APP开发、手机APP制作与APP管理等服务',
|
||
description: '无需安装APP，就可以带来更流畅快速的体验。小程序开发服务包括微信小程序、支付宝小程序、百度小程序等多平台支持。',
|
||
features: [
|
||
'微信小程序',
|
||
'支付宝小程序',
|
||
'百度小程序',
|
||
'字节跳动小程序',
|
||
'QQ小程序',
|
||
'快应用开发'
|
||
],
|
||
technologies: ['微信小程序框架', 'uni-app', 'Taro', '原生开发'],
|
||
image: 'https://picsum.photos/800/600?random=miniprogram-dev',
|
||
link: '/yuxi/software-development/miniprogram'
|
||
}
|
||
])
|
||
|
||
// 开发流程
|
||
const developmentProcess = ref([
|
||
{
|
||
step: 1,
|
||
title: '需求分析',
|
||
description: '深入了解客户需求，制定详细的开发方案',
|
||
icon: 'i-lucide-search'
|
||
},
|
||
{
|
||
step: 2,
|
||
title: 'UI设计',
|
||
description: '专业的UI/UX设计，打造优秀的用户体验',
|
||
icon: 'i-lucide-palette'
|
||
},
|
||
{
|
||
step: 3,
|
||
title: '开发实现',
|
||
description: '采用先进技术栈，高质量代码实现',
|
||
icon: 'i-lucide-code'
|
||
},
|
||
{
|
||
step: 4,
|
||
title: '测试验收',
|
||
description: '全面测试，确保产品质量和稳定性',
|
||
icon: 'i-lucide-check-circle'
|
||
},
|
||
{
|
||
step: 5,
|
||
title: '上线发布',
|
||
description: '协助应用商店发布，确保顺利上线',
|
||
icon: 'i-lucide-upload'
|
||
},
|
||
{
|
||
step: 6,
|
||
title: '运维支持',
|
||
description: '提供持续的技术支持和维护服务',
|
||
icon: 'i-lucide-settings'
|
||
}
|
||
])
|
||
|
||
// 技术栈
|
||
const techStack = ref([
|
||
{
|
||
category: '前端技术',
|
||
technologies: ['Vue.js', 'React', 'Angular', 'TypeScript', 'JavaScript', 'HTML5', 'CSS3']
|
||
},
|
||
{
|
||
category: '移动开发',
|
||
technologies: ['iOS (Swift)', 'Android (Kotlin)', 'Flutter', 'React Native', 'uni-app', 'Taro']
|
||
},
|
||
{
|
||
category: '后端技术',
|
||
technologies: ['Node.js', 'Python', 'Java', 'PHP', 'Go', 'MySQL', 'MongoDB']
|
||
},
|
||
{
|
||
category: '云服务',
|
||
technologies: ['阿里云', '腾讯云', 'AWS', '微信云开发', '小程序云函数']
|
||
}
|
||
])
|
||
|
||
// 服务优势
|
||
const serviceAdvantages = ref([
|
||
{
|
||
title: '专业团队',
|
||
description: '拥有丰富的移动应用开发经验，技术实力雄厚',
|
||
icon: 'i-lucide-users'
|
||
},
|
||
{
|
||
title: '快速交付',
|
||
description: '标准化的开发流程，确保项目按时高质量交付',
|
||
icon: 'i-lucide-zap'
|
||
},
|
||
{
|
||
title: '持续支持',
|
||
description: '提供长期的技术支持和维护服务',
|
||
icon: 'i-lucide-headphones'
|
||
},
|
||
{
|
||
title: '成本优化',
|
||
description: '合理的价格体系，为客户提供高性价比的服务',
|
||
icon: 'i-lucide-dollar-sign'
|
||
}
|
||
])
|
||
|
||
// 项目案例
|
||
const projectCases = ref([
|
||
{
|
||
title: '共享单车APP',
|
||
description: '为某共享单车公司开发的移动应用，支持扫码开锁、定位导航、支付结算等功能',
|
||
platform: 'iOS + Android',
|
||
users: '100万+',
|
||
image: 'https://picsum.photos/400/300?random=bike-app'
|
||
},
|
||
{
|
||
title: '企业微信小程序',
|
||
description: '为企业开发的内部管理小程序，实现员工管理、考勤打卡、审批流程等功能',
|
||
platform: '微信小程序',
|
||
users: '5000+',
|
||
image: 'https://picsum.photos/400/300?random=enterprise-miniprogram'
|
||
},
|
||
{
|
||
title: '电商购物APP',
|
||
description: '完整的电商购物应用，包含商品展示、购物车、支付、订单管理等完整功能',
|
||
platform: 'iOS + Android',
|
||
users: '50万+',
|
||
image: 'https://picsum.photos/400/300?random=ecommerce-app'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 页面头部 -->
|
||
<section class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-6">软件应用开发</h1>
|
||
<p class="text-xl md:text-2xl text-purple-100 max-w-3xl mx-auto">
|
||
专业的移动应用开发服务，为您的业务提供强大的技术支撑
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开发服务 -->
|
||
<section class="py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">开发服务</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
提供全方位的移动应用开发服务，满足不同业务需求
|
||
</p>
|
||
</div>
|
||
|
||
<div class="space-y-20">
|
||
<div
|
||
v-for="(service, index) in softwareServices"
|
||
:key="service.id"
|
||
class="group"
|
||
>
|
||
<div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 lg:space-x-12"
|
||
:class="{ 'lg:flex-row-reverse lg:space-x-reverse': index % 2 === 1 }">
|
||
<!-- 图片 -->
|
||
<div class="flex-shrink-0">
|
||
<div class="relative overflow-hidden rounded-2xl shadow-xl">
|
||
<img
|
||
:src="service.image"
|
||
:alt="service.title"
|
||
class="w-96 h-64 object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-3xl font-bold text-gray-900 mb-4">{{ service.title }}</h3>
|
||
<p class="text-xl text-purple-600 font-medium mb-6">{{ service.subtitle }}</p>
|
||
<p class="text-gray-600 mb-8 leading-relaxed">{{ service.description }}</p>
|
||
|
||
<!-- 特性列表 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||
<div
|
||
v-for="feature in service.features"
|
||
:key="feature"
|
||
class="flex items-center text-gray-600"
|
||
>
|
||
<UIcon name="i-lucide-check-circle" class="w-5 h-5 text-purple-500 mr-3 flex-shrink-0" />
|
||
{{ feature }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术栈 -->
|
||
<div class="mb-8">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-3">技术栈：</h4>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="tech in service.technologies"
|
||
:key="tech"
|
||
class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm"
|
||
>
|
||
{{ tech }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<NuxtLink
|
||
:to="service.link"
|
||
class="inline-flex items-center px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
了解更多
|
||
<UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开发流程 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">开发流程</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
标准化的开发流程，确保项目高质量交付
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="process in developmentProcess"
|
||
:key="process.step"
|
||
class="text-center group"
|
||
>
|
||
<div class="relative">
|
||
<!-- 连接线 -->
|
||
<div
|
||
v-if="process.step < developmentProcess.length"
|
||
class="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gray-300 z-0"
|
||
></div>
|
||
|
||
<div class="relative z-10">
|
||
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
|
||
<UIcon :name="process.icon" class="w-10 h-10 text-purple-600" />
|
||
</div>
|
||
<div class="text-2xl font-bold text-purple-600 mb-2">步骤 {{ process.step }}</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ process.title }}</h3>
|
||
<p class="text-gray-600">{{ process.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">技术栈</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
采用先进的技术栈，确保应用的性能和稳定性
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="stack in techStack"
|
||
:key="stack.category"
|
||
class="bg-white rounded-xl p-6 shadow-lg"
|
||
>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">{{ stack.category }}</h3>
|
||
<div class="space-y-2">
|
||
<div
|
||
v-for="tech in stack.technologies"
|
||
:key="tech"
|
||
class="text-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700"
|
||
>
|
||
{{ tech }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务优势 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">服务优势</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
专业的开发团队，为您提供优质的软件开发服务
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="advantage in serviceAdvantages"
|
||
:key="advantage.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
|
||
<UIcon :name="advantage.icon" class="w-10 h-10 text-purple-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ advantage.title }}</h3>
|
||
<p class="text-gray-600">{{ advantage.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目案例 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">项目案例</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
丰富的项目经验，为各行业客户提供优质服务
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="caseItem in projectCases"
|
||
:key="caseItem.title"
|
||
class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow group"
|
||
>
|
||
<div class="relative h-48 overflow-hidden">
|
||
<img
|
||
:src="caseItem.image"
|
||
:alt="caseItem.title"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||
{{ caseItem.users }}
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ caseItem.title }}</h3>
|
||
<p class="text-gray-600 mb-3">{{ caseItem.description }}</p>
|
||
<div class="text-sm text-purple-600 font-medium">{{ caseItem.platform }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="py-20 bg-purple-600 text-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">需要软件开发服务？</h2>
|
||
<p class="text-xl text-purple-100 mb-8">
|
||
我们的专业团队将为您提供最适合的软件开发解决方案
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<NuxtLink
|
||
to="/yuxi/contact"
|
||
class="px-8 py-4 bg-white hover:bg-gray-100 text-purple-600 font-semibold rounded-lg transition-colors"
|
||
>
|
||
联系我们
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="/yuxi/iot-solutions"
|
||
class="px-8 py-4 bg-purple-500 hover:bg-purple-400 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
查看IoT方案
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
.group:hover .group-hover\:scale-105 {
|
||
transform: scale(1.05);
|
||
}
|
||
</style>
|
||
|