imeeting/frontend/src/pages/organization/tenants/index.less

232 lines
3.9 KiB
Plaintext
Raw Normal View History

2026-06-30 05:37:33 +00:00
.tenants-page {
padding: 8px;
min-width: 0;
background: #f5f6fa;
}
.tenants-page > .page-container__body {
padding: 0;
overflow: hidden;
border: none;
border-radius: 0;
background: transparent;
}
.tenants-list-panel .data-list-panel__table-area {
overflow: hidden;
}
.tenants-list-panel .data-list-panel__table-area .app-page__table-wrap {
height: 100%;
min-height: 0;
}
.tenants-grid-wrap {
height: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 8px 4px 0;
}
.tenants-grid {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-content: start;
gap: 16px;
}
.tenants-grid-wrap > .app-page__empty-state {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tenant-card {
height: 100%;
min-height: 230px;
display: flex;
flex-direction: column;
border: 1px solid #e6e6e6 !important;
2026-07-01 14:00:19 +00:00
border-radius: 16px !important;
background: #fff !important;
box-shadow: 0 2px 8px rgba(24, 39, 75, 0.04) !important;
2026-06-30 05:37:33 +00:00
overflow: hidden;
2026-07-01 14:00:19 +00:00
transform: translateY(0);
will-change: transform, box-shadow;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.tenant-card:hover {
border-color: #8fb0fb !important;
background: #f9fafe !important;
box-shadow: 0 8px 20px rgba(60, 112, 245, 0.14) !important;
transform: translateY(-3px);
}
.tenant-card:active {
box-shadow: 0 4px 12px rgba(60, 112, 245, 0.12) !important;
transform: translateY(-1px);
2026-06-30 05:37:33 +00:00
}
.tenant-card .ant-card-body {
flex: 1;
2026-07-01 14:00:19 +00:00
min-height: 0;
2026-06-30 05:37:33 +00:00
display: flex;
flex-direction: column;
2026-07-01 14:00:19 +00:00
padding: 24px !important;
2026-06-30 05:37:33 +00:00
}
.tenant-card .ant-card-actions {
border-top-color: #f0f0f0;
2026-07-01 14:00:19 +00:00
background: rgba(255, 255, 255, 0.82);
}
.tenant-card:hover .ant-card-actions {
background: #f9fafe;
2026-06-30 05:37:33 +00:00
}
.tenant-card__header {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
}
.tenant-card__avatar {
margin-right: 12px;
2026-07-01 14:00:19 +00:00
border-radius: 10px;
2026-06-30 05:37:33 +00:00
}
.tenant-card__avatar--enabled {
color: #1677ff;
background-color: #e6f4ff;
}
.tenant-card__avatar--disabled {
color: #ff4d4f;
background-color: #fff1f0;
}
.tenant-card__header-main {
flex: 1;
min-width: 0;
}
.tenant-card__title-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.tenant-card__title {
min-width: 0;
margin: 0 !important;
font-size: 16px !important;
}
.tenant-card__status {
flex: 0 0 auto;
margin: 0;
2026-07-01 14:00:19 +00:00
border-radius: 10px;
2026-06-30 05:37:33 +00:00
}
.tenant-card__code {
font-size: 12px;
}
.tenant-card__content {
flex: 1;
min-height: 0;
font-size: 13px;
}
.tenant-card__meta-list {
width: 100%;
}
.tenant-card__meta {
min-width: 0;
display: flex;
align-items: center;
color: #595959;
}
.tenant-card__meta-icon {
flex: 0 0 auto;
margin-right: 8px;
color: #bfbfbf;
}
.tenant-card__divider {
margin: 12px 0;
}
.tenant-card__remark {
height: 36px;
margin: 0 !important;
color: #8c8c8c;
font-size: 12px;
}
.tenant-card__action--edit {
color: #1677ff;
}
.tenant-card__action--delete {
color: #ff4d4f;
}
2026-07-01 14:00:19 +00:00
.tenant-card__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 10px;
transition:
color 0.18s ease,
background 0.18s ease;
}
.tenant-card__action:hover {
background: rgba(60, 112, 245, 0.08);
}
2026-06-30 05:37:33 +00:00
.tenants-search-form {
justify-content: flex-end;
gap: 8px 0;
}
.tenants-search-form .ant-form-item {
margin-inline-end: 8px;
}
.tenants-search-form__name {
width: 200px;
}
.tenants-search-form__code {
width: 150px;
}
@media (max-width: 768px) {
.tenants-search-form,
.tenants-search-form .ant-form-item,
.tenants-search-form .ant-input-affix-wrapper,
.tenants-search-form .ant-input {
width: 100% !important;
}
}