关于我们页面添加二维码
This commit is contained in:
WindowBird
parent
d44ca3fa15
commit
9719647407
|
|
@ -52,6 +52,108 @@ const stats = [
|
||||||
{number: '50+', label: '技术专利'},
|
{number: '50+', label: '技术专利'},
|
||||||
{number: '5年+', 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -207,6 +309,185 @@ const stats = [
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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 -->
|
<!-- Contact Section -->
|
||||||
<!-- <section class="py-16 md:py-20">-->
|
<!-- <section class="py-16 md:py-20">-->
|
||||||
<!-- <div class="container mx-auto px-4 sm:px-6 lg:px-8">-->
|
<!-- <div class="container mx-auto px-4 sm:px-6 lg:px-8">-->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user