sqxp/docs/原型图/web/消息通知.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://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .notification-badge { position: relative; cursor: pointer; font-size: 20px; }
        .notification-count { position: absolute; top: -8px; right: -8px; background: #ee0a24; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .tab-bar { display: flex; gap: 8px; margin-bottom: 20px; }
        .tab { padding: 8px 20px; border-radius: 20px; font-size: 14px; cursor: pointer; color: #606266; background: #f5f7fa; }
        .tab.active { background: #1989fa; color: #fff; }
        .notification-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f5f7fa; cursor: pointer; }
        .notification-item:last-child { border-bottom: none; }
        .notification-item.unread { background: #f0f9eb; margin: 0 -24px; padding: 16px 24px; }
        .notification-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        .notification-icon.order { background: #ecf5ff; color: #1989fa; }
        .notification-icon.delivery { background: #fdf6ec; color: #ff976a; }
        .notification-icon.system { background: #f4f4f5; color: #909399; }
        .notification-content { flex: 1; }
        .notification-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .notification-desc { font-size: 13px; color: #909399; margin-bottom: 4px; }
        .notification-time { font-size: 12px; color: #c0c4cc; }
        .mark-read-btn { color: #1989fa; font-size: 13px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="app">
        <div class="topbar">
            <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
            <div class="topbar-user">
                <div class="notification-badge">
                    &#128276;
                    <span class="notification-count">5</span>
                </div>
                <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
                <span>管理员</span>
            </div>
        </div>
        <div class="main-container">
            <div class="sidebar">
                <div class="menu-item active"><el-icon><Bell /></el-icon><span>消息通知</span></div>
                <div class="menu-item"><el-icon><Setting /></el-icon><span>系统设置</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 消息通知</div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">我的消息</span>
                        <el-button type="text" class="mark-read-btn">全部标记为已读</el-button>
                    </div>
                    <div class="tab-bar">
                        <div class="tab active">全部</div>
                        <div class="tab">订单</div>
                        <div class="tab">配送</div>
                        <div class="tab">系统</div>
                    </div>
                    <div class="notification-item unread">
                        <div class="notification-icon order">&#128722;</div>
                        <div class="notification-content">
                            <div class="notification-title">新订单通知</div>
                            <div class="notification-desc">客户AA餐厅提交了新订单 ORD202603190001，金额 ¥380.00</div>
                            <div class="notification-time">2026-03-19 09:30:25</div>
                        </div>
                    </div>
                    <div class="notification-item unread">
                        <div class="notification-icon delivery">&#127954;</div>
                        <div class="notification-content">
                            <div class="notification-title">配送超时预警</div>
                            <div class="notification-desc">配送单 DLV202603190005 即将超时，请及时处理</div>
                            <div class="notification-time">2026-03-19 08:45:12</div>
                        </div>
                    </div>
                    <div class="notification-item unread">
                        <div class="notification-icon order">&#128722;</div>
                        <div class="notification-content">
                            <div class="notification-title">取消申请通知</div>
                            <div class="notification-desc">客户BB超市提交了订单 ORD202603160035 的取消申请</div>
                            <div class="notification-time">2026-03-19 08:20:00</div>
                        </div>
                    </div>
                    <div class="notification-item">
                        <div class="notification-icon system">&#9881;</div>
                        <div class="notification-content">
                            <div class="notification-title">系统更新通知</div>
                            <div class="notification-desc">叁强鲜配系统将于今晚22:00-23:00进行版本更新</div>
                            <div class="notification-time">2026-03-18 16:00:00</div>
                        </div>
                    </div>
                    <div class="notification-item">
                        <div class="notification-icon delivery">&#127954;</div>
                        <div class="notification-content">
                            <div class="notification-title">配送完成通知</div>
                            <div class="notification-desc">配送员李四已完成配送单 DLV202603180023 的配送</div>
                            <div class="notification-time">2026-03-18 14:30:45</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({ setup() { return {}; } });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>