forked from lunanting/cangku
161 lines
4.9 KiB
CSS
161 lines
4.9 KiB
CSS
.ops-b-incentive-page {
|
|
container-name: ops-b-incentive;
|
|
container-type: inline-size;
|
|
display: flex;
|
|
min-height: calc(100% - 46px);
|
|
flex-direction: column;
|
|
gap: var(--sycm-page-section-gap);
|
|
background: var(--sycm-bg-page-soft);
|
|
}
|
|
|
|
.ops-b-header {
|
|
display: flex;
|
|
min-height: 84px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sycm-space-lg);
|
|
margin: calc(var(--sycm-page-padding-y) * -1) calc(var(--sycm-page-padding-x) * -1) 0;
|
|
padding: 14px calc(var(--sycm-page-padding-x) + 2px);
|
|
border-bottom: 1px solid var(--sycm-border-base);
|
|
background: var(--sycm-bg-container);
|
|
}
|
|
|
|
.ops-b-header__heading { min-width: 0; }
|
|
.ops-b-header h3 {
|
|
margin: 0;
|
|
color: var(--sycm-text-strong);
|
|
font-size: var(--sycm-font-size-page);
|
|
font-weight: var(--sycm-font-weight-semibold);
|
|
line-height: var(--sycm-line-height-tight);
|
|
}
|
|
.ops-b-header__heading .ant-typography {
|
|
display: block;
|
|
margin-top: 6px;
|
|
color: var(--sycm-text-secondary);
|
|
font-size: var(--sycm-font-size-caption);
|
|
}
|
|
|
|
.ops-b-tabs .ant-tabs-nav {
|
|
margin: 0;
|
|
padding: 0 calc(var(--sycm-page-padding-x) + 2px);
|
|
border-bottom: 1px solid var(--sycm-border-base);
|
|
background: var(--sycm-bg-container);
|
|
}
|
|
.ops-b-tabs .ant-tabs-tab {
|
|
margin: 0;
|
|
padding: 12px 4px;
|
|
font-size: var(--sycm-font-size-title);
|
|
}
|
|
.ops-b-tabs .ant-tabs-tab + .ant-tabs-tab { margin-left: 32px; }
|
|
.ops-b-tabs .ant-tabs-content-holder,
|
|
.ops-b-tabs .ant-tabs-content,
|
|
.ops-b-tabs .ant-tabs-tabpane { min-height: 100%; }
|
|
.ops-b-tabs .ant-tabs-tabpane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sycm-page-section-gap);
|
|
padding-top: var(--sycm-page-section-gap);
|
|
}
|
|
|
|
.ops-b-filter-card,
|
|
.ops-b-panel,
|
|
.ops-b-summary-card {
|
|
border: 1px solid var(--sycm-border-card) !important;
|
|
border-radius: var(--sycm-radius-lg) !important;
|
|
box-shadow: var(--sycm-shadow-card) !important;
|
|
}
|
|
.ops-b-filter-card { margin-bottom: 0; }
|
|
.ops-b-filter-card .ant-card-body { padding: 14px 16px; }
|
|
.ops-b-filter-card .ant-space { width: 100%; }
|
|
.ops-b-filter-card .ant-space-item { max-width: 100%; }
|
|
.ops-b-filter-card .ant-select,
|
|
.ops-b-filter-card .ant-picker,
|
|
.ops-b-filter-card .ant-input-affix-wrapper { max-width: 100%; }
|
|
|
|
.ops-b-summary-row { margin-top: -4px; }
|
|
.ops-b-summary-row .ant-col { display: flex; }
|
|
.ops-b-summary-card {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 98px;
|
|
overflow: hidden;
|
|
}
|
|
.ops-b-summary-card::before {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 3px;
|
|
background: var(--sycm-color-primary);
|
|
content: '';
|
|
}
|
|
.ops-b-summary-card.is-green::before { background: var(--sycm-color-success); }
|
|
.ops-b-summary-card.is-orange::before { background: var(--sycm-color-orange); }
|
|
.ops-b-summary-card.is-gold::before { background: var(--sycm-color-warning); }
|
|
.ops-b-summary-card .ant-card-body {
|
|
display: flex;
|
|
min-height: 98px;
|
|
align-items: center;
|
|
padding: 16px 18px;
|
|
}
|
|
.ops-b-summary-card .ant-statistic { width: 100%; }
|
|
.ops-b-summary-card .ant-statistic-title {
|
|
margin-bottom: 8px;
|
|
color: var(--sycm-text-secondary);
|
|
font-size: var(--sycm-font-size-caption);
|
|
}
|
|
.ops-b-summary-card .ant-statistic-content {
|
|
color: var(--sycm-text-strong);
|
|
font-family: var(--sycm-font-family-number);
|
|
font-size: var(--sycm-font-size-metric);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.ops-b-panel { margin-bottom: 0; overflow: hidden; }
|
|
.ops-b-panel .ant-card-head {
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
border-bottom-color: var(--sycm-border-light);
|
|
}
|
|
.ops-b-panel .ant-card-head-title { font-size: var(--sycm-font-size-title); }
|
|
.ops-b-panel .ant-card-body { padding: 0 16px 16px; }
|
|
.ops-b-panel .ant-table { font-size: var(--sycm-font-size-caption); }
|
|
.ops-b-panel .ant-table-wrapper .ant-table-container { border-radius: var(--sycm-radius-md); }
|
|
.ops-b-panel .ant-table-placeholder .ant-table-cell { height: 180px; }
|
|
.ops-b-id-link {
|
|
height: auto;
|
|
padding: 0;
|
|
font-family: var(--sycm-font-family-number);
|
|
font-weight: var(--sycm-font-weight-semibold);
|
|
}
|
|
.ops-b-daily-table { margin-top: var(--sycm-space-md); }
|
|
|
|
.ops-b-detail-drawer .ant-drawer-header {
|
|
padding: 16px 20px;
|
|
border-bottom-color: var(--sycm-border-light);
|
|
}
|
|
.ops-b-detail-drawer .ant-drawer-title {
|
|
color: var(--sycm-text-strong);
|
|
font-size: var(--sycm-font-size-title);
|
|
font-weight: var(--sycm-font-weight-semibold);
|
|
}
|
|
.ops-b-detail-drawer .ant-drawer-body { padding: 20px; }
|
|
.ops-b-detail-drawer .ant-descriptions { margin-bottom: var(--sycm-space-md); }
|
|
|
|
@container ops-b-incentive (max-width: 900px) {
|
|
.ops-b-filter-card .ant-space-item { flex: 1 1 180px; }
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.ops-b-header {
|
|
min-height: 72px;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: var(--sycm-space-sm);
|
|
padding-block: 12px;
|
|
}
|
|
.ops-b-filter-card .ant-select,
|
|
.ops-b-filter-card .ant-picker,
|
|
.ops-b-filter-card .ant-input-affix-wrapper { width: 100%; }
|
|
.ops-b-panel .ant-card-body { padding-inline: 10px; }
|
|
.ops-b-detail-drawer .ant-drawer-body { padding: 14px; }
|
|
}
|