399 lines
14 KiB
Vue
399 lines
14 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 关于玉犀科技页面
|
||
* 基于玉犀科技官网的关于我们内容
|
||
*/
|
||
|
||
// 页面SEO配置
|
||
useSeoMeta({
|
||
title: '关于玉犀 - 玉犀科技',
|
||
description: '深圳市玉犀科技有限公司专注于共享软件开发及物联网解决方案，提供专业的移动应用开发服务',
|
||
keywords: '玉犀科技,关于我们,公司介绍,团队介绍,发展历程',
|
||
robots: 'index, follow'
|
||
})
|
||
|
||
// 公司信息
|
||
const companyInfo = ref({
|
||
name: '深圳市玉犀科技有限公司',
|
||
established: '2013年',
|
||
location: '深圳市龙华新区1970文化创意产业园A栋206',
|
||
phone: '18123752516',
|
||
servicePhone: '0755-85225123',
|
||
email: 'yuxi@yuxiit.com',
|
||
website: 'https://www.yuxiit.com',
|
||
icp: '粤ICP备14055703号-1'
|
||
})
|
||
|
||
// 公司简介
|
||
const companyProfile = ref({
|
||
title: '万物互联 智启未来',
|
||
description: '玉犀科技是一家专注于共享软件开发及物联网解决方案的高新技术企业。公司成立于2013年，致力于为各行业提供专业的移动应用开发和物联网解决方案。',
|
||
vision: '成为领先的物联网解决方案提供商，推动数字化转型',
|
||
mission: '用技术创新连接万物，让生活更智能、更便捷'
|
||
})
|
||
|
||
// 核心业务
|
||
const coreBusiness = ref([
|
||
{
|
||
title: '共享解决方案',
|
||
description: '提供共享单车、共享电动车、共享充电宝等共享经济解决方案',
|
||
icon: 'i-lucide-share-2'
|
||
},
|
||
{
|
||
title: '行业解决方案',
|
||
description: '为各行业提供专业的物联网解决方案，助力数字化转型',
|
||
icon: 'i-lucide-building'
|
||
},
|
||
{
|
||
title: '软件应用开发',
|
||
description: '专业的移动应用开发服务，包括APP、小程序、微信开发等',
|
||
icon: 'i-lucide-smartphone'
|
||
},
|
||
{
|
||
title: '物联网解决方案',
|
||
description: '提供物联网应用定制、智能硬件、云平台等全方位服务',
|
||
icon: 'i-lucide-cpu'
|
||
}
|
||
])
|
||
|
||
// 发展历程
|
||
const developmentHistory = ref([
|
||
{
|
||
year: '2013',
|
||
title: '公司成立',
|
||
description: '深圳市玉犀科技有限公司正式成立，开始专注于移动应用开发'
|
||
},
|
||
{
|
||
year: '2015',
|
||
title: '业务扩展',
|
||
description: '业务范围扩展到物联网领域，开始提供智能硬件解决方案'
|
||
},
|
||
{
|
||
year: '2017',
|
||
title: '共享经济',
|
||
description: '进入共享经济领域，为共享单车、共享充电宝等提供技术支撑'
|
||
},
|
||
{
|
||
year: '2019',
|
||
title: '平台化发展',
|
||
description: '推出物联网云平台，提供一站式物联网解决方案'
|
||
},
|
||
{
|
||
year: '2021',
|
||
title: '技术升级',
|
||
description: '引入AI、大数据等先进技术，提升解决方案的智能化水平'
|
||
},
|
||
{
|
||
year: '2023',
|
||
title: '服务升级',
|
||
description: '服务客户超过1000家，设备部署超过10000台，覆盖100+城市'
|
||
}
|
||
])
|
||
|
||
// 团队介绍
|
||
const teamMembers = ref([
|
||
{
|
||
name: '技术团队',
|
||
role: '核心技术团队',
|
||
description: '拥有丰富的移动应用开发和物联网技术经验',
|
||
image: 'https://picsum.photos/300/300?random=tech-team'
|
||
},
|
||
{
|
||
name: '产品团队',
|
||
role: '产品设计团队',
|
||
description: '专业的UI/UX设计师，打造优秀的用户体验',
|
||
image: 'https://picsum.photos/300/300?random=product-team'
|
||
},
|
||
{
|
||
name: '运营团队',
|
||
role: '运营服务团队',
|
||
description: '提供专业的项目管理和客户服务',
|
||
image: 'https://picsum.photos/300/300?random=operation-team'
|
||
}
|
||
])
|
||
|
||
// 公司荣誉
|
||
const companyHonors = ref([
|
||
{
|
||
title: '高新技术企业',
|
||
description: '获得国家高新技术企业认证',
|
||
icon: 'i-lucide-award'
|
||
},
|
||
{
|
||
title: 'ISO认证',
|
||
description: '通过ISO9001质量管理体系认证',
|
||
icon: 'i-lucide-shield-check'
|
||
},
|
||
{
|
||
title: '软件著作权',
|
||
description: '拥有多项软件著作权和专利',
|
||
icon: 'i-lucide-file-text'
|
||
},
|
||
{
|
||
title: '行业认可',
|
||
description: '获得行业多项荣誉和认可',
|
||
icon: 'i-lucide-star'
|
||
}
|
||
])
|
||
|
||
// 合作伙伴
|
||
const partners = ref([
|
||
{
|
||
name: '腾讯云',
|
||
logo: 'https://picsum.photos/200/100?random=tencent',
|
||
description: '云计算服务合作伙伴'
|
||
},
|
||
{
|
||
name: '阿里云',
|
||
logo: 'https://picsum.photos/200/100?random=alibaba',
|
||
description: '云平台技术合作伙伴'
|
||
},
|
||
{
|
||
name: '华为云',
|
||
logo: 'https://picsum.photos/200/100?random=huawei',
|
||
description: '物联网技术合作伙伴'
|
||
},
|
||
{
|
||
name: '中国移动',
|
||
logo: 'https://picsum.photos/200/100?random=chinamobile',
|
||
description: '通信服务合作伙伴'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 页面头部 -->
|
||
<section class="bg-gradient-to-br from-blue-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-blue-100 max-w-3xl mx-auto">
|
||
{{ companyProfile.title }}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 公司简介 -->
|
||
<section class="py-20">
|
||
<div class="max-w-7xl 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>
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-6">公司简介</h2>
|
||
<p class="text-lg text-gray-600 mb-6 leading-relaxed">
|
||
{{ companyProfile.description }}
|
||
</p>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-eye" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 class="font-semibold text-gray-900 mb-1">企业愿景</h3>
|
||
<p class="text-gray-600">{{ companyProfile.vision }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-target" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<h3 class="font-semibold text-gray-900 mb-1">企业使命</h3>
|
||
<p class="text-gray-600">{{ companyProfile.mission }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<img
|
||
src="https://picsum.photos/600/400?random=company-building"
|
||
alt="玉犀科技"
|
||
class="w-full h-80 object-cover rounded-2xl shadow-xl"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></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="business in coreBusiness"
|
||
:key="business.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
|
||
<UIcon :name="business.icon" class="w-10 h-10 text-blue-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ business.title }}</h3>
|
||
<p class="text-gray-600">{{ business.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="relative">
|
||
<!-- 时间线 -->
|
||
<div class="absolute left-1/2 transform -translate-x-0.5 w-1 h-full bg-blue-200"></div>
|
||
|
||
<div class="space-y-12">
|
||
<div
|
||
v-for="(milestone, index) in developmentHistory"
|
||
:key="milestone.year"
|
||
class="relative flex items-center"
|
||
:class="{ 'flex-row-reverse': index % 2 === 1 }"
|
||
>
|
||
<!-- 时间点 -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-600 rounded-full z-10"></div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="w-5/12" :class="{ 'text-right': index % 2 === 0, 'text-left': index % 2 === 1 }">
|
||
<div class="bg-white rounded-xl p-6 shadow-lg">
|
||
<div class="text-2xl font-bold text-blue-600 mb-2">{{ milestone.year }}</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ milestone.title }}</h3>
|
||
<p class="text-gray-600">{{ milestone.description }}</p>
|
||
</div>
|
||
</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-3 gap-8">
|
||
<div
|
||
v-for="member in teamMembers"
|
||
:key="member.name"
|
||
class="text-center group"
|
||
>
|
||
<div class="relative mb-6">
|
||
<img
|
||
:src="member.image"
|
||
:alt="member.name"
|
||
class="w-48 h-48 object-cover rounded-full mx-auto shadow-lg group-hover:shadow-xl transition-shadow"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-full"></div>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ member.name }}</h3>
|
||
<p class="text-blue-600 font-medium mb-3">{{ member.role }}</p>
|
||
<p class="text-gray-600">{{ member.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-4 gap-8">
|
||
<div
|
||
v-for="honor in companyHonors"
|
||
:key="honor.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-yellow-200 transition-colors">
|
||
<UIcon :name="honor.icon" class="w-10 h-10 text-yellow-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ honor.title }}</h3>
|
||
<p class="text-gray-600">{{ honor.description }}</p>
|
||
</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="partner in partners"
|
||
:key="partner.name"
|
||
class="text-center group"
|
||
>
|
||
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||
<img
|
||
:src="partner.logo"
|
||
:alt="partner.name"
|
||
class="w-32 h-16 object-contain mx-auto mb-4 group-hover:scale-105 transition-transform"
|
||
/>
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ partner.name }}</h3>
|
||
<p class="text-gray-600 text-sm">{{ partner.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="py-20 bg-blue-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-blue-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-blue-600 font-semibold rounded-lg transition-colors"
|
||
>
|
||
联系我们
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="/yuxi"
|
||
class="px-8 py-4 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
返回首页
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
.group:hover .group-hover\:scale-105 {
|
||
transform: scale(1.05);
|
||
}
|
||
</style>
|
||
|