优化
This commit is contained in:
@@ -22,4 +22,12 @@ withDefaults(defineProps<{
|
||||
.admin-page.is-spacing-compact { gap: 12px; }
|
||||
.admin-page.is-spacing-normal { gap: 16px; }
|
||||
.admin-page.is-spacing-relaxed { gap: 20px; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.admin-page.is-spacing-normal { gap: 12px; }
|
||||
|
||||
.admin-page.is-width-comfortable {
|
||||
width: min(100%, 1920px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -369,5 +369,22 @@ function setPage(value: number) {
|
||||
.data-table__page-buttons { gap: 4px; }
|
||||
.data-table__page-button { width: 32px; min-width: 32px; height: 32px; padding: 0; margin-left: 0; }
|
||||
.data-table__page-ellipsis { display: inline-flex; width: 24px; height: 32px; align-items: center; justify-content: center; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.data-table__toolbar { min-height: 64px; gap: 12px; padding: 10px 14px; }
|
||||
.data-table__toolbar.is-compact { min-height: 50px; padding: 6px 12px; }
|
||||
.data-table__toolbar-actions,
|
||||
.data-table__business-actions,
|
||||
.data-table__utility-actions,
|
||||
.data-table__toolbar-end { gap: 6px; }
|
||||
.data-table__pagination { min-height: 52px; gap: 12px; padding: 10px 14px; }
|
||||
.data-table__pagination-left,
|
||||
.data-table__pagination-controls,
|
||||
.data-table__page-size,
|
||||
.data-table__page-buttons { gap: 6px; }
|
||||
.data-table__page-button { width: 30px; min-width: 30px; height: 30px; }
|
||||
.data-table__page-ellipsis { width: 22px; height: 30px; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) { .data-table__toolbar, .data-table__toolbar.is-compact { min-height: 0; align-items: stretch; flex-direction: column; padding: 14px; } .data-table__toolbar-actions { width: 100%; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; } .data-table__toolbar-actions.has-business-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .data-table__business-actions { justify-content: flex-start; } .data-table__utility-actions { align-items: flex-start; justify-content: flex-end; } .data-table__toolbar-end { justify-content: flex-start; } .data-table__toolbar-actions :deep(.el-button) { max-width: 100%; min-height: 40px; } .data-table__pagination { align-items: flex-start; flex-direction: column; } .data-table__pagination-left, .data-table__pagination-controls, .data-table__page-buttons { width: 100%; } .data-table__pagination-controls { justify-content: flex-start; } .data-table__page-buttons { flex-wrap: wrap; } .data-table__page-button { width: 44px; min-width: 44px; height: 44px; } .data-table__page-ellipsis { height: 44px; } }
|
||||
</style>
|
||||
|
||||
@@ -18,4 +18,8 @@ withDefaults(defineProps<{
|
||||
<style scoped>
|
||||
.detail-page-layout { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
|
||||
.detail-page-layout__header, .detail-page-layout__summary, .detail-page-layout__content, .detail-page-layout__footer { min-width: 0; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.detail-page-layout { gap: 12px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,4 +27,11 @@ withDefaults(defineProps<{
|
||||
.form-section__heading { margin-bottom: 16px; }
|
||||
.form-section__heading h2 { margin: 0; color: var(--cc-text, #172033); font-size: 14px; line-height: 1.4; }
|
||||
.form-section__heading p { margin: 4px 0 0; color: var(--cc-muted, #667085); font-size: 12px; line-height: 1.5; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.form-section { padding: 14px 0; }
|
||||
.form-section:first-child { padding-top: 0; }
|
||||
.form-section:last-child { padding-bottom: 0; }
|
||||
.form-section__heading { margin-bottom: 10px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,4 +37,8 @@ function hasRegion(name: RegionName) {
|
||||
.list-page-layout { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
|
||||
.list-page-layout__toolbar, .list-page-layout__metrics, .list-page-layout__state, .list-page-layout__content { min-width: 0; }
|
||||
.list-page-layout__toolbar:empty, .list-page-layout__metrics:empty, .list-page-layout__state:empty, .list-page-layout__content:empty { display: none; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.list-page-layout { gap: 12px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,6 +33,11 @@ withDefaults(defineProps<{
|
||||
.page-toolbar__description { margin: 5px 0 0; color: var(--cc-muted, #667085); font-size: 13px; line-height: 1.55; }
|
||||
.page-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
||||
.page-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.page-toolbar { gap: 12px; }
|
||||
.page-toolbar__actions { gap: 6px; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.page-toolbar { flex-direction: column; }
|
||||
.page-toolbar__actions { width: 100%; justify-content: flex-start; }
|
||||
|
||||
@@ -247,6 +247,13 @@ defineExpose({ search, reset })
|
||||
.query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
|
||||
.query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
|
||||
:global(.cc-layout-preference-popper) { max-width: calc(100vw - 24px); }
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.query-toolbar { padding: 12px; gap: 8px; }
|
||||
.query-toolbar__filters { gap: 8px 12px; }
|
||||
.query-toolbar__field, .query-toolbar__control { gap: 4px; }
|
||||
.query-toolbar__actions { gap: 6px; }
|
||||
}
|
||||
@media (min-width: 721px) { .query-toolbar__filters { display: contents; } .query-toolbar__tail { display: flex; align-items: flex-end; width: auto; flex: 0 0 auto; gap: 10px; } }
|
||||
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { width: 100%; } .query-toolbar__tail { display: contents; } .query-toolbar__control { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user