新增AI智能团队板块,展示团队成员和技术能力
This commit is contained in:
parent
138ff70612
commit
382e7df99a
61
src/App.vue
61
src/App.vue
|
|
@ -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租管车更轻松。以前自己修车、找充电桩的时间都省下来了,现在只管跑单赚钱。',
|
||||
|
|
|
|||
102
src/style.css
102
src/style.css
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue