291 lines
11 KiB
Vue
291 lines
11 KiB
Vue
<template>
|
||
<div id="app">
|
||
<!-- 导航栏 -->
|
||
<header class="header">
|
||
<div class="container">
|
||
<a href="#" class="logo">
|
||
<span class="logo-icon">51</span>
|
||
<span>51租</span>
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="#about">关于我们</a>
|
||
<a href="#models">车型展示</a>
|
||
<a href="#stories">用户故事</a>
|
||
<a href="#contact">联系我们</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 页面内容 -->
|
||
<main>
|
||
<!-- Hero 区域 -->
|
||
<section class="hero" id="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1>让出行更简单</h1>
|
||
<p>专业电动车租赁平台，多车型统一管理，助您高效运营</p>
|
||
<div class="hero-buttons">
|
||
<a href="#models" class="btn btn-primary">查看车型</a>
|
||
<a href="#contact" class="btn btn-secondary">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于我们 -->
|
||
<section class="section" id="about">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2>关于51租</h2>
|
||
</div>
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<p>51租是一家专业的电动车租赁平台，隶属于51bike在线生态。我们致力于为骑手提供便捷的租车服务，为运营商提供高效的车辆管理解决方案。</p>
|
||
<p>平台支持多种车型统一管理，订单实时追踪，财务一键结算，让运营效率提升300%。无论是个人骑手还是连锁运营商，都能在这里找到最适合的解决方案。</p>
|
||
</div>
|
||
<div class="about-image">
|
||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&h=400&fit=crop" alt="51租团队">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 车型展示 -->
|
||
<section class="section section-gray" id="models">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2>我们的车型</h2>
|
||
</div>
|
||
<div class="models-grid">
|
||
<div class="model-card" v-for="model in models" :key="model.name">
|
||
<img :src="model.image" :alt="model.name">
|
||
<div class="model-info">
|
||
<div class="model-name">{{ model.name }}</div>
|
||
<div class="model-price">{{ model.price }}</div>
|
||
<div class="model-desc">{{ model.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<div class="section-title">
|
||
<h2>他们与51租同行</h2>
|
||
</div>
|
||
<div class="stories-grid">
|
||
<div class="story-card" v-for="story in stories" :key="story.author">
|
||
<img :src="story.avatar" :alt="story.author" class="story-avatar">
|
||
<div class="story-quote">"{{ story.quote }}"</div>
|
||
<div class="story-author">{{ story.author }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="section section-gray" id="contact">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2>联系我们</h2>
|
||
</div>
|
||
<div class="contact-content">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📍</div>
|
||
<div class="contact-text">
|
||
<h4>地址</h4>
|
||
<p>全国服务热线</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📞</div>
|
||
<div class="contact-text">
|
||
<h4>电话</h4>
|
||
<p>400-888-8888</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">✉️</div>
|
||
<div class="contact-text">
|
||
<h4>邮箱</h4>
|
||
<p>contact@51bike.online</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">💬</div>
|
||
<div class="contact-text">
|
||
<h4>加盟微信</h4>
|
||
<p>扫码添加客服</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-form">
|
||
<form @submit.prevent="handleSubmit">
|
||
<div class="form-group">
|
||
<label>您的姓名</label>
|
||
<input type="text" v-model="form.name" placeholder="请输入姓名" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>联系电话</label>
|
||
<input type="tel" v-model="form.phone" placeholder="请输入手机号" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>留言内容</label>
|
||
<textarea v-model="form.message" placeholder="请输入留言内容" required></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" style="width: 100%;">提交留言</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-links">
|
||
<a href="https://admin.51bike.online" target="_blank">管理后台</a>
|
||
<a href="https://store.51bike.online" target="_blank">门店端</a>
|
||
<a href="https://rider.51bike.online" target="_blank">骑手端</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-copyright">
|
||
© 2026 51租 | 51bike.online
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
|
||
const models = [
|
||
{
|
||
name: '电动自行车',
|
||
price: '¥30-50/日',
|
||
desc: '轻便灵活，适合城市短途配送，单次续航60-80公里',
|
||
image: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop'
|
||
},
|
||
{
|
||
name: '电动摩托车',
|
||
price: '¥60-100/日',
|
||
desc: '动力充沛，适合中距离配送，单次续航100-150公里',
|
||
image: 'https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?w=400&h=300&fit=crop'
|
||
},
|
||
{
|
||
name: '电动三轮车',
|
||
price: '¥100-180/日',
|
||
desc: '载货量大，适合商超配送和外卖聚合配送',
|
||
image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop'
|
||
},
|
||
{
|
||
name: '轻型电动卡车',
|
||
price: '¥200-350/日',
|
||
desc: '超大载货空间，适合物流最后一公里和批量配送',
|
||
image: 'https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=400&h=300&fit=crop'
|
||
}
|
||
]
|
||
|
||
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租管车更轻松。以前自己修车、找充电桩的时间都省下来了，现在只管跑单赚钱。',
|
||
author: '张师傅 · 外卖骑手',
|
||
avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face'
|
||
},
|
||
{
|
||
quote: '加盟51租做副业，租了3辆车给骑手用，每月多赚3000多。平台结算快，账目清晰，比以前轻松多了。',
|
||
author: '李老板 · 小型运营商',
|
||
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'
|
||
},
|
||
{
|
||
quote: '多门店统一管理后，调度效率提升了一倍。51租的系统真的很专业，订单、车辆、财务一目了然。',
|
||
author: '王总 · 连锁运营商',
|
||
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
|
||
}
|
||
]
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
phone: '',
|
||
message: ''
|
||
})
|
||
|
||
const handleSubmit = () => {
|
||
alert(`感谢您的留言！我们会尽快与您联系。\n\n姓名：${form.name}\n电话：${form.phone}`)
|
||
form.name = ''
|
||
form.phone = ''
|
||
form.message = ''
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 无需额外样式，已在 style.css 中定义 */
|
||
</style>
|