ct/app/components/about/aboutUs.vue

<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>