编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>司机加油系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; min-height: 100vh; }
        .phone-frame { width: 100%; max-width: 414px; min-height: 100vh; margin: 0 auto; background: #fff; position: relative; overflow: hidden; }
        .status-bar { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 8px 16px; display: flex; justify-content: space-between; font-size: 12px; height: 44px; align-items: center; }
        .status-bar .time { font-weight: 600; }
        .status-icons { display: flex; gap: 4px; align-items: center; }
        .page { display: none; min-height: calc(100vh - 44px - 60px); background: #f5f5f5; }
        .page.active { display: block; }
        .header { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
        .header h1 { font-size: 18px; font-weight: 600; }
        .header-back { display: flex; align-items: center; gap: 4px; cursor: pointer; }
        
        /* 首页 */
        .home-hero { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 24px 16px; text-align: center; }
        .home-hero .avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .home-hero h2 { font-size: 20px; margin-bottom: 4px; }
        .home-hero p { font-size: 14px; opacity: 0.8; }
        .quota-card { background: linear-gradient(135deg, #ff9800, #f57c00); border-radius: 12px; padding: 16px; margin: 16px; color: #fff; cursor: pointer; }
        .quota-card h3 { font-size: 12px; opacity: 0.9; margin-bottom: 4px; }
        .quota-card .amount { font-size: 32px; font-weight: 700; }
        .quota-card .detail { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; opacity: 0.9; }
        .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e0e0e0; margin: 16px; border-radius: 12px; overflow: hidden; }
        .menu-item { background: #fff; padding: 16px 8px; text-align: center; cursor: pointer; transition: background 0.2s; }
        .menu-item:hover { background: #f0f0f0; }
        .menu-item .icon { width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .menu-item span { font-size: 12px; color: #666; }
        .quick-actions { margin: 0 16px; }
        .quick-actions h3 { font-size: 14px; color: #333; margin-bottom: 12px; }
        .action-list { background: #fff; border-radius: 12px; overflow: hidden; }
        .action-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .action-item:last-child { border-bottom: none; }
        .action-item .icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .action-item .text { flex: 1; }
        .action-item .text h4 { font-size: 14px; font-weight: 500; }
        .action-item .text p { font-size: 12px; color: #999; margin-top: 2px; }
        .action-item .arrow { color: #ccc; }
        
        /* 登录注册页 */
        .login-container { padding: 32px 24px; background: linear-gradient(180deg, #1a73e8 0%, #1a73e8 30%, #f5f5f5 30%); min-height: calc(100vh - 44px); }
        .login-logo { text-align: center; margin-bottom: 40px; }
        .login-logo .icon { width: 80px; height: 80px; background: #fff; border-radius: 20px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .login-logo h1 { color: #fff; font-size: 24px; }
        .login-form { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .form-group input { width: 100%; height: 48px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 16px; font-size: 16px; outline: none; }
        .form-group input:focus { border-color: #1a73e8; }
        .code-input { display: flex; gap: 8px; }
        .code-input input { flex: 1; }
        .code-btn { width: 100px; height: 48px; background: #1a73e8; color: #fff; border: none; border-radius: 8px; font-size: 12px; cursor: pointer; }
        .login-btn { width: 100%; height: 50px; background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .login-footer { text-align: center; margin-top: 24px; font-size: 14px; color: #fff; }
        .login-footer a { color: #fff; text-decoration: underline; }
        
        /* 加油站搜索 */
        .search-bar { background: #fff; padding: 12px 16px; display: flex; gap: 8px; }
        .search-bar input { flex: 1; height: 40px; border: 1px solid #e0e0e0; border-radius: 20px; padding: 0 16px; font-size: 14px; outline: none; }
        .search-bar input:focus { border-color: #1a73e8; }
        .search-bar button { width: 40px; height: 40px; border: none; border-radius: 50%; background: #1a73e8; color: #fff; cursor: pointer; font-size: 18px; }
        .filter-tabs { display: flex; background: #fff; padding: 8px 16px; gap: 16px; border-bottom: 1px solid #f0f0f0; }
        .filter-tab { padding: 8px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
        .filter-tab.active { color: #1a73e8; border-bottom-color: #1a73e8; }
        .map-placeholder { height: 200px; background: linear-gradient(135deg, #e3f2fd, #bbdefb); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1a73e8; }
        .map-placeholder p { font-size: 14px; margin-top: 8px; }
        .station-list { padding: 0 16px; }
        .station-card { background: #fff; border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .station-card .header { display: flex; justify-content: space-between; align-items: flex-start; background: none; padding: 0; margin-bottom: 12px; }
        .station-card .name { font-size: 16px; font-weight: 600; }
        .station-card .distance { color: #1a73e8; font-size: 12px; }
        .station-card .address { font-size: 12px; color: #999; margin-bottom: 12px; }
        .station-card .prices { display: flex; gap: 8px; flex-wrap: wrap; }
        .price-tag { background: #fff3e0; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
        .price-tag .type { color: #999; }
        .price-tag .value { color: #ff6b00; font-weight: 600; margin-left: 4px; }
        .station-card .actions { display: flex; gap: 8px; margin-top: 12px; }
        .station-card .actions button { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
        .btn-primary { background: #1a73e8; color: #fff; }
        .btn-secondary { background: #e8f0fe; color: #1a73e8; }
        .btn-orange { background: #ff9800; color: #fff; }
        
        /* 地图模式页 */
        .map-fullscreen { height: calc(100vh - 44px - 60px); background: linear-gradient(135deg, #e8f5e9, #c8e6c9); position: relative; }
        .map-controls { position: absolute; bottom: 20px; left: 16px; right: 16px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
        .map-station-info h3 { font-size: 16px; margin-bottom: 4px; }
        .map-station-info p { font-size: 12px; color: #999; margin-bottom: 12px; }
        .map-station-info .prices { display: flex; gap: 8px; margin-bottom: 12px; }
        .map-station-info .actions { display: flex; gap: 8px; }
        .map-station-info .actions button { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
        
        /* 油价对比页 */
        .compare-header { background: #fff; padding: 16px; }
        .compare-header h3 { font-size: 14px; color: #666; margin-bottom: 12px; }
        .compare-list { background: #fff; margin-top: 8px; }
        .compare-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
        .compare-item:last-child { border-bottom: none; }
        .compare-item .rank { width: 24px; height: 24px; background: #ff9800; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-right: 12px; }
        .compare-item .rank.second { background: #9e9e9e; }
        .compare-item .rank.third { background: #795548; }
        .compare-item .info { flex: 1; }
        .compare-item .info h4 { font-size: 14px; font-weight: 500; }
        .compare-item .info p { font-size: 12px; color: #999; }
        .compare-item .price { text-align: right; }
        .compare-item .price .value { font-size: 18px; font-weight: 600; color: #ff6b00; }
        .compare-item .price .liter { font-size: 12px; color: #999; }
        
        /* 油站详情 */
        .station-detail-header { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 20px 16px; }
        .station-detail-header h2 { font-size: 20px; margin-bottom: 8px; }
        .station-detail-header p { font-size: 14px; opacity: 0.9; }
        .info-section { background: #fff; padding: 16px; margin-bottom: 8px; }
        .info-section h3 { font-size: 14px; color: #333; margin-bottom: 12px; font-weight: 600; }
        .fuel-price-table { width: 100%; border-collapse: collapse; }
        .fuel-price-table th, .fuel-price-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #f0f0f0; }
        .fuel-price-table th { color: #999; font-weight: normal; font-size: 12px; }
        .fuel-price-table td { font-size: 14px; }
        .fuel-price-table .price { color: #ff6b00; font-weight: 600; }
        
        /* 加油下单 */
        .order-form { padding: 16px; }
        .form-section { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .form-section h3 { font-size: 14px; color: #333; margin-bottom: 12px; }
        .fuel-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .fuel-option { padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.2s; }
        .fuel-option.active { border-color: #1a73e8; background: #e8f0fe; }
        .fuel-option .name { font-size: 14px; font-weight: 600; }
        .fuel-option .price { font-size: 12px; color: #ff6b00; margin-top: 4px; }
        .amount-input { display: flex; align-items: center; gap: 12px; }
        .amount-input button { width: 40px; height: 40px; border: 1px solid #e0e0e0; border-radius: 50%; background: #fff; font-size: 20px; cursor: pointer; }
        .amount-input input { flex: 1; height: 48px; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center; font-size: 24px; font-weight: 600; }
        .amount-type { display: flex; gap: 8px; margin-top: 12px; }
        .amount-type button { flex: 1; padding: 8px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; }
        .amount-type button.active { border-color: #1a73e8; background: #e8f0fe; color: #1a73e8; }
        .order-summary { background: #fff; border-radius: 12px; padding: 16px; }
        .summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        .summary-row.total { border-top: 1px solid #f0f0f0; margin-top: 8px; padding-top: 12px; font-weight: 600; }
        .summary-row.total .value { color: #ff6b00; font-size: 20px; }
        .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 16px; }
        
        /* 二维码页 */
        .qr-section { text-align: center; padding: 24px; background: #fff; }
        .qr-code { width: 200px; height: 200px; background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-radius: 12px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
        .qr-code svg { width: 160px; height: 160px; }
        .order-status { display: inline-block; padding: 6px 16px; background: #fff3e0; color: #ff6b00; border-radius: 20px; font-size: 14px; margin-bottom: 12px; }
        .order-status.completed { background: #e8f5e9; color: #4caf50; }
        .order-info { background: #f9f9f9; padding: 16px; border-radius: 12px; margin: 16px; }
        .order-info .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        
        /* 订单详情 */
        .order-detail-section { background: #fff; padding: 16px; margin-bottom: 8px; }
        .order-detail-section h3 { font-size: 14px; color: #333; margin-bottom: 12px; font-weight: 600; }
        .order-detail-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
        .order-detail-row:last-child { border-bottom: none; }
        .order-detail-row .label { color: #999; }
        .order-detail-row .value { font-weight: 500; }
        
        /* 订单列表 */
        .tab-bar { display: flex; background: #fff; }
        .tab-item { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; border-bottom: 2px solid transparent; cursor: pointer; }
        .tab-item.active { color: #1a73e8; border-bottom-color: #1a73e8; }
        .order-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; cursor: pointer; }
        .order-card .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; background: none; padding: 0; }
        .order-card .station-name { font-size: 16px; font-weight: 600; }
        .order-card .status { font-size: 12px; padding: 4px 10px; border-radius: 12px; }
        .order-card .status.pending { background: #fff3e0; color: #ff9800; }
        .order-card .status.completed { background: #e8f5e9; color: #4caf50; }
        .order-card .status.refunded { background: #ffebee; color: #f44336; }
        .order-card .details { display: flex; gap: 16px; font-size: 14px; color: #666; }
        .order-card .amount { font-size: 18px; font-weight: 600; color: #ff6b00; margin-top: 12px; }
        
        /* 额度管理 */
        .quota-overview { background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; padding: 24px 16px; text-align: center; }
        .quota-overview .label { font-size: 14px; opacity: 0.9; }
        .quota-overview .value { font-size: 48px; font-weight: 700; margin: 8px 0; }
        .quota-overview .unit { font-size: 14px; opacity: 0.9; }
        .quota-stats { display: flex; background: #fff; margin: 16px; border-radius: 12px; overflow: hidden; }
        .quota-stat { flex: 1; padding: 16px; text-align: center; }
        .quota-stat:first-child { border-right: 1px solid #f0f0f0; }
        .quota-stat .label { font-size: 12px; color: #999; }
        .quota-stat .value { font-size: 20px; font-weight: 600; margin-top: 4px; }
        .quota-stat .value.used { color: #ff6b00; }
        .quota-detail-item { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; }
        .quota-detail-item .icon { width: 40px; height: 40px; border-radius: 50%; background: #e8f0fe; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 18px; }
        .quota-detail-item .info { flex: 1; }
        .quota-detail-item .info h4 { font-size: 14px; font-weight: 500; }
        .quota-detail-item .info p { font-size: 12px; color: #999; margin-top: 2px; }
        .quota-detail-item .amount { text-align: right; }
        .quota-detail-item .amount .value { font-size: 16px; font-weight: 600; color: #ff6b00; }
        .quota-detail-item .amount .remaining { font-size: 12px; color: #999; }
        
        /* 额度提醒设置 */
        .alert-setting { background: #fff; margin: 16px; border-radius: 12px; padding: 16px; }
        .alert-setting h3 { font-size: 14px; margin-bottom: 16px; }
        .slider-row { display: flex; align-items: center; gap: 12px; }
        .slider-row input[type="range"] { flex: 1; height: 4px; -webkit-appearance: none; background: #e0e0e0; border-radius: 2px; }
        .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #1a73e8; border-radius: 50%; cursor: pointer; }
        .slider-row .value { width: 60px; text-align: center; font-weight: 600; color: #1a73e8; }
        
        /* 消息通知 */
        .message-item { background: #fff; padding: 16px; border-bottom: 1px solid #f0f0f0; display: flex; gap: 12px; cursor: pointer; }
        .message-item .icon { width: 44px; height: 44px; border-radius: 50%; background: #e8f0fe; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .message-item .content { flex: 1; }
        .message-item .content h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .message-item .content p { font-size: 12px; color: #999; line-height: 1.4; }
        .message-item .time { font-size: 12px; color: #999; }
        .message-item.unread .content h4::after { content: ''; display: inline-block; width: 8px; height: 8px; background: #f44336; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
        
        /* 消息详情 */
        .message-detail { padding: 20px 16px; background: #fff; }
        .message-detail h2 { font-size: 18px; margin-bottom: 12px; }
        .message-detail .meta { font-size: 12px; color: #999; margin-bottom: 16px; }
        .message-detail .content { font-size: 14px; line-height: 1.8; color: #333; }
        
        /* 个人中心 */
        .profile-header { background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 32px 16px; text-align: center; }
        .profile-header .avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .profile-header h2 { font-size: 20px; margin-bottom: 4px; }
        .profile-header p { font-size: 14px; opacity: 0.8; }
        .verify-status { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,0.2); border-radius: 12px; font-size: 12px; margin-top: 8px; }
        .verify-status.verified { background: #4caf50; }
        .verify-status.pending { background: #ff9800; }
        .settings-list { background: #fff; margin: 16px; border-radius: 12px; overflow: hidden; }
        .settings-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .settings-item:last-child { border-bottom: none; }
        .settings-item .icon { width: 24px; height: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .settings-item .text { flex: 1; font-size: 14px; }
        .settings-item .arrow { color: #ccc; }
        
        /* 个人信息编辑 */
        .edit-form { padding: 16px; }
        .edit-item { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
        .edit-item .label { font-size: 14px; color: #999; }
        .edit-item .value { font-size: 14px; display: flex; align-items: center; gap: 8px; }
        .edit-item .value input { border: none; text-align: right; font-size: 14px; outline: none; }
        
        /* 资质认证 */
        .cert-upload { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .cert-upload h3 { font-size: 14px; margin-bottom: 12px; }
        .upload-area { border: 2px dashed #e0e0e0; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; }
        .upload-area:hover { border-color: #1a73e8; }
        .upload-area .icon { font-size: 40px; color: #999; margin-bottom: 8px; }
        .upload-area p { font-size: 14px; color: #999; }
        .upload-area small { font-size: 12px; color: #ccc; }
        .cert-preview { margin-top: 12px; display: flex; gap: 8px; }
        .cert-preview img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
        .cert-status { display: flex; align-items: center; padding: 16px; background: #e8f5e9; border-radius: 12px; margin-top: 12px; }
        .cert-status .icon { font-size: 24px; margin-right: 12px; }
        .cert-status p { font-size: 14px; color: #4caf50; }
        
        /* 车辆信息 */
        .vehicle-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .vehicle-card .plate { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
        .vehicle-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .vehicle-info .item label { font-size: 12px; color: #999; display: block; }
        .vehicle-info .item span { font-size: 14px; }
        
        /* 发票管理 */
        .invoice-tabs { display: flex; background: #fff; }
        .invoice-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; border-bottom: 2px solid transparent; cursor: pointer; }
        .invoice-tab.active { color: #1a73e8; border-bottom-color: #1a73e8; }
        .invoice-item { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; }
        .invoice-item .header { display: flex; justify-content: space-between; margin-bottom: 12px; }
        .invoice-item .header .title { font-size: 16px; font-weight: 600; }
        .invoice-item .header .status { font-size: 12px; padding: 4px 10px; border-radius: 12px; }
        .invoice-item .header .status.pending { background: #fff3e0; color: #ff9800; }
        .invoice-item .header .status.completed { background: #e8f5e9; color: #4caf50; }
        .invoice-item .info { font-size: 14px; color: #666; }
        .invoice-item .info p { margin-bottom: 4px; }
        
        /* 发票申请 */
        .invoice-form { padding: 16px; }
        .invoice-type { display: flex; gap: 8px; margin-bottom: 16px; }
        .invoice-type button { flex: 1; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
        .invoice-type button.active { border-color: #1a73e8; background: #e8f0fe; color: #1a73e8; }
        
        /* 支付记录 */
        .payment-item { background: #fff; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .payment-item .info h4 { font-size: 14px; font-weight: 500; }
        .payment-item .info p { font-size: 12px; color: #999; margin-top: 2px; }
        .payment-item .amount { text-align: right; }
        .payment-item .amount .value { font-size: 16px; font-weight: 600; color: #ff6b00; }
        .payment-item .amount .status { font-size: 12px; color: #4caf50; }
        .payment-item .amount .status.failed { color: #f44336; }
        
        /* 审核状态 */
        .verify-progress { background: #fff; padding: 24px 16px; text-align: center; }
        .progress-steps { display: flex; justify-content: center; margin: 24px 0; }
        .progress-step { text-align: center; position: relative; }
        .progress-step .icon { width: 48px; height: 48px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 8px; }
        .progress-step .icon.completed { background: #4caf50; color: #fff; }
        .progress-step .icon.current { background: #1a73e8; color: #fff; }
        .progress-step .label { font-size: 12px; color: #999; }
        .progress-step .line { position: absolute; top: 24px; left: 60px; width: 60px; height: 2px; background: #e0e0e0; }
        .progress-step .line.completed { background: #4caf50; }
        .verify-reason { background: #fff3e0; padding: 16px; border-radius: 12px; margin: 16px; }
        .verify-reason h4 { font-size: 14px; color: #ff9800; margin-bottom: 8px; }
        .verify-reason p { font-size: 14px; color: #333; line-height: 1.6; }
        
        /* 底部导航 */
        .tab-bar-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; background: #fff; display: flex; border-top: 1px solid #e0e0e0; z-index: 1000; }
        .tab-item-bottom { flex: 1; padding: 8px 0; text-align: center; cursor: pointer; color: #999; transition: color 0.2s; }
        .tab-item-bottom.active { color: #1a73e8; }
        .tab-item-bottom .icon { font-size: 22px; height: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
        .tab-item-bottom span { font-size: 10px; }
        
        /* 动画 */
        .page-enter { animation: pageEnter 0.3s ease; }
        @keyframes pageEnter { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 16px 32px; border-radius: 8px; z-index: 9999; animation: toastShow 2s ease; }
        @keyframes toastShow { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
        
        /* 空状态 */
        .empty-state { text-align: center; padding: 60px 20px; color: #999; }
        .empty-state .icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span class="time">15:34</span>
            <div class="status-icons">📶 📡 🔋</div>
        </div>

        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="home-hero">
                <div class="avatar">👤</div>
                <h2>欢迎，张师傅</h2>
                <p>京A12345 · 中通物流</p>
            </div>
            <div class="quota-card" onclick="navigateTo('quota')">
                <h3>当前加油额度</h3>
                <div class="amount">¥ 5,000.00</div>
                <div class="detail">
                    <span>已用 ¥1,234.56</span>
                    <span>有效期至 2026-05-31</span>
                </div>
            </div>
            <div class="menu-grid">
                <div class="menu-item" onclick="navigateTo('search')">
                    <div class="icon" style="background: #e3f2fd;">⛽</div>
                    <span>加油站</span>
                </div>
                <div class="menu-item" onclick="navigateTo('order-list')">
                    <div class="icon" style="background: #fce4ec;">📋</div>
                    <span>订单</span>
                </div>
                <div class="menu-item" onclick="navigateTo('quota')">
                    <div class="icon" style="background: #fff3e0;">💰</div>
                    <span>额度</span>
                </div>
                <div class="menu-item" onclick="navigateTo('message')">
                    <div class="icon" style="background: #e8f5e9;">🔔</div>
                    <span>消息</span>
                </div>
            </div>
            <div class="quick-actions">
                <h3>快捷操作</h3>
                <div class="action-list">
                    <div class="action-item" onclick="navigateTo('search')">
                        <div class="icon" style="background: #e8f0fe;">📍</div>
                        <div class="text"><h4>附近加油站</h4><p>查看附近的加油站及油价</p></div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="action-item" onclick="navigateTo('order-list')">
                        <div class="icon" style="background: #fff3e0;">⏱️</div>
                        <div class="text"><h4>加油记录</h4><p>查看历史加油明细</p></div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="action-item" onclick="navigateTo('profile')">
                        <div class="icon" style="background: #e8f5e9;">👤</div>
                        <div class="text"><h4>个人中心</h4><p>管理个人信息和资质</p></div>
                        <span class="arrow">›</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录页 -->
        <div id="page-login" class="page">
            <div class="login-container">
                <div class="login-logo">
                    <div class="icon">⛽</div>
                    <h1>司机加油</h1>
                </div>
                <div class="login-form">
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="tel" placeholder="请输入手机号" maxlength="11">
                    </div>
                    <div class="form-group">
                        <label>验证码</label>
                        <div class="code-input">
                            <input type="text" placeholder="请输入验证码">
                            <button class="code-btn" onclick="showToast('验证码已发送')">获取验证码</button>
                        </div>
                    </div>
                    <button class="login-btn" onclick="navigateTo('home')">登录</button>
                </div>
                <div class="login-footer">
                    还没有账号？<a href="#" onclick="navigateTo('register'); return false;">立即注册</a>
                </div>
            </div>
        </div>

        <!-- 注册页 -->
        <div id="page-register" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>司机注册</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="edit-form">
                <div class="form-section">
                    <h3>基本信息</h3>
                    <div class="edit-item"><span class="label">姓名</span><div class="value"><input type="text" placeholder="请输入真实姓名"></div></div>
                    <div class="edit-item"><span class="label">手机号</span><div class="value"><input type="tel" placeholder="请输入手机号"></div></div>
                </div>
                <div class="form-section">
                    <h3>车辆信息</h3>
                    <div class="edit-item"><span class="label">车牌号</span><div class="value"><input type="text" placeholder="请输入车牌号"></div></div>
                    <div class="edit-item"><span class="label">车型</span><div class="value"><input type="text" placeholder="请输入车型"></div></div>
                </div>
                <div class="form-section">
                    <h3>企业/车队</h3>
                    <div class="edit-item"><span class="label">所属企业</span><div class="value"><input type="text" placeholder="请输入企业名称"></div></div>
                </div>
                <button class="submit-btn" onclick="navigateTo('cert-upload')">下一步：资质认证</button>
            </div>
        </div>

        <!-- 资质提交页 -->
        <div id="page-cert-upload" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>资质认证</h1>
                <div style="width: 50px;"></div>
            </div>
            <div style="padding: 16px;">
                <div class="cert-upload">
                    <h3>驾驶证</h3>
                    <div class="upload-area">
                        <div class="icon">📷</div>
                        <p>点击上传驾驶证照片</p>
                        <small>支持 JPG、PNG 格式</small>
                    </div>
                </div>
                <div class="cert-upload">
                    <h3>行驶证</h3>
                    <div class="upload-area">
                        <div class="icon">📷</div>
                        <p>点击上传行驶证照片</p>
                        <small>支持 JPG、PNG 格式</small>
                    </div>
                </div>
                <div class="cert-upload">
                    <h3>从业资格证</h3>
                    <div class="upload-area">
                        <div class="icon">📷</div>
                        <p>点击上传从业资格证照片</p>
                        <small>支持 JPG、PNG 格式</small>
                    </div>
                </div>
                <button class="submit-btn" onclick="navigateTo('cert-status')">提交审核</button>
            </div>
        </div>

        <!-- 审核状态页 -->
        <div id="page-cert-status" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>审核状态</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="verify-progress">
                <h3>资质审核进度</h3>
                <div class="progress-steps">
                    <div class="progress-step">
                        <div class="icon completed">✓</div>
                        <div class="label">提交资料</div>
                    </div>
                    <div class="progress-step">
                        <div class="line completed"></div>
                    </div>
                    <div class="progress-step">
                        <div class="icon current">2</div>
                        <div class="label">审核中</div>
                    </div>
                    <div class="progress-step">
                        <div class="line"></div>
                    </div>
                    <div class="progress-step">
                        <div class="icon">3</div>
                        <div class="label">审核通过</div>
                    </div>
                </div>
                <p style="color: #666; font-size: 14px;">预计1-3个工作日内完成审核</p>
            </div>
            <div class="verify-reason">
                <h4>📋 已提交资料</h4>
                <p>• 驾驶证照片<br>• 行驶证照片<br>• 从业资格证照片</p>
            </div>
            <div style="padding: 16px;">
                <button class="submit-btn" onclick="navigateTo('home')">返回首页</button>
            </div>
        </div>

        <!-- 加油站搜索页 -->
        <div id="page-search" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>加油站搜索</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索加油站名称" id="search-input">
                <button onclick="searchStations()">🔍</button>
            </div>
            <div class="filter-tabs">
                <div class="filter-tab active" onclick="this.parentElement.querySelectorAll('.filter-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">距离优先</div>
                <div class="filter-tab" onclick="this.parentElement.querySelectorAll('.filter-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">价格最低</div>
                <div class="filter-tab" onclick="this.parentElement.querySelectorAll('.filter-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">综合排序</div>
                <div class="filter-tab" onclick="navigateTo('price-compare')">油价对比</div>
            </div>
            <div class="map-placeholder" onclick="navigateTo('map-mode')">
                🗺️ 点击进入地图模式
                <p>支持拖拽切换区域</p>
            </div>
            <div class="station-list">
                <div class="station-card">
                    <div class="header"><div><div class="name">中石化朝阳加油站</div><div class="distance">距您 1.2km</div></div></div>
                    <div class="address">📍 朝阳区建国路88号</div>
                    <div class="prices">
                        <span class="price-tag"><span class="type">92#</span><span class="value">¥7.85</span></span>
                        <span class="price-tag"><span class="type">95#</span><span class="value">¥8.36</span></span>
                        <span class="price-tag"><span class="type">98#</span><span class="value">¥9.50</span></span>
                        <span class="price-tag"><span class="type">柴油</span><span class="value">¥7.58</span></span>
                    </div>
                    <div class="actions">
                        <button class="btn-secondary" onclick="navigateTo('station-detail')">详情</button>
                        <button class="btn-primary" onclick="navigateTo('order-create')">去加油</button>
                    </div>
                </div>
                <div class="station-card">
                    <div class="header"><div><div class="name">中石油望京加油站</div><div class="distance">距您 2.5km</div></div></div>
                    <div class="address">📍 望京SOHO T3 对面</div>
                    <div class="prices">
                        <span class="price-tag"><span class="type">92#</span><span class="value">¥7.80</span></span>
                        <span class="price-tag"><span class="type">95#</span><span class="value">¥8.30</span></span>
                    </div>
                    <div class="actions">
                        <button class="btn-secondary" onclick="navigateTo('station-detail')">详情</button>
                        <button class="btn-primary" onclick="navigateTo('order-create')">去加油</button>
                    </div>
                </div>
                <div class="station-card">
                    <div class="header"><div><div class="name">壳牌北京加油站</div><div class="distance">距您 3.8km</div></div></div>
                    <div class="address">📍 海淀区中关村大街1号</div>
                    <div class="prices">
                        <span class="price-tag"><span class="type">92#</span><span class="value">¥7.78</span></span>
                        <span class="price-tag"><span class="type">95#</span><span class="value">¥8.28</span></span>
                    </div>
                    <div class="actions">
                        <button class="btn-secondary" onclick="navigateTo('station-detail')">详情</button>
                        <button class="btn-primary" onclick="navigateTo('order-create')">去加油</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 地图模式页 -->
        <div id="page-map-mode" class="page">
            <div class="header" style="background: rgba(26,115,232,0.95);">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>地图模式</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="map-fullscreen">
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #666;">
                    <div style="font-size: 60px;">🗺️</div>
                    <p>地图区域</p>
                    <p style="font-size: 12px;">显示周边加油站分布</p>
                </div>
                <div class="map-controls">
                    <div class="map-station-info">
                        <h3>中石化朝阳加油站</h3>
                        <p>距您 1.2km · 朝阳区建国路88号</p>
                        <div class="prices">
                            <span class="price-tag"><span class="type">92#</span><span class="value">¥7.85</span></span>
                            <span class="price-tag"><span class="type">95#</span><span class="value">¥8.36</span></span>
                        </div>
                        <div class="actions">
                            <button class="btn-secondary" onclick="showToast('正在调起导航')">🗺️ 导航</button>
                            <button class="btn-primary" onclick="navigateTo('order-create')">⛽ 去加油</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 油价对比页 -->
        <div id="page-price-compare" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>油价对比</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="compare-header">
                <h3>92# 汽油价格排序</h3>
            </div>
            <div class="compare-list">
                <div class="compare-item" onclick="navigateTo('station-detail')">
                    <div class="rank">1</div>
                    <div class="info"><h4>中石化朝阳加油站</h4><p>距您 1.2km</p></div>
                    <div class="price"><div class="value">¥7.78</div><div class="liter">约 25.7L/200元</div></div>
                </div>
                <div class="compare-item">
                    <div class="rank second">2</div>
                    <div class="info"><h4>中石油望京加油站</h4><p>距您 2.5km</p></div>
                    <div class="price"><div class="value">¥7.80</div><div class="liter">约 25.6L/200元</div></div>
                </div>
                <div class="compare-item">
                    <div class="rank third">3</div>
                    <div class="info"><h4>壳牌北京加油站</h4><p>距您 3.8km</p></div>
                    <div class="price"><div class="value">¥7.85</div><div class="liter">约 25.5L/200元</div></div>
                </div>
                <div class="compare-item">
                    <div class="rank" style="background:#e0e0e0;">4</div>
                    <div class="info"><h4>中化道达尔加油站</h4><p>距您 5.2km</p></div>
                    <div class="price"><div class="value">¥7.90</div><div class="liter">约 25.3L/200元</div></div>
                </div>
            </div>
        </div>

        <!-- 油站详情页 -->
        <div id="page-station-detail" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>油站详情</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="station-detail-header">
                <h2>中石化朝阳加油站</h2>
                <p>📍 朝阳区建国路88号</p>
                <p>⏰ 营业时间：24小时</p>
            </div>
            <div class="info-section">
                <h3>油品价格</h3>
                <table class="fuel-price-table">
                    <tr><th>油品</th><th>单价</th><th>单位</th></tr>
                    <tr><td>92# 汽油</td><td class="price">¥7.85</td><td>元/升</td></tr>
                    <tr><td>95# 汽油</td><td class="price">¥8.36</td><td>元/升</td></tr>
                    <tr><td>98# 汽油</td><td class="price">¥9.50</td><td>元/升</td></tr>
                    <tr><td>0# 柴油</td><td class="price">¥7.58</td><td>元/升</td></tr>
                </table>
            </div>
            <div class="info-section">
                <h3>服务设施</h3>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    <span style="background: #e8f0fe; padding: 6px 12px; border-radius: 16px; font-size: 12px;">🅿️ 停车位</span>
                    <span style="background: #e8f0fe; padding: 6px 12px; border-radius: 16px; font-size: 12px;">🚻 卫生间</span>
                    <span style="background: #e8f0fe; padding: 6px 12px; border-radius: 16px; font-size: 12px;">🛒 便利店</span>
                    <span style="background: #e8f0fe; padding: 6px 12px; border-radius: 16px; font-size: 12px;">💧 洗车</span>
                </div>
            </div>
            <div style="padding: 16px; display: flex; gap: 8px;">
                <button class="btn-secondary" style="flex:1" onclick="showToast('正在调起导航')">🗺️ 导航到油站</button>
                <button class="btn-primary" style="flex:1" onclick="navigateTo('order-create')">⛽ 去加油</button>
            </div>
        </div>

        <!-- 加油下单页 -->
        <div id="page-order-create" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>加油下单</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="order-form">
                <div class="form-section">
                    <h3>选择油品</h3>
                    <div class="fuel-options">
                        <div class="fuel-option active" onclick="selectFuel(this, '92')"><div class="name">92# 汽油</div><div class="price">¥7.85/升</div></div>
                        <div class="fuel-option" onclick="selectFuel(this, '95')"><div class="name">95# 汽油</div><div class="price">¥8.36/升</div></div>
                        <div class="fuel-option" onclick="selectFuel(this, '98')"><div class="name">98# 汽油</div><div class="price">¥9.50/升</div></div>
                        <div class="fuel-option" onclick="selectFuel(this, 'diesel')"><div class="name">0# 柴油</div><div class="price">¥7.58/升</div></div>
                    </div>
                </div>
                <div class="form-section">
                    <h3>输入金额/升数</h3>
                    <div class="amount-input">
                        <button onclick="changeAmount(-10)">−</button>
                        <input type="number" id="order-amount" value="200">
                        <button onclick="changeAmount(10)">+</button>
                    </div>
                    <div class="amount-type">
                        <button class="active" onclick="setAmountType(this, 'money')">按金额</button>
                        <button onclick="setAmountType(this, 'liter')">按升数</button>
                    </div>
                </div>
                <div class="order-summary">
                    <div class="summary-row"><span>油站</span><span>中石化朝阳加油站</span></div>
                    <div class="summary-row"><span>油品</span><span id="selected-fuel">92# 汽油</span></div>
                    <div class="summary-row"><span>单价</span><span id="fuel-price">¥7.85/升</span></div>
                    <div class="summary-row"><span>预计加油量</span><span id="estimated-liters">约 25.48 升</span></div>
                    <div class="summary-row total"><span>应付金额</span><span class="value" id="total-amount">¥200.00</span></div>
                </div>
                <button class="submit-btn" onclick="submitOrder()">确认下单</button>
            </div>
        </div>

        <!-- 二维码页 -->
        <div id="page-qrcode" class="page">
            <div class="header" style="background: linear-gradient(135deg, #ff9800, #f57c00);">
                <div class="header-back" onclick="navigateTo('home')">← 返回</div>
                <h1>核销二维码</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="qr-section">
                <div class="order-status">等待核销</div>
                <h2 style="font-size: 18px; margin-bottom: 8px;">请向工作人员出示二维码</h2>
                <p style="color: #999; font-size: 14px; margin-bottom: 16px;">扫码后自动开始加油</p>
                <div class="qr-code">
                    <svg viewBox="0 0 200 200">
                        <rect x="20" y="20" width="40" height="40" fill="#333"/><rect x="70" y="20" width="10" height="10" fill="#333"/>
                        <rect x="90" y="20" width="10" height="10" fill="#333"/><rect x="140" y="20" width="40" height="40" fill="#333"/>
                        <rect x="20" y="70" width="10" height="10" fill="#333"/><rect x="40" y="70" width="10" height="10" fill="#333"/>
                        <rect x="20" y="90" width="10" height="10" fill="#333"/><rect x="40" y="90" width="10" height="10" fill="#333"/>
                        <rect x="70" y="70" width="70" height="70" fill="#333"/><rect x="90" y="90" width="30" height="30" fill="#fff"/>
                        <rect x="140" y="70" width="10" height="10" fill="#333"/><rect x="170" y="70" width="10" height="10" fill="#333"/>
                        <rect x="140" y="90" width="10" height="10" fill="#333"/><rect x="20" y="150" width="40" height="30" fill="#333"/>
                        <rect x="70" y="150" width="10" height="10" fill="#333"/><rect x="90" y="150" width="10" height="10" fill="#333"/>
                        <rect x="140" y="150" width="40" height="40" fill="#333"/><rect x="150" y="160" width="20" height="20" fill="#fff"/>
                        <rect x="20" y="190" width="110" height="10" fill="#333"/>
                    </svg>
                </div>
                <p style="font-size: 14px; color: #666;">订单编号：20260428150001</p>
            </div>
            <div class="order-info">
                <div class="row"><span style="color: #999;">油站</span><span>中石化朝阳加油站</span></div>
                <div class="row"><span style="color: #999;">油品</span><span>92# 汽油</span></div>
                <div class="row"><span style="color: #999;">金额</span><span style="color: #ff6b00; font-weight: 600;">¥200.00</span></div>
                <div class="row"><span style="color: #999;">下单时间</span><span>2026-04-28 15:00</span></div>
            </div>
        </div>

        <!-- 订单详情页 -->
        <div id="page-order-detail" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>订单详情</h1>
                <div style="width: 50px;"></div>
            </div>
            <div style="background: linear-gradient(135deg, #1a73e8, #0d47a1); color: #fff; padding: 20px 16px; text-align: center;">
                <div style="font-size: 14px; opacity: 0.9;">订单状态</div>
                <div style="font-size: 20px; font-weight: 600; margin-top: 4px;">已完成</div>
            </div>
            <div class="order-detail-section">
                <h3>订单信息</h3>
                <div class="order-detail-row"><span class="label">订单编号</span><span class="value">20260428150001</span></div>
                <div class="order-detail-row"><span class="label">下单时间</span><span class="value">2026-04-28 15:00</span></div>
                <div class="order-detail-row"><span class="label">加油时间</span><span class="value">2026-04-28 15:30</span></div>
            </div>
            <div class="order-detail-section">
                <h3>油站信息</h3>
                <div class="order-detail-row"><span class="label">油站名称</span><span class="value">中石化朝阳加油站</span></div>
                <div class="order-detail-row"><span class="label">油站地址</span><span class="value">朝阳区建国路88号</span></div>
            </div>
            <div class="order-detail-section">
                <h3>加油信息</h3>
                <div class="order-detail-row"><span class="label">油品</span><span class="value">92# 汽油</span></div>
                <div class="order-detail-row"><span class="label">单价</span><span class="value">¥7.85/升</span></div>
                <div class="order-detail-row"><span class="label">加油量</span><span class="value">25.48 升</span></div>
                <div class="order-detail-row"><span class="label">支付金额</span><span class="value" style="color: #ff6b00; font-size: 18px;">¥200.00</span></div>
            </div>
            <div style="padding: 16px; display: flex; gap: 8px;">
                <button class="btn-secondary" style="flex:1" onclick="navigateTo('invoice-apply')">🧾 申请发票</button>
                <button class="btn-primary" style="flex:1" onclick="showToast('联系客服')">📞 联系客服</button>
            </div>
        </div>

        <!-- 订单列表页 -->
        <div id="page-order-list" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>我的订单</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="tab-bar">
                <div class="tab-item active" onclick="switchOrderTab(this)">全部</div>
                <div class="tab-item" onclick="switchOrderTab(this)">待支付</div>
                <div class="tab-item" onclick="switchOrderTab(this)">已完成</div>
                <div class="tab-item" onclick="switchOrderTab(this)">已退款</div>
            </div>
            <div class="order-card" onclick="navigateTo('order-detail')">
                <div class="header"><span class="station-name">中石化朝阳加油站</span><span class="status completed">已完成</span></div>
                <div class="details"><span>92# 汽油</span><span>25.48升</span><span>2026-04-28</span></div>
                <div class="amount">¥200.00</div>
            </div>
            <div class="order-card" onclick="navigateTo('order-detail')">
                <div class="header"><span class="station-name">中石油望京加油站</span><span class="status completed">已完成</span></div>
                <div class="details"><span>95# 汽油</span><span>36.14升</span><span>2026-04-25</span></div>
                <div class="amount">¥302.00</div>
            </div>
            <div class="order-card" onclick="navigateTo('qrcode')">
                <div class="header"><span class="station-name">壳牌北京加油站</span><span class="status pending">待核销</span></div>
                <div class="details"><span>92# 汽油</span><span>--</span><span>2026-04-28</span></div>
                <div class="amount">¥200.00</div>
            </div>
        </div>

        <!-- 额度管理页 -->
        <div id="page-quota" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>额度管理</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="quota-overview">
                <div class="label">可用额度</div>
                <div class="value">¥5,000</div>
                <div class="unit">剩余额度</div>
            </div>
            <div class="quota-stats">
                <div class="quota-stat"><div class="label">已用额度</div><div class="value used">¥1,234.56</div></div>
                <div class="quota-stat"><div class="label">额度总额</div><div class="value">¥6,234.56</div></div>
            </div>
            <div class="settings-list" style="margin: 16px;">
                <div class="settings-item" onclick="navigateTo('quota-alert')">
                    <div class="icon">🔔</div><div class="text">额度提醒设置</div><span class="arrow">›</span>
                </div>
            </div>
            <h3 style="padding: 0 16px; font-size: 14px; margin-bottom: 12px;">使用明细</h3>
            <div style="padding: 0 16px;">
                <div class="quota-detail-item">
                    <div class="icon">⛽</div>
                    <div class="info"><h4>中石化朝阳加油站</h4><p>2026-04-28 15:30</p></div>
                    <div class="amount"><div class="value">-¥200.00</div><div class="remaining">剩余 ¥5,000</div></div>
                </div>
                <div class="quota-detail-item">
                    <div class="icon">⛽</div>
                    <div class="info"><h4>中石油望京加油站</h4><p>2026-04-25 09:15</p></div>
                    <div class="amount"><div class="value">-¥302.00</div><div class="remaining">剩余 ¥5,200</div></div>
                </div>
                <div class="quota-detail-item">
                    <div class="icon">📋</div>
                    <div class="info"><h4>额度充值</h4><p>2026-04-01 10:00</p></div>
                    <div class="amount"><div class="value" style="color: #4caf50;">+¥6,000.00</div><div class="remaining">总额 ¥6,234.56</div></div>
                </div>
            </div>
        </div>

        <!-- 额度提醒设置页 -->
        <div id="page-quota-alert" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
<h1>额度提醒设置</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="alert-setting">
                <h3>提醒阈值设置</h3>
                <p style="font-size: 12px; color: #999; margin-bottom: 16px;">当额度低于此值时，将发送提醒通知</p>
                <div class="slider-row">
                    <span style="font-size: 12px; color: #999;">10%</span>
                    <input type="range" min="10" max="50" value="20" id="alert-slider">
                    <span style="font-size: 12px; color: #999;">50%</span>
                    <div class="value" id="alert-value">20%</div>
                </div>
                <p style="font-size: 14px; margin-top: 12px; color: #666;">当前阈值：剩余 <strong style="color: #1a73e8;">¥1,000</strong> 时提醒</p>
            </div>
            <div class="settings-list" style="margin: 16px;">
                <div class="settings-item">
                    <div class="icon">📱</div><div class="text">司机提醒</div>
                    <label style="width: 40px; height: 24px; background: #4caf50; border-radius: 12px; position: relative; cursor: pointer;">
                        <input type="checkbox" checked style="display: none;">
                        <span style="position: absolute; top: 2px; left: 18px; width: 20px; height: 20px; background: #fff; border-radius: 50%;"></span>
                    </label>
                </div>
                <div class="settings-item">
                    <div class="icon">🏢</div><div class="text">企业管理提醒</div>
                    <label style="width: 40px; height: 24px; background: #4caf50; border-radius: 12px; position: relative; cursor: pointer;">
                        <input type="checkbox" checked style="display: none;">
                        <span style="position: absolute; top: 2px; left: 18px; width: 20px; height: 20px; background: #fff; border-radius: 50%;"></span>
                    </label>
                </div>
            </div>
            <div style="padding: 16px;">
                <button class="submit-btn" onclick="showToast('设置已保存')">保存设置</button>
            </div>
        </div>

        <!-- 消息通知页 -->
        <div id="page-message" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>消息通知</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="message-item unread" onclick="navigateTo('message-detail')">
                <div class="icon" style="background: #e8f5e9;">✓</div>
                <div class="content"><h4>加油完成通知</h4><p>您在中石化朝阳加油站的加油订单已完成，加油量25.48升，金额¥200.00</p></div>
                <div class="time">刚刚</div>
            </div>
            <div class="message-item" onclick="navigateTo('message-detail')">
                <div class="icon" style="background: #fff3e0;">💰</div>
                <div class="content"><h4>额度变动提醒</h4><p>您的加油额度已变动，剩余额度¥5,000.00，额度将于2026-05-31到期</p></div>
                <div class="time">今天 10:00</div>
            </div>
            <div class="message-item" onclick="navigateTo('message-detail')">
                <div class="icon" style="background: #e3f2fd;">⛽</div>
                <div class="content"><h4>油价变动通知</h4><p>您关注的中石化朝阳加油站92#汽油价格调整为¥7.85/升</p></div>
                <div class="time">昨天 18:30</div>
            </div>
            <div class="message-item" onclick="navigateTo('message-detail')">
                <div class="icon" style="background: #e8f5e9;">✓</div>
                <div class="content"><h4>资质审核通过</h4><p>恭喜！您的司机资质已审核通过，可以开始使用加油服务</p></div>
                <div class="time">4月20日</div>
            </div>
            <div class="message-item" onclick="navigateTo('message-detail')">
                <div class="icon" style="background: #fff3e0;">⚠️</div>
                <div class="content"><h4>额度不足提醒</h4><p>您的加油额度即将用完（剩余不足10%），请及时联系企业/车队管理员充值</p></div>
                <div class="time">4月15日</div>
            </div>
        </div>

        <!-- 消息详情页 -->
        <div id="page-message-detail" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>消息详情</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="message-detail">
                <h2>加油完成通知</h2>
                <div class="meta">2026-04-28 15:30</div>
                <div class="content">
                    <p>尊敬的用户，您的加油订单已完成详情如下：</p>
                    <br>
                    <p>油站：中石化朝阳加油站</p>
                    <p>地址：朝阳区建国路88号</p>
                    <p>油品：92# 汽油</p>
                    <p>加油量：25.48 升</p>
                    <p>支付金额：¥200.00</p>
                    <p>支付方式：企业额度</p>
                    <p>订单编号：20260428150001</p>
                    <br>
                    <p>感谢您使用司机加油系统，祝您行车安全！</p>
                </div>
            </div>
        </div>

        <!-- 个人中心页 -->
        <div id="page-profile" class="page">
            <div class="profile-header">
                <div class="avatar">👤</div>
                <h2>张师傅</h2>
                <p>138****8888</p>
                <p>京A12345 · 中通物流</p>
                <div class="verify-status verified">✓ 已认证</div>
            </div>
            <div class="settings-list">
                <div class="settings-item" onclick="navigateTo('profile-edit')"><div class="icon">👤</div><div class="text">个人信息</div><span class="arrow">›</span></div>
                <div class="settings-item" onclick="navigateTo('vehicle-info')"><div class="icon">🚗</div><div class="text">车辆信息</div><span class="arrow">›</span></div>
                <div class="settings-item" onclick="navigateTo('cert-upload')"><div class="icon">📄</div><div class="text">资质认证</div><span class="arrow">›</span></div>
                <div class="settings-item" onclick="navigateTo('invoice-list')"><div class="icon">🧾</div><div class="text">发票管理</div><span class="arrow">›</span></div>
            </div>
            <div class="settings-list">
                <div class="settings-item" onclick="navigateTo('payment-list')"><div class="icon">💳</div><div class="text">支付记录</div><span class="arrow">›</span></div>
                <div class="settings-item" onclick="navigateTo('message')"><div class="icon">🔔</div><div class="text">消息推送设置</div><span class="arrow">›</span></div>
                <div class="settings-item" onclick="showToast('关于我们')"><div class="icon">❓</div><div class="text">关于我们</div><span class="arrow">›</span></div>
            </div>
            <div style="padding: 16px;">
                <button style="width: 100%; padding: 14px; background: #fff; color: #f44336; border: 1px solid #f44336; border-radius: 12px; font-size: 16px; cursor: pointer;" onclick="navigateTo('login')">退出登录</button>
            </div>
        </div>

        <!-- 个人信息编辑页 -->
        <div id="page-profile-edit" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>编辑个人信息</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="edit-form">
                <div class="form-section">
                    <div class="edit-item"><span class="label">姓名</span><div class="value"><input type="text" value="张师傅"></div></div>
                    <div class="edit-item"><span class="label">手机号</span><div class="value"><input type="tel" value="138****8888"></div></div>
                    <div class="edit-item"><span class="label">所属企业</span><div class="value"><input type="text" value="中通物流"></div></div>
                </div>
                <button class="submit-btn" onclick="showToast('保存成功')">保存</button>
            </div>
        </div>

        <!-- 车辆信息页 -->
        <div id="page-vehicle-info" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>车辆信息</h1>
                <div style="width: 50px;"></div>
            </div>
            <div style="padding: 16px;">
                <div class="vehicle-card">
                    <div class="plate">京A12345</div>
                    <div class="vehicle-info">
                        <div class="item"><label>车型</label><span>东风天龙重卡</span></div>
                        <div class="item"><label>品牌</label><span>东风</span></div>
                        <div class="item"><label>油箱容量</label><span>400升</span></div>
                        <div class="item"><label>燃油类型</label><span>柴油</span></div>
                    </div>
                </div>
                <button class="submit-btn" onclick="showToast('编辑车辆信息')">编辑车辆</button>
            </div>
        </div>

        <!-- 发票列表页 -->
        <div id="page-invoice-list" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>发票管理</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="invoice-tabs">
                <div class="invoice-tab active" onclick="switchInvoiceTab(this)">可开票</div>
                <div class="invoice-tab" onclick="switchInvoiceTab(this)">已开票</div>
            </div>
            <div class="invoice-item">
                <div class="header"><span class="title">中石化朝阳加油站</span><span class="status pending">待开票</span></div>
                <div class="info">
                    <p>油品：92# 汽油 · 25.48升</p>
                    <p>金额：¥200.00 · 2026-04-28</p>
                </div>
                <div style="margin-top: 12px;"><button class="btn-primary" style="padding: 8px 16px; border: none; border-radius: 6px; color: #fff; cursor: pointer;" onclick="navigateTo('invoice-apply')">申请开票</button></div>
            </div>
            <div class="invoice-item">
                <div class="header"><span class="title">中石油望京加油站</span><span class="status completed">已开票</span></div>
                <div class="info">
                    <p>油品：95# 汽油 · 36.14升</p>
                    <p>金额：¥302.00 · 2026-04-25</p>
                    <p style="color: #1a73e8; margin-top: 4px;">发票号：FP20260425001</p>
                </div>
            </div>
        </div>

        <!-- 发票申请页 -->
        <div id="page-invoice-apply" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>申请开票</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="invoice-form">
                <div class="form-section">
                    <h3>发票类型</h3>
                    <div class="invoice-type">
                        <button class="active" onclick="selectInvoiceType(this)">普通发票</button>
                        <button onclick="selectInvoiceType(this)">增值税专用发票</button>
                    </div>
                </div>
                <div class="form-section">
                    <h3>发票信息</h3>
                    <div class="edit-item"><span class="label">发票抬头</span><div class="value"><input type="text" placeholder="请输入发票抬头" value="中通物流有限公司"></div></div>
                    <div class="edit-item"><span class="label">税号</span><div class="value"><input type="text" placeholder="请输入税号"></div></div>
                    <div class="edit-item"><span class="label">开户行</span><div class="value"><input type="text" placeholder="请输入开户行"></div></div>
                    <div class="edit-item"><span class="label">账号</span><div class="value"><input type="text" placeholder="请输入账号"></div></div>
                </div>
                <div class="form-section">
                    <h3>收票人信息</h3>
                    <div class="edit-item"><span class="label">邮箱</span><div class="value"><input type="email" placeholder="用于接收电子发票"></div></div>
                </div>
                <button class="submit-btn" onclick="showToast('发票申请已提交')">提交申请</button>
            </div>
        </div>

        <!-- 支付记录页 -->
        <div id="page-payment-list" class="page">
            <div class="header">
                <div class="header-back" onclick="goBack()">← 返回</div>
                <h1>支付记录</h1>
                <div style="width: 50px;"></div>
            </div>
            <div class="payment-item">
                <div class="info"><h4>加油支付</h4><p>中石化朝阳加油站 · 2026-04-28 15:30</p></div>
                <div class="amount"><div class="value">-¥200.00</div><div class="status">企业额度</div></div>
            </div>
            <div class="payment-item">
                <div class="info"><h4>额度充值</h4><p>企业充值 · 2026-04-01 10:00</p></div>
                <div class="amount"><div class="value" style="color: #4caf50;">+¥6,000.00</div><div class="status">企业额度</div></div>
            </div>
            <div class="payment-item">
                <div class="info"><h4>加油支付</h4><p>中石油望京加油站 · 2026-04-25 09:15</p></div>
                <div class="amount"><div class="value">-¥302.00</div><div class="status">企业额度</div></div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="tab-bar-bottom">
            <div class="tab-item-bottom active" onclick="switchTab(this, 'home')"><div class="icon">🏠</div><span>首页</span></div>
            <div class="tab-item-bottom" onclick="switchTab(this, 'search')"><div class="icon">⛽</div><span>加油</span></div>
            <div class="tab-item-bottom" onclick="switchTab(this, 'order-list')"><div class="icon">📋</div><span>订单</span></div>
            <div class="tab-item-bottom" onclick="switchTab(this, 'quota')"><div class="icon">💰</div><span>额度</span></div>
            <div class="tab-item-bottom" onclick="switchTab(this, 'profile')"><div class="icon">👤</div><span>我的</span></div>
        </div>
    </div>

    <script>
        let pageHistory = ['home'];
        
        function navigateTo(pageId) {
            const currentPage = document.querySelector('.page.active');
            if (currentPage) pageHistory.push(currentPage.id.replace('page-', ''));
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            const targetPage = document.getElementById('page-' + pageId);
            if (targetPage) targetPage.classList.add('active', 'page-enter');
            setTimeout(() => targetPage?.classList.remove('page-enter'), 300);
            updateBottomNav(pageId);
        }
        
        function goBack() {
            if (pageHistory.length > 1) {
                pageHistory.pop();
                navigateTo(pageHistory[pageHistory.length - 1]);
            } else {
                navigateTo('home');
            }
        }
        
        function switchTab(element, pageId) {
            document.querySelectorAll('.tab-item-bottom').forEach(tab => tab.classList.remove('active'));
            element.classList.add('active');
            pageHistory = [pageId];
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            const targetPage = document.getElementById('page-' + pageId);
            if (targetPage) targetPage.classList.add('active');
        }
        
        function updateBottomNav(pageId) {
            const navMap = { 'home': 0, 'search': 1, 'order-list': 2, 'quota': 3, 'profile': 4 };
            if (navMap.hasOwnProperty(pageId)) {
                document.querySelectorAll('.tab-item-bottom').forEach((tab, index) => {
                    tab.classList.toggle('active', index === navMap[pageId]);
                });
            }
        }
        
        function searchStations() { showToast('搜索加油站'); }
        
        function selectFuel(element, fuelType) {
            document.querySelectorAll('.fuel-option').forEach(opt => opt.classList.remove('active'));
            element.classList.add('active');
            const fuelNames = { '92': '92# 汽油', '95': '95# 汽油', '98': '98# 汽油', 'diesel': '0# 柴油' };
            const fuelPrices = { '92': '¥7.85/升', '95': '¥8.36/升', '98': '¥9.50/升', 'diesel': '¥7.58/升' };
            document.getElementById('selected-fuel').textContent = fuelNames[fuelType];
            document.getElementById('fuel-price').textContent = fuelPrices[fuelType];
            updateEstimate();
        }
        
        function changeAmount(delta) {
            const input = document.getElementById('order-amount');
            let value = parseInt(input.value) || 0;
            value = Math.max(10, value + delta);
            input.value = value;
            updateEstimate();
        }
        
        function setAmountType(element, type) {
            document.querySelectorAll('.amount-type button').forEach(btn => btn.classList.remove('active'));
            element.classList.add('active');
        }
        
        function updateEstimate() {
            const amount = parseFloat(document.getElementById('order-amount')?.value) || 0;
            const liters = (amount / 7.85).toFixed(2);
            document.getElementById('estimated-liters').textContent = '约 ' + liters + ' 升';
            document.getElementById('total-amount').textContent = '¥' + amount.toFixed(2);
        }
        
        function submitOrder() {
            showToast('订单提交成功');
            setTimeout(() => navigateTo('qrcode'), 1000);
        }
        
        function switchOrderTab(element) {
            element.parentElement.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            element.classList.add('active');
        }
        
        function switchInvoiceTab(element) {
            element.parentElement.querySelectorAll('.invoice-tab').forEach(t => t.classList.remove('active'));
            element.classList.add('active');
        }
        
        function selectInvoiceType(element) {
            document.querySelectorAll('.invoice-type button').forEach(b => b.classList.remove('active'));
            element.classList.add('active');
        }
        
        function showToast(message) {
            const existingToast = document.querySelector('.toast');
            if (existingToast) existingToast.remove();
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('order-amount')?.addEventListener('input', updateEstimate);
            document.getElementById('search-input')?.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') searchStations();
            });
            document.getElementById('alert-slider')?.addEventListener('input', function() {
                document.getElementById('alert-value').textContent = this.value + '%';
            });
        });
    </script>
</body>
</html>