lq/youbai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

团队页（布局）

Browse Source
This commit is contained in:
年糕崽崽
2025-06-09 17:03:18 +08:00
parent a3ad70de03
commit 5fbdd6845f
4 changed files with 88 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/team.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

26
src/components/layout/Footer.vue
View File

@@ -82,22 +82,20 @@
© 2021 shyoubai.com. All rights reserved
</p>
</div>
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2">
<a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
隐私政策
<div class="flex flex-col sm:flex-row justify-center items-center gap-3 text-gray-500 text-sm">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402009014"
class="flex items-center hover:text-primary transition-colors duration-200 group">
<img src="@/assets/images/gongan.png" alt="公安备案图标" class="h-4 mr-1.5 group-hover:scale-105 transition-transform">
<span>沪公网安备 31010402009014号</span>
</a>
<span class="text-gray-500 hidden sm:inline">|</span>
<a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
使用条款
<span class="hidden sm:inline-block text-gray-400">|</span>
<a href="https://beian.miit.gov.cn/"
class="flex items-center hover:text-primary transition-colors duration-200 group">
<img src="@/assets/images/icp.png" alt="公安备案图标" class="h-4 mr-1.5 group-hover:scale-105 transition-transform">
<span>沪ICP备2021007173号-1</span>
</a>
<span class="text-gray-500 hidden sm:inline">|</span>
<span class="text-gray-500 text-xs sm:text-sm">
沪公网安备 31010402009014号
</span>
<span class="text-gray-500 hidden sm:inline">|</span>
<span class="text-gray-500 text-xs sm:text-sm">
沪ICP备2021007173号-1
</span>
</div>
</div>
</div>

199
src/views/Team.vue
View File

