1632 lines
36 KiB
CSS
1632 lines
36 KiB
CSS
/**
|
||
* 原型保真覆盖层：按原型截图密度压紧壳层与看板。
|
||
* 加载顺序须在 admin-prototype.css、dashboard-prototype.css 之后。
|
||
*/
|
||
|
||
/* ---- 全局：禁止整页横向滚动条（看板气泡/顶栏曾把文档撑宽） ---- */
|
||
html,
|
||
body,
|
||
#app {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
font-size: 11px !important;
|
||
letter-spacing: 0 !important;
|
||
line-height: 1.45 !important;
|
||
}
|
||
|
||
.admin-shell {
|
||
background: #f7f8fb;
|
||
grid-template-columns: 220px minmax(0, 1fr) !important;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
/* 锁视口：避免 html overflow:hidden 裁切后整页既无文档滚、内容区又不内滚 */
|
||
height: 100vh !important;
|
||
max-height: 100vh !important;
|
||
min-height: 0 !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.main-stage {
|
||
background: #f7f8fb !important;
|
||
min-width: 0 !important;
|
||
/*
|
||
* 中间主区 = 滚动容器（看板/非列表页）。
|
||
* 实测仅改 .admin-content 在生产壳层仍会被裁切且无条；改由本列横竖自滚最稳。
|
||
*/
|
||
height: 100vh !important;
|
||
max-height: 100vh !important;
|
||
min-height: 0 !important;
|
||
overflow-x: auto !important;
|
||
overflow-y: scroll !important;
|
||
scrollbar-gutter: stable;
|
||
-webkit-overflow-scrolling: touch;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.main-stage {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #cbd5e1 transparent;
|
||
}
|
||
.main-stage::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
.main-stage::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
background-clip: padding-box;
|
||
}
|
||
.main-stage::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
background-clip: padding-box;
|
||
}
|
||
.main-stage::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.main-stage::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
.admin-content {
|
||
padding: 16px 16px 40px !important;
|
||
gap: 12px !important;
|
||
min-width: 0 !important;
|
||
/* 随内容增高/增宽；滚动条在 .main-stage */
|
||
flex: 0 0 auto !important;
|
||
height: auto !important;
|
||
max-height: none !important;
|
||
min-height: 0 !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/* 列表页：主区不滚，仍由表格区内滚（工单/账号等） */
|
||
.main-stage:has(.is-list-page) {
|
||
overflow: hidden !important;
|
||
}
|
||
.main-stage:has(.is-list-page) .admin-content {
|
||
flex: 1 1 0 !important;
|
||
height: 0 !important;
|
||
min-height: 0 !important;
|
||
max-height: none !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/*
|
||
* 侧栏品牌与主区顶栏：同高，底部分隔线左右对齐成一条水平线。
|
||
* 原先 brand 约 58px、topbar min 52px，底边错位。
|
||
*/
|
||
.admin-brand,
|
||
.admin-topbar {
|
||
box-sizing: border-box !important;
|
||
height: 56px !important;
|
||
min-height: 56px !important;
|
||
max-height: 56px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
border-bottom: 1px solid #e8edf4 !important;
|
||
/* 中间主区滚动时顶栏吸顶，不跟着内容滚走 */
|
||
position: sticky !important;
|
||
top: 0 !important;
|
||
z-index: 40 !important;
|
||
flex-shrink: 0 !important;
|
||
background: rgba(255, 255, 255, 0.96) !important;
|
||
}
|
||
|
||
.admin-brand {
|
||
gap: 10px !important;
|
||
padding: 0 14px !important;
|
||
}
|
||
|
||
.admin-brand-icon {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
border-radius: 7px !important;
|
||
background: #1d4ed8 !important;
|
||
}
|
||
|
||
.admin-brand-title {
|
||
font-size: 11px !important;
|
||
font-weight: 900 !important;
|
||
line-height: 1.25 !important;
|
||
white-space: normal !important;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.admin-nav {
|
||
padding: 4px 0 16px !important;
|
||
}
|
||
|
||
.admin-nav-group-title {
|
||
padding: 10px 14px 4px !important;
|
||
font-size: 9px !important;
|
||
font-weight: 800 !important;
|
||
letter-spacing: 0.05em !important;
|
||
}
|
||
|
||
.admin-nav-link {
|
||
gap: 8px !important;
|
||
margin: 1px 8px !important;
|
||
padding: 0 10px !important;
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
border-radius: 7px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
width: calc(100% - 16px) !important;
|
||
}
|
||
|
||
.admin-nav-icon,
|
||
.admin-nav-link .proto-icon {
|
||
width: 15px !important;
|
||
height: 15px !important;
|
||
}
|
||
|
||
.admin-nav-badge {
|
||
font-size: 9px !important;
|
||
font-weight: 800 !important;
|
||
padding: 0 6px !important;
|
||
min-height: 16px !important;
|
||
line-height: 16px !important;
|
||
}
|
||
|
||
/* ---- 顶栏：高度已与 .admin-brand 统一为 56px ---- */
|
||
.admin-topbar {
|
||
padding: 0 14px !important;
|
||
gap: 12px !important;
|
||
min-width: 0 !important;
|
||
flex-shrink: 0 !important;
|
||
/* 允许用户下拉露出；业务 Teleport 区单独 overflow:hidden 防幽灵点击层 */
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.admin-topbar h1 {
|
||
margin: 0 !important;
|
||
font-size: 13px !important;
|
||
font-weight: 800 !important;
|
||
letter-spacing: 0 !important;
|
||
line-height: 1.2 !important;
|
||
color: #101828 !important;
|
||
}
|
||
|
||
.admin-topbar-actions {
|
||
gap: 8px !important;
|
||
min-width: 0 !important;
|
||
flex: 0 1 auto !important;
|
||
justify-content: flex-end;
|
||
flex-wrap: nowrap !important;
|
||
max-width: min(72%, 720px);
|
||
position: relative;
|
||
z-index: 40;
|
||
pointer-events: auto !important;
|
||
}
|
||
|
||
.admin-user-chip {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 业务顶栏按钮：36（不再用 44 把顶栏撑高） */
|
||
.admin-topbar-actions .btn:not(.dash-refresh-btn) {
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
padding: 0 12px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
border-radius: 7px !important;
|
||
}
|
||
|
||
/* 看板日期 / 更新时间 / 更新数据：34 */
|
||
.admin-topbar-actions .dash-refresh-btn,
|
||
.admin-topbar-actions .month-range-input,
|
||
.admin-topbar-actions .dashboard-data-note,
|
||
.month-range-input,
|
||
.dashboard-data-note {
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
}
|
||
|
||
.month-range-input {
|
||
padding: 0 12px !important;
|
||
border-radius: 7px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.dashboard-data-note {
|
||
padding: 0 10px 0 8px !important;
|
||
font-size: 10px !important;
|
||
font-weight: 700 !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
.admin-topbar-actions .ant-btn {
|
||
height: 34px !important;
|
||
min-height: 34px !important;
|
||
}
|
||
|
||
.admin-topbar-actions .dash-refresh-btn.ant-btn {
|
||
height: 34px !important;
|
||
min-height: 34px !important;
|
||
}
|
||
|
||
.page-topbar-actions-slot {
|
||
gap: 8px !important;
|
||
min-height: 34px !important;
|
||
/* 勿 max-height + overflow:hidden：会裁掉看板日期下拉，看起来像不能选 */
|
||
max-height: none !important;
|
||
position: relative !important;
|
||
z-index: 40 !important;
|
||
pointer-events: auto !important;
|
||
overflow: visible !important;
|
||
flex-wrap: nowrap !important;
|
||
}
|
||
|
||
.page-topbar-actions-slot .dash-topbar-tools,
|
||
.page-topbar-actions-slot .month-range-picker,
|
||
.page-topbar-actions-slot .toolbar-date-range {
|
||
position: relative !important;
|
||
overflow: visible !important;
|
||
z-index: 50 !important;
|
||
}
|
||
|
||
.page-topbar-actions-slot .month-range-dropdown,
|
||
.page-topbar-actions-slot .dash-picker-dropdown {
|
||
z-index: 90 !important;
|
||
}
|
||
|
||
.page-topbar-actions-slot .btn {
|
||
pointer-events: auto !important;
|
||
cursor: pointer !important;
|
||
position: relative;
|
||
z-index: 41;
|
||
}
|
||
|
||
/* ---- 工具栏（原生 select + search） ---- */
|
||
.toolbar {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center !important;
|
||
gap: 10px !important;
|
||
padding: 14px 16px !important;
|
||
border: 1px solid var(--line) !important;
|
||
border-radius: 12px !important;
|
||
background: #ffffff !important;
|
||
}
|
||
|
||
.toolbar select {
|
||
height: 38px !important;
|
||
box-sizing: border-box !important;
|
||
margin: 0 !important;
|
||
border: 1px solid var(--line) !important;
|
||
background: #ffffff !important;
|
||
border-radius: 8px !important;
|
||
padding: 0 28px 0 12px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
color: #344054 !important;
|
||
cursor: pointer !important;
|
||
flex-shrink: 0 !important;
|
||
outline: none;
|
||
}
|
||
|
||
.toolbar select:focus {
|
||
border-color: #155eef !important;
|
||
box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
|
||
}
|
||
|
||
.toolbar .search {
|
||
position: relative !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
flex: 1 1 240px !important;
|
||
max-width: 360px !important;
|
||
height: 38px !important;
|
||
border: 1px solid var(--line) !important;
|
||
border-radius: 8px !important;
|
||
background: #f8fafc !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.toolbar .search .search-icon,
|
||
.toolbar .search > svg,
|
||
.toolbar .search .proto-icon {
|
||
position: absolute !important;
|
||
left: 10px !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
color: #98a2b3 !important;
|
||
width: 16px !important;
|
||
height: 16px !important;
|
||
pointer-events: none !important;
|
||
z-index: 1 !important;
|
||
}
|
||
|
||
.toolbar .search input {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
border: 0 !important;
|
||
outline: 0 !important;
|
||
background: transparent !important;
|
||
padding: 0 12px 0 34px !important;
|
||
font-size: 11.5px !important;
|
||
font-weight: 400 !important;
|
||
color: #1d2939 !important;
|
||
line-height: 1.25 !important;
|
||
}
|
||
|
||
.toolbar .search:focus-within {
|
||
border-color: #155eef !important;
|
||
box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
|
||
}
|
||
|
||
/* 日期范围：Ant RangePicker，一次弹层点选起止；外观对齐工具栏 select */
|
||
.toolbar-date-range {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
height: 38px;
|
||
}
|
||
|
||
.toolbar-date-range .toolbar-range-picker.ant-picker,
|
||
.toolbar-date-range .ant-picker {
|
||
height: 38px !important;
|
||
padding: 0 12px !important;
|
||
border: 1px solid var(--line) !important;
|
||
border-radius: 8px !important;
|
||
background: #ffffff !important;
|
||
box-shadow: none !important;
|
||
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker:hover {
|
||
border-color: #98a2b3 !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-focused,
|
||
.toolbar-date-range .ant-picker:focus,
|
||
.toolbar-date-range .ant-picker.ant-picker-focused {
|
||
border-color: #155eef !important;
|
||
box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-input > input {
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
color: #344054 !important;
|
||
cursor: pointer !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-input > input::placeholder {
|
||
color: #98a2b3 !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-separator {
|
||
color: #98a2b3 !important;
|
||
font-size: 11px !important;
|
||
font-weight: 600 !important;
|
||
padding: 0 4px !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-suffix {
|
||
color: #98a2b3 !important;
|
||
margin-left: 4px !important;
|
||
}
|
||
|
||
.toolbar-date-range .ant-picker-clear {
|
||
background: #ffffff !important;
|
||
}
|
||
|
||
.toolbar .toolbar-actions .btn {
|
||
min-height: 38px !important;
|
||
height: 38px !important;
|
||
padding: 0 12px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
/* ---- 表格 ---- */
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
-webkit-overflow-scrolling: touch;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
min-width: 720px;
|
||
border-collapse: separate !important;
|
||
border-spacing: 0 !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.data-table th {
|
||
height: 36px !important;
|
||
padding: 0 12px !important;
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
letter-spacing: 0 !important;
|
||
vertical-align: middle !important;
|
||
background: #f8fafc;
|
||
color: #475467;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.data-table td {
|
||
height: 48px !important;
|
||
padding: 0 12px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 400 !important;
|
||
vertical-align: middle !important;
|
||
line-height: 1.4 !important;
|
||
border-bottom: 1px solid #edf2f7;
|
||
color: #1d2939;
|
||
background: #fff;
|
||
}
|
||
|
||
.data-table tr:hover td {
|
||
background: #f8fbff;
|
||
}
|
||
|
||
/*
|
||
* 所有后台列表：首列、尾列横向滚动时固定。
|
||
* 用 :first-child / :last-child，各页无需再单独加 class。
|
||
*/
|
||
.table-wrap .data-table th:first-child,
|
||
.table-wrap .data-table td:first-child {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 3;
|
||
background: #fff;
|
||
box-shadow: 6px 0 10px -8px rgba(15, 23, 42, 0.28);
|
||
}
|
||
|
||
.table-wrap .data-table thead th:first-child {
|
||
z-index: 5;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.table-wrap .data-table th:last-child,
|
||
.table-wrap .data-table td:last-child {
|
||
position: sticky;
|
||
right: 0;
|
||
z-index: 3;
|
||
background: #fff;
|
||
box-shadow: -6px 0 10px -8px rgba(15, 23, 42, 0.28);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.table-wrap .data-table thead th:last-child {
|
||
z-index: 5;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.table-wrap .data-table tbody tr:hover td:first-child,
|
||
.table-wrap .data-table tbody tr:hover td:last-child {
|
||
background: #f8fbff;
|
||
}
|
||
|
||
.data-table td.align-top,
|
||
.ticket-list-table td.align-top {
|
||
vertical-align: top !important;
|
||
}
|
||
|
||
.ticket-list-table th {
|
||
height: auto !important;
|
||
min-height: 48px !important;
|
||
padding: 12px !important;
|
||
white-space: normal !important;
|
||
line-height: 1.35 !important;
|
||
}
|
||
|
||
.ticket-list-table td,
|
||
.ticket-list-table td.align-top {
|
||
height: auto !important;
|
||
min-height: 84px !important;
|
||
padding: 18px 12px !important;
|
||
line-height: 1.6 !important;
|
||
font-size: 12px !important;
|
||
word-break: break-word;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.ticket-list-table td.col-sticky-left,
|
||
.ticket-list-table td.col-sticky-right,
|
||
.ticket-list-table th.col-sticky-left,
|
||
.ticket-list-table th.col-sticky-right,
|
||
.ticket-list-table td.col-quote,
|
||
.ticket-list-table td.col-price,
|
||
.ticket-list-table td.col-demand {
|
||
word-break: normal;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.ticket-list-table .quote-source,
|
||
.ticket-list-table .quote-price,
|
||
.ticket-list-table .quote-fee-line,
|
||
.ticket-list-table .ticket-price-cell {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ticket-list-table .attach-tags {
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.ticket-list-table .attach-tags .tag {
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.ticket-list-table .quote-source {
|
||
font-size: 9.5px !important;
|
||
}
|
||
|
||
.ticket-list-table .quote-price {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.ticket-list-table .ticket-row-actions {
|
||
display: inline-flex !important;
|
||
flex-direction: row !important;
|
||
flex-wrap: nowrap !important;
|
||
gap: 8px !important;
|
||
align-items: center !important;
|
||
min-width: max-content;
|
||
}
|
||
|
||
.ticket-list-table .ticket-row-actions .link-action {
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
white-space: nowrap !important;
|
||
flex-shrink: 0 !important;
|
||
position: static !important;
|
||
display: inline-block !important;
|
||
line-height: 1.35 !important;
|
||
}
|
||
|
||
.ticket-list-table th.col-center,
|
||
.ticket-list-table td.col-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.ticket-list-table th.col-actions,
|
||
.ticket-list-table td.col-actions {
|
||
white-space: nowrap;
|
||
text-align: left;
|
||
padding-left: 8px !important;
|
||
padding-right: 12px !important;
|
||
}
|
||
|
||
.ticket-page {
|
||
overflow-x: hidden;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ticket-page .section-card {
|
||
padding: 24px !important;
|
||
gap: 20px !important;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ticket-page .toolbar {
|
||
padding: 18px 20px !important;
|
||
gap: 12px 16px !important;
|
||
}
|
||
|
||
/* 中间列横滑；左右 sticky 列固定。竖滚改由 .is-list-page 表格区承接，勿再用 visible 把滚动甩给整页 */
|
||
.ticket-page .table-wrap,
|
||
.ticket-table-scroll {
|
||
border-radius: 10px !important;
|
||
overflow-x: auto !important;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.ticket-list-table {
|
||
table-layout: fixed !important;
|
||
width: max-content !important;
|
||
min-width: 1640px !important;
|
||
max-width: none !important;
|
||
border-collapse: separate !important;
|
||
border-spacing: 0 !important;
|
||
}
|
||
|
||
.ticket-list-table .col-w-id { width: 132px; }
|
||
.ticket-list-table .col-w-user { width: 72px; }
|
||
.ticket-list-table .col-w-demand { width: 220px; }
|
||
.ticket-list-table .col-w-quote { width: 250px; }
|
||
.ticket-list-table .col-w-attach { width: 160px; }
|
||
.ticket-list-table .col-w-status { width: 84px; }
|
||
.ticket-list-table .col-w-price { width: 168px; }
|
||
.ticket-list-table .col-w-margin { width: 132px; }
|
||
.ticket-list-table .col-w-ex { width: 110px; }
|
||
.ticket-list-table .col-w-reason { width: 140px; }
|
||
.ticket-list-table .col-w-time { width: 132px; }
|
||
.ticket-list-table .col-w-actions { width: 196px; }
|
||
|
||
.ticket-list-table th.col-sticky-left,
|
||
.ticket-list-table td.col-sticky-left {
|
||
position: sticky !important;
|
||
left: 0;
|
||
z-index: 3;
|
||
background: #fff !important;
|
||
box-shadow: 6px 0 10px -8px rgba(15, 23, 42, 0.28);
|
||
min-width: 132px;
|
||
width: 132px;
|
||
}
|
||
|
||
.ticket-list-table thead th.col-sticky-left {
|
||
z-index: 5;
|
||
background: #f8fafc !important;
|
||
}
|
||
|
||
.ticket-list-table th.col-sticky-right,
|
||
.ticket-list-table td.col-sticky-right {
|
||
position: sticky !important;
|
||
right: 0;
|
||
z-index: 3;
|
||
background: #fff !important;
|
||
box-shadow: -6px 0 10px -8px rgba(15, 23, 42, 0.28);
|
||
min-width: 196px;
|
||
width: 196px;
|
||
}
|
||
|
||
.ticket-list-table thead th.col-sticky-right {
|
||
z-index: 5;
|
||
background: #f8fafc !important;
|
||
}
|
||
|
||
.ticket-list-table tbody tr:hover td.col-sticky-left,
|
||
.ticket-list-table tbody tr:hover td.col-sticky-right {
|
||
background: #f8fbff !important;
|
||
}
|
||
|
||
.ticket-page .section-card-title {
|
||
font-size: 14px !important;
|
||
font-weight: 900 !important;
|
||
}
|
||
|
||
.ticket-price-cell,
|
||
.ticket-margin-cell {
|
||
font-size: 11px !important;
|
||
font-weight: 400 !important;
|
||
color: #0f172a !important;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ticket-price-lines {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
white-space: normal;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.ticket-price-line.is-total {
|
||
font-weight: 800;
|
||
}
|
||
|
||
.ticket-status {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
min-height: 24px !important;
|
||
padding: 0 8px !important;
|
||
border-radius: 6px !important;
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
background: #eef4ff !important;
|
||
color: #1849a9 !important;
|
||
}
|
||
|
||
.ticket-no {
|
||
display: inline-block;
|
||
line-height: 1.35;
|
||
font-weight: 800;
|
||
color: #1d4ed8;
|
||
background: none;
|
||
border: 0;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.ticket-no:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.link-action {
|
||
font-size: 12px !important;
|
||
font-weight: 800 !important;
|
||
color: #1d4ed8;
|
||
background: none;
|
||
border: 0;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.link-action.link-danger {
|
||
color: #e11d48 !important;
|
||
}
|
||
|
||
.link-action.link-muted {
|
||
color: #64748b !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.quote-source {
|
||
font-size: 10px !important;
|
||
font-weight: 700 !important;
|
||
color: #667085;
|
||
}
|
||
|
||
.quote-price {
|
||
font-size: 12px !important;
|
||
font-weight: 800 !important;
|
||
}
|
||
|
||
.attach-tags {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
flex-direction: row !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
.attach-tags .tag {
|
||
min-height: 24px !important;
|
||
padding: 4px 8px !important;
|
||
white-space: normal !important;
|
||
word-break: break-all !important;
|
||
line-height: 1.35 !important;
|
||
}
|
||
|
||
/* ---- Tag / Switch / Avatar / Tabs ---- */
|
||
.tag {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
gap: 4px !important;
|
||
min-height: 22px !important;
|
||
padding: 0 8px !important;
|
||
border-radius: 6px !important;
|
||
font-size: 9.5px !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.switch {
|
||
width: 36px !important;
|
||
height: 20px !important;
|
||
border: 0;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.switch::after {
|
||
width: 16px !important;
|
||
height: 16px !important;
|
||
top: 2px !important;
|
||
left: 2px !important;
|
||
}
|
||
|
||
.switch.is-on::after {
|
||
transform: translateX(16px) !important;
|
||
}
|
||
|
||
.avatar-chip {
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.avatar-chip .av {
|
||
width: 30px !important;
|
||
height: 30px !important;
|
||
border-radius: 50% !important;
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.tabs-line {
|
||
margin-bottom: 0 !important;
|
||
width: auto !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.tabs-line-bar {
|
||
margin-bottom: 12px !important;
|
||
}
|
||
|
||
.tabs-line button {
|
||
font-size: 11.5px !important;
|
||
font-weight: 800 !important;
|
||
padding: 10px 14px !important;
|
||
}
|
||
|
||
.tab-count {
|
||
margin-left: 6px !important;
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
border-radius: 999px !important;
|
||
padding: 0 6px !important;
|
||
min-width: 18px !important;
|
||
height: 18px !important;
|
||
font-size: 9px !important;
|
||
font-weight: 800 !important;
|
||
}
|
||
|
||
.tab-count.is-rose {
|
||
background: #ffe4e6 !important;
|
||
color: #be123c !important;
|
||
}
|
||
.tab-count.is-violet {
|
||
background: #f4f3ff !important;
|
||
color: #5925dc !important;
|
||
}
|
||
.tab-count.is-teal {
|
||
background: #ccfbf1 !important;
|
||
color: #0e7490 !important;
|
||
}
|
||
.tab-count.is-amber {
|
||
background: #fef0c7 !important;
|
||
color: #93370d !important;
|
||
}
|
||
.tab-count.is-blue {
|
||
background: #dbeafe !important;
|
||
color: #1d4ed8 !important;
|
||
}
|
||
|
||
/* ---- 分页 ---- */
|
||
.pagination {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: space-between !important;
|
||
gap: 12px !important;
|
||
padding: 12px 16px !important;
|
||
border-top: 1px solid #edf2f7 !important;
|
||
background: #ffffff !important;
|
||
font-size: 11px !important;
|
||
color: #475467 !important;
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
.pagination button {
|
||
height: 32px !important;
|
||
min-width: 32px !important;
|
||
border-radius: 6px !important;
|
||
font-size: 10.5px !important;
|
||
font-weight: 700 !important;
|
||
border: 1px solid #e4e7ec !important;
|
||
background: #ffffff !important;
|
||
color: #344054 !important;
|
||
cursor: pointer !important;
|
||
padding: 0 8px !important;
|
||
}
|
||
|
||
.pagination .pages button.is-active {
|
||
border-color: #155eef !important;
|
||
background: #eff4ff !important;
|
||
color: #155eef !important;
|
||
}
|
||
|
||
.pagination.admin-pagination {
|
||
justify-content: flex-end !important;
|
||
}
|
||
|
||
.pagination .pages {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.pagination b {
|
||
color: #0f172a;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* ---- section / 权限树 ---- */
|
||
.section-card {
|
||
padding: 18px 20px !important;
|
||
gap: 14px !important;
|
||
border-radius: 12px !important;
|
||
}
|
||
|
||
.section-card-title {
|
||
font-size: 13px !important;
|
||
font-weight: 800 !important;
|
||
letter-spacing: 0 !important;
|
||
}
|
||
|
||
.role-perm-summary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.perm-tree-box {
|
||
border-radius: 8px !important;
|
||
padding: 8px 0 !important;
|
||
background: #ffffff !important;
|
||
max-height: 320px !important;
|
||
}
|
||
|
||
/* 统一弹窗内权限树：只滚弹窗外层，避免双滚动条 */
|
||
.admin-modal-body .perm-tree-box {
|
||
max-height: none !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.admin-modal-overlay {
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
.admin-modal-dialog {
|
||
max-height: min(640px, calc(100vh - 32px)) !important;
|
||
}
|
||
|
||
.admin-modal-dialog.is-xxl {
|
||
max-height: min(88vh, calc(100vh - 32px)) !important;
|
||
}
|
||
|
||
.admin-modal-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.admin-modal-sub,
|
||
.admin-modal-label {
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.admin-modal-body {
|
||
padding: 12px 16px !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.admin-modal-body:has(.ticket-detail) {
|
||
display: block;
|
||
padding: 0 !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.admin-modal-footer {
|
||
padding: 10px 16px !important;
|
||
}
|
||
|
||
.perm-tree-box .ant-tree {
|
||
font-size: 11.5px !important;
|
||
font-weight: 700 !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.perm-tree-box .ant-tree .ant-tree-treenode {
|
||
min-height: 32px !important;
|
||
padding: 2px 12px !important;
|
||
}
|
||
|
||
/* ---- 看板：压紧密度；Ant h2 默认有 0.5em 底边距会把整块撑高 ---- */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.ref-header--compact {
|
||
padding: 14px 20px !important;
|
||
}
|
||
|
||
.ref-header--compact .ref-title {
|
||
margin: 0 !important;
|
||
font-size: 14px !important;
|
||
font-weight: 900 !important;
|
||
line-height: 1.2 !important;
|
||
}
|
||
|
||
.ref-metrics-grid {
|
||
gap: 8px !important;
|
||
padding: 12px 16px 16px !important;
|
||
}
|
||
|
||
.ref-metric-card {
|
||
padding: 10px 8px !important;
|
||
min-height: 68px !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
.ref-metric-card__label {
|
||
font-size: 10px !important;
|
||
line-height: 1.3 !important;
|
||
}
|
||
|
||
.ref-metric-card__value {
|
||
font-size: 22px !important;
|
||
}
|
||
|
||
.ref-metric-card__value.is-time {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.ref-charts-section {
|
||
gap: 12px !important;
|
||
padding: 12px 16px 16px !important;
|
||
}
|
||
|
||
.ref-chart-panel__head {
|
||
padding: 10px 14px !important;
|
||
}
|
||
|
||
.ref-chart-panel__body {
|
||
padding: 10px 12px 12px !important;
|
||
}
|
||
|
||
.ref-chart {
|
||
height: auto !important;
|
||
max-height: 240px !important;
|
||
aspect-ratio: 760 / 240;
|
||
}
|
||
|
||
.dash-chart-title,
|
||
.ref-section-title.dash-chart-title {
|
||
font-size: 11px !important;
|
||
font-weight: 900 !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
/* 图表悬停气泡：压到比原型 CSS 更紧，避免长文案撑大 */
|
||
.ref-chart-tooltip {
|
||
min-width: 0 !important;
|
||
max-width: 168px !important;
|
||
padding: 4px 7px !important;
|
||
border-radius: 6px !important;
|
||
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16) !important;
|
||
}
|
||
|
||
.ref-chart-tooltip .date {
|
||
font-size: 9px !important;
|
||
font-weight: 800 !important;
|
||
line-height: 1.2 !important;
|
||
}
|
||
|
||
.ref-chart-tooltip .value {
|
||
margin-top: 1px !important;
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
line-height: 1.3 !important;
|
||
}
|
||
|
||
.ref-chart-tooltip .value-line {
|
||
display: block;
|
||
font-size: 9px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.3 !important;
|
||
}
|
||
|
||
.dash-picker-dropdown {
|
||
width: min(360px, calc(100% - 24px)) !important;
|
||
}
|
||
|
||
.ref-ranking-export-btn {
|
||
height: 32px !important;
|
||
min-height: 32px !important;
|
||
padding: 0 12px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.admin-content:has(.ref-surface--metrics) {
|
||
padding: 14px 14px 36px !important;
|
||
gap: 10px !important;
|
||
/* 分析看板：内容区不裁切，滚动交给 .main-stage */
|
||
overflow: visible !important;
|
||
max-height: none !important;
|
||
align-content: start !important;
|
||
}
|
||
|
||
/* 看板缩窄时允许卡片/图表收缩，避免右侧被裁且无横滚 */
|
||
.admin-content .ref-surface,
|
||
.admin-content .ref-charts-section,
|
||
.admin-content .ref-metrics-grid,
|
||
.admin-content .ref-chart-panel {
|
||
min-width: 0 !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* ---- 话术 ---- */
|
||
.reply-category {
|
||
border: 1px solid #d9e2ef !important;
|
||
border-radius: 12px !important;
|
||
background: #fff !important;
|
||
padding: 16px !important;
|
||
display: grid !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.reply-category h2 {
|
||
margin: 0 !important;
|
||
font-size: 14px !important;
|
||
font-weight: 900 !important;
|
||
}
|
||
|
||
.reply-category-desc {
|
||
font-size: 10px !important;
|
||
color: #667085 !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.5 !important;
|
||
}
|
||
|
||
.reply-item {
|
||
border: 1px solid #e2e8f0 !important;
|
||
border-radius: 10px !important;
|
||
padding: 12px !important;
|
||
background: #f8fafc !important;
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.reply-text {
|
||
margin-top: 4px !important;
|
||
font-size: 12px !important;
|
||
font-weight: 400 !important;
|
||
line-height: 1.6 !important;
|
||
color: #172033 !important;
|
||
}
|
||
|
||
.reply-meta {
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
color: #667085 !important;
|
||
}
|
||
|
||
.btn.btn-ghost.btn-icon-sm {
|
||
min-height: 32px !important;
|
||
height: 32px !important;
|
||
width: 32px !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* ---- Ant 模态内控件（全局压到原型密度；禁止 38/40 撑爆视口） ---- */
|
||
.ant-modal {
|
||
max-width: calc(100vw - 32px) !important;
|
||
}
|
||
|
||
.ant-modal .ant-modal-content {
|
||
max-height: calc(100vh - 32px) !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.ant-modal .ant-modal-body {
|
||
overflow-y: auto !important;
|
||
max-height: none !important;
|
||
flex: 1 1 auto !important;
|
||
padding: 14px 18px !important;
|
||
}
|
||
|
||
.ant-modal .ant-modal-header {
|
||
padding: 12px 18px !important;
|
||
}
|
||
|
||
.ant-modal .ant-modal-footer {
|
||
padding: 10px 18px !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.ant-modal .ant-modal-title {
|
||
font-size: 13px !important;
|
||
font-weight: 800 !important;
|
||
}
|
||
|
||
.ant-modal .ant-form-item {
|
||
margin-bottom: 10px !important;
|
||
}
|
||
|
||
.ant-modal .ant-form-item-label > label {
|
||
font-size: 10.5px !important;
|
||
font-weight: 800 !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.ant-modal .ant-input,
|
||
.ant-modal .ant-input-affix-wrapper,
|
||
.ant-modal .ant-select-selector,
|
||
.ant-modal .ant-input-password {
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.ant-modal .ant-btn {
|
||
height: 32px !important;
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.login-card .ant-btn-lg {
|
||
height: 40px !important;
|
||
}
|
||
|
||
.admin-content .ant-space {
|
||
gap: 12px !important;
|
||
}
|
||
|
||
/* ---- 全局再压一档：与原型截图一比一（相对 HTML 原型约 −2px） ---- */
|
||
html {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.btn,
|
||
.admin-topbar-actions .btn,
|
||
.page-topbar-actions-slot .btn {
|
||
min-height: 32px !important;
|
||
height: 32px !important;
|
||
padding: 0 10px !important;
|
||
font-size: 10.5px !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
.link-action {
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 9.5px !important;
|
||
padding: 1px 7px !important;
|
||
min-height: 18px !important;
|
||
line-height: 16px !important;
|
||
}
|
||
|
||
.pagination {
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.pagination .pages button {
|
||
min-width: 28px !important;
|
||
height: 28px !important;
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
/* 报价模板弹窗 / 原生 modal */
|
||
.qt-modal-head {
|
||
padding: 14px 18px !important;
|
||
}
|
||
|
||
.qt-modal-title {
|
||
font-size: 13px !important;
|
||
font-weight: 800 !important;
|
||
}
|
||
|
||
.qt-modal-sub {
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.qt-modal-icon {
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
border-radius: 7px !important;
|
||
}
|
||
|
||
.qt-create-modal-body,
|
||
.qt-preview-modal-body {
|
||
padding: 14px 18px !important;
|
||
gap: 12px !important;
|
||
min-height: 0 !important;
|
||
overflow-y: auto !important;
|
||
flex: 1 1 auto !important;
|
||
}
|
||
|
||
.modal-dialog {
|
||
border-radius: 12px !important;
|
||
max-height: min(760px, calc(100vh - 32px)) !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
min-height: 0 !important;
|
||
}
|
||
|
||
.qt-create-modal-footer,
|
||
.qt-preview-modal-footer {
|
||
padding: 10px 18px !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.qt-create-row {
|
||
grid-template-columns: 72px minmax(0, 1fr) !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.qt-create-row label {
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.qt-create-row .field,
|
||
.qt-create-form .field {
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
font-size: 11px !important;
|
||
border-radius: 7px !important;
|
||
}
|
||
|
||
.qt-parse-banner-title {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.qt-parse-banner-desc,
|
||
.qt-upload-hint,
|
||
.qt-file-sub,
|
||
.qt-preview-foot-hint,
|
||
.qt-paper-note {
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
/**
|
||
* 报价模板预览截图：强制等比例（宽高同比例缩放），覆盖任何全局 img 拉满规则。
|
||
* 为何写在 fidelity：Teleport 弹窗挂 body，需非 scoped + !important 兜底。
|
||
*/
|
||
.qt-snapshot-wrap {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: flex-start !important;
|
||
max-height: min(72vh, 760px) !important;
|
||
min-height: 0 !important;
|
||
overflow: auto !important;
|
||
box-sizing: border-box !important;
|
||
padding: 6px !important;
|
||
}
|
||
|
||
.qt-snapshot-img,
|
||
.modal-overlay .qt-snapshot-img,
|
||
.qt-preview-dialog .qt-snapshot-img {
|
||
display: block !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
max-width: 100% !important;
|
||
max-height: min(70vh, 720px) !important;
|
||
object-fit: contain !important;
|
||
object-position: top center !important;
|
||
flex: 0 0 auto !important;
|
||
align-self: flex-start !important;
|
||
}
|
||
|
||
.qt-lightbox-img {
|
||
width: auto !important;
|
||
height: auto !important;
|
||
max-width: calc(100vw - 48px) !important;
|
||
max-height: calc(100vh - 72px) !important;
|
||
object-fit: contain !important;
|
||
}
|
||
|
||
.qt-upload-title,
|
||
.qt-file-name {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.qt-upload-drop {
|
||
min-height: 112px !important;
|
||
padding: 14px 12px !important;
|
||
}
|
||
|
||
.qt-paper-title {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.qt-paper-amt {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.qt-paper-fee,
|
||
.qt-paper-value,
|
||
.qt-paper-cap,
|
||
.qt-paper-meta {
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.qt-template-page .qt-col-muted,
|
||
.qt-template-page .qt-col-file,
|
||
.qt-template-page .qt-col-count,
|
||
.qt-template-page .qt-col-time,
|
||
.qt-template-page .qt-col-name {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.ant-modal .ant-input,
|
||
.ant-modal .ant-input-affix-wrapper,
|
||
.ant-modal .ant-select-selector {
|
||
min-height: 34px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.ant-modal .ant-btn {
|
||
height: 34px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.ant-modal-title {
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.account-modal-dialog {
|
||
max-width: 480px !important;
|
||
}
|
||
|
||
.account-modal-body {
|
||
gap: 10px !important;
|
||
padding: 14px 18px !important;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 88px minmax(0, 1fr) !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.form-row .lbl {
|
||
font-size: 10.5px !important;
|
||
}
|
||
|
||
.field {
|
||
min-height: 34px !important;
|
||
height: 34px !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
/**
|
||
* 弹窗多行正文：必须压过上面 .field 的 height:34px。
|
||
* AdminModal 会 Teleport 到 body，页面 scoped 样式经常盖不住这条全局规则。
|
||
*/
|
||
textarea.field.field-tall {
|
||
height: 240px !important;
|
||
min-height: 240px !important;
|
||
padding: 8px 10px !important;
|
||
line-height: 1.5 !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
.form-row.form-row-tall {
|
||
align-items: start !important;
|
||
}
|
||
|
||
/**
|
||
* 列表页固定搜索区 / 表头 / 底部分页，表格区内双轴滚动。
|
||
* 根节点加 .is-list-page（工单、员工、账号、角色、报价模板）。
|
||
* 这样横向滚动条始终贴在表格可视区底部，不必滚到文档末尾才看到。
|
||
*/
|
||
.admin-content:has(> .is-list-page) {
|
||
overflow: hidden !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
padding-bottom: 16px !important;
|
||
}
|
||
|
||
.admin-content > .is-list-page {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/* 工单页：外壳 is-list-page，内层 section-card 撑满 */
|
||
.admin-content > .is-list-page > .section-card {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
overflow: hidden !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
/* 账号/员工/角色/模板：section-card 自身即 is-list-page */
|
||
.admin-content > .section-card.is-list-page {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.is-list-page .section-card-header,
|
||
.is-list-page .tabs-line-bar,
|
||
.is-list-page .toolbar,
|
||
.is-list-page .pagination {
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.is-list-page .table-wrap,
|
||
.is-list-page .qt-template-table-wrap {
|
||
flex: 1 1 auto !important;
|
||
min-height: 0 !important;
|
||
overflow: auto !important;
|
||
overflow-x: auto !important;
|
||
overflow-y: auto !important;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* 竖向滚动时表头钉在表格区顶部 */
|
||
.is-list-page .data-table thead th {
|
||
position: sticky !important;
|
||
top: 0 !important;
|
||
z-index: 4 !important;
|
||
background: #f8fafc !important;
|
||
box-shadow: 0 1px 0 var(--line, #d9e2ef);
|
||
}
|
||
|
||
/* 左/右冻结列与表头交叉处抬高层级，避免横滑时被盖住 */
|
||
.is-list-page .data-table thead th:first-child,
|
||
.is-list-page .data-table thead th.col-sticky-left {
|
||
left: 0 !important;
|
||
z-index: 6 !important;
|
||
}
|
||
|
||
.is-list-page .data-table thead th:last-child,
|
||
.is-list-page .data-table thead th.col-sticky-right {
|
||
right: 0 !important;
|
||
z-index: 6 !important;
|
||
}
|
||
|
||
.is-list-page .data-table tbody td:first-child,
|
||
.is-list-page .data-table tbody td.col-sticky-left {
|
||
position: sticky !important;
|
||
left: 0 !important;
|
||
z-index: 3 !important;
|
||
background: #fff !important;
|
||
}
|
||
|
||
.is-list-page .data-table tbody td:last-child,
|
||
.is-list-page .data-table tbody td.col-sticky-right {
|
||
position: sticky !important;
|
||
right: 0 !important;
|
||
z-index: 3 !important;
|
||
background: #fff !important;
|
||
}
|
||
|
||
.is-list-page .data-table tbody tr:hover td:first-child,
|
||
.is-list-page .data-table tbody tr:hover td:last-child,
|
||
.is-list-page .data-table tbody tr:hover td.col-sticky-left,
|
||
.is-list-page .data-table tbody tr:hover td.col-sticky-right {
|
||
background: #f8fbff !important;
|
||
}
|
||
|
||
/*
|
||
* 分析看板比一屏高。整页被 html / 主区锁死时，内容区即使设了 overflow，
|
||
* 格子也会跟着内容长高，再被主区裁掉，滚轮没有可滚的对象。
|
||
* 看板单独放开文档滚动；列表页仍锁在一屏里，表格自己滚。
|
||
*/
|
||
html:has(.ref-surface--metrics),
|
||
body:has(.ref-surface--metrics) {
|
||
height: auto !important;
|
||
min-height: 100% !important;
|
||
overflow-x: hidden !important;
|
||
overflow-y: auto !important;
|
||
}
|
||
|
||
#app:has(.ref-surface--metrics),
|
||
.admin-shell:has(.ref-surface--metrics) {
|
||
height: auto !important;
|
||
min-height: 100vh !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.main-stage:has(.ref-surface--metrics) {
|
||
height: auto !important;
|
||
max-height: none !important;
|
||
min-height: 100vh !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.admin-content:has(.ref-surface--metrics) {
|
||
height: auto !important;
|
||
max-height: none !important;
|
||
flex: none !important;
|
||
overflow: visible !important;
|
||
}
|
||
|