sqxp/docs/原型图/小程序/配送员工作台.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="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
        .phone-container { max-width: 414px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-height: 850px; }
        .page-header { padding: 24px 20px; color: #fff; background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%); }
        .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
        .page-header p { font-size: 14px; opacity: 0.9; }
        .content { padding: 16px; }
        .stats-row { display: flex; justify-content: space-around; padding: 20px; background: #fff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .stats-item { text-align: center; }
        .stats-num { font-size: 28px; font-weight: 600; }
        .stats-num.orange { color: #ff976a; }
        .stats-num.red { color: #ee0a24; }
        .stats-num.green { color: #07c160; }
        .stats-num.blue { color: #1989fa; }
        .stats-label { font-size: 12px; color: #999; margin-top: 4px; }
        .todo-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .todo-title { font-size: 15px; font-weight: 600; color: #333; }
        .todo-badge { padding: 2px 10px; background: #fff1f0; color: #ee0a24; border-radius: 10px; font-size: 12px; font-weight: 600; }
        .todo-badge.orange { background: #fff7e6; color: #ff976a; }
        .todo-badge.blue { background: #e6f7ff; color: #1989fa; }
        .task-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .task-item:last-child { border-bottom: none; }
        .task-content { flex: 1; }
        .task-no { font-size: 13px; color: #333; font-weight: 500; }
        .task-info { font-size: 12px; color: #666; margin-top: 4px; }
        .task-time { font-size: 11px; color: #ff976a; margin-top: 2px; }
        .task-action { padding: 6px 14px; border-radius: 16px; font-size: 13px; border: none; cursor: pointer; background: #ee0a24; color: #fff; }
        .task-action.orange { background: #ff976a; }
        .warning-card { background: #fff1f0; border: 1px solid #ffccc7; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .warning-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .warning-title { font-size: 14px; font-weight: 600; color: #ee0a24; }
        .warning-content { font-size: 13px; color: #666; }
        .menu-grid { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
        .menu-card { width: 44%; background: #fff; border-radius: 12px; padding: 20px 16px; margin: 1%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; }
        .menu-icon { font-size: 32px; margin-bottom: 8px; }
        .menu-text { font-size: 13px; color: #333; }
        .logout-btn { width: 200px; height: 44px; background: #fff; color: #666; border: none; border-radius: 22px; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; display: block; margin: 20px auto 0; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="page-header">
            <h2>配送员工作台</h2>
            <p>欢迎，李建（城东区域）</p>
        </div>
        <div class="content">
            <!-- 统计概览 -->
            <div class="stats-row">
                <div class="stats-item">
                    <div class="stats-num orange">2</div>
                    <div class="stats-label">待取货</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num red">3</div>
                    <div class="stats-label">配送中</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num green">45</div>
                    <div class="stats-label">已完成</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num blue">4.9</div>
                    <div class="stats-label">评分</div>
                </div>
            </div>
            
            <!-- 时效预警 -->
            <div class="warning-card">
                <div class="warning-header">
                    <span class="warning-title">&#9888; 配送时效预警</span>
                    <span class="todo-badge">1</span>
                </div>
                <div class="warning-content">
                    <strong>DLV202603190005</strong> 即将超时<br>
                    <span style="color:#ee0a24;font-size:12px;">剩余时间：12分钟 | 请尽快完成配送！</span>
                </div>
            </div>
            
            <!-- 待取货任务 -->
            <div class="todo-card">
                <div class="todo-header">
                    <span class="todo-title">&#128666; 待取货</span>
                    <span class="todo-badge orange">2</span>
                </div>
                <div class="task-item">
                    <div class="task-content">
                        <div class="task-no">DLV202603190001</div>
                        <div class="task-info">XX供应商 → AA餐厅</div>
                        <div class="task-time">请于 14:00 前取货</div>
                    </div>
                    <button class="task-action orange" onclick="location.href='配送员任务详情.html'">取货</button>
                </div>
                <div class="task-item">
                    <div class="task-content">
                        <div class="task-no">DLV202603190002</div>
                        <div class="task-info">YY供应商 → BB超市</div>
                        <div class="task-time">请于 15:00 前取货</div>
                    </div>
                    <button class="task-action orange" onclick="location.href='配送员任务详情.html'">取货</button>
                </div>
            </div>
            
            <!-- 配送中任务 -->
            <div class="todo-card">
                <div class="todo-header">
                    <span class="todo-title">&#128230; 配送中</span>
                    <span class="todo-badge blue">3</span>
                </div>
                <div class="task-item">
                    <div class="task-content">
                        <div class="task-no">DLV202603180056</div>
                        <div class="task-info">已取货 | 送达客户：CC食堂</div>
                        <div class="task-time">预计 14:30 送达</div>
                    </div>
                    <button class="task-action" onclick="location.href='配送员送达确认.html'">送达</button>
                </div>
            </div>
            
            <!-- 功能菜单 -->
            <div class="menu-grid">
                <div class="menu-card" onclick="location.href='配送员配送任务.html'">
                    <span class="menu-icon">&#128203;</span>
                    <span class="menu-text">全部任务</span>
                </div>
                <div class="menu-card" onclick="location.href='配送员取货确认.html'">
                    <span class="menu-icon">&#128247;</span>
                    <span class="menu-text">取货凭证</span>
                </div>
                <div class="menu-card" onclick="location.href='配送员送达确认.html'">
                    <span class="menu-icon">&#10004;</span>
                    <span class="menu-text">送达确认</span>
                </div>
                <div class="menu-card" onclick="location.href='配送员基本信息.html'">
                    <span class="menu-icon">&#128100;</span>
                    <span class="menu-text">基本信息</span>
                </div>
            </div>
            
            <button class="logout-btn" onclick="location.href='../index.html'">退出登录</button>
        </div>
    </div>
</body>
</html>