374 lines
11 KiB
CSS
374 lines
11 KiB
CSS
html{box-sizing:border-box;}
|
||
*,*::before,*::after{box-sizing:inherit;}
|
||
|
||
body{
|
||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||
color:var(--adm-text, #0f172a);
|
||
background:var(--adm-bg-layout, transparent);
|
||
margin:0;
|
||
}
|
||
|
||
a{color:var(--adm-color-link, #1677ff);text-decoration:none;}
|
||
a:hover{text-decoration:underline;}
|
||
|
||
.layout{display:grid;min-height:100vh;}
|
||
.sidebar{padding:24px;}
|
||
.sidebar-title,.sidebar-brand{margin-top:0;}
|
||
|
||
/* 左侧菜单形态（兼容）：不应覆盖顶部导航 topnav 的链接样式 */
|
||
.sidebar:not(.topnav) a,
|
||
.sidebar:not(.topnav) .sidebar-link{
|
||
display:block;
|
||
color:var(--adm-text-secondary, #64748b);
|
||
text-decoration:none;
|
||
padding:10px 12px;
|
||
border-radius:10px;
|
||
margin-bottom:8px;
|
||
}
|
||
.sidebar:not(.topnav) a:hover,
|
||
.sidebar:not(.topnav) .sidebar-link:hover{
|
||
text-decoration:none;
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
color:var(--adm-text, #0f172a);
|
||
}
|
||
|
||
.group-title{
|
||
font-size:12px;
|
||
color:var(--adm-text-muted, #94a3b8);
|
||
text-transform:uppercase;
|
||
letter-spacing:.08em;
|
||
margin:18px 0 8px;
|
||
}
|
||
.sidebar-logout,.logout-form{margin-top:18px;}
|
||
|
||
.content{padding:28px;}
|
||
|
||
/* 顶部导航布局（将左侧菜单提升到顶部，提升可视面积，避免底部需要横向滚动才看到关键动作） */
|
||
.layout.layout-topnav{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
|
||
.layout.layout-topnav .sidebar{
|
||
position:sticky;
|
||
top:0;
|
||
z-index:50;
|
||
padding:16px 20px;
|
||
border-right:none !important;
|
||
border-bottom:1px solid var(--adm-border-color, #e5e7eb);
|
||
}
|
||
.layout.layout-topnav .content{padding-top:20px;}
|
||
|
||
/* 顶部导航：链接样式由 admin-components.css 的 topnav 组件接管；这里不再做强样式覆盖 */
|
||
.layout.layout-topnav .sidebar{white-space:normal;overflow-x:visible;}
|
||
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
|
||
.page-title{margin:0;}
|
||
|
||
.card{border:1px solid var(--adm-border-color, #e5e7eb);border-radius:var(--adm-radius, 14px);padding:16px;background:var(--adm-bg-container, transparent);box-shadow:var(--adm-shadow-sm, none);}
|
||
.card + .card{margin-top:20px;}
|
||
.card-spaced{margin-bottom:20px;}
|
||
|
||
.grid{display:grid;gap:16px;}
|
||
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
|
||
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
|
||
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
|
||
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
|
||
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
|
||
.grid-align-end{align-items:end;}
|
||
.two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;}
|
||
.two-col > *{min-width:0;}
|
||
.span-2{grid-column:span 2;}
|
||
.span-3{grid-column:span 3;}
|
||
|
||
.num{font-size:28px;font-weight:700;}
|
||
.num-md{font-size:20px;font-weight:700;}
|
||
.num-sm{font-size:18px;font-weight:700;}
|
||
|
||
/* 兼容：早期页面使用 metric-number 作为指标数字样式 */
|
||
.metric-number{font-size:28px;font-weight:700;}
|
||
|
||
.text-md{font-size:16px;display:block;}
|
||
.muted{color:var(--adm-text-muted, #94a3b8);}
|
||
.muted-tight{margin-top:0;}
|
||
.muted-xs{margin-top:6px;font-size:12px;}
|
||
|
||
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;margin-top:8px;}
|
||
|
||
/* Form Grid（中后台表单统一布局：两列栅格 + 全宽行） */
|
||
.form-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:12px;
|
||
}
|
||
|
||
.form-grid label{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:6px;
|
||
}
|
||
|
||
.form-grid label > span{
|
||
font-size:12px;
|
||
font-weight:600;
|
||
color:var(--adm-text-secondary, #64748b);
|
||
}
|
||
|
||
.form-grid label > small{
|
||
margin-top:6px;
|
||
}
|
||
|
||
.form-grid .full{
|
||
grid-column:1 / -1;
|
||
}
|
||
|
||
@media (max-width: 768px){
|
||
.form-grid{grid-template-columns:1fr;}
|
||
.form-grid .full{grid-column:auto;}
|
||
}
|
||
|
||
table{
|
||
width:100%;
|
||
border-collapse:collapse;
|
||
}
|
||
|
||
th,td{
|
||
padding:10px;
|
||
border-bottom:1px solid var(--adm-border-color, #e5e7eb);
|
||
text-align:left;
|
||
vertical-align:top;
|
||
}
|
||
|
||
th{
|
||
color:var(--adm-text-secondary, #64748b);
|
||
font-weight:600;
|
||
}
|
||
|
||
input,select,button,textarea,
|
||
.form-grid input,
|
||
.form-grid select,
|
||
.login-form input,
|
||
.login-form button{
|
||
padding:10px 12px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
border:1px solid var(--adm-input-border, #d1d5db);
|
||
background:var(--adm-input-bg, #ffffff);
|
||
color:var(--adm-input-text, #0f172a);
|
||
box-sizing:border-box;
|
||
}
|
||
|
||
input:hover,select:hover,textarea:hover{
|
||
border-color:var(--adm-input-border-hover, var(--adm-input-border, #a3aab6));
|
||
}
|
||
|
||
input:focus,select:focus,textarea:focus{
|
||
outline:none;
|
||
border-color:var(--adm-color-primary, #1677ff);
|
||
box-shadow:0 0 0 3px var(--adm-primary-focus-ring, rgba(22, 119, 255, .12));
|
||
}
|
||
|
||
button{cursor:pointer;}
|
||
|
||
/* Buttons (UI Components)
|
||
* 说明：统一总台/站点后台/商家后台按钮风格（四端后台美化第一步）。
|
||
*/
|
||
.btn,
|
||
button.btn,
|
||
.btn-secondary,
|
||
button.btn-secondary,
|
||
.btn-danger,
|
||
button.btn-danger{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:6px;
|
||
padding:10px 14px;
|
||
border-radius:10px;
|
||
font-weight:600;
|
||
text-decoration:none;
|
||
border:1px solid transparent;
|
||
cursor:pointer;
|
||
}
|
||
|
||
.btn,
|
||
button.btn{
|
||
background:var(--adm-color-primary, #1d4ed8);
|
||
border-color:var(--adm-color-primary, #1d4ed8);
|
||
color:#fff;
|
||
}
|
||
.btn:hover,
|
||
button.btn:hover{
|
||
background:var(--adm-color-primary-hover, #1e40af);
|
||
border-color:var(--adm-color-primary-hover, #1e40af);
|
||
text-decoration:none;
|
||
}
|
||
|
||
.btn-secondary,
|
||
button.btn-secondary{
|
||
background:#ffffff;
|
||
border-color:var(--adm-border-color-strong, #d1d5db);
|
||
color:var(--adm-text, #0f172a);
|
||
}
|
||
.btn-secondary:hover,
|
||
button.btn-secondary:hover{
|
||
background:#f8fafc;
|
||
border-color:var(--adm-border-color-strong, #d1d5db);
|
||
text-decoration:none;
|
||
}
|
||
|
||
.btn-danger,
|
||
button.btn-danger{
|
||
background:var(--adm-error, #ef4444);
|
||
border-color:var(--adm-error, #ef4444);
|
||
color:#fff;
|
||
}
|
||
.btn-danger:hover,
|
||
button.btn-danger:hover{
|
||
background:#dc2626;
|
||
border-color:#dc2626;
|
||
text-decoration:none;
|
||
}
|
||
|
||
.btn-sm,
|
||
button.btn-sm{
|
||
padding:8px 10px;
|
||
border-radius:9px;
|
||
font-size:13px;
|
||
}
|
||
|
||
textarea.w-full,input.w-full{width:100%;}
|
||
|
||
.pre-wrap{white-space:pre-wrap;}
|
||
|
||
.w-100{width:100px;}
|
||
.w-120{width:120px;}
|
||
.w-140{width:140px;}
|
||
.w-160{width:160px;}
|
||
.w-180{width:180px;}
|
||
.w-200{width:200px;}
|
||
|
||
input.w-90{width:90px;}
|
||
.block{display:block;}
|
||
.inline{display:inline;}
|
||
.inline-form{display:inline;}
|
||
|
||
.mb-0{margin-bottom:0;}
|
||
.mb-6{margin-bottom:6px;}
|
||
.mb-8{margin-bottom:8px;}
|
||
.mb-10{margin-bottom:10px;}
|
||
.mb-12{margin-bottom:12px;}
|
||
.mb-16{margin-bottom:16px;}
|
||
.mb-20{margin-bottom:20px;}
|
||
.mt-0{margin-top:0;}
|
||
.mt-4{margin-top:4px;}
|
||
.mt-6{margin-top:6px;}
|
||
.mt-8{margin-top:8px;}
|
||
.mt-10{margin-top:10px;}
|
||
.mt-12{margin-top:12px;}
|
||
.mt-16{margin-top:16px;}
|
||
.my-16{margin:16px 0;}
|
||
.my-20{margin:20px 0;}
|
||
.list-indent,.ml-18{margin:8px 0 0 18px;}
|
||
|
||
.flash{
|
||
background:var(--adm-success-bg, #f0fdf4);
|
||
color:var(--adm-success, #16a34a);
|
||
padding:12px 14px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
margin-bottom:16px;
|
||
border:1px solid rgba(22, 163, 74, .25);
|
||
}
|
||
.warning{
|
||
background:var(--adm-warning-bg, #fffbeb);
|
||
color:var(--adm-warning, #f59e0b);
|
||
padding:12px 14px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
margin-bottom:16px;
|
||
border:1px solid rgba(245, 158, 11, .25);
|
||
}
|
||
.error-box{
|
||
background:var(--adm-error-bg, #fef2f2);
|
||
color:var(--adm-error, #ef4444);
|
||
padding:12px 14px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
margin-bottom:16px;
|
||
border:1px solid rgba(239, 68, 68, .25);
|
||
}
|
||
.error,.error-inline{
|
||
color:var(--adm-error, #ef4444);
|
||
margin-top:10px;
|
||
}
|
||
.filter-error{
|
||
margin-bottom:12px;
|
||
padding:12px;
|
||
border:1px solid rgba(239, 68, 68, .25);
|
||
background:var(--adm-error-bg, #fef2f2);
|
||
color:var(--adm-error, #ef4444);
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
}
|
||
|
||
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
|
||
.actions-spread{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
|
||
.inline-links,.card-link-list{display:flex;gap:8px;flex-wrap:wrap;}
|
||
|
||
/* Layout helpers */
|
||
.flex-between{display:flex;justify-content:space-between;gap:12px;align-items:center;}
|
||
.items-center{align-items:center;}
|
||
|
||
.gap-12{gap:12px;}
|
||
.gap-10{gap:10px;}
|
||
|
||
.focus-box,.nav-box,.profile-box{
|
||
padding:12px;
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-radius:8px;
|
||
background:var(--adm-bg-container, #ffffff);
|
||
}
|
||
.summary-box,.stat-box,.status-card,.status-link{
|
||
padding:12px;
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-radius:8px;
|
||
background:var(--adm-bg-container, #ffffff);
|
||
}
|
||
.status-card,.status-link{color:inherit;text-decoration:none;display:block;}
|
||
.status-card:hover,.status-link:hover{text-decoration:none;}
|
||
.pagination-wrap{margin-top:16px;}
|
||
/* Pagination：避免全局 a:hover 下划线在分页区域显得“底部一片线” */
|
||
.pagination-wrap a{text-decoration:none;}
|
||
.pagination-wrap a:hover,
|
||
.pagination-wrap a:focus,
|
||
.pagination-wrap a:active{text-decoration:none;}
|
||
.text-center,.table-empty{text-align:center;}
|
||
.section-dark{
|
||
/* 说明：早期是深色块，但与当前 Ant Design Pro-ish 浅色主题不一致，且容易造成文字对比度问题。
|
||
* 统一收敛：用 surface tint 作为“弱强调区块”，避免“颜色回退”。
|
||
*/
|
||
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
||
}
|
||
.stat-box-light,.status-link-light{
|
||
padding:12px;
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-radius:8px;
|
||
background:var(--adm-bg-container, #ffffff);
|
||
}
|
||
.status-link-light{color:inherit;text-decoration:none;display:block;}
|
||
.is-active-dark,.status-card-active{background:#1e293b;border-color:#60a5fa;}
|
||
.is-active-light{background:#f5faff;border-color:#93c5fd;}
|
||
.result-warning{color:#f59e0b;}
|
||
.result-success{color:#22c55e;}
|
||
.info-warning{margin-bottom:12px;padding:10px 12px;border:1px solid rgba(245, 158, 11, .28);border-radius:var(--adm-radius-sm, 10px);color:var(--adm-warning, #f59e0b);background:var(--adm-warning-bg, #fffbeb);}
|
||
.helper-text{margin:12px 0 0;}
|
||
|
||
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||
.card-login,.login-card{width:420px;border-radius:18px;padding:28px;}
|
||
.login-form input,
|
||
.login-form button{width:100%;padding:12px;margin-top:10px;}
|
||
|
||
@media (max-width: 1200px){
|
||
.grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr);}
|
||
.two-col{grid-template-columns:1fr;}
|
||
}
|
||
|
||
@media (max-width: 768px){
|
||
.layout{grid-template-columns:1fr !important;}
|
||
.sidebar{border-right:none !important;border-bottom:1px solid #22384f;}
|
||
.content{padding:16px;}
|
||
.top,.actions-spread{flex-direction:column;}
|
||
.grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr;}
|
||
}
|