@@ -12,9 +12,8 @@
</div>
</div>
<!-- 领导团队 -->
<!-- 技术团队介绍 -->
<section class="py-16 md:py-24">
<div class="container mx-auto px-4">
<SectionTitle
title="技术团队"
@@ -23,7 +22,6 @@
align="center"
/>
<div class="mt-16">
<div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
<div class="flex flex-col md:flex-row">
@@ -35,14 +33,19 @@
<div class="md:w-2/3 md:pl-8">
<h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
<p class="text-gray-600 mb-6">
酉佰是一支秉承着“开放透明、纪律严明、听从指挥、主观能动”管理风格的团队。我们遵循循序渐进，但绝不放任自流的管理理念。
酉佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
我们遵循循序渐进，但绝不放任自流的管理理念。
</p>
<p class="text-gray-600 mb-6">
团队目前有10名成员左右，由一批具有金融、数理、工科等背景的海归硕士及国内顶尖院校硕士组成。公司团队工作开放透明，和谐融洽，注重深入研究、互相学习和分享交流。研究方面，公司按照对市场的理解，目前从现货市场入手，覆盖货币、债券、证券、商品等，未来将逐步拓展到期货、期权等衍生品市场，最后覆盖到全球市场。
团队目前有10名成员左右，由一批具有金融、数理、工科等背景的海归硕士及国内顶尖院校硕士组成。
公司团队工作开放透明，和谐融洽，注重深入研究、互相学习和分享交流。
</p>
<div class="flex flex-wrap gap-2">
<span v-for="(skill, idx) in ['金融', '数理', '工科']" :key="idx"
class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
<span
v-for="(skill, idx) in ['金融', '数理', '工科']"
:key="idx"
class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm"
>
{{ skill }}
</span>
</div>
@@ -52,114 +55,62 @@
</div>
</div>
</section>
<!-- 领导团队 -->
<section class="py-16 md:py-24">
<div class="container mx-auto px-4">
<SectionTitle
title="领导团队"
subtitle="核心管理"
description="我们的管理层拥有丰富的行业经验和专业知识"
align="center"
/>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
<TeamMember
v-for="(leader, index) in leaders"
:key="index"
:member="leader"
/>
</div>
</div>
</section>
<!-- 技术团队 -->
<!-- 发展规划 -->
<section class="py-16 md:py-24 bg-gray-50">
<div class="container mx-auto px-4">
<SectionTitle
title="技术团队"
subtitle="专业卓越"
description="技术团队的核心成员拥有深厚的行业背景和技术专长"
title="发展规划"
subtitle="未来愿景"
description="酉佰佰团队的战略发展规划"
align="center"
/>
<div class="mt-16">
<div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
<div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0">
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
<i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
<div class="bg-gradient-to-br from-amber-50 to-yellow-100 rounded-xl h-56 flex items-center justify-center">
<i class="fas fa-chart-line text-5xl text-amber-500 opacity-50"></i>
</div>
</div>
<div class="md:w-2/3 md:pl-8">
<h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
<h3 class="text-2xl font-bold text-gray-900 mb-4">五年发展规划</h3>
<p class="text-gray-600 mb-6">
我们的技术团队由多名资深架构师和行业专家组成，平均拥有8年以上相关领域经验。
团队成员精通云计算、大数据、人工智能、物联网等前沿技术，致力于为客户提供创新的技术解决方案。
酉佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。
</p>
<p class="text-gray-600">
希望在2028年，公司第二个五年结束之际，能组建一支研究功底深厚、技能全面、初具实战能力的队伍。
</p>
<div class="flex flex-wrap gap-2">
<span v-for="(skill, idx) in ['云计算', '大数据', 'AI/ML', '区块链', '物联网', '微服务', 'DevOps']" :key="idx"
class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
{{ skill }}
</span>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<TeamMember
v-for="(member, index) in techTeam"
:key="index"
:member="member"
/>
</div>
</div>
</div>
</section>
<!-- 团队文化 -->
<!-- 研究领域 -->
<section class="py-16 md:py-24">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-16">
<div class="lg:w-5/12">
<SectionTitle
title="团队文化"
subtitle="工作环境"
/>
<SectionTitle
title="研究领域"
subtitle="专业覆盖"
description="我们的核心研究领域和发展方向"
align="center"
/>
<p class="text-gray-600 mt-6 mb-8">
我们致力于打造一个充满活力、开放包容、鼓励创新的工作环境。
为团队成员提供良好的发展平台和职业成长空间。
</p>
<div class="space-y-5">
<div v-for="(feature, index) in cultureFeatures" :key="index" class="flex">
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center mr-4 text-amber-600">
<i :class="feature.icon"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">{{ feature.title }}</h3>
<p class="text-gray-600 text-sm mt-1">{{ feature.description }}</p>
</div>
</div>
</div>
</div>
<div class="lg:w-7/12">
<div class="grid grid-cols-2 gap-4">
<div v-for="i in 4" :key="i" class="rounded-xl overflow-hidden aspect-square">
<div :class="['h-full flex items-center justify-center',
`bg-gradient-to-br ${i === 1 ? 'from-blue-100 to-blue-200' :
i === 2 ? 'from-amber-100 to-amber-200' :
i === 3 ? 'from-indigo-100 to-indigo-200' :
'from-green-100 to-green-200'}`]">
<i :class="[i === 1 ? 'fas fa-users' :
i === 2 ? 'fas fa-laptop-code' :
i === 3 ? 'fas fa-brain' : 'fas fa-glass-cheers']"
class="text-4xl opacity-30"></i>
</div>
</div>
<div class="mt-16 grid md:grid-cols-3 gap-8">
<div
v-for="(field, index) in researchFields"
:key="index"
class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 hover:shadow-xl transition-shadow"
>
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
<i :class="field.icon" class="text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">{{ field.title }}</h3>
<p class="text-gray-600">{{ field.description }}</p>
</div>
</div>
</div>
@@ -171,7 +122,7 @@
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">加入我们的团队</h2>
<p class="text-xl text-blue-300 mb-8">
如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰大家庭
如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰大家庭
</p>
<router-link
to="/careers"
@@ -188,44 +139,46 @@
<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
import TeamMember from '@/components/ui/TeamMember.vue'
const leaders = [
{ name: '张总', position: '创始人 & CEO', description: '拥有15年行业经验，成功创办两家企业' },
{ name: '李经理', position: '技术总监', description: '前全球500强企业技术负责人，系统架构专家' },
{ name: '王女士', position: '运营总监', description: '项目管理专家，曾管理过多个千万级项目' },
{ name: '陈总监', position: '市场总监', description: '资深营销专家，拥有丰富的品牌建设经验' }
]
const techTeam = [
{ name: '张工', position: '首席架构师' },
{ name: '李工', position: '大数据专家' },
{ name: '陈工', position: 'AI研究员' },
{ name: '刘工', position: '云平台专家' },
{ name: '王工', position: '前端技术专家' },
{ name: '赵工', position: '安全专家' },
]
const cultureFeatures = [
const researchFields = [
{
title: '学习与发展',
icon: 'fas fa-book-reader',
description: '每年提供专项培训预算和职业发展计划'
icon: 'fas fa-coins',
title: '现货市场',
description: '覆盖货币、债券、证券、商品等核心领域，深入研究市场动态'
},
{
title: '创新文化',
icon: 'fas fa-lightbulb',
description: '鼓励创新思维，设有专项创新奖励基金'
icon: 'fas fa-chart-bar',
title: '衍生品市场',
description: '逐步拓展期货、期权等衍生品市场研究，完善投资体系'
},
{
title: '灵活办公',
icon: 'fas fa-laptop-house',
description: '提供灵活的办公时间和远程工作机会'
},
{
title: '团队建设',
icon: 'fas fa-users',
description: '定期组织团建活动和兴趣小组交流'
icon: 'fas fa-globe-americas',
title: '全球市场',
description: '最终覆盖全球市场，打造国际化研究能力与投资视野'
}
]
</script>
/*
换一种排版布局，要把这几个图片用进去，分别是src/assets/images/team.png，
src/assets/images/team0001.jpeg，
src/assets/images/team0003.jpeg
*/
</script>
<style scoped>
/* 响应式调整 */
@media (max-width: 768px) {
.flex-col.md\:flex-row {
flex-direction: column;
}
.md\:w-1\/3, .md\:w-2\/3 {
width: 100%;
}
.md\:pl-8 {
padding-left: 0;
padding-top: 1.5rem;
}
}
</style>