291 lines
15 KiB
Vue
291 lines
15 KiB
Vue
<template>
|
||
<div class=" bg-white dark:bg-gray-900">
|
||
<!-- 头部区域 -->
|
||
<header class="bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-yellow-600 dark:to-yellow-700 py-16">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
|
||
共享电动车APP/小程序
|
||
</h1>
|
||
<p class="text-xl text-white opacity-90">
|
||
轻松出行，智能骑行体验
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<section class="py-20">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
|
||
<!-- 左侧：手机界面展示 -->
|
||
<div class="relative">
|
||
<!-- 手机设备 -->
|
||
<div class="relative mx-auto w-80">
|
||
<!-- 手机外壳 -->
|
||
<div class="bg-gray-800 rounded-[40px] p-4 shadow-2xl">
|
||
<!-- 手机屏幕 -->
|
||
<div class="bg-white rounded-[32px] overflow-hidden h-[600px] relative">
|
||
|
||
<!-- 顶部状态栏 -->
|
||
<div class="bg-yellow-400 h-12 flex items-center justify-between px-6">
|
||
<span class="text-lg font-bold text-gray-800">玖玖出行</span>
|
||
<div class="flex space-x-2">
|
||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地图区域 -->
|
||
<div class="h-48 bg-gradient-to-br from-blue-100 to-green-100 relative">
|
||
<!-- 地图网格 -->
|
||
<div class="absolute inset-0 opacity-30">
|
||
<div class="grid grid-cols-8 gap-4 h-full">
|
||
<div v-for="i in 8" :key="i" class="border-r border-gray-400"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 定位点 -->
|
||
<div class="absolute top-1/3 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||
<div class="absolute top-1/2 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||
<div class="absolute top-2/3 left-3/4 w-3 h-3 bg-blue-500 rounded-full"/>
|
||
|
||
<!-- 当前位置标记 -->
|
||
<div class="absolute bottom-4 left-4 bg-white rounded-lg px-3 py-1 shadow">
|
||
<span class="text-sm font-medium">当前位置</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能按钮区域 -->
|
||
<div class="p-6 space-y-4">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<button class="bg-yellow-100 hover:bg-yellow-200 rounded-lg p-3 text-center transition-colors">
|
||
<div class="text-yellow-600 font-semibold">实时路况</div>
|
||
</button>
|
||
<button class="bg-green-100 hover:bg-green-200 rounded-lg p-3 text-center transition-colors">
|
||
<div class="text-green-600 font-semibold">地图更新</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 扫码用车按钮 -->
|
||
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-4/5">
|
||
<button
|
||
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 rounded-full w-full shadow-lg transition-colors">
|
||
扫码用车
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：功能特性列表 -->
|
||
<div class="space-y-8">
|
||
<!-- 功能网格 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-2 gap-6">
|
||
|
||
<!-- 实名认证用车 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">实名认证用车</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||
通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一键预约用车 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键预约用车</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">选择合适车辆，一键预约车辆</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 免押金卡骑行 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">免押金卡骑行</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||
考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用车前确认续航里程 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">用车前确认续航里程</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||
扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间+里程精准计费 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">时间+里程精准计费</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">根据用车时间及车辆能耗里程计算费用</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 临时停车 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">临时停车</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||
临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一键关锁结算 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键关锁结算</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">手机一键锁，系统自动结账</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 多种支付方式 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<div
|
||
class="flex-shrink-0 w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg
|
||
class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">多种支付方式</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">支持微信、支付宝等多种支付方式</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 可以添加交互逻辑
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义动画效果 */
|
||
.group:hover .group-hover\:scale-110 {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.grid {
|
||
gap: 1rem;
|
||
}
|
||
}
|
||
</style> |