环保页面提交
wangyunfei
2 weeks ago
parent
ba305312c9
commit
891ec93628
@ -0,0 +1,10 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1956_4852)">
|
||||
<path d="M10 2C5.584 2 2 5.584 2 10C2 14.416 5.584 18 10 18C14.416 18 18 14.416 18 10C18 5.584 14.416 2 10 2ZM9.944 14.96C9.512 14.96 9.152 14.6 9.152 14.168L9.144 10.928L5.904 10.936C5.464 10.936 5.104 10.584 5.104 10.152V9.896C5.104 9.464 5.464 9.104 5.896 9.104L9.136 9.096L9.128 5.856C9.128 5.416 9.48 5.056 9.912 5.056H10.168C10.6 5.056 10.96 5.416 10.96 5.848L10.968 9.088L14.208 9.08C14.648 9.08 15.008 9.432 15.008 9.864V10.12C15.008 10.552 14.648 10.912 14.216 10.912L10.976 10.92L10.984 14.16C10.984 14.6 10.632 14.96 10.2 14.96H9.944Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1956_4852">
|
||||
<rect width="16" height="16" fill="white" transform="translate(2 2)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 838 B |
@ -1,166 +1,218 @@
|
||||
.atmospherePollutantLibrary {
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 20px;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.pageHeader {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 15px;
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 15px 15px 20px;
|
||||
border-radius: 2px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.headerLeft {
|
||||
.searchSection {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.backButton {
|
||||
color: #1890ff;
|
||||
font-size: 16px;
|
||||
padding: 8px 16px;
|
||||
height: auto;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
background: #f0f8ff;
|
||||
}
|
||||
}
|
||||
.leftButtons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.pageTitle {
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.addButton {
|
||||
background-color: #00D48A;
|
||||
color: #fff;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
p {
|
||||
margin: 8px 0 0 0;
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #00D48A;
|
||||
border-color: #00D48A;
|
||||
}
|
||||
}
|
||||
|
||||
.searchCard {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.searchInput {
|
||||
.ant-input-search-button {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
.importButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-color: #D7D7D7;
|
||||
color: #333;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filterSelect {
|
||||
width: 100%;
|
||||
}
|
||||
// .rightControls {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// gap: 12px;
|
||||
|
||||
// .filterLabel {
|
||||
// color: #333;
|
||||
// font-size: 14px;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
// .queryButton {
|
||||
// background-color: #52c41a;
|
||||
// border-color: #52c41a;
|
||||
// color: white;
|
||||
// height: 28px;
|
||||
// border-radius: 4px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
||||
// &:hover {
|
||||
// background-color: #73d13d;
|
||||
// border-color: #73d13d;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .selectInput {
|
||||
// :global {
|
||||
// .ant-select-selector {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// height: 28px !important;
|
||||
// }
|
||||
|
||||
// .ant-select-selection-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// line-height: 1;
|
||||
// }
|
||||
|
||||
// .ant-select-selection-placeholder {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// line-height: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.tableSection {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 25px 0;
|
||||
background-color: #fff;
|
||||
overflow: hidden; // 只设置垂直隐藏
|
||||
min-width: 0; // 确保可以收缩
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.addButton {
|
||||
background: #52c41a;
|
||||
border-color: #52c41a;
|
||||
font-weight: 500;
|
||||
.ant-spin-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: #73d13d;
|
||||
border-color: #73d13d;
|
||||
.ant-table-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableCard {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
.ant-table {
|
||||
font-size: 12px;
|
||||
|
||||
:global(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
.ant-table-thead>tr>th {
|
||||
background-color: #FAFAFA;
|
||||
font-weight: 400;
|
||||
color: #000000D9;
|
||||
border-right: none;
|
||||
text-align: center;
|
||||
white-space: nowrap; // 防止换行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.ant-table-tbody>tr>td {
|
||||
border-right: none;
|
||||
color: #000000D9;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap; // 防止换行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: #f5f5f5;
|
||||
.ant-table-tbody>tr:hover>td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-pagination) {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination-total-text {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
// 固定列样式
|
||||
.ant-table-thead>tr>th.ant-table-cell-fix-left,
|
||||
.ant-table-tbody>tr>td.ant-table-cell-fix-left {
|
||||
background-color: #FAFAFA;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
|
||||
.pageHeader {
|
||||
padding: 16px;
|
||||
|
||||
.headerLeft {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
.pageTitle h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.ant-table-thead>tr>th.ant-table-cell-fix-right,
|
||||
.ant-table-tbody>tr>td.ant-table-cell-fix-right {
|
||||
background-color: #FAFAFA;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.searchCard {
|
||||
:global(.ant-row) {
|
||||
.ant-col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
// 固定列阴影效果
|
||||
.ant-table-cell-fix-left {
|
||||
// box-shadow: 0px 0 4px 0px #00000040;
|
||||
}
|
||||
|
||||
.ant-table-cell-fix-right {
|
||||
// box-shadow: 0px 0 4px 0px #00000040;
|
||||
}
|
||||
|
||||
// 表格操作按钮样式
|
||||
:global(.ant-table-tbody) {
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
a {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片阴影效果
|
||||
.searchCard,
|
||||
.tableCard {
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
// 页码距离上边距
|
||||
.ant-pagination {
|
||||
text-align: right;
|
||||
margin-top: 70px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue