新增AI智能团队板块,展示团队成员和技术能力

This commit is contained in:
root 2026-03-28 22:47:52 +08:00
parent 138ff70612
commit 382e7df99a
2 changed files with 163 additions and 0 deletions

View File

@ -69,6 +69,31 @@
</div>
</section>
<!-- AI智能团队 -->
<section class="section" id="team">
<div class="container">
<div class="section-title">
<h2>AI智能团队</h2>
<p class="section-subtitle">51租由专业AI Agent团队打造24小时智能运营效率提升300%</p>
</div>
<div class="team-grid">
<div class="team-card" v-for="member in teamMembers" :key="member.name">
<div class="team-avatar">{{ member.avatar }}</div>
<div class="team-name">{{ member.name }}</div>
<div class="team-role">{{ member.role }}</div>
<div class="team-desc">{{ member.desc }}</div>
</div>
</div>
<div class="team-capabilities">
<div class="capability-item" v-for="cap in capabilities" :key="cap.title">
<div class="capability-icon">{{ cap.icon }}</div>
<div class="capability-title">{{ cap.title }}</div>
<div class="capability-desc">{{ cap.desc }}</div>
</div>
</div>
</div>
</section>
<!-- 用户故事 -->
<section class="section" id="stories">
<div class="container">
@ -192,6 +217,42 @@ const models = [
}
]
const teamMembers = [
{
avatar: '🐷',
name: '朱百万',
role: '智能指挥官',
desc: '总指挥中枢,协调团队高效运转,专注任务分配与质量验收'
},
{
avatar: '💻',
name: '阿码',
role: '全栈开发工程师',
desc: '前后端全能,代码严谨,快速实现各类功能需求'
},
{
avatar: '🔒',
name: '安审',
role: '安全审核专家',
desc: '代码安全审计,漏洞检测与修复,守护系统安全'
},
{
avatar: '✍️',
name: '妙笔',
role: '内容创作专家',
desc: '文案策划、品牌故事、专业内容输出'
}
]
const capabilities = [
{ icon: '⚡', title: '智能调度', desc: 'AI算法优化订单分配提升骑手接单效率' },
{ icon: '🔐', title: '安全风控', desc: '实时监控交易风险,保障资金与数据安全' },
{ icon: '📊', title: '数据分析', desc: '运营数据实时分析,辅助决策精准运营' },
{ icon: '🤖', title: '自动化运维', desc: '24小时智能监控系统故障自动告警处理' },
{ icon: '🎨', title: '智能设计', desc: 'AI辅助界面设计用户体验持续优化' },
{ icon: '📱', title: '多端协同', desc: '管理端、门店端、骑手端实时数据同步' }
]
const stories = [
{
quote: '从每天跑50单到100单我用51租管车更轻松。以前自己修车、找充电桩的时间都省下来了现在只管跑单赚钱。',

View File

@ -452,3 +452,105 @@ body {
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* AI智能团队 */
.section-subtitle {
color: #666;
font-size: 16px;
margin-top: 8px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.team-card {
background: #fff;
border-radius: 16px;
padding: 28px 20px;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.team-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(255,107,0,0.15);
}
.team-avatar {
font-size: 48px;
margin-bottom: 12px;
}
.team-name {
font-size: 18px;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 4px;
}
.team-role {
font-size: 13px;
color: #FF6B00;
font-weight: 500;
margin-bottom: 12px;
}
.team-desc {
font-size: 13px;
color: #888;
line-height: 1.6;
}
.team-capabilities {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.capability-item {
background: #F7F7F7;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.capability-icon {
font-size: 28px;
}
.capability-title {
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
}
.capability-desc {
font-size: 13px;
color: #888;
line-height: 1.5;
}
@media (max-width: 1024px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-capabilities {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.team-grid {
grid-template-columns: 1fr;
}
.team-capabilities {
grid-template-columns: 1fr;
}
}