231 lines
11 KiB
Vue
231 lines
11 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useHead } from '@vueuse/head'
|
||
import AOS from 'aos'
|
||
import 'aos/dist/aos.css'
|
||
|
||
onMounted(() => {
|
||
AOS.init({
|
||
duration: 800,
|
||
offset: 120,
|
||
easing: 'ease-out-cubic',
|
||
once: false
|
||
})
|
||
})
|
||
|
||
useHead({
|
||
title: '关于我们 - 企业数字化解决方案专家',
|
||
meta: [
|
||
{ name: 'description', content: '了解我们的企业使命、核心团队和技术优势' }
|
||
]
|
||
})
|
||
|
||
const teamMembers = [
|
||
{
|
||
name: '张三',
|
||
role: '创始人 & CEO',
|
||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
description: '拥有15年互联网行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略'
|
||
},
|
||
{
|
||
name: '李四',
|
||
role: '技术总监',
|
||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
description: '全栈开发专家，精通前后端技术栈，负责公司核心产品架构设计与技术团队管理'
|
||
},
|
||
{
|
||
name: '王五',
|
||
role: '产品经理',
|
||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
description: '拥有丰富的产品设计与用户体验经验，致力于打造简洁高效的企业级应用'
|
||
},
|
||
{
|
||
name: '赵六',
|
||
role: '市场总监',
|
||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
description: '营销策略专家，擅长品牌建设与市场拓展，负责公司整体市场战略规划'
|
||
}
|
||
]
|
||
|
||
const milestones = [
|
||
{ year: '2018', title: '公司成立', description: '团队初创，确立企业数字化服务方向' },
|
||
{ year: '2019', title: '首轮融资', description: '获得天使轮投资，团队扩展到15人' },
|
||
{ year: '2020', title: '产品上线', description: '核心产品正式发布，服务首批企业客户' },
|
||
{ year: '2021', title: '业务扩展', description: '客户数量突破100家，业务覆盖全国主要城市' },
|
||
{ year: '2022', title: 'A轮融资', description: '完成A轮融资，估值达到1亿元' },
|
||
{ year: '2023', title: '国际化', description: '开始拓展海外市场，建立国际合作伙伴网络' }
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
|
||
<div class="max-w-5xl mx-auto px-6">
|
||
<!-- 页面标题 -->
|
||
<div class="text-center mb-16" data-aos="fade-up">
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
|
||
<span class="relative">
|
||
关于我们
|
||
<span class="absolute -bottom-2 left-0 right-0 mx-auto w-1/3 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||
</span>
|
||
</h1>
|
||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||
我们致力于为企业提供创新的数字化解决方案，帮助客户在数字时代实现业务增长
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 公司简介 -->
|
||
<section class="mb-20" data-aos="fade-up">
|
||
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 p-8 md:p-10">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white flex items-center">
|
||
<span class="w-10 h-10 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 flex items-center justify-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||
</svg>
|
||
</span>
|
||
公司简介
|
||
</h2>
|
||
|
||
<div class="space-y-6 text-gray-700 dark:text-gray-300 leading-relaxed">
|
||
<p>
|
||
我们是一家专注于数字化转型的科技企业，成立于2018年，总部位于深圳，在北京、上海、广州设有分支机构。公司拥有一支由资深技术专家、产品经理和行业顾问组成的精英团队，致力于为各行业客户提供创新的数字化解决方案。
|
||
</p>
|
||
<p>
|
||
我们的使命是通过技术创新赋能企业发展，帮助传统企业实现数字化转型，提升运营效率，创造更大的商业价值。我们相信，数字化不仅是技术的变革，更是思维方式和商业模式的革新。
|
||
</p>
|
||
<p>
|
||
凭借深厚的技术积累和行业洞察，我们已成功为金融、零售、制造、教育等多个领域的客户提供了定制化的解决方案，赢得了广泛的认可和信任。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 发展历程 -->
|
||
<section class="mb-20" data-aos="fade-up">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-10 text-gray-900 dark:text-white text-center">
|
||
<span class="relative">
|
||
发展历程
|
||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||
</span>
|
||
</h2>
|
||
|
||
<div class="relative">
|
||
<!-- 时间轴线 -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-rose-400 to-rose-600 rounded-full"></div>
|
||
|
||
<div class="space-y-12">
|
||
<div
|
||
v-for="(milestone, index) in milestones"
|
||
:key="index"
|
||
class="relative flex items-center justify-center"
|
||
:data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
|
||
:data-aos-delay="index * 100"
|
||
>
|
||
<!-- 时间点 -->
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full bg-white dark:bg-gray-800 border-4 border-rose-500 z-10"></div>
|
||
|
||
<!-- 内容卡片 -->
|
||
<div
|
||
class="w-5/12 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 p-6"
|
||
:class="index % 2 === 0 ? 'mr-auto pr-12' : 'ml-auto pl-12'"
|
||
>
|
||
<div class="flex items-center mb-3">
|
||
<span class="text-2xl font-bold text-rose-600 dark:text-rose-400 mr-3">{{ milestone.year }}</span>
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ milestone.title }}</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300">{{ milestone.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心团队 -->
|
||
<section class="mb-20" data-aos="fade-up">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-10 text-gray-900 dark:text-white text-center">
|
||
<span class="relative">
|
||
核心团队
|
||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||
</span>
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div
|
||
v-for="(member, index) in teamMembers"
|
||
:key="index"
|
||
class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
|
||
data-aos="fade-up"
|
||
:data-aos-delay="index * 100"
|
||
>
|
||
<div class="flex flex-col md:flex-row">
|
||
<div class="relative md:w-1/3">
|
||
<!-- 渐变背景装饰 -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-rose-400 to-rose-600 opacity-20"></div>
|
||
|
||
<img
|
||
:src="member.avatar"
|
||
:alt="member.name"
|
||
class="w-full h-48 md:h-full object-cover relative z-10"
|
||
/>
|
||
</div>
|
||
|
||
<div class="p-6 md:w-2/3">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-1">{{ member.name }}</h3>
|
||
<p class="text-rose-600 dark:text-rose-400 font-medium mb-4">{{ member.role }}</p>
|
||
<p class="text-gray-600 dark:text-gray-300">{{ member.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section data-aos="fade-up">
|
||
<div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-rose-900/10 dark:to-pink-900/10 rounded-3xl p-8 md:p-10 text-center">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white">联系我们</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
|
||
无论您是想了解更多关于我们的服务，还是希望探讨潜在的合作机会，我们都期待与您交流
|
||
</p>
|
||
|
||
<div class="flex flex-wrap justify-center gap-6">
|
||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>
|
||
<span class="text-gray-700 dark:text-gray-200">workerqi@163.com</span>
|
||
</div>
|
||
|
||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||
</svg>
|
||
<span class="text-gray-700 dark:text-gray-200">151*******3</span>
|
||
</div>
|
||
|
||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
<span class="text-gray-700 dark:text-gray-200">杭州市滨江区长河商厦</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 添加轻奢风格的渐变背景和阴影效果 */
|
||
.bg-gradient-luxury {
|
||
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
||
}
|
||
|
||
/* 暗色模式下的轻奢风格 */
|
||
@media (prefers-color-scheme: dark) {
|
||
.bg-gradient-luxury {
|
||
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
||
}
|
||
}
|
||
</style>
|