319 lines
6.3 KiB
CSS
319 lines
6.3 KiB
CSS
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
min-width: 320px;
|
||
background: #f5f5f7;
|
||
}
|
||
|
||
body {
|
||
min-width: 320px;
|
||
overflow-x: hidden;
|
||
background: #f5f5f7;
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
#root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
img,
|
||
svg,
|
||
canvas {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.app-shell,
|
||
.app-main,
|
||
.app-content {
|
||
min-width: 0;
|
||
}
|
||
|
||
.app-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* Shared responsive toolbar: add these classes to page filter/action rows. */
|
||
.responsive-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.responsive-toolbar__group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ant-drawer-content-wrapper {
|
||
max-width: 100vw !important;
|
||
}
|
||
|
||
.ant-pagination {
|
||
row-gap: 8px;
|
||
}
|
||
|
||
/* === 通用：表格容器横向滚动（防双重滚动条） === */
|
||
.ant-table-wrapper {
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
overscroll-behavior-inline: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* ── 表格单元格省略号截断（按需启用） ──
|
||
在 .ant-table-wrapper 上添加 .table-cell-ellipsis 类即可生效：
|
||
<Table className="table-cell-ellipsis" ... /> */
|
||
.table-cell-ellipsis .ant-table-thead > tr > th,
|
||
.table-cell-ellipsis .ant-table-tbody > tr > td {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 操作列按钮不换行 */
|
||
.ant-table-wrapper .ant-table-cell .ant-space {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* ── 宿舍总览卡片：Tag 溢出截断 ── */
|
||
.room-card-tag-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
.room-card-tag-wrapper .ant-tag {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.room-card-tag-wrapper .ant-tag .anticon {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* === 手机 (< 576px) === */
|
||
@media (max-width: 575px) {
|
||
.app-header {
|
||
height: 56px;
|
||
padding-inline: 8px !important;
|
||
line-height: 56px;
|
||
}
|
||
|
||
.app-header .ant-btn {
|
||
width: 40px;
|
||
min-height: 40px;
|
||
padding-inline: 0;
|
||
}
|
||
|
||
.app-content {
|
||
min-height: calc(100dvh - 72px);
|
||
margin: 8px !important;
|
||
padding: 12px !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
.app-navigation-drawer .ant-drawer-header {
|
||
padding-inline: 16px;
|
||
}
|
||
|
||
.responsive-toolbar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.responsive-toolbar__group,
|
||
.responsive-toolbar > .ant-space {
|
||
width: 100%;
|
||
}
|
||
|
||
.responsive-toolbar__group > .ant-space-item,
|
||
.responsive-toolbar > .ant-space > .ant-space-item {
|
||
flex: 1 1 140px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.responsive-toolbar .ant-input,
|
||
.responsive-toolbar .ant-input-affix-wrapper,
|
||
.responsive-toolbar .ant-input-search,
|
||
.responsive-toolbar .ant-picker,
|
||
.responsive-toolbar .ant-select,
|
||
.responsive-toolbar .ant-upload,
|
||
.responsive-toolbar .ant-upload-wrapper,
|
||
.responsive-toolbar .ant-btn {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.ant-btn:not(.ant-btn-sm),
|
||
.ant-input-affix-wrapper,
|
||
.ant-input-search-button,
|
||
.ant-picker,
|
||
.ant-select-single .ant-select-selector {
|
||
min-height: 40px;
|
||
}
|
||
|
||
.ant-table {
|
||
font-size: 13px;
|
||
}
|
||
.ant-table-cell {
|
||
padding: 8px 6px !important;
|
||
}
|
||
.ant-descriptions-item-label,
|
||
.ant-descriptions-item-content {
|
||
font-size: 13px;
|
||
}
|
||
.ant-modal {
|
||
top: 12px;
|
||
max-width: calc(100vw - 16px) !important;
|
||
margin: 0 auto !important;
|
||
padding-bottom: 12px;
|
||
}
|
||
.ant-modal .ant-modal-content {
|
||
padding: 16px;
|
||
}
|
||
.ant-modal .ant-modal-body {
|
||
max-height: calc(100dvh - 180px);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.ant-modal .ant-modal-footer {
|
||
display: flex;
|
||
}
|
||
.ant-modal .ant-modal-footer .ant-btn {
|
||
flex: 1;
|
||
min-height: 40px;
|
||
}
|
||
.ant-drawer .ant-drawer-header {
|
||
padding: 14px 16px;
|
||
}
|
||
.ant-drawer .ant-drawer-body {
|
||
padding: 16px;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.ant-popover,
|
||
.ant-picker-dropdown {
|
||
max-width: calc(100vw - 16px);
|
||
}
|
||
.ant-pagination {
|
||
justify-content: center;
|
||
}
|
||
.ant-pagination .ant-pagination-options {
|
||
margin-inline-start: 0;
|
||
}
|
||
.ant-alert {
|
||
padding: 10px 12px;
|
||
}
|
||
h1 {
|
||
font-size: 22px !important;
|
||
}
|
||
h2 {
|
||
font-size: 18px !important;
|
||
}
|
||
.ant-card {
|
||
margin-bottom: 8px;
|
||
}
|
||
.ant-card .ant-card-body {
|
||
padding: 14px;
|
||
}
|
||
}
|
||
|
||
/* === 平板 (576-991px) === */
|
||
@media (min-width: 576px) and (max-width: 991px) {
|
||
.ant-modal {
|
||
max-width: calc(100vw - 48px) !important;
|
||
}
|
||
}
|
||
|
||
.notifications-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.notifications-filter {
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.notifications-layout,
|
||
.notifications-content {
|
||
min-width: 0;
|
||
}
|
||
|
||
.notifications-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.notifications-content .ant-list-item {
|
||
align-items: flex-start;
|
||
padding: 14px 6px !important;
|
||
}
|
||
|
||
.notifications-content .ant-list-item-meta-avatar {
|
||
margin-inline-end: 10px;
|
||
}
|
||
|
||
.notifications-content .ant-list-item-meta-title {
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.ant-table-wrapper::before {
|
||
content: '表格可左右滑动查看';
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #8c8c8c;
|
||
font-size: 11px;
|
||
text-align: right;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content {
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-cell-fix-left,
|
||
.ant-table-wrapper .ant-table-cell-fix-right {
|
||
box-shadow: 2px 0 5px rgb(0 0 0 / 5%);
|
||
}
|
||
}
|
||
|
||
.responsive-toolbar--single {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
/* Input.Search is an internal compact group. Keep the text field flexible and
|
||
the search icon button fixed instead of applying toolbar full-width rules
|
||
to both children. */
|
||
.responsive-toolbar .ant-input-search > .ant-input-affix-wrapper {
|
||
flex: 1 1 auto;
|
||
width: auto !important;
|
||
min-width: 0;
|
||
}
|
||
|
||
.responsive-toolbar .ant-input-search > .ant-input-search-btn {
|
||
flex: 0 0 40px;
|
||
width: 40px !important;
|
||
min-width: 40px;
|
||
padding-inline: 0;
|
||
}
|
||
}
|