中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定制客运系统 - 交互原型</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 首页/导航 --> <div id="home" class="screen active"> <div class="header"> <h1>定制客运系统</h1> <p>智能调度 · 便捷出行</p> </div> <div class="nav-cards"> <div class="nav-card" onclick="showScreen('passenger')"> <div class="card-icon passenger-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <h3>乘客端小程序</h3> <p>预约乘车、实时追踪</p> </div> <div class="nav-card" onclick="showScreen('driver')"> <div class="card-icon driver-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h3"></path> <circle cx="6.5" cy="16.5" r="2.5"></circle> <circle cx="16.5" cy="16.5" r="2.5"></circle> </svg> </div> <h3>司机端小程序</h3> <p>接单管理、收入查看</p> </div> <div class="nav-card" onclick="showScreen('admin')"> <div class="card-icon admin-icon"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="9" y1="21" x2="9" y2="9"></line> </svg> </div> <h3>后台管理系统</h3> <p>数据统计、财务管理</p> </div> </div> </div> <!-- 乘客端首页 --> <div id="passenger" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('home')">←</button> <h2>乘客端</h2> <div class="header-actions"> <button class="icon-btn" onclick="showToast('消息中心')">🔔</button> </div> </div> <div class="mobile-content"> <div class="user-welcome"> <div class="avatar">👤</div> <div class="user-info"> <span class="greeting">您好，用户</span> <span class="status">已登录</span> </div> </div> <div class="quick-actions"> <div class="action-item" onclick="showScreen('passenger-order')"> <div class="action-icon">📅</div> <span>预约订单</span> </div> <div class="action-item" onclick="showScreen('passenger-history')"> <div class="action-icon">📋</div> <span>历史订单</span> </div> <div class="action-item" onclick="showScreen('passenger-wallet')"> <div class="action-icon">💰</div> <span>我的钱包</span> </div> <div class="action-item" onclick="showScreen('passenger-profile')"> <div class="action-icon">👤</div> <span>个人信息</span> </div> </div> <!-- 班次信息模块 --> <div class="module-section"> <h3>今日班次</h3> <div class="schedule-filter"> <span class="filter-label">选择日期:</span> <select class="schedule-date" onchange="showToast('日期已切换')"> <option>今天 (04-11)</option> <option>明天 (04-12)</option> <option>后天 (04-13)</option> </select> </div> <div class="schedule-list" id="schedule-list"> <!-- 班次卡片1 --> <div class="schedule-card" onclick="selectSchedule(this, '06:30')"> <div class="schedule-time"> <span class="time-main">06:30</span> <span class="time-period">早班车</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">北京站</span> <span class="arrow-icon">→</span> <span class="to">首都机场T3</span> </div> <div class="vehicle-info"> <span class="plate">京A·12345</span> <span class="seats">余票: 5张</span> </div> </div> <div class="schedule-price">¥45</div> </div> <!-- 班次卡片2 --> <div class="schedule-card" onclick="selectSchedule(this, '07:00')"> <div class="schedule-time"> <span class="time-main">07:00</span> <span class="time-period">早班车</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">北京站</span> <span class="arrow-icon">→</span> <span class="to">首都机场T3</span> </div> <div class="vehicle-info"> <span class="plate">京B·67890</span> <span class="seats">余票: 8张</span> </div> </div> <div class="schedule-price">¥45</div> </div> <!-- 班次卡片3 --> <div class="schedule-card sold-out-card" onclick="showToast('该班次已售罄')"> <div class="schedule-time"> <span class="time-main">08:00</span> <span class="time-period">早班车</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">北京站</span> <span class="arrow-icon">→</span> <span class="to">首都机场T3</span> </div> <div class="vehicle-info"> <span class="plate">京C·11111</span> <span class="seats sold-out">已售罄</span> </div> </div> <div class="schedule-price disabled">¥45</div> </div> <!-- 班次卡片4 --> <div class="schedule-card" onclick="selectSchedule(this, '09:00')"> <div class="schedule-time"> <span class="time-main">09:00</span> <span class="time-period">上午班</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">北京站</span> <span class="arrow-icon">→</span> <span class="to">大兴机场</span> </div> <div class="vehicle-info"> <span class="plate">京D·22222</span> <span class="seats">余票: 12张</span> </div> </div> <div class="schedule-price">¥55</div> </div> <!-- 班次卡片5 --> <div class="schedule-card" onclick="selectSchedule(this, '10:30')"> <div class="schedule-time"> <span class="time-main">10:30</span> <span class="time-period">上午班</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">国贸</span> <span class="arrow-icon">→</span> <span class="to">首都机场T3</span> </div> <div class="vehicle-info"> <span class="plate">京E·33333</span> <span class="seats">余票: 6张</span> </div> </div> <div class="schedule-price">¥40</div> </div> <!-- 班次卡片6 --> <div class="schedule-card" onclick="selectSchedule(this, '14:00')"> <div class="schedule-time"> <span class="time-main">14:00</span> <span class="time-period">下午班</span> </div> <div class="schedule-info"> <div class="route"> <span class="from">北京站</span> <span class="arrow-icon">→</span> <span class="to">首都机场T3</span> </div> <div class="vehicle-info"> <span class="plate">京F·44444</span> <span class="seats">余票: 10张</span> </div> </div> <div class="schedule-price">¥45</div> </div> </div> <button class="primary-btn full" onclick="showScreen('passenger-order')" style="margin-top: 15px;"> 立即预约选中的班次 </button> </div> <div class="module-section"> <h3>功能模块</h3> <div class="module-list"> <div class="module-item" onclick="showScreen('passenger-login')"> <div class="module-icon">🔐</div> <div class="module-info"> <h4>登录与认证</h4> <p>微信授权登录、绑定手机号、身份认证</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('passenger-base')"> <div class="module-icon">📝</div> <div class="module-info"> <h4>基础信息</h4> <p>常用地址管理、紧急联系人设置</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('passenger-order')"> <div class="module-icon">🚗</div> <div class="module-info"> <h4>订单功能</h4> <p>选择上下车点、预约时间、实时追踪</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('passenger-payment')"> <div class="module-icon">💳</div> <div class="module-info"> <h4>支付功能</h4> <p>微信支付、优惠券、钱包充值</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('passenger-notify')"> <div class="module-icon">🔔</div> <div class="module-info"> <h4>消息通知</h4> <p>订单状态变更、司机到达提醒</p> </div> <span class="arrow">›</span> </div> </div> </div> </div> </div> </div> <!-- 乘客端-登录认证详情 --> <div id="passenger-login" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>登录与认证</h2> </div> <div class="mobile-content"> <div class="detail-section"> <div class="detail-item"> <div class="detail-icon">1</div> <div class="detail-content"> <h4>微信授权登录</h4> <p>微信一键登录，自动获取昵称和头像</p> </div> </div> <div class="detail-item"> <div class="detail-icon">2</div> <div class="detail-content"> <h4>绑定手机号</h4> <p>验证手机号，用于订单通知和联系</p> </div> </div> <div class="detail-item"> <div class="detail-icon">3</div> <div class="detail-content"> <h4>身份认证</h4> <p>实名认证，保障出行安全</p> </div> </div> </div> <button class="primary-btn" onclick="showToast('演示：模拟登录成功')">模拟登录</button> </div> </div> </div> <!-- 乘客端-基础信息 --> <div id="passenger-base" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>基础信息</h2> </div> <div class="mobile-content"> <div class="info-card"> <div class="info-row"> <span class="label">常用起点</span> <span class="value">当前位置 / 我的位置</span> </div> <div class="info-row"> <span class="label">常用终点</span> <span class="value">添加常用地址</span> </div> <div class="info-row"> <span class="label">紧急联系人</span> <span class="value">未设置</span> </div> </div> <button class="secondary-btn" onclick="showToast('编辑基础信息')">编辑信息</button> </div> </div> </div> <!-- 乘客端-订单预约 --> <div id="passenger-order" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>预约订单</h2> </div> <div class="mobile-content order-page"> <div class="map-placeholder"> <div class="map-overlay"> <p>📍 地图区域</p> <p class="small">显示上下车位置</p> </div> </div> <div class="order-form"> <div class="form-group"> <label>起点</label> <div class="input-field" onclick="showToast('选择起点位置')"> <span>📍</span> <input type="text" value="当前位置" readonly> </div> </div> <div class="form-group"> <label>终点</label> <div class="input-field" onclick="showToast('选择终点位置')"> <span>🏁</span> <input type="text" value="选择目的地" readonly> </div> </div> <div class="form-row"> <div class="form-group half"> <label>出发日期</label> <div class="input-field"> <span>📅</span> <input type="text" value="今天" readonly> </div> </div> <div class="form-group half"> <label>出发时间</label> <div class="input-field"> <span>⏰</span> <input type="text" value="选择时间" readonly> </div> </div> </div> <div class="form-group"> <label>乘车人数</label> <div class="counter"> <button onclick="changeCount('passenger-count', -1)">-</button> <span id="passenger-count">1</span> <button onclick="changeCount('passenger-count', 1)">+</button> </div> </div> <button class="primary-btn full" onclick="showToast('订单已提交，等待司机接单')">提交订单</button> </div> </div> </div> </div> <!-- 乘客端-订单追踪 --> <div id="passenger-track" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger-order')">←</button> <h2>订单追踪</h2> </div> <div class="mobile-content"> <div class="tracking-card"> <div class="status-badge">司机已接单</div> <div class="driver-info"> <div class="driver-avatar">🚗</div> <div class="driver-details"> <h4>张师傅</h4> <p>京A·12345 · 白色商务车</p> <div class="rating">⭐ 4.9</div> </div> <button class="call-btn" onclick="showToast('拨打电话')">📞</button> </div> <div class="timeline"> <div class="timeline-item completed"> <span class="dot"></span> <div class="content"> <p class="title">已出发</p> <p class="time">预计5分钟后到达</p> </div> </div> <div class="timeline-item"> <span class="dot"></span> <div class="content"> <p class="title">等待乘客</p> <p class="time">请在出发点等候</p> </div> </div> </div> </div> </div> </div> </div> <!-- 乘客端-支付 --> <div id="passenger-payment" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>支付</h2> </div> <div class="mobile-content"> <div class="payment-summary"> <div class="amount">¥28.00</div> <p class="detail">基础票价 ¥25 + 附加费 ¥3</p> </div> <div class="payment-methods"> <div class="method selected"> <span class="method-icon">💳</span> <span>微信支付</span> <span class="check">✓</span> </div> <div class="method"> <span class="method-icon">💰</span> <span>余额支付 (¥50.00)</span> <span class="check">✓</span> </div> </div> <div class="coupon-section"> <span>优惠券</span> <span class="coupon-info">2张可用 ›</span> </div> <button class="primary-btn full" onclick="showToast('支付成功')">确认支付</button> </div> </div> </div> <!-- 乘客端-历史订单 --> <div id="passenger-history" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>我的订单</h2> </div> <div class="mobile-content"> <div class="filter-tabs"> <span class="tab active" onclick="filterOrders('all', this)">全部</span> <span class="tab" onclick="filterOrders('pending', this)">待出行</span> <span class="tab" onclick="filterOrders('completed', this)">已完成</span> <span class="tab" onclick="filterOrders('cancelled', this)">已取消</span> </div> <div class="order-list" id="order-list"> <!-- 待出行订单 --> <div class="order-card pending-order" data-status="pending"> <div class="order-header"> <span class="order-date">今天 06:30</span> <span class="order-status pending">待出行</span> </div> <div class="order-detail"> <div class="detail-row"> <span class="label">路线</span> <span>北京站 → 首都机场T3</span> </div> <div class="detail-row"> <span class="label">车牌</span> <span>京A·12345</span> </div> <div class="detail-row"> <span class="label">人数</span> <span>1人</span> </div> </div> <div class="order-footer"> <span class="price">¥45.00</span> <div class="order-actions"> <button class="text-btn" onclick="viewOrderDetail('pending')">详情</button> <button class="cancel-btn" onclick="cancelOrder(this, 'pending')">取消订单</button> </div> </div> </div> <!-- 已预约订单 --> <div class="order-card pending-order" data-status="pending"> <div class="order-header"> <span class="order-date">明天 09:00</span> <span class="order-status reserved">已预约</span> </div> <div class="order-detail"> <div class="detail-row"> <span class="label">路线</span> <span>北京站 → 大兴机场</span> </div> <div class="detail-row"> <span class="label">车牌</span> <span>京D·22222</span> </div> <div class="detail-row"> <span class="label">人数</span> <span>2人</span> </div> </div> <div class="order-footer"> <span class="price">¥110.00</span> <div class="order-actions"> <button class="text-btn" onclick="viewOrderDetail('reserved')">详情</button> <button class="cancel-btn" onclick="cancelOrder(this, 'reserved')">取消订单</button> </div> </div> </div> <!-- 已完成订单 --> <div class="order-card completed-order" data-status="completed"> <div class="order-header"> <span class="order-date">2024-01-15 08:30</span> <span class="order-status completed">已完成</span> </div> <div class="order-detail"> <div class="detail-row"> <span class="label">路线</span> <span>北京站 → 首都机场T3</span> </div> <div class="detail-row"> <span class="label">人数</span> <span>1人</span> </div> </div> <div class="order-footer"> <span class="price">¥45.00</span> <button class="text-btn" onclick="showToast('查看已完成订单详情')">查看详情</button> </div> </div> <!-- 已完成订单2 --> <div class="order-card completed-order" data-status="completed"> <div class="order-header"> <span class="order-date">2024-01-14 18:00</span> <span class="order-status completed">已完成</span> </div> <div class="order-detail"> <div class="detail-row"> <span class="label">路线</span> <span>国贸 → 望京</span> </div> <div class="detail-row"> <span class="label">人数</span> <span>1人</span> </div> </div> <div class="order-footer"> <span class="price">¥32.00</span> <button class="text-btn" onclick="showToast('查看已完成订单详情')">查看详情</button> </div> </div> </div> </div> </div> </div> <!-- 乘客端-车次详情预约 --> <div id="passenger-schedule-detail" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>班次详情</h2> </div> <div class="mobile-content"> <div class="schedule-detail-card"> <div class="detail-header"> <div class="detail-time"> <span class="time-value" id="detail-time">06:30</span> <span class="time-label">发车时间</span> </div> <div class="detail-period"> <span class="period-tag">早班车</span> </div> </div> <div class="detail-section"> <h4>行程信息</h4> <div class="route-detail"> <div class="route-point"> <div class="point-marker start"></div> <div class="point-info"> <span class="point-name">北京站</span> <span class="point-time">06:30 出发</span> </div> </div> <div class="route-line"></div> <div class="route-point"> <div class="point-marker end"></div> <div class="point-info"> <span class="point-name">首都机场T3</span> <span class="point-time">预计 07:15 到达</span> </div> </div> </div> </div> <div class="detail-section"> <h4>车辆信息</h4> <div class="vehicle-detail"> <div class="vehicle-row"> <span class="label">车牌号</span> <span class="value" id="detail-plate">京A·12345</span> </div> <div class="vehicle-row"> <span class="label">车型</span> <span class="value">商务7座</span> </div> <div class="vehicle-row"> <span class="label">司机</span> <span class="value">张师傅</span> </div> <div class="vehicle-row"> <span class="label">联系电话</span> <span class="value">138****1234</span> </div> </div> </div> <div class="detail-section"> <h4>座位信息</h4> <div class="seat-info"> <div class="seat-grid" id="seat-grid"> <div class="seat available" onclick="selectSeat(this, 1)">1</div> <div class="seat available" onclick="selectSeat(this, 2)">2</div> <div class="seat available" onclick="selectSeat(this, 3)">3</div> <div class="seat occupied" onclick="showToast('该座位已售')">4</div> <div class="seat occupied" onclick="showToast('该座位已售')">5</div> <div class="seat available" onclick="selectSeat(this, 6)">6</div> <div class="seat occupied" onclick="showToast('该座位已售')">7</div> </div> <div class="seat-legend"> <span class="legend-item"><span class="dot available"></span>可选</span> <span class="legend-item"><span class="dot selected"></span>已选</span> <span class="legend-item"><span class="dot occupied"></span>已售</span> </div> <div class="selected-seats"> 已选座位: <span id="selected-seats-display">无</span> </div> </div> </div> <div class="detail-section"> <h4>费用明细</h4> <div class="price-detail"> <div class="price-row"> <span>票价 × <span id="seat-count">0</span>人</span> <span>¥<span id="base-price">0</span></span> </div> <div class="price-row"> <span>优惠券</span> <span>-¥<span id="coupon-discount">0</span></span> </div> <div class="price-row total"> <span>合计</span> <span>¥<span id="total-price">0</span></span> </div> </div> </div> <button class="primary-btn full" onclick="confirmBooking()">确认预约</button> </div> </div> </div> </div> <!-- 取消确认弹窗 --> <div id="cancel-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h3>确认取消订单</h3> </div> <div class="modal-body"> <p>确定要取消该订单吗？</p> <p class="warning">* 如在发车前30分钟内取消，可能影响您的信用记录</p> </div> <div class="modal-footer"> <button class="secondary-btn" onclick="closeCancelModal()">返回</button> <button class="danger-btn" onclick="confirmCancelOrder()">确认取消</button> </div> </div> </div> <!-- 乘客端-钱包 --> <div id="passenger-wallet" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>我的钱包</h2> </div> <div class="mobile-content"> <div class="balance-card"> <p class="label">账户余额</p> <p class="balance">¥50.00</p> <button class="secondary-btn" onclick="showToast('充值功能')">充值</button> </div> <div class="coupon-list"> <h4>我的优惠券</h4> <div class="coupon-item"> <div class="coupon-info"> <span class="coupon-value">¥5</span> <span class="coupon-desc">满30元可用</span> </div> <span class="coupon-expire">有效期至 2024-02-01</span> </div> <div class="coupon-item"> <div class="coupon-info"> <span class="coupon-value">¥10</span> <span class="coupon-desc">新用户专享</span> </div> <span class="coupon-expire">有效期至 2024-02-15</span> </div> </div> </div> </div> </div> <!-- 乘客端-个人信息 --> <div id="passenger-profile" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>个人信息</h2> </div> <div class="mobile-content"> <div class="profile-avatar"> <div class="avatar-large">👤</div> <button class="text-btn">修改头像</button> </div> <div class="profile-form"> <div class="form-group"> <label>昵称</label> <input type="text" value="用户名称"> </div> <div class="form-group"> <label>手机号</label> <input type="text" value="138****8888"> </div> <div class="form-group"> <label>实名认证</label> <span class="verified">已认证 ✓</span> </div> </div> <button class="primary-btn full" onclick="showToast('保存成功')">保存</button> </div> </div> </div> <!-- 乘客端-消息通知 --> <div id="passenger-notify" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('passenger')">←</button> <h2>消息通知</h2> </div> <div class="mobile-content"> <div class="notification-list"> <div class="notification-item"> <div class="notif-icon">🚗</div> <div class="notif-content"> <h4>司机已到达</h4> <p>您的司机已到达，请注意上车</p> <span class="notif-time">2分钟前</span> </div> </div> <div class="notification-item"> <div class="notif-icon">✅</div> <div class="notif-content"> <h4>订单已完成</h4> <p>感谢您使用定制客运服务</p> <span class="notif-time">今天 10:30</span> </div> </div> <div class="notification-item"> <div class="notif-icon">🎫</div> <div class="notif-content"> <h4>优惠券到账</h4> <p>您获得一张¥5优惠券</p> <span class="notif-time">昨天</span> </div> </div> </div> </div> </div> </div> <!-- 司机端 --> <div id="driver" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('home')">←</button> <h2>司机端</h2> <div class="header-actions"> <button class="icon-btn" onclick="showToast('公告')">📢</button> </div> </div> <div class="mobile-content"> <div class="driver-status-bar"> <div class="status-toggle"> <span class="toggle-label">出车状态</span> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </div> <div class="today-stats"> <div class="stat"> <span class="value">8</span> <span class="label">今日订单</span> </div> <div class="stat"> <span class="value">¥320</span> <span class="label">今日收入</span> </div> </div> </div> <div class="driver-main-panel"> <h3>司机列表</h3> <div class="driver-card"> <div class="driver-name"> <strong>A司机</strong> <span class="tag">满员</span> </div> <div class="passenger-pool"> <h4>乘客池</h4> <div class="pool-actions"> <span class="pool-stat">已选中: 3</span> <span class="pool-stat">已确认: 2</span> <span class="pool-stat">系统确认: 5</span> </div> </div> <div class="passenger-list"> <div class="passenger-row"> <span class="time">6-7点</span> <span class="name">张三</span> <span class="count">2人</span> <div class="action-btns"> <button class="mini-btn">左移</button> <button class="mini-btn">右移</button> <button class="mini-btn">取消</button> </div> </div> <div class="passenger-row"> <span class="time">7-8点</span> <span class="name">李四</span> <span class="count">3人</span> <div class="action-btns"> <button class="mini-btn">左移</button> <button class="mini-btn">右移</button> <button class="mini-btn">取消</button> </div> </div> </div> <p class="note">说明：起始点位置能够做到一键导航</p> <button class="primary-btn full" onclick="showToast('已发车')">发车</button> </div> </div> <div class="module-section"> <h3>功能模块</h3> <div class="module-list"> <div class="module-item" onclick="showScreen('driver-login')"> <div class="module-icon">🔐</div> <div class="module-info"> <h4>登录与认证</h4> <p>微信授权登录、绑定手机号</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('driver-income')"> <div class="module-icon">💰</div> <div class="module-info"> <h4>收入和明细</h4> <p>历史订单、收入统计</p> </div> <span class="arrow">›</span> </div> <div class="module-item" onclick="showScreen('driver-rating')"> <div class="module-icon">⭐</div> <div class="module-info"> <h4>评价系统</h4> <p>司机评分、乘客评价</p> </div> <span class="arrow">›</span> </div> </div> </div> </div> </div> </div> <!-- 司机端-登录认证 --> <div id="driver-login" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('driver')">←</button> <h2>司机登录与认证</h2> </div> <div class="mobile-content"> <div class="detail-section"> <div class="detail-item"> <div class="detail-icon">1</div> <div class="detail-content"> <h4>微信授权登录</h4> <p>司机微信一键登录，绑定手机号</p> </div> </div> <div class="detail-item"> <div class="detail-icon">2</div> <div class="detail-content"> <h4>资质认证</h4> <p>提交驾驶证、运营证等资质</p> </div> </div> <div class="detail-item"> <div class="detail-icon">3</div> <div class="detail-content"> <h4>人脸识别</h4> <p>身份核验，确保人证合一</p> </div> </div> </div> <button class="primary-btn" onclick="showToast('登录成功')">模拟登录</button> </div> </div> </div> <!-- 司机端-收入明细 --> <div id="driver-income" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('driver')">←</button> <h2>收入明细</h2> </div> <div class="mobile-content"> <div class="income-summary"> <div class="summary-row"> <div class="summary-item"> <span class="value">¥1,280</span> <span class="label">今日收入</span> </div> <div class="summary-item"> <span class="value">32</span> <span class="label">今日载客</span> </div> </div> </div> <div class="filter-tabs"> <span class="tab active">今日</span> <span class="tab">本周</span> <span class="tab">本月</span> </div> <div class="income-list"> <div class="income-item"> <div class="income-info"> <span class="time">08:30 - 09:15</span> <span class="passengers">3人</span> </div> <div class="income-amount">¥45.00</div> </div> <div class="income-item"> <div class="income-info"> <span class="time">09:30 - 10:00</span> <span class="passengers">2人</span> </div> <div class="income-amount">¥30.00</div> </div> <div class="income-item"> <div class="income-info"> <span class="time">10:15 - 11:00</span> <span class="passengers">4人</span> </div> <div class="income-amount">¥60.00</div> </div> </div> </div> </div> </div> <!-- 司机端-评价系统 --> <div id="driver-rating" class="screen"> <div class="mobile-frame"> <div class="mobile-header"> <button class="back-btn" onclick="showScreen('driver')">←</button> <h2>评价系统</h2> </div> <div class="mobile-content"> <div class="rating-overview"> <div class="rating-score">4.9</div> <div class="rating-stars">⭐⭐⭐⭐⭐</div> <p class="rating-count">共 256 次评价</p> </div> <div class="review-list"> <h4>乘客评价</h4> <div class="review-item"> <div class="review-header"> <span class="star">⭐⭐⭐⭐⭐</span> <span class="date">01-15</span> </div> <p class="review-text">司机态度很好，准时到达，车内干净整洁</p> </div> <div class="review-item"> <div class="review-header"> <span class="star">⭐⭐⭐⭐⭐</span> <span class="date">01-14</span> </div> <p class="review-text">非常满意，会推荐给朋友</p> </div> </div> </div> </div> </div> <!-- 后台管理系统 --> <div id="admin" class="screen"> <div class="admin-container"> <div class="admin-sidebar"> <div class="admin-logo"> <h2>后台管理</h2> </div> <nav class="admin-nav"> <a href="#" class="nav-item active" onclick="showAdminPanel('dashboard', this)"> <span class="icon">📊</span> <span>数据统计</span> </a> <a href="#" class="nav-item" onclick="showAdminPanel('drivers', this)"> <span class="icon">🚗</span> <span>司机管理</span> </a> <a href="#" class="nav-item" onclick="showAdminPanel('orders', this)"> <span class="icon">📋</span> <span>订单管理</span> </a> <a href="#" class="nav-item" onclick="showAdminPanel('finance', this)"> <span class="icon">💰</span> <span>财务管理</span> </a> <a href="#" class="nav-item" onclick="showAdminPanel('announcement', this)"> <span class="icon">📢</span> <span>系统公告</span> </a> <a href="#" class="nav-item" onclick="showAdminPanel('schedule', this)"> <span class="icon">📅</span> <span>排班管理</span> </a> </nav> </div> <div class="admin-main"> <!-- 数据统计面板 --> <div id="dashboard" class="admin-panel active"> <h2>数据统计</h2> <div class="stats-grid"> <div class="stat-card"> <div class="stat-icon">📅</div> <div class="stat-info"> <span class="stat-value">1,234</span> <span class="stat-label">今日订单</span> </div> </div> <div class="stat-card"> <div class="stat-icon">👥</div> <div class="stat-info"> <span class="stat-value">3,567</span> <span class="stat-label">今日乘客</span> </div> </div> <div class="stat-card"> <div class="stat-icon">💵</div> <div class="stat-info"> <span class="stat-value">¥45,678</span> <span class="stat-label">今日收入</span> </div> </div> <div class="stat-card"> <div class="stat-icon">🚗</div> <div class="stat-info"> <span class="stat-value">89</span> <span class="stat-label">在线司机</span> </div> </div> </div> <div class="chart-placeholder"> <p>📈 数据图表区域</p> <p class="small">订单量趋势、收入统计等</p> </div> </div> <!-- 司机管理面板 --> <div id="drivers" class="admin-panel"> <h2>司机管理</h2> <div class="panel-actions"> <input type="text" placeholder="搜索司机..." class="search-input"> <button class="primary-btn" onclick="showToast('添加司机')">添加司机</button> </div> <table class="data-table"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>车牌号</th> <th>联系电话</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张师傅</td> <td>京A·12345</td> <td>138****1234</td> <td><span class="status online">在线</span></td> <td> <button class="text-btn" onclick="showToast('查看详情')">详情</button> <button class="text-btn" onclick="showToast('编辑')">编辑</button> </td> </tr> <tr> <td>002</td> <td>王师傅</td> <td>京B·67890</td> <td>139****5678</td> <td><span class="status offline">离线</span></td> <td> <button class="text-btn" onclick="showToast('查看详情')">详情</button> <button class="text-btn" onclick="showToast('编辑')">编辑</button> </td> </tr> <tr> <td>003</td> <td>李师傅</td> <td>京C·11111</td> <td>137****9012</td> <td><span class="status busy">工作中</span></td> <td> <button class="text-btn" onclick="showToast('查看详情')">详情</button> <button class="text-btn" onclick="showToast('编辑')">编辑</button> </td> </tr> </tbody> </table> </div> <!-- 订单管理面板 --> <div id="orders" class="admin-panel"> <h2>订单管理</h2> <div class="panel-actions"> <select class="select-input"> <option>全部状态</option> <option>待接单</option> <option>进行中</option> <option>已完成</option> </select> <input type="date" class="date-input"> <button class="primary-btn" onclick="showToast('导出订单')">导出</button> </div> <table class="data-table"> <thead> <tr> <th>订单号</th> <th>乘客</th> <th>起点</th> <th>终点</th> <th>金额</th> <th>状态</th> <th>下单时间</th> </tr> </thead> <tbody> <tr> <td>ORD202401150001</td> <td>张三</td> <td>北京站</td> <td>首都机场T3</td> <td>¥45</td> <td><span class="status completed">已完成</span></td> <td>2024-01-15 08:30</td> </tr> <tr> <td>ORD202401150002</td> <td>李四</td> <td>国贸</td> <td>望京</td> <td>¥32</td> <td><span class="status completed">已完成</span></td> <td>2024-01-15 09:15</td> </tr> <tr> <td>ORD202401150003</td> <td>王五</td> <td>中关村</td> <td>三里屯</td> <td>¥38</td> <td><span class="status processing">进行中</span></td> <td>2024-01-15 10:00</td> </tr> </tbody> </table> </div> <!-- 财务管理面板 --> <div id="finance" class="admin-panel"> <h2>财务管理</h2> <div class="stats-grid"> <div class="stat-card highlight"> <div class="stat-info"> <span class="stat-label">本月平台收入</span> <span class="stat-value">¥128,456</span> </div> </div> <div class="stat-card"> <div class="stat-info"> <span class="stat-label">待结算</span> <span class="stat-value">¥23,450</span> </div> </div> </div> <div class="panel-actions"> <input type="month" class="date-input"> <button class="primary-btn" onclick="showToast('导出对账单')">导出对账单</button> </div> <table class="data-table"> <thead> <tr> <th>日期</th> <th>司机</th> <th>订单数</th> <th>司机收入</th> <th>平台抽成</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>2024-01-15</td> <td>张师傅</td> <td>12</td> <td>¥480</td> <td>¥120</td> <td><button class="text-btn" onclick="showToast('转账')">转账</button></td> </tr> <tr> <td>2024-01-15</td> <td>王师傅</td> <td>8</td> <td>¥320</td> <td>¥80</td> <td><button class="text-btn" onclick="showToast('转账')">转账</button></td> </tr> </tbody> </table> </div> <!-- 系统公告面板 --> <div id="announcement" class="admin-panel"> <h2>系统公告</h2> <button class="primary-btn" onclick="showToast('发布公告')">发布公告</button> <div class="announcement-list"> <div class="announcement-item"> <div class="announce-header"> <h4>春节期间运营安排</h4> <span class="date">2024-01-15</span> </div> <p>春节期间运营时间调整，请各位乘客提前安排出行...</p> <div class="announce-actions"> <button class="text-btn" onclick="showToast('编辑')">编辑</button> <button class="text-btn danger" onclick="showToast('删除')">删除</button> </div> </div> <div class="announcement-item"> <div class="announce-header"> <h4>新增线路通知</h4> <span class="date">2024-01-10</span> </div> <p>即日起新增北京站至大兴机场线路...</p> <div class="announce-actions"> <button class="text-btn" onclick="showToast('编辑')">编辑</button> <button class="text-btn danger" onclick="showToast('删除')">删除</button> </div> </div> </div> </div> <!-- 排班管理面板 --> <div id="schedule" class="admin-panel"> <h2>排班管理</h2> <div class="panel-actions"> <select class="select-input"> <option>全部司机</option> <option>张师傅</option> <option>王师傅</option> </select> <input type="date" class="date-input"> <button class="primary-btn" onclick="showToast('添加排班')">添加排班</button> </div> <table class="data-table"> <thead> <tr> <th>日期</th> <th>时间段</th> <th>司机</th> <th>车辆</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>2024-01-16</td> <td>06:00 - 12:00</td> <td>张师傅</td> <td>京A·12345</td> <td><span class="status online">已排班</span></td> <td> <button class="text-btn" onclick="showToast('编辑')">编辑</button> <button class="text-btn danger" onclick="showToast('取消')">取消</button> </td> </tr> <tr> <td>2024-01-16</td> <td>12:00 - 18:00</td> <td>王师傅</td> <td>京B·67890</td> <td><span class="status online">已排班</span></td> <td> <button class="text-btn" onclick="showToast('编辑')">编辑</button> <button class="text-btn danger" onclick="showToast('取消')">取消</button> </td> </tr> <tr> <td>2024-01-16</td> <td>18:00 - 24:00</td> <td>李师傅</td> <td>京C·11111</td> <td><span class="status offline">待确认</span></td> <td> <button class="text-btn" onclick="showToast('编辑')">编辑</button> <button class="text-btn danger" onclick="showToast('取消')">取消</button> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Toast提示 --> <div id="toast" class="toast"></div> <script src="script.js"></script> </body> </html>
保存更改
取消
访问码:
ds59dv5g
复制链接
重新生成