From ca9c9a1dc115db598918302c29c8b1e802181edc Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 7 Oct 2025 10:12:59 +0800
Subject: [PATCH] =?UTF-8?q?about=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                      |   2 +-
 app/components/AppHeader.vue     |   4 +-
 app/components/about/aboutUs.vue | 304 +++++++++++++++++++++++++++++++
 app/pages/about.vue              | 159 ++++++++++++++++
 4 files changed, 466 insertions(+), 3 deletions(-)
 create mode 100644 app/components/about/aboutUs.vue
 create mode 100644 app/pages/about.vue

diff --git a/app/app.vue b/app/app.vue
index 6b9ac4f..77a14f2 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -35,6 +35,6 @@ useSeoMeta({
       </UMain>
     </NuxtLayout>
 
-    
+
   </UApp>
 </template>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 68d7ac7..421714a 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -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',
diff --git a/app/components/about/aboutUs.vue b/app/components/about/aboutUs.vue
new file mode 100644
index 0000000..2a0d3b6
--- /dev/null
+++ b/app/components/about/aboutUs.vue
@@ -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>
diff --git a/app/pages/about.vue b/app/pages/about.vue
new file mode 100644
index 0000000..a60aab4
--- /dev/null
+++ b/app/pages/about.vue
@@ -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>
\ No newline at end of file