WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about页面添加

Browse Source
This commit is contained in:
WindowBird 2025-10-07 10:12:59 +08:00
parent 1651a55408
commit ca9c9a1dc1
4 changed files with 466 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/app.vue
View File

@ -35,6 +35,6 @@ useSeoMeta({
</UMain>
</NuxtLayout>
</UApp>
</template>

4
app/components/AppHeader.vue
View File

@ -50,8 +50,8 @@ const items = computed<NavigationMenuItem[]>(() => [
},
{
label: '关于创特',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
to: '/about',
}, {
label: '后台管理',
to: 'https://ele.ccttiot.com/login',

304
app/components/about/aboutUs.vue Normal file
View File

@ -0,0 +1,304 @@
<script lang="ts" setup>
// 公司核心价值数据
const coreValues = [
{
icon: 'i-lucide-zap',
title: '创新驱动',
description: '持续技术创新，引领行业发展'
},
{
icon: 'i-lucide-shield-check',
title: '品质保证',
description: '严格质量控制，确保产品可靠性'
},
{
icon: 'i-lucide-users',
title: '客户至上',
description: '以客户需求为中心，提供优质服务'
},
{
icon: 'i-lucide-globe',
title: '开放合作',
description: '开放平台，与合作伙伴共创价值'
}
]
// 团队数据
const teamMembers = [
{
name: '张总',
position: '创始人 & CEO',
avatar: 'https://picsum.photos/200/200?random=1',
description: '10年物联网行业经验，专注于共享经济解决方案'
},
{
name: '李总',
position: '技术总监',
avatar: 'https://picsum.photos/200/200?random=2',
description: '资深软件架构师，负责技术团队管理和产品研发'
},
{
name: '王总',
position: '运营总监',
avatar: 'https://picsum.photos/200/200?random=3',
description: '丰富的市场运营经验，负责业务拓展和客户服务'
}
]
// 统计数据
const stats = [
{number: '500+', label: '合作客户'},
{number: '1000+', label: '项目案例'},
{number: '50+', label: '技术专利'},
{number: '5年+', label: '行业经验'}
]
</script>
<template>
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<!-- Hero Section -->
<section class="relative py-16 md:py-24 lg:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
关于
<span class="text-blue-600 dark:text-blue-400">创特物联</span>
</h1>
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
专注于共享经济解决方案的物联网科技公司，致力于通过技术创新推动行业发展
</p>
</div>
</div>
</section>
<!-- Company Introduction -->
<section class="py-10 md:py-10">
<div class="container 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 md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
公司简介
</h2>
<div class="space-y-4 text-lg text-gray-600 dark:text-gray-300">
<p>
创特物联是一家专注于共享经济解决方案的物联网科技公司，成立于2018年。
我们致力于为共享出行、共享生活等领域提供全方位的技术解决方案。
</p>
<p>
公司拥有专业的技术团队和丰富的行业经验，已为500+客户提供优质服务，
涵盖共享电动车、共享汽车、共享充电桩等多个领域。
</p>
<p>
我们始终坚持"创新驱动、品质保证、客户至上"的企业理念，
通过持续的技术创新和优质的服务，为客户创造更大价值。
</p>
</div>
</div>
<div class="relative">
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
<img
alt="公司环境"
class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"
src="https://picsum.photos/600/400?random=company"
>
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">2018</div>
<div class="text-sm text-gray-600 dark:text-gray-400">成立年份</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">100+</div>
<div class="text-sm text-gray-600 dark:text-gray-400">团队成员</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Values -->
<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-4 gap-8">
<div
v-for="value in coreValues"
:key="value.title"
class="text-center p-6 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 hover:shadow-lg transition-all duration-300"
>
<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="value.icon" class="w-8 h-8 text-white"/>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{{ value.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ value.description }}
</p>
</div>
</div>
</div>
</section>
<!-- Statistics -->
<section class="py-16 md:py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div
v-for="stat in stats"
:key="stat.label"
class="text-center"
>
<div class="text-4xl md:text-5xl font-bold text-blue-600 dark:text-blue-400 mb-2">
{{ stat.number }}
</div>
<div class="text-lg text-gray-600 dark:text-gray-300">
{{ stat.label }}
</div>
</div>
</div>
</div>
</section>
<!-- Team 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-3 gap-8">
<div
v-for="member in teamMembers"
:key="member.name"
class="text-center bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 rounded-2xl p-8 hover:shadow-xl transition-all duration-300"
>
<img
:alt="member.name"
:src="member.avatar"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-1">
{{ member.name }}
</h3>
<p class="text-blue-600 dark:text-blue-400 font-medium mb-3">
{{ member.position }}
</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">
{{ member.description }}
</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">-->
<!-- <div class="max-w-4xl mx-auto">-->
<!-- <div class="text-center mb-12">-->
<!-- <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">-->
<!-- 我们期待与您的合作，共创美好未来-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">-->
<!-- <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg">-->
<!-- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">-->
<!-- 联系信息-->
<!-- </h3>-->
<!-- <div class="space-y-4">-->
<!-- <div class="flex items-center">-->
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3" name="i-lucide-phone"/>-->
<!-- <span class="text-gray-600 dark:text-gray-300">400-123-4567</span>-->
<!-- </div>-->
<!-- <div class="flex items-center">-->
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3" name="i-lucide-mail"/>-->
<!-- <span class="text-gray-600 dark:text-gray-300">contact@ccttiot.com</span>-->
<!-- </div>-->
<!-- <div class="flex items-start">-->
<!-- <UIcon class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-1" name="i-lucide-map-pin"/>-->
<!-- <span class="text-gray-600 dark:text-gray-300">-->
<!-- 北京市朝阳区科技园区创新大厦A座1001室-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg">-->
<!-- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">-->
<!-- 工作时间-->
<!-- </h3>-->
<!-- <div class="space-y-3">-->
<!-- <div class="flex justify-between">-->
<!-- <span class="text-gray-600 dark:text-gray-300">周一至周五</span>-->
<!-- <span class="text-gray-900 dark:text-white font-medium">9:00 - 18:00</span>-->
<!-- </div>-->
<!-- <div class="flex justify-between">-->
<!-- <span class="text-gray-600 dark:text-gray-300">周六</span>-->
<!-- <span class="text-gray-900 dark:text-white font-medium">9:00 - 12:00</span>-->
<!-- </div>-->
<!-- <div class="flex justify-between">-->
<!-- <span class="text-gray-600 dark:text-gray-300">周日</span>-->
<!-- <span class="text-gray-900 dark:text-white font-medium">休息</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-600">-->
<!-- <UButton-->
<!-- class="w-full"-->
<!-- color="primary"-->
<!-- size="lg"-->
<!-- @click="() => window.open('tel:400-123-4567')"-->
<!-- >-->
<!-- <UIcon class="w-4 h-4 mr-2" name="i-lucide-phone"/>-->
<!-- 立即咨询-->
<!-- </UButton>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
</div>
</template>
<style scoped>
/* 自定义动画效果 */
.hover\:shadow-lg:hover {
transform: translateY(-2px);
}
/* 响应式字体大小 */
@media (max-width: 640px) {
.text-4xl {
font-size: 2rem;
}
.text-5xl {
font-size: 2.5rem;
}
.text-6xl {
font-size: 3rem;
}
}
</style>

159
app/pages/about.vue Normal file
View File

@ -0,0 +1,159 @@
<script lang="ts" setup>
// 设置页面SEO信息
useSeoMeta({
title: '关于我们 - 创特物联 | 共享经济解决方案专家',
description: '创特物联专注于共享经济解决方案的物联网科技公司，成立于2018年。我们致力于为共享出行、共享生活等领域提供全方位的技术解决方案，已为500+客户提供优质服务。',
keywords: '创特物联,共享经济,物联网,共享电动车,共享汽车,共享充电桩,共享解决方案,物联网科技,北京物联网公司',
author: '创特物联',
robots: 'index, follow',
language: 'zh-CN',
// Open Graph
ogTitle: '关于我们 - 创特物联 | 共享经济解决方案专家',
ogDescription: '创特物联专注于共享经济解决方案的物联网科技公司，拥有专业的技术团队和丰富的行业经验，已为500+客户提供优质服务。',
ogImage: 'https://picsum.photos/1200/630?random=about',
ogImageAlt: '创特物联公司介绍',
ogType: 'website',
ogUrl: 'https://ccttiot.com/about',
ogSiteName: '创特物联',
ogLocale: 'zh_CN',
// Twitter Card
twitterCard: 'summary_large_image',
twitterTitle: '关于我们 - 创特物联 | 共享经济解决方案专家',
twitterDescription: '创特物联专注于共享经济解决方案的物联网科技公司，拥有专业的技术团队和丰富的行业经验。',
twitterImage: 'https://picsum.photos/1200/630?random=about',
twitterImageAlt: '创特物联公司介绍',
twitterSite: '@ccttiot',
twitterCreator: '@ccttiot',
// Additional meta tags
canonical: 'https://ccttiot.com/about',
'theme-color': '#2563eb',
'msapplication-TileColor': '#2563eb',
'application-name': '创特物联',
'apple-mobile-web-app-title': '创特物联',
'apple-mobile-web-app-capable': 'yes',
'apple-mobile-web-app-status-bar-style': 'default',
'format-detection': 'telephone=no',
'mobile-web-app-capable': 'yes',
'msapplication-tap-highlight': 'no'
})
// 设置页面标题
useHead({
title: '关于我们 - 创特物联 | 共享经济解决方案专家',
htmlAttrs: {
lang: 'zh-CN'
},
link: [
{
rel: 'canonical',
href: 'https://ccttiot.com/about'
}
]
})
// 结构化数据 - 公司信息
const organizationSchema = {
'@context': 'https://schema.org',
'@type': 'Organization',
name: '创特物联',
alternateName: 'CCTT IoT',
url: 'https://ccttiot.com',
logo: 'https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg',
description: '创特物联专注于共享经济解决方案的物联网科技公司，致力于通过技术创新推动行业发展。',
foundingDate: '2018',
address: {
'@type': 'PostalAddress',
streetAddress: '北京市朝阳区科技园区创新大厦A座1001室',
addressLocality: '北京',
addressRegion: '朝阳区',
addressCountry: 'CN'
},
contactPoint: {
'@type': 'ContactPoint',
telephone: '+86-400-123-4567',
contactType: 'customer service',
email: 'contact@ccttiot.com',
availableLanguage: ['Chinese', 'English']
},
sameAs: [
'https://www.linkedin.com/company/ccttiot',
'https://twitter.com/ccttiot',
'https://www.facebook.com/ccttiot'
],
numberOfEmployees: '100+',
industry: '物联网、共享经济',
serviceArea: {
'@type': 'Country',
name: '中国'
}
}
// 结构化数据 - 网站信息
const websiteSchema = {
'@context': 'https://schema.org',
'@type': 'WebSite',
name: '创特物联',
url: 'https://ccttiot.com',
description: '创特物联专注于共享经济解决方案的物联网科技公司',
publisher: {
'@type': 'Organization',
name: '创特物联'
},
potentialAction: {
'@type': 'SearchAction',
target: 'https://ccttiot.com/search?q={search_term_string}',
'query-input': 'required name=search_term_string'
}
}
// 结构化数据 - 面包屑导航
const breadcrumbSchema = {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{
'@type': 'ListItem',
position: 1,
name: '首页',
item: 'https://ccttiot.com'
},
{
'@type': 'ListItem',
position: 2,
name: '关于我们',
item: 'https://ccttiot.com/about'
}
]
}
// 添加结构化数据到页面
useHead({
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify(organizationSchema)
},
{
type: 'application/ld+json',
innerHTML: JSON.stringify(websiteSchema)
},
{
type: 'application/ld+json',
innerHTML: JSON.stringify(breadcrumbSchema)
}
]
})
</script>
<template>
<div>
<AboutUs/>
</div>
</template>
<style scoped>
/* 页面特定样式 */
</style>