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; }
        .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); max-width: 900px; }
        .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; }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .info-item { }
        .info-label { font-size: 13px; color: #909399; margin-bottom: 4px; }
        .info-value { font-size: 14px; color: #303133; }
        .detail-section { margin-top: 24px; }
        .detail-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #303133; }
        .detail-content { background: #f5f7fa; padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
        .timeline { padding: 16px 0; }
        .timeline-item { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
        .timeline-item::before { content: ''; position: absolute; left: 11px; top: 28px; bottom: 0; width: 2px; background: #e4e7ed; }
        .timeline-item:last-child::before { display: none; }
        .timeline-dot { width: 24px; height: 24px; border-radius: 50%; background: #1989fa; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; z-index: 1; }
        .timeline-content { flex: 1; }
        .timeline-time { font-size: 13px; color: #909399; margin-bottom: 4px; }
        .timeline-text { font-size: 14px; color: #303133; }
        .btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; background: #fff; color: #606266; border: 1px solid #dcdfe6; }
    </style>
</head>
<body>
    <div id="app">
        <div class="topbar">
            <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
            <div class="topbar-user"><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><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 size="small" @click="history.back()">返回</el-button></div>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">操作用户</div>
                            <div class="info-value">张三 (admin)</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">操作时间</div>
                            <div class="info-value">2026-03-19 10:30:25</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">操作模块</div>
                            <div class="info-value">订单管理</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">操作类型</div>
                            <div class="info-value">订单状态变更</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">IP地址</div>
                            <div class="info-value">192.168.1.100</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">操作结果</div>
                            <div class="info-value"><el-tag type="success" size="small">成功</el-tag></div>
                        </div>
                    </div>
                    <div class="detail-section">
                        <div class="detail-title">操作描述</div>
                        <div class="detail-content">将订单 ORD202603150023 的状态从"待分配配送"变更为"配送中"</div>
                    </div>
                    <div class="detail-section">
                        <div class="detail-title">请求参数</div>
                        <div class="detail-content">{
  "orderId": "ORD202603150023",
  "status": "delivering",
  "deliveryId": "DLV202603190005",
  "remark": "已分配配送员李四"
}</div>
                    </div>
                    <div class="detail-section">
                        <div class="detail-title">变更内容</div>
                        <div style="display:flex;gap:16px;margin-top:8px;">
                            <div style="flex:1;padding:16px;background:#fef0f0;border-radius:8px;">
                                <div style="font-size:12px;color:#909399;margin-bottom:8px;">变更前</div>
                                <div style="font-size:14px;">状态：待分配配送</div>
                            </div>
                            <div style="flex:1;padding:16px;background:#f0f9eb;border-radius:8px;">
                                <div style="font-size:12px;color:#909399;margin-bottom:8px;">变更后</div>
                                <div style="font-size:14px;">状态：配送中<br>配送员：李四<br>配送单：DLV202603190005</div>
                            </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>