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, #ff976a 0%, #ff4444 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.green { color: #07c160; }
        .stats-num.blue { color: #1989fa; }
        .stats-num.red { color: #ee0a24; }
        .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: #fff7e6; color: #ff976a; border-radius: 10px; font-size: 12px; font-weight: 600; }
        .todo-badge.danger { background: #fff1f0; color: #ee0a24; }
        .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
        .todo-item:last-child { border-bottom: none; }
        .todo-text { font-size: 13px; color: #666; flex: 1; }
        .todo-time { font-size: 11px; color: #999; margin-left: 8px; }
        .todo-action { color: #ff976a; font-size: 13px; font-weight: 500; }
        .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 blue">3</div>
                    <div class="stats-label">已报价</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num green">5</div>
                    <div class="stats-label">待取货</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num red">1</div>
                    <div class="stats-label">异常</div>
                </div>
            </div>
            
            <!-- 待办事项 -->
            <div class="todo-card">
                <div class="todo-header">
                    <span class="todo-title">&#9888; 待处理事项</span>
                </div>
                <div class="todo-item" onclick="location.href='供应商询价详情.html'">
                    <div><span class="todo-text">2026年3月第3周询价单</span><span class="todo-time">剩余26小时</span></div>
                    <span class="todo-action">去报价 &#8250;</span>
                </div>
                <div class="todo-item" onclick="location.href='供应商取货任务.html'">
                    <div><span class="todo-text">ORD202603190001 待取货</span><span class="todo-time">请于14:00前取货</span></div>
                    <span class="todo-action">处理 &#8250;</span>
                </div>
                <div class="todo-item" onclick="location.href='供应商取货任务.html'">
                    <div><span class="todo-text">ORD202603190002 待取货</span><span class="todo-time">请于15:00前取货</span></div>
                    <span class="todo-action">处理 &#8250;</span>
                </div>
            </div>
            
            <!-- 预警信息 -->
            <div class="todo-card" style="border-left:3px solid #ee0a24;">
                <div class="todo-header">
                    <span class="todo-title" style="color:#ee0a24;">&#9888; 配送时效预警</span>
                    <span class="todo-badge danger">1</span>
                </div>
                <div class="todo-item">
                    <div><span class="todo-text">DLV202603180023 配送即将超时</span><span class="todo-time" style="color:#ee0a24;">剩余15分钟</span></div>
                    <span class="todo-action" style="color:#ee0a24;">查看 &#8250;</span>
                </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">&#128176;</span>
                    <span class="menu-text">我的报价</span>
                </div>
                <div class="menu-card" onclick="location.href='供应商取货任务.html'">
                    <span class="menu-icon">&#128666;</span>
                    <span class="menu-text">取货任务</span>
                </div>
                <div class="menu-card" onclick="location.href='供应商价格列表.html'">
                    <span class="menu-icon">&#128202;</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>