mirror of
https://gitcode.com/leisileken/cloud-smart.git
synced 2026-09-11 10:27:20 +08:00
256 lines
12 KiB
Vue
256 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import { images } from '@/assets/images'
|
||
|
||
|
||
const companyInfo = {
|
||
name: '西安云阶智元信息科技有限公司',
|
||
slogan: '用智能技术驱动企业未来',
|
||
established: '2016年',
|
||
location: '陕西西安',
|
||
employees: '200+',
|
||
clients: '500+',
|
||
projects: '1000+'
|
||
}
|
||
|
||
const coreValues = [
|
||
{ icon: 'target', title: '客户至上', desc: '以客户需求为中心，提供优质服务' },
|
||
{ icon: 'lightbulb', title: '创新驱动', desc: '持续创新，引领技术发展' },
|
||
{ icon: 'users', title: '团队协作', desc: '团结协作，共创价值' },
|
||
{ icon: 'trending', title: '追求卓越', desc: '精益求精，追求完美' }
|
||
]
|
||
|
||
const milestones = [
|
||
{ year: '2016', event: '公司成立，专注软件开发服务' },
|
||
{ year: '2018', event: '获得高新技术企业认证' },
|
||
{ year: '2020', event: '推出首个智能体平台产品' },
|
||
{ year: '2022', event: '服务客户突破300家' },
|
||
{ year: '2024', event: '团队规模突破200人' },
|
||
{ year: '2025', event: '成为行业领先的智能体解决方案提供商' }
|
||
]
|
||
|
||
const team = [
|
||
{ name: '张伟', role: '创始人 & CEO', avatar: images.avatar1 },
|
||
{ name: '李娜', role: '技术总监', avatar: images.avatar2 },
|
||
{ name: '王强', role: '产品总监', avatar: images.avatar3 },
|
||
{ name: '刘芳', role: '运营总监', avatar: images.avatar4 }
|
||
]
|
||
|
||
const advantages = [
|
||
'8年行业经验，深耕软件开发与智能体领域',
|
||
'200+专业技术人员，覆盖全栈开发能力',
|
||
'500+成功案例，服务各行业头部企业',
|
||
'完善的服务体系，从咨询到运维全周期支持',
|
||
'持续创新能力，保持技术领先优势'
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-white">
|
||
<section class="bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center">
|
||
<span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
|
||
关于我们
|
||
</span>
|
||
<h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
|
||
西安云阶智元信息科技有限公司
|
||
</h1>
|
||
<p class="text-lg text-white/80 max-w-2xl mx-auto">
|
||
{{ companyInfo.slogan }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20">
|
||
<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>
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-6">公司简介</h2>
|
||
<p class="text-gray-600 mb-6 leading-relaxed">
|
||
西安云阶智元信息科技有限公司成立于{{ companyInfo.established }}年，是一家专注于软件开发与智能体方案落地的高新技术企业。
|
||
公司总部位于{{ companyInfo.location }}，拥有一支由200+专业技术人员组成的团队。
|
||
</p>
|
||
<p class="text-gray-600 mb-8 leading-relaxed">
|
||
我们致力于为企业提供全方位的数字化转型服务，涵盖企业级软件开发、AI智能体解决方案、数据分析平台等领域。
|
||
凭借专业的技术实力和优质的服务，我们已成功服务超过500家企业客户，完成1000+项目交付。
|
||
</p>
|
||
<ul class="space-y-3">
|
||
<li
|
||
v-for="(advantage, index) in advantages"
|
||
:key="index"
|
||
class="flex items-center"
|
||
>
|
||
<svg class="w-5 h-5 text-accent-500 mr-3" 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>
|
||
<span class="text-gray-700">{{ advantage }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<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.office"
|
||
alt="公司办公环境"
|
||
class="relative rounded-2xl shadow-2xl w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
|
||
</svg>
|
||
</div>
|
||
<p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.employees }}</p>
|
||
<p class="text-gray-600">专业团队</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-accent-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-8 h-8 text-accent-600" 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>
|
||
<p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.clients }}</p>
|
||
<p class="text-gray-600">服务客户</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-8 h-8 text-purple-600" 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>
|
||
<p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.projects }}</p>
|
||
<p class="text-gray-600">完成项目</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
<p class="text-3xl font-bold text-gray-900 mb-1">8+</p>
|
||
<p class="text-gray-600">行业经验</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-4">核心价值观</h2>
|
||
<p class="text-gray-600">我们坚信的理念，指引我们不断前行</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div
|
||
v-for="(value, index) in coreValues"
|
||
:key="index"
|
||
class="bg-gray-50 rounded-xl p-6 text-center"
|
||
>
|
||
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||
<svg v-if="value.icon === 'target'" class="w-7 h-7 text-primary-600" 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>
|
||
<svg v-else-if="value.icon === 'lightbulb'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||
</svg>
|
||
<svg v-else-if="value.icon === 'users'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
|
||
</svg>
|
||
<svg v-else-if="value.icon === 'trending'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-900 mb-2">{{ value.title }}</h3>
|
||
<p class="text-gray-600 text-sm">{{ value.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-4">发展历程</h2>
|
||
<p class="text-gray-600">从创立到成长，我们一直在前进</p>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-200 hidden lg:block"></div>
|
||
<div class="space-y-8 lg:space-y-0">
|
||
<div
|
||
v-for="(milestone, index) in milestones"
|
||
:key="index"
|
||
class="relative lg:grid lg:grid-cols-2 lg:gap-8"
|
||
:class="index % 2 === 0 ? '' : 'lg:direction-rtl'"
|
||
>
|
||
<div
|
||
class="lg:text-right"
|
||
:class="index % 2 !== 0 ? 'lg:order-2' : ''"
|
||
>
|
||
<div
|
||
class="inline-block bg-white rounded-xl p-6 shadow-lg"
|
||
:class="index % 2 !== 0 ? 'lg:ml-auto' : ''"
|
||
>
|
||
<p class="text-2xl font-bold text-primary-600 mb-2">{{ milestone.year }}</p>
|
||
<p class="text-gray-700">{{ milestone.event }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="hidden lg:flex items-center justify-center">
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow"></div>
|
||
</div>
|
||
<div v-if="index % 2 !== 0" class="hidden lg:block"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20" id="team">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-4">核心团队</h2>
|
||
<p class="text-gray-600">专业的领导团队，带领公司不断发展</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div
|
||
v-for="(member, index) in team"
|
||
:key="index"
|
||
class="text-center"
|
||
>
|
||
<div class="relative mb-4">
|
||
<img
|
||
:src="member.avatar"
|
||
:alt="member.name"
|
||
class="w-32 h-32 rounded-full mx-auto object-cover ring-4 ring-primary-100"
|
||
/>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-900 mb-1">{{ member.name }}</h3>
|
||
<p class="text-primary-600 text-sm">{{ member.role }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-gradient-to-br from-primary-900 to-accent-900 py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||
加入我们
|
||
</h2>
|
||
<p class="text-white/80 mb-8 max-w-2xl mx-auto">
|
||
我们正在寻找优秀的人才加入我们的团队，共同推动技术创新和企业发展
|
||
</p>
|
||
<button class="btn-primary">
|
||
查看招聘信息
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template> |