关于我们页面添加二维码
This commit is contained in:
WindowBird
parent
d44ca3fa15
commit
9719647407
|
|
@ -52,6 +52,108 @@ const stats = [
|
|||
{number: '50+', label: '技术专利'},
|
||||
{number: '5年+', label: '行业经验'}
|
||||
]
|
||||
|
||||
// 发展历程
|
||||
const timeline = [
|
||||
{
|
||||
year: '2018',
|
||||
title: '公司成立',
|
||||
description: '创特物联正式成立，专注于物联网技术研发'
|
||||
},
|
||||
{
|
||||
year: '2019',
|
||||
title: '产品上线',
|
||||
description: '首款共享电动车管理系统正式上线运营'
|
||||
},
|
||||
{
|
||||
year: '2020',
|
||||
title: '业务扩展',
|
||||
description: '拓展至共享汽车、共享充电桩等多个领域'
|
||||
},
|
||||
{
|
||||
year: '2021',
|
||||
title: '技术突破',
|
||||
description: '获得多项技术专利，建立完善的技术体系'
|
||||
},
|
||||
{
|
||||
year: '2022',
|
||||
title: '市场领先',
|
||||
description: '成为行业领先的共享经济解决方案提供商'
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: '持续创新',
|
||||
description: '推出AI智能调度系统，引领行业技术发展'
|
||||
}
|
||||
]
|
||||
|
||||
// 合作伙伴
|
||||
const partners = [
|
||||
{
|
||||
name: '华为云',
|
||||
logo: 'https://picsum.photos/120/60?random=partner1',
|
||||
description: '云计算服务合作伙伴'
|
||||
},
|
||||
{
|
||||
name: '腾讯云',
|
||||
logo: 'https://picsum.photos/120/60?random=partner2',
|
||||
description: '大数据分析合作伙伴'
|
||||
},
|
||||
{
|
||||
name: '阿里云',
|
||||
logo: 'https://picsum.photos/120/60?random=partner3',
|
||||
description: '物联网平台合作伙伴'
|
||||
},
|
||||
{
|
||||
name: '百度AI',
|
||||
logo: 'https://picsum.photos/120/60?random=partner4',
|
||||
description: '人工智能技术合作伙伴'
|
||||
},
|
||||
{
|
||||
name: '京东物流',
|
||||
logo: 'https://picsum.photos/120/60?random=partner5',
|
||||
description: '物流配送合作伙伴'
|
||||
},
|
||||
{
|
||||
name: '滴滴出行',
|
||||
logo: 'https://picsum.photos/120/60?random=partner6',
|
||||
description: '出行服务合作伙伴'
|
||||
}
|
||||
]
|
||||
|
||||
// 荣誉资质
|
||||
const honors = [
|
||||
{
|
||||
title: '高新技术企业',
|
||||
icon: 'i-lucide-award',
|
||||
year: '2020'
|
||||
},
|
||||
{
|
||||
title: 'ISO9001质量认证',
|
||||
icon: 'i-lucide-shield-check',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
title: '软件著作权',
|
||||
icon: 'i-lucide-file-text',
|
||||
year: '2021'
|
||||
},
|
||||
{
|
||||
title: '发明专利',
|
||||
icon: 'i-lucide-lightbulb',
|
||||
year: '2022'
|
||||
},
|
||||
{
|
||||
title: '行业创新奖',
|
||||
icon: 'i-lucide-trophy',
|
||||
year: '2023'
|
||||
},
|
||||
{
|
||||
title: '优秀服务商',
|
||||
icon: 'i-lucide-star',
|
||||
year: '2023'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -207,6 +309,185 @@ const stats = [
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Professional Team Development -->
|
||||
<section class="py-16 md:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
专业团队研发
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
|
||||
我们的专业团队将为您精心研发更专业的系统
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
||||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<UIcon name="i-lucide-code" class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">技术研发</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">资深工程师团队，专注技术创新与产品优化</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-green-600 dark:bg-green-500 rounded-full flex items-center justify-center">
|
||||
<UIcon name="i-lucide-settings" class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">系统集成</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">完善的系统架构，确保稳定可靠的运行</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-purple-600 dark:bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<UIcon name="i-lucide-headphones" class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">专业服务</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">7×24小时技术支持，全程贴心服务</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Section -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl max-w-md mx-auto">
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
扫码了解更多
|
||||
</h3>
|
||||
<div class="w-48 h-48 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="w-32 h-32 mx-auto mb-2 bg-black rounded-lg flex items-center justify-center">
|
||||
<div class="w-24 h-24 bg-white rounded-lg flex items-center justify-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-lg flex items-center justify-center">
|
||||
<UIcon name="i-lucide-zap" class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">微信扫码咨询</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
专业团队为您提供一对一咨询服务
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Company Timeline -->
|
||||
<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 font-bold text-gray-900 dark:text-white mb-4">
|
||||
发展历程
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
从创立到发展，见证我们的成长足迹
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative">
|
||||
<!-- Timeline line -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-blue-200 dark:bg-gray-600"></div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<div
|
||||
v-for="(item, index) in timeline"
|
||||
:key="item.year"
|
||||
class="relative flex items-center"
|
||||
:class="index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'"
|
||||
>
|
||||
<!-- Timeline dot -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full border-4 border-white dark:border-gray-800 z-10"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="w-5/12 p-6 bg-white dark:bg-gray-700 rounded-xl shadow-lg"
|
||||
:class="index % 2 === 0 ? 'mr-auto' : 'ml-auto'"
|
||||
>
|
||||
<div class="text-blue-600 dark:text-blue-400 font-bold text-lg mb-2">
|
||||
{{ item.year }}
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Partners Section -->
|
||||
<section class="py-16 md:py-20">
|
||||
<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 font-bold text-gray-900 dark:text-white mb-4">
|
||||
合作伙伴
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
与行业领先企业携手，共创美好未来
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
||||
<div
|
||||
v-for="partner in partners"
|
||||
:key="partner.name"
|
||||
class="text-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
:src="partner.logo"
|
||||
:alt="partner.name"
|
||||
class="w-full h-12 object-contain mb-3"
|
||||
>
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{{ partner.name }}
|
||||
</h3>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-300">
|
||||
{{ partner.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Honors 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 font-bold text-gray-900 dark:text-white mb-4">
|
||||
荣誉资质
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
专业认证，品质保证
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div
|
||||
v-for="honor in honors"
|
||||
:key="honor.title"
|
||||
class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-xl hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-yellow-500 dark:bg-yellow-600 rounded-full flex items-center justify-center">
|
||||
<UIcon :name="honor.icon" class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{{ honor.title }}
|
||||
</h3>
|
||||
<p class="text-blue-600 dark:text-blue-400 font-medium">
|
||||
{{ honor.year }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<!-- <section class="py-16 md:py-20">-->
|
||||
<!-- <div class="container mx-auto px-4 sm:px-6 lg:px-8">-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user