148 lines
3.8 KiB
CSS
148 lines
3.8 KiB
CSS
|
/* Admin 样式表。手写 CSS，不引入框架、不引入构建流程。
|
||
|
|
见 admin/AGENTS.md 前端约束。
|
||
|
|
|
||
|
|
四个模块共用同一套三段式布局的样式：
|
||
|
|
.toolbar（顶部工具条）/ .table-wrap（中间表格）/ .statusbar（底部状态条）。
|
||
|
|
改这里会同时影响四个页面，这是有意的——不要为某个页面复制一份。 */
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #222;
|
||
|
|
background: #f5f6f8;
|
||
|
|
/* 底部状态条是固定的，给它留出空间 */
|
||
|
|
padding-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── 导航 ─────────────────────────────── */
|
||
|
|
.nav {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
background: #2b3440;
|
||
|
|
padding: 0 16px;
|
||
|
|
}
|
||
|
|
.nav-brand {
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-right: 24px;
|
||
|
|
padding: 12px 0;
|
||
|
|
}
|
||
|
|
.nav a {
|
||
|
|
color: #c8cdd4;
|
||
|
|
text-decoration: none;
|
||
|
|
padding: 12px 16px;
|
||
|
|
}
|
||
|
|
.nav a:hover { background: #3a4552; color: #fff; }
|
||
|
|
.nav a.active { background: #1f6feb; color: #fff; }
|
||
|
|
|
||
|
|
/* ── 页面主体 ─────────────────────────── */
|
||
|
|
.page { padding: 16px; }
|
||
|
|
|
||
|
|
/* ── 第一段：顶部工具条 ───────────────── */
|
||
|
|
.toolbar {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #e1e4e8;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.toolbar .inline {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
/* 搜索表单占据剩余空间，把删除按钮挤到右边 */
|
||
|
|
.toolbar .grow { flex: 1; }
|
||
|
|
.toolbar label { color: #555; white-space: nowrap; }
|
||
|
|
.toolbar input[type="text"] {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 160px;
|
||
|
|
padding: 5px 8px;
|
||
|
|
border: 1px solid #ccd1d6;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
padding: 5px 14px;
|
||
|
|
border: 1px solid #ccd1d6;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
button:hover { background: #f0f2f4; }
|
||
|
|
button.danger { color: #b42318; border-color: #f0b4ae; }
|
||
|
|
button.danger:hover { background: #fdf1f0; }
|
||
|
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
||
|
|
|
||
|
|
/* ── 第二段：表格 ─────────────────────── */
|
||
|
|
/* 列多了横向滚动，不要压缩列宽把字挤成两行 */
|
||
|
|
.table-wrap {
|
||
|
|
overflow-x: auto;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #e1e4e8;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
table { width: 100%; border-collapse: collapse; }
|
||
|
|
th, td {
|
||
|
|
padding: 8px 10px;
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid #eef0f2;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
th { background: #fafbfc; font-weight: 600; color: #444; }
|
||
|
|
tbody tr:hover { background: #f7f9fb; }
|
||
|
|
.col-check { width: 36px; }
|
||
|
|
|
||
|
|
/* 解析失败的行标黄，提示需要人工补 */
|
||
|
|
tr.row-warn { background: #fffbe6; }
|
||
|
|
tr.row-warn:hover { background: #fff6d0; }
|
||
|
|
|
||
|
|
/* PDD 链接未填写，标红提醒 */
|
||
|
|
.missing { color: #b42318; font-weight: 600; }
|
||
|
|
|
||
|
|
/* 空状态：文案要分情况，不要都写"暂无数据" */
|
||
|
|
tr.empty td {
|
||
|
|
text-align: center;
|
||
|
|
color: #888;
|
||
|
|
padding: 40px 10px;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
tr.empty small { color: #aaa; }
|
||
|
|
|
||
|
|
.hint {
|
||
|
|
color: #777;
|
||
|
|
font-size: 13px;
|
||
|
|
margin: 12px 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── 第三段：底部状态条 ───────────────── */
|
||
|
|
.statusbar {
|
||
|
|
position: fixed;
|
||
|
|
left: 0; right: 0; bottom: 0;
|
||
|
|
background: #2b3440;
|
||
|
|
color: #c8cdd4;
|
||
|
|
padding: 10px 16px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── 错误页 ───────────────────────────── */
|
||
|
|
.error-box {
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #f0b4ae;
|
||
|
|
border-left: 4px solid #b42318;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 16px 20px;
|
||
|
|
max-width: 720px;
|
||
|
|
}
|
||
|
|
.error-box h2 { margin-top: 0; color: #b42318; font-size: 16px; }
|