172 lines
2.8 KiB
CSS
172 lines
2.8 KiB
CSS
/**
|
|
* 运营台通用版式：内容治理 / 订单与权益 / 创作者审核 / 数据看板四个页面共用。
|
|
*
|
|
* 两条底线和 App 用户页一致：
|
|
* 1. 筛选控件窄窗口下换行，而不是被挤出可视区；
|
|
* 2. 卡片固定尺寸，指标位数变化时栅格不跳动。
|
|
*/
|
|
|
|
.console-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.console-toolbar .console-keyword {
|
|
flex: 1 1 240px;
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.console-toolbar .console-select {
|
|
width: 160px;
|
|
flex: 0 0 160px;
|
|
}
|
|
|
|
.console-toolbar .console-user,
|
|
.console-toolbar .console-drama {
|
|
width: 150px;
|
|
flex: 0 0 150px;
|
|
}
|
|
|
|
.console-count {
|
|
margin-left: auto;
|
|
color: #858b95;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.console-hint {
|
|
margin: 0 0 12px;
|
|
color: #858b95;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* el-alert 复用同一类名时，保留弹窗内的间距而不是当成段落文本 */
|
|
section .console-hint.el-alert {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.console-muted {
|
|
color: #858b95;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.console-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.console-number {
|
|
width: 180px;
|
|
}
|
|
|
|
/* 金币变动：正负一眼可辨，等宽数字让列对齐 */
|
|
.console-credit,
|
|
.console-debit {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.console-credit {
|
|
color: #4d866a;
|
|
}
|
|
|
|
.console-debit {
|
|
color: #b54848;
|
|
}
|
|
|
|
.console-drawer .el-drawer__header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.console-drawer .el-table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.console-drawer .el-table .el-table__cell {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
/* ---------- 数据看板 ---------- */
|
|
|
|
.board-group + .board-group {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.board-title {
|
|
margin: 0 0 10px;
|
|
color: #302d44;
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.board-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.board-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-height: 74px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #e6e8eb;
|
|
border-radius: var(--app-radius-md);
|
|
background: #fff;
|
|
}
|
|
|
|
.board-label {
|
|
color: #727983;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.board-value {
|
|
color: #303640;
|
|
font-size: 20px;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.2;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.board-value-empty {
|
|
color: #9a97a8;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.board-notes {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.board-notes ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.board-transcode {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
html.dark .console-count,
|
|
html.dark .console-hint,
|
|
html.dark .console-muted,
|
|
html.dark .board-label {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
html.dark .board-title,
|
|
html.dark .board-value {
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
html.dark .board-card {
|
|
border-color: var(--el-border-color-light);
|
|
background: var(--el-bg-color-overlay);
|
|
}
|