174 lines
6.6 KiB
Vue
174 lines
6.6 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 页面标题 -->
|
|
<HeroBanner
|
|
:title="$t('about.hero.title')"
|
|
:subtitle="$t('about.hero.subtitle')"
|
|
/>
|
|
|
|
<!-- 公司简介 -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-8 mt-6">{{ $t('about.company.title') }}</h2>
|
|
<p class="text-gray-600 mb-4 text-lg leading-relaxed">{{ $t('about.company.description1') }}</p>
|
|
<p class="text-gray-600 mb-8 text-lg leading-relaxed">{{ $t('about.company.description2') }}</p>
|
|
<ul class="space-y-4">
|
|
<li v-for="(achievement, index) in achievements" :key="index" class="flex items-center text-lg">
|
|
<i class="fas fa-check-circle text-green-500 mr-3"></i>
|
|
<span class="text-gray-700">{{ $t(achievement) }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-secondary/20 to-secondary/10 h-80 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-building text-8xl text-secondary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 我们的优势 -->
|
|
<section class="section bg-gray-50">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4 mt-6">{{ $t('about.advantages.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('about.advantages.subtitle') }}</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-4 gap-8">
|
|
<div v-for="(advantage, index) in advantages" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
|
|
<div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i :class="['text-secondary text-3xl', advantage.icon]"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4">{{ $t(advantage.titleKey) }}</h3>
|
|
<p class="text-gray-600 leading-relaxed">{{ $t(advantage.descriptionKey) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 企业文化 -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4 mt-6">{{ $t('about.culture.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('about.culture.subtitle') }}</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div v-for="(culture, index) in cultures" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i :class="['text-secondary text-3xl', culture.icon]"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-center">{{ $t(culture.titleKey) }}</h3>
|
|
<p class="text-gray-600 leading-relaxed text-center">{{ $t(culture.descriptionKey) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 发展历程 -->
|
|
<section class="section bg-gray-50">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4 mt-6">{{ $t('about.history.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('about.history.subtitle') }}</p>
|
|
</div>
|
|
<div class="space-y-8">
|
|
<div v-for="(history, index) in historyItems" :key="index" class="flex flex-col md:flex-row items-center gap-8">
|
|
<div class="w-full md:w-1/4 text-right">
|
|
<h3 class="text-2xl font-semibold text-secondary">{{ $t(history.yearKey) }}</h3>
|
|
</div>
|
|
<div class="w-px h-16 bg-secondary hidden md:block"></div>
|
|
<div class="w-full md:w-3/4">
|
|
<p class="text-gray-600 text-lg leading-relaxed">{{ $t(history.descriptionKey) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系我们 -->
|
|
<section class="section bg-primary text-white">
|
|
<div class="container text-center">
|
|
<h2 class="text-4xl font-bold mb-6">{{ $t('about.contact.title') }}</h2>
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">{{ $t('about.contact.subtitle') }}</p>
|
|
<NuxtLink to="/contact" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
|
|
{{ $t('about.contact.button') }}
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 公司成就
|
|
const achievements = [
|
|
'about.achievements.item1',
|
|
'about.achievements.item2',
|
|
'about.achievements.item3'
|
|
];
|
|
|
|
// 优势数据
|
|
const advantages = [
|
|
{
|
|
icon: 'fas fa-certificate',
|
|
titleKey: 'about.advantages.certification.title',
|
|
descriptionKey: 'about.advantages.certification.description'
|
|
},
|
|
{
|
|
icon: 'fas fa-users',
|
|
titleKey: 'about.advantages.team.title',
|
|
descriptionKey: 'about.advantages.team.description'
|
|
},
|
|
{
|
|
icon: 'fas fa-code',
|
|
titleKey: 'about.advantages.technical.title',
|
|
descriptionKey: 'about.advantages.technical.description'
|
|
},
|
|
{
|
|
icon: 'fas fa-headset',
|
|
titleKey: 'about.advantages.service.title',
|
|
descriptionKey: 'about.advantages.service.description'
|
|
}
|
|
];
|
|
|
|
// 企业文化
|
|
const cultures = [
|
|
{
|
|
icon: 'fas fa-bullseye',
|
|
titleKey: 'about.culture.mission.title',
|
|
descriptionKey: 'about.culture.mission.description'
|
|
},
|
|
{
|
|
icon: 'fas fa-eye',
|
|
titleKey: 'about.culture.vision.title',
|
|
descriptionKey: 'about.culture.vision.description'
|
|
},
|
|
{
|
|
icon: 'fas fa-heart',
|
|
titleKey: 'about.culture.values.title',
|
|
descriptionKey: 'about.culture.values.description'
|
|
}
|
|
];
|
|
|
|
// 发展历程
|
|
const historyItems = [
|
|
{
|
|
yearKey: 'about.history.year2023.year',
|
|
descriptionKey: 'about.history.year2023.description'
|
|
},
|
|
{
|
|
yearKey: 'about.history.year2021.year',
|
|
descriptionKey: 'about.history.year2021.description'
|
|
},
|
|
{
|
|
yearKey: 'about.history.year2018.year',
|
|
descriptionKey: 'about.history.year2018.description'
|
|
}
|
|
];
|
|
</script> |