mirror of
https://gitcode.com/leisileken/cloud-smart.git
synced 2026-09-11 10:27:20 +08:00
371 lines
17 KiB
Vue
371 lines
17 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { images } from '@/assets/images'
|
||
|
||
|
||
const router = useRouter()
|
||
|
||
const stats = [
|
||
{ value: '20+', label: '服务客户' },
|
||
{ value: '10+', label: '成功案例' },
|
||
{ value: '99%', label: '产品质量' },
|
||
{ value: '99%', label: '客户满意度' }
|
||
]
|
||
|
||
const services = [
|
||
{
|
||
icon: 'zap',
|
||
title: '软件开发',
|
||
description: '为企业提供定制化软件开发服务，包括企业级应用、Web系统、移动端App等',
|
||
color: 'bg-primary-500'
|
||
},
|
||
{
|
||
icon: 'shield',
|
||
title: '智能体方案',
|
||
description: '基于AI技术的智能体解决方案，实现自动化流程、智能客服、数据分析等',
|
||
color: 'bg-accent-500'
|
||
},
|
||
{
|
||
icon: 'check',
|
||
title: '技术咨询',
|
||
description: '专业的技术咨询服务，帮助企业制定数字化转型战略和技术架构规划',
|
||
color: 'bg-purple-500'
|
||
},
|
||
{
|
||
icon: 'award',
|
||
title: '运维支持',
|
||
description: '7x24小时专业运维支持，确保系统稳定运行，快速响应故障处理',
|
||
color: 'bg-orange-500'
|
||
}
|
||
]
|
||
|
||
const products = [
|
||
{
|
||
name: '云智通平台',
|
||
description: '企业级智能化管理平台',
|
||
features: ['智能数据分析', '流程自动化', '实时监控'],
|
||
image: images.enterprise
|
||
},
|
||
{
|
||
name: 'AI智能助手',
|
||
description: '基于大语言模型的智能客服系统',
|
||
features: ['自然语言交互', '多轮对话', '知识图谱'],
|
||
image: images.aiChatbot
|
||
},
|
||
{
|
||
name: '数据中台',
|
||
description: '统一数据管理与分析平台',
|
||
features: ['数据集成', '实时计算', '智能洞察'],
|
||
image: images.dataCenter
|
||
}
|
||
]
|
||
|
||
const testimonials = [
|
||
{
|
||
content: '云阶智元帮助我们实现了业务流程的全面数字化，效率提升了300%。他们的专业团队和优质服务让我们非常满意。',
|
||
author: '王总',
|
||
title: '某大型制造企业CIO',
|
||
company: '西安某智能制造有限公司'
|
||
},
|
||
{
|
||
content: '智能体方案的落地让我们的客户服务水平有了质的飞跃，客户满意度显著提升。强烈推荐！',
|
||
author: '李总',
|
||
title: '某金融科技公司CEO',
|
||
company: '陕西某金融科技有限公司'
|
||
}
|
||
]
|
||
|
||
const activeTestimonial = ref(0)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen">
|
||
<section class="relative bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 min-h-screen flex items-center overflow-hidden">
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute top-20 left-20 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div>
|
||
<div class="absolute bottom-20 right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
|
||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-400/10 rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-20">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="animate-fadeInUp">
|
||
<div class="inline-flex items-center px-4 py-2 bg-white/10 rounded-full text-white/90 text-sm mb-6">
|
||
<span class="w-2 h-2 bg-accent-400 rounded-full mr-2 animate-pulse"></span>
|
||
专注数字化转型，赋能企业创新
|
||
</div>
|
||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||
用<span class="text-accent-400">智能技术</span>
|
||
<br />驱动企业未来
|
||
</h1>
|
||
<p class="text-lg text-white/80 mb-8 leading-relaxed">
|
||
西安云阶智元信息科技有限公司专注软件开发与智能体方案落地，为企业提供全方位的数字化转型服务，助力企业实现智能化升级。
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<button class="btn-primary" @click="router.push('/contact')">
|
||
免费咨询
|
||
<svg class="inline-block w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||
</svg>
|
||
</button>
|
||
<button class="btn-outline" @click="router.push('/products')">
|
||
了解产品
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="animate-slideInRight">
|
||
<div class="relative">
|
||
<div class="absolute -inset-4 bg-gradient-to-r from-primary-400 to-accent-400 rounded-2xl blur-xl opacity-20"></div>
|
||
<img
|
||
:src="images.team"
|
||
alt="智能科技"
|
||
class="relative rounded-2xl shadow-2xl w-full"
|
||
/>
|
||
<div class="absolute -bottom-6 -left-6 bg-white rounded-xl p-4 shadow-xl animate-float">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-12 h-12 bg-accent-100 rounded-full flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-900">项目交付</p>
|
||
<p class="text-sm text-gray-500">100%准时交付</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-20">
|
||
<div
|
||
v-for="(stat, index) in stats"
|
||
:key="index"
|
||
class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center"
|
||
:style="{ animationDelay: `${index * 0.1}s` }"
|
||
>
|
||
<p class="text-3xl lg:text-4xl font-bold text-white mb-2">{{ stat.value }}</p>
|
||
<p class="text-white/70">{{ stat.label }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="services" class="py-20 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
|
||
核心服务
|
||
</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||
我们能为您做什么
|
||
</h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto">
|
||
提供全方位的技术服务，助力企业数字化转型与智能化升级
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="(service, index) in services"
|
||
:key="index"
|
||
class="card-hover bg-gray-50 rounded-xl p-6 text-center"
|
||
>
|
||
<div :class="[service.color, 'w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-4']">
|
||
<svg v-if="service.icon === 'zap'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||
</svg>
|
||
<svg v-else-if="service.icon === 'shield'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||
</svg>
|
||
<svg v-else-if="service.icon === 'check'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||
</svg>
|
||
<svg v-else-if="service.icon === 'award'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ service.title }}</h3>
|
||
<p class="text-gray-600">{{ service.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="products" class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<span class="inline-block px-4 py-2 bg-accent-100 text-accent-700 rounded-full text-sm font-medium mb-4">
|
||
产品中心
|
||
</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||
核心产品
|
||
</h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto">
|
||
自主研发的智能化产品，为企业提供一站式解决方案
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="(product, index) in products"
|
||
:key="index"
|
||
class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg"
|
||
>
|
||
<div class="aspect-video overflow-hidden">
|
||
<img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ product.name }}</h3>
|
||
<p class="text-gray-600 mb-4">{{ product.description }}</p>
|
||
<ul class="space-y-2 mb-6">
|
||
<li
|
||
v-for="(feature, fIndex) in product.features"
|
||
:key="fIndex"
|
||
class="flex items-center text-sm text-gray-700"
|
||
>
|
||
<svg class="w-4 h-4 text-accent-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||
</svg>
|
||
{{ feature }}
|
||
</li>
|
||
</ul>
|
||
<button class="btn-secondary w-full" @click="router.push('/products')">
|
||
了解详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="testimonials" class="py-20 bg-gradient-to-br from-primary-900 to-accent-900">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
|
||
客户评价
|
||
</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||
他们信任我们
|
||
</h2>
|
||
<p class="text-white/70 max-w-2xl mx-auto">
|
||
来自各行业客户的真实反馈
|
||
</p>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 lg:p-12">
|
||
<div class="text-center">
|
||
<div class="flex justify-center mb-6">
|
||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
|
||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p class="text-xl lg:text-2xl text-white/90 mb-6 italic">
|
||
"{{ testimonials[activeTestimonial].content }}"
|
||
</p>
|
||
<div>
|
||
<p class="font-semibold text-white">{{ testimonials[activeTestimonial].author }}</p>
|
||
<p class="text-white/70">{{ testimonials[activeTestimonial].title }}</p>
|
||
<p class="text-white/50 text-sm">{{ testimonials[activeTestimonial].company }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center mt-8 space-x-2">
|
||
<button
|
||
v-for="(_, index) in testimonials"
|
||
:key="index"
|
||
class="w-3 h-3 rounded-full transition-colors"
|
||
:class="activeTestimonial === index ? 'bg-white' : 'bg-white/30'"
|
||
@click="activeTestimonial = index"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="py-20 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
|
||
联系我们
|
||
</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||
开启数字化转型之旅
|
||
</h2>
|
||
<p class="text-gray-600 mb-8">
|
||
无论您是想了解更多产品信息，还是寻求定制化解决方案，我们的专业团队随时为您服务。
|
||
</p>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-900">公司地址</p>
|
||
<p class="text-gray-600">陕西省西安市高新区科技二路65号清华科技园E座</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-4">
|
||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-900">电子邮箱</p>
|
||
<p class="text-gray-600">492265466@qq.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 rounded-2xl p-8">
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-6">获取免费咨询</h3>
|
||
<form class="space-y-4">
|
||
<div class="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
||
<input
|
||
type="text"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
|
||
placeholder="请输入您的姓名"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">公司名称</label>
|
||
<input
|
||
type="text"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
|
||
placeholder="请输入公司名称"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">需求描述</label>
|
||
<textarea
|
||
rows="4"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all resize-none"
|
||
placeholder="请简要描述您的需求..."
|
||
></textarea>
|
||
</div>
|
||
<button type="submit" class="btn-primary w-full">
|
||
提交咨询
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template> |