620 lines
13 KiB
CSS
620 lines
13 KiB
CSS
/*
|
||
* SaaSShop Admin Components
|
||
* 说明：用于承接 Blade 中零散的 inline style，便于后续统一美化与治理。
|
||
*
|
||
* 美化方向：Ant Design Pro 风格（规整、企业中后台范式）
|
||
*/
|
||
|
||
/* Toast（渐进增强：配合 admin.js 展示更友好的反馈提示） */
|
||
.toast-container{
|
||
position:fixed;
|
||
top:16px;
|
||
right:16px;
|
||
z-index:999;
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px;
|
||
width:min(420px, calc(100vw - 32px));
|
||
}
|
||
|
||
.toast{
|
||
background:var(--adm-bg-container, #ffffff);
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-left-width:4px;
|
||
border-radius:var(--adm-radius, 12px);
|
||
padding:12px 12px;
|
||
color:var(--adm-text, #0f172a);
|
||
box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
|
||
display:flex;
|
||
align-items:flex-start;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
}
|
||
|
||
.toast-success{border-left-color:var(--adm-success, #16a34a);}
|
||
.toast-warning{border-left-color:var(--adm-warning, #f59e0b);}
|
||
.toast-error{border-left-color:var(--adm-error, #ef4444);}
|
||
|
||
.toast-content{
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
word-break:break-word;
|
||
}
|
||
|
||
.toast-close{
|
||
appearance:none;
|
||
border:none;
|
||
background:transparent;
|
||
color:var(--adm-text-muted, #94a3b8);
|
||
font-size:18px;
|
||
line-height:1;
|
||
cursor:pointer;
|
||
padding:2px 6px;
|
||
border-radius:8px;
|
||
}
|
||
|
||
.toast-close:hover{
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
color:var(--adm-text, #0f172a);
|
||
}
|
||
|
||
.form-inline-row{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
}
|
||
|
||
.text-danger{
|
||
color:#b42318;
|
||
}
|
||
|
||
/* 平台订单：退款状态治理区块 */
|
||
.refund-governance-block{
|
||
margin-top:12px;
|
||
border:1px dashed var(--adm-error-border-strong, rgba(239, 68, 68, .45));
|
||
background:var(--adm-error-bg, #fef2f2);
|
||
}
|
||
|
||
.refund-governance-title{
|
||
margin-bottom:6px;
|
||
}
|
||
|
||
.refund-governance-meta{
|
||
margin-bottom:8px;
|
||
}
|
||
|
||
/* 平台订单：治理提示块（用于 BMPA / 同步订阅 等动作前的安全阀说明） */
|
||
.governance-block{
|
||
margin-top:10px;
|
||
width:100%;
|
||
border:1px solid var(--adm-error-border-soft, rgba(239, 68, 68, .25));
|
||
background:var(--adm-error-bg, #fef2f2);
|
||
}
|
||
|
||
.governance-block-title{
|
||
margin:0;
|
||
}
|
||
|
||
.governance-block-body{
|
||
margin-top:6px;
|
||
font-size:12px;
|
||
line-height:1.5;
|
||
}
|
||
|
||
/* 可复用：治理提示块内的说明/脚注文本 */
|
||
.governance-block-footnote{
|
||
margin-top:6px;
|
||
font-size:12px;
|
||
line-height:1.5;
|
||
}
|
||
|
||
/* 可复用：折叠面板（参考 Ant Design Pro 的筛选区交互：可折叠、摘要做成一条可点 Header） */
|
||
|
||
/* 可复用：Filters Card（平台订单/订阅等列表页共用：统一筛选区观感） */
|
||
.filters-card{
|
||
padding:0;
|
||
}
|
||
|
||
.filters-summary{
|
||
padding:14px 16px;
|
||
}
|
||
|
||
.filters-body{
|
||
padding:14px 16px 16px;
|
||
border-top:1px solid var(--adm-border-color, #e5e7eb);
|
||
}
|
||
|
||
.filters-grid{
|
||
margin:0;
|
||
}
|
||
|
||
/* 可复用：List Card（列表页统一卡片：标题区/操作区/表格区） */
|
||
.list-card{
|
||
padding:0;
|
||
}
|
||
|
||
/* 可复用：Pagination（中后台分页，参考 Ant Design Pro） */
|
||
.adm-pagination{
|
||
margin-top:16px;
|
||
}
|
||
|
||
.adm-pagination-inner{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.adm-page-list{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.adm-page-btn,
|
||
.adm-page-num,
|
||
.adm-page-ellipsis{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
min-width:32px;
|
||
height:32px;
|
||
padding:0 10px;
|
||
border-radius:10px;
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
background:var(--adm-bg-container, #ffffff);
|
||
color:var(--adm-text, #0f172a);
|
||
text-decoration:none;
|
||
box-shadow:var(--adm-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
|
||
}
|
||
|
||
.adm-page-ellipsis{
|
||
border-color:transparent;
|
||
background:transparent;
|
||
box-shadow:none;
|
||
min-width:auto;
|
||
padding:0 6px;
|
||
color:var(--adm-text-muted, #94a3b8);
|
||
}
|
||
|
||
.adm-page-num.is-active{
|
||
border-color:var(--adm-primary-border-45, rgba(22, 119, 255, .45));
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
color:var(--adm-text, #0f172a);
|
||
font-weight:700;
|
||
}
|
||
|
||
.adm-page-btn:hover,
|
||
.adm-page-num:hover{
|
||
text-decoration:none;
|
||
border-color:var(--adm-primary-border-35, rgba(22, 119, 255, .35));
|
||
background:var(--adm-primary-tint-06, rgba(22, 119, 255, .06));
|
||
}
|
||
|
||
.adm-page-btn.is-disabled{
|
||
opacity:.55;
|
||
cursor:not-allowed;
|
||
}
|
||
|
||
.adm-page-meta{
|
||
margin-left:auto;
|
||
}
|
||
|
||
.list-card-header{
|
||
padding:14px 16px;
|
||
display:flex;
|
||
align-items:flex-start;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
}
|
||
|
||
.list-card-title{
|
||
margin:0;
|
||
}
|
||
|
||
.list-card-subtitle{
|
||
margin-top:6px;
|
||
}
|
||
|
||
.list-card-body{
|
||
border-top:1px solid var(--adm-border-color, #e5e7eb);
|
||
padding:0;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.list-card-table{
|
||
margin:0;
|
||
border-collapse:separate;
|
||
border-spacing:0;
|
||
}
|
||
|
||
.list-card-table tbody tr:last-child td{
|
||
border-bottom:none;
|
||
}
|
||
|
||
.list-card-table th,
|
||
.list-card-table td{
|
||
padding:12px 12px;
|
||
}
|
||
|
||
.list-card-table thead th{
|
||
background:var(--adm-table-header-bg, #fafafa);
|
||
}
|
||
|
||
.list-card-table tbody tr:hover td{
|
||
background:var(--adm-table-row-hover-bg, rgba(22, 119, 255, .04));
|
||
}
|
||
|
||
.list-card-table .table-empty{
|
||
padding:24px 12px;
|
||
text-align:center;
|
||
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
||
}
|
||
|
||
/* 可复用：PageHeader（参考 Ant Design Pro：标题区 + 描述 + 右侧操作区） */
|
||
.page-header{
|
||
width:100%;
|
||
padding:16px;
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-radius:var(--adm-radius, 12px);
|
||
background:var(--adm-bg-container, #ffffff);
|
||
}
|
||
|
||
.page-header-main{
|
||
display:flex;
|
||
align-items:flex-start;
|
||
justify-content:space-between;
|
||
gap:12px;
|
||
}
|
||
|
||
.page-header-title{
|
||
font-size:18px;
|
||
font-weight:700;
|
||
color:var(--adm-text, #0f172a);
|
||
line-height:1.2;
|
||
}
|
||
|
||
.page-header-subtitle{
|
||
margin-top:6px;
|
||
font-size:13px;
|
||
color:var(--adm-text-secondary, #64748b);
|
||
line-height:1.45;
|
||
}
|
||
|
||
.page-header-actions{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.page-header-meta{
|
||
margin-top:12px;
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap:12px;
|
||
color:var(--adm-text-secondary, #64748b);
|
||
font-size:12px;
|
||
}
|
||
|
||
/* 可复用：KPI 卡片栅格（参考 Ant Design Pro Analysis：第一行 4 个等宽卡片） */
|
||
.kpi-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||
gap:12px;
|
||
}
|
||
|
||
@media (max-width: 1024px){
|
||
.kpi-grid{
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px){
|
||
.kpi-grid{
|
||
grid-template-columns:1fr;
|
||
}
|
||
}
|
||
|
||
.stat-card-title{
|
||
font-size:12px;
|
||
color:var(--adm-text-secondary, #64748b);
|
||
}
|
||
|
||
.stat-card-value{
|
||
margin-top:10px;
|
||
font-size:22px;
|
||
font-weight:800;
|
||
color:var(--adm-text, #0f172a);
|
||
letter-spacing:.2px;
|
||
}
|
||
|
||
.stat-card-footnote{
|
||
margin-top:8px;
|
||
font-size:12px;
|
||
color:var(--adm-text-muted, #94a3b8);
|
||
}
|
||
|
||
.collapsible > summary{
|
||
list-style:none;
|
||
cursor:pointer;
|
||
}
|
||
|
||
.collapsible > summary::-webkit-details-marker{
|
||
display:none;
|
||
}
|
||
|
||
.collapsible-summary{
|
||
user-select:none;
|
||
}
|
||
|
||
.collapsible-body{
|
||
margin-top:10px;
|
||
}
|
||
|
||
/* 平台订单：工具区（两列分组卡片化，避免表单散落） */
|
||
.tool-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:12px;
|
||
align-items:start;
|
||
}
|
||
|
||
@media (max-width: 768px){
|
||
.tool-grid{
|
||
grid-template-columns:1fr;
|
||
}
|
||
}
|
||
|
||
.tool-group{
|
||
width:100%;
|
||
}
|
||
|
||
.tool-group-title{
|
||
font-size:12px;
|
||
color:#94a3b8;
|
||
text-transform:uppercase;
|
||
letter-spacing:.08em;
|
||
font-weight:700;
|
||
margin:0 0 10px;
|
||
}
|
||
|
||
.tool-group-subtitle{
|
||
margin:0 0 6px;
|
||
}
|
||
|
||
/* 平台订单列表：避免列太多导致内容挤压成“竖排/断字” */
|
||
.table-wrap{
|
||
width:100%;
|
||
overflow-x:auto;
|
||
}
|
||
|
||
.table-wrap table.platform-orders-table{
|
||
min-width:1600px;
|
||
}
|
||
|
||
/* 平台订单列表：根据视图控制 min-width（精简视图更紧凑，full 视图更宽） */
|
||
.platform-orders-table.is-compact{
|
||
min-width:1400px;
|
||
}
|
||
|
||
.platform-orders-table.is-full{
|
||
min-width:2000px;
|
||
}
|
||
|
||
.table-nowrap th,
|
||
.table-nowrap td{
|
||
white-space:nowrap;
|
||
word-break:normal;
|
||
}
|
||
|
||
/* 平台订单列表：精简视图（默认隐藏部分列，避免列表过长） */
|
||
.platform-orders-table .col-optional{
|
||
display:none;
|
||
}
|
||
|
||
.platform-orders-table.is-full .col-optional{
|
||
display:table-cell;
|
||
}
|
||
|
||
/* 平台订单列表（精简视图）：进一步收敛信息密度 */
|
||
.platform-orders-table.is-compact td{
|
||
padding-top:8px;
|
||
padding-bottom:8px;
|
||
}
|
||
|
||
.platform-orders-table.is-compact .muted-xs{
|
||
font-size:12px;
|
||
}
|
||
|
||
/* 平台订单列表：二行辅助信息（例如 线索/订阅ID） */
|
||
.platform-orders-table .row-meta{
|
||
margin-top:2px;
|
||
}
|
||
|
||
/* 平台订单列表：行内治理提示（精简视图主要入口） */
|
||
.platform-orders-table .row-warn{
|
||
margin-top:4px;
|
||
padding:4px 6px;
|
||
border-left:3px solid var(--adm-error, #ef4444);
|
||
background:var(--adm-error-bg, #fef2f2);
|
||
border-radius:4px;
|
||
}
|
||
|
||
.platform-orders-table .row-warn a.link{
|
||
color:var(--adm-error, #ef4444);
|
||
text-decoration:underline;
|
||
}
|
||
|
||
.platform-orders-table .row-warn a.link:hover{
|
||
text-decoration:none;
|
||
}
|
||
|
||
.platform-orders-table .row-warn-prefix{
|
||
font-weight:600;
|
||
display:inline-block;
|
||
padding:1px 6px;
|
||
border-radius:10px;
|
||
background:var(--adm-error-tint, rgba(239, 68, 68, .12));
|
||
color:var(--adm-error, #ef4444);
|
||
margin-right:4px;
|
||
}
|
||
|
||
/* 平台订单列表：精简视图也要可达的治理提示（对账/退款不一致） */
|
||
.platform-orders-table .governance-hints{
|
||
margin-bottom:6px;
|
||
}
|
||
|
||
.platform-orders-table .governance-hint{
|
||
line-height:1.4;
|
||
}
|
||
|
||
/* 总台管理：顶部导航（顶部主菜单保留，但视觉对齐 Ant Design Pro Header） */
|
||
.sidebar.topnav{
|
||
white-space:normal;
|
||
overflow-x:visible;
|
||
background:var(--adm-bg-header, #ffffff);
|
||
border-bottom:1px solid var(--adm-border-color, #e5e7eb);
|
||
box-shadow:var(--adm-shadow-header, 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06));
|
||
}
|
||
|
||
.topnav-row{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:16px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.topnav-brand{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
font-weight:800;
|
||
color:var(--adm-text, #0f172a);
|
||
padding:8px 10px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
}
|
||
|
||
.topnav-brand:hover{
|
||
text-decoration:none;
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
}
|
||
|
||
.topnav-menu{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
flex:1;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.topnav-link,
|
||
.topnav-summary{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
padding:8px 10px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
color:var(--adm-text-secondary, #64748b);
|
||
}
|
||
|
||
.topnav-link:hover,
|
||
.topnav-summary:hover{
|
||
text-decoration:none;
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
color:var(--adm-text, #0f172a);
|
||
}
|
||
|
||
.topnav-item{
|
||
position:relative;
|
||
}
|
||
|
||
.topnav-item > summary::-webkit-details-marker{
|
||
display:none;
|
||
}
|
||
|
||
.topnav-item > summary{
|
||
list-style:none;
|
||
cursor:pointer;
|
||
user-select:none;
|
||
}
|
||
|
||
.topnav-dropdown{
|
||
position:absolute;
|
||
top:calc(100% + 8px);
|
||
left:0;
|
||
min-width:180px;
|
||
background:var(--adm-bg-container, #ffffff);
|
||
border:1px solid var(--adm-border-color, #e5e7eb);
|
||
border-radius:var(--adm-radius, 12px);
|
||
padding:10px;
|
||
box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
|
||
z-index:100;
|
||
}
|
||
|
||
/* details 未展开时不展示下拉 */
|
||
.topnav-item:not([open]) .topnav-dropdown{
|
||
display:none;
|
||
}
|
||
|
||
.topnav-sub{
|
||
display:block;
|
||
padding:9px 10px;
|
||
border-radius:var(--adm-radius-sm, 10px);
|
||
color:var(--adm-text, #0f172a);
|
||
margin:0;
|
||
}
|
||
|
||
.topnav-sub:hover{
|
||
text-decoration:none;
|
||
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
|
||
}
|
||
|
||
.topnav-actions{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
}
|
||
|
||
.topnav-meta{
|
||
margin-top:6px;
|
||
}
|
||
|
||
/* 移动端：下拉改为文档流（避免 absolute 导致溢出） */
|
||
@media (max-width: 768px){
|
||
.topnav-row{gap:10px;}
|
||
.topnav-dropdown{
|
||
position:static;
|
||
min-width:auto;
|
||
box-shadow:none;
|
||
margin-top:6px;
|
||
}
|
||
}
|
||
|
||
/* 兼容：旧的左侧导航二级分组样式（保留但不再作为主形态） */
|
||
.sidebar .nav-group{
|
||
margin:10px 0;
|
||
}
|
||
|
||
.sidebar .nav-group-title{
|
||
cursor:pointer;
|
||
user-select:none;
|
||
color:#94a3b8;
|
||
font-size:12px;
|
||
text-transform:uppercase;
|
||
letter-spacing:.08em;
|
||
font-weight:700;
|
||
margin:0 0 6px;
|
||
list-style:none;
|
||
}
|
||
|
||
.sidebar .nav-group summary::-webkit-details-marker{
|
||
display:none;
|
||
}
|
||
|
||
.sidebar .nav-item--sub{
|
||
display:block;
|
||
padding-left:12px;
|
||
}
|