hanye-website/pages/about.vue

<template>
  <div class="py-8">
    <div class="container-custom">
      <h1 class="text-3xl font-bold mb-8">{{ $t('about.title') }}</h1>
      
      <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
        <div class="p-8">
          <section class="mb-12">
            <h2 class="text-2xl font-semibold mb-4">{{ $t('about.history') }}</h2>
            <p class="text-gray-700 mb-4">
              汉业科技成立于2020年，是一家专注于提供高质量产品和服务的科技公司。
              从创立之初，我们就致力于通过创新技术解决客户面临的挑战，为客户创造价值。
            </p>
            <p class="text-gray-700">
              经过多年的发展，我们已成为行业内备受认可的品牌，拥有众多忠实客户。
              我们的产品覆盖了多个领域，为客户提供了全方位的解决方案。
            </p>
          </section>
          
          <section class="mb-12">
            <h2 class="text-2xl font-semibold mb-4">{{ $t('about.values') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-blue-50 p-6 rounded-lg">
                <h3 class="text-xl font-medium mb-2 text-blue-700">创新精神</h3>
                <p class="text-gray-700">
                  我们不断探索新技术、新方法，为客户提供创新的解决方案。
                </p>
              </div>
              <div class="bg-green-50 p-6 rounded-lg">
                <h3 class="text-xl font-medium mb-2 text-green-700">专业品质</h3>
                <p class="text-gray-700">
                  我们坚持高标准，确保每一个产品都经过严格的质量控制。
                </p>
              </div>
              <div class="bg-yellow-50 p-6 rounded-lg">
                <h3 class="text-xl font-medium mb-2 text-yellow-700">客户至上</h3>
                <p class="text-gray-700">
                  客户的满意是我们最大的追求，我们致力于超越客户期望。
                </p>
              </div>
            </div>
          </section>
          
          <section>
            <h2 class="text-2xl font-semibold mb-4">{{ $t('about.team') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div class="text-center">
                <div class="h-40 w-40 bg-gray-200 rounded-full mx-auto mb-4"></div>
                <h3 class="text-xl font-medium">张三</h3>
                <p class="text-gray-600">创始人 & CEO</p>
              </div>
              <div class="text-center">
                <div class="h-40 w-40 bg-gray-200 rounded-full mx-auto mb-4"></div>
                <h3 class="text-xl font-medium">李四</h3>
                <p class="text-gray-600">技术总监</p>
              </div>
              <div class="text-center">
                <div class="h-40 w-40 bg-gray-200 rounded-full mx-auto mb-4"></div>
                <h3 class="text-xl font-medium">王五</h3>
                <p class="text-gray-600">产品经理</p>
              </div>
              <div class="text-center">
                <div class="h-40 w-40 bg-gray-200 rounded-full mx-auto mb-4"></div>
                <h3 class="text-xl font-medium">赵六</h3>
                <p class="text-gray-600">营销总监</p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 关于我们页面
 * 展示公司历史、价值观和团队成员
 */

// SEO优化
useHead({
  title: '关于我们 - Hanye',
  meta: [
    { name: 'description', content: '了解我们的公司历史、企业价值观和团队成员。汉业科技致力于提供高质量的产品和服务。' }
  ]
});
</script>