372 lines
7.1 KiB
CSS
372 lines
7.1 KiB
CSS
.hotwords-page {
|
|
padding: 8px;
|
|
min-width: 0;
|
|
background: #f5f6fa;
|
|
}
|
|
|
|
.hotwords-page > .page-container__body {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.hotwords-layout {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hotwords-group-panel.ant-card {
|
|
width: 300px;
|
|
min-width: 240px;
|
|
max-width: 320px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid #e6e6e6 !important;
|
|
border-radius: 4px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.hotwords-group-panel .ant-card-head {
|
|
min-height: 44px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.hotwords-group-panel .ant-card-head-title {
|
|
color: #333;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hotwords-group-panel .ant-card-extra .ant-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hotwords-group-panel .ant-card-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hotwords-group-panel__filters {
|
|
flex-shrink: 0;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
background: #fff;
|
|
}
|
|
|
|
.hotwords-group-panel__filters .ant-input-search,
|
|
.hotwords-group-panel__filters .ant-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.hotwords-group-panel__filter-stack {
|
|
width: 100%;
|
|
}
|
|
|
|
.hotwords-group-panel__list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.hotwords-group-panel__list .ant-list {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.hotwords-group-item.ant-list-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
min-height: 68px;
|
|
padding: 10px 12px 10px 14px !important;
|
|
border-bottom: 1px solid #f0f0f0 !important;
|
|
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.hotwords-group-item.ant-list-item:hover {
|
|
background: #f9fafe;
|
|
}
|
|
|
|
.hotwords-group-item.is-selected {
|
|
background: #f3f6ff;
|
|
}
|
|
|
|
.hotwords-group-item.is-selected::before {
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 0;
|
|
width: 3px;
|
|
border-radius: 0 2px 2px 0;
|
|
background: #3c70f5;
|
|
content: "";
|
|
}
|
|
|
|
.hotwords-group-item.is-selected .hotwords-group-item__title {
|
|
color: #3c70f5;
|
|
}
|
|
|
|
.hotwords-group-item .ant-list-item-meta {
|
|
min-width: 0;
|
|
margin-block-end: 0;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.hotwords-group-item .ant-list-item-action {
|
|
margin-inline-start: 8px;
|
|
}
|
|
|
|
.hotwords-group-item .ant-list-item-action > li {
|
|
padding-inline: 0 4px;
|
|
}
|
|
|
|
.hotwords-group-item .ant-list-item-action .ant-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hotwords-group-item .ant-list-item-meta-title,
|
|
.hotwords-group-item .ant-list-item-meta-description {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hotwords-group-item__title {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
color: #333;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hotwords-group-item__desc {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.hotwords-group-item__desc .ant-tag {
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.hotwords-group-item__desc > span:last-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hotwords-group-panel .app-pagination-container {
|
|
flex-shrink: 0;
|
|
height: auto;
|
|
min-height: 48px;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
border-top: 1px solid #f0f0f0;
|
|
border-radius: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.hotwords-group-panel .app-pagination-total {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hotwords-group-panel .app-pagination-controls {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: max-content;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.hotwords-group-panel .app-pagination-container .ant-pagination {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: max-content;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.hotwords-group-panel .hotwords-group-pagination.ant-pagination-simple {
|
|
gap: 4px;
|
|
}
|
|
|
|
.hotwords-group-panel .hotwords-group-pagination.ant-pagination-simple .ant-pagination-prev,
|
|
.hotwords-group-panel .hotwords-group-pagination.ant-pagination-simple .ant-pagination-next {
|
|
min-width: 24px;
|
|
height: 24px;
|
|
line-height: 22px;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.hotwords-group-panel .hotwords-group-pagination.ant-pagination-simple .ant-pagination-simple-pager {
|
|
height: 24px;
|
|
margin-inline: 2px;
|
|
color: #333;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.hotwords-group-panel .hotwords-group-pagination.ant-pagination-simple .ant-pagination-simple-pager input {
|
|
width: 28px;
|
|
height: 24px;
|
|
padding: 0 4px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hotwords-list-panel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hotwords-list-panel .data-list-panel__left-actions {
|
|
color: #333;
|
|
}
|
|
|
|
.hotwords-list-panel .data-list-panel__table-area {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hotwords-pinyin-tag.ant-tag {
|
|
max-width: 132px;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hotwords-search__word {
|
|
width: 200px;
|
|
}
|
|
|
|
.hotwords-search__category {
|
|
width: 120px;
|
|
}
|
|
|
|
.hotwords-search__group {
|
|
width: 160px;
|
|
}
|
|
|
|
.hotwords-modal-form {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.hotwords-drawer-form.hotwords-modal-form {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.hotwords-drawer-form .ant-form-item-label > label {
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hotwords-drawer-form .ant-input,
|
|
.hotwords-drawer-form .ant-input-number,
|
|
.hotwords-drawer-form .ant-select-selector,
|
|
.hotwords-drawer-form .ant-input-affix-wrapper,
|
|
.hotwords-drawer-form textarea.ant-input {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hotwords-drawer-form textarea.ant-input {
|
|
resize: none;
|
|
}
|
|
|
|
.hotwords-weight-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.hotwords-table.ant-table-wrapper,
|
|
.hotwords-table .ant-spin-nested-loading,
|
|
.hotwords-table .ant-spin-container,
|
|
.hotwords-table .ant-table,
|
|
.hotwords-table .ant-table-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hotwords-table .ant-table-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.hotwords-table .ant-table-thead > tr > th {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hotwords-table .ant-table-tbody > tr > td {
|
|
height: 65px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hotwords-page > .page-container__body,
|
|
.hotwords-page .section-card,
|
|
.hotwords-page .section-card__content {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.hotwords-layout {
|
|
flex: none;
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
}
|
|
|
|
.hotwords-group-panel.ant-card {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: min(430px, calc(100vh - 170px));
|
|
min-height: 360px;
|
|
}
|
|
|
|
.hotwords-list-panel {
|
|
flex: none;
|
|
height: min(560px, calc(100vh - 150px));
|
|
min-height: 430px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hotwords-list-panel .data-list-panel__left-actions,
|
|
.hotwords-list-panel .data-list-panel__right-actions,
|
|
.hotwords-list-panel .data-list-panel__right-actions .ant-space,
|
|
.hotwords-list-panel .data-list-panel__right-actions .ant-input-affix-wrapper,
|
|
.hotwords-list-panel .data-list-panel__right-actions .ant-select {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.hotwords-group-panel.ant-card {
|
|
height: min(390px, calc(100vh - 155px));
|
|
min-height: 320px;
|
|
}
|
|
|
|
.hotwords-list-panel {
|
|
height: min(520px, calc(100vh - 135px));
|
|
min-height: 380px;
|
|
}
|
|
}
|