You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
9.5 KiB
Plaintext
357 lines
9.5 KiB
Plaintext
.pollutionDashboard {
|
|
width: 100%;
|
|
min-height: 75vh;
|
|
// background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
|
|
// 顶部统计区域
|
|
.statsSection {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
height: 20%;
|
|
|
|
// 统计卡片通用样式
|
|
.statsCard {
|
|
background: url('@/assets/business_envinformation/background7.svg'),
|
|
linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%),
|
|
linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
|
|
background-repeat: no-repeat;
|
|
border-radius: 2px;
|
|
padding: 10px 20px;
|
|
|
|
.cardTitle {
|
|
background: transparent;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
margin: 0 0 15px 0;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
// 卡片头部筛选器
|
|
.cardHeader {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 0;
|
|
|
|
.timeFilter,
|
|
.categoryFilter {
|
|
flex: 1;
|
|
min-width: 100px;
|
|
|
|
:global(.ant-select-selector) {
|
|
border-radius: 2px;
|
|
border: 1px solid #73E9C6;
|
|
background: #C0FFE9AB;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 图表容器
|
|
.chartsContainer {
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
|
|
.pieChartContainer {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
background: transparent;
|
|
|
|
.chartTitle {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
}
|
|
|
|
.chartValue {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
z-index: 10;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 条形图容器
|
|
.barChartContainer {
|
|
// height: 200px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
// 环境分类卡片区域
|
|
.environmentalCategories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
|
|
.categoryCard {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
padding: 15px;
|
|
|
|
.categoryContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.categoryInfo {
|
|
flex: 1;
|
|
|
|
.categoryTitle {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.categorySubtitle {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.categoryIcon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
.factoryIcon,
|
|
.waterIcon,
|
|
.soilIcon {
|
|
font-size: 20px;
|
|
filter: grayscale(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格卡片
|
|
.tableCard {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
padding: 20px;
|
|
|
|
.cardTitle {
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
padding: 12px 16px;
|
|
margin: -20px -20px 20px -20px;
|
|
border-radius: 12px 12px 0 0;
|
|
border-bottom: 2px solid #e8f4fd;
|
|
}
|
|
}
|
|
|
|
// 表格头部
|
|
.tableHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
|
|
.searchSection {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.searchInput {
|
|
width: 200px;
|
|
border-radius: 8px;
|
|
border: 1px solid #d9d9d9;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.aiButton,
|
|
.editButton,
|
|
.moreButton {
|
|
border-radius: 8px;
|
|
border: 1px solid #d9d9d9;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.actionButtons {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
|
|
.addButton {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.reportButton {
|
|
border-radius: 8px;
|
|
border: 1px solid #d9d9d9;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 自定义Tooltip样式
|
|
.customTooltip {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
color: white;
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
|
.tooltipLabel {
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: #fff;
|
|
}
|
|
|
|
.tooltipStatus {
|
|
color: #ff6b6b;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tooltipExceedance {
|
|
color: #ffd93d;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.tooltipType {
|
|
color: #a8e6cf;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 1200px) {
|
|
.statsSection {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
|
|
.environmentalCategories {
|
|
grid-column: 1 / -1;
|
|
flex-direction: row;
|
|
gap: 15px;
|
|
|
|
.categoryCard {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
padding: 10px;
|
|
|
|
.statsSection {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
|
|
.environmentalCategories {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.tableHeader {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.searchSection {
|
|
justify-content: center;
|
|
}
|
|
|
|
.actionButtons {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格样式优化
|
|
:global(.ant-table) {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
:global(.ant-table-thead > tr > th) {
|
|
background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-bottom: 2px solid #dee2e6;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
:global(.ant-table-tbody > tr) {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:global(.ant-table-tbody > tr > td) {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
}
|
|
|
|
// 分页器样式
|
|
:global(.ant-pagination) {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
|
|
:global(.ant-pagination-item) {
|
|
border-radius: 6px;
|
|
border: 1px solid #d9d9d9;
|
|
transition: all 0.3s ease;
|
|
|
|
&.ant-pagination-item-active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-color: #667eea;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
:global(.ant-pagination-prev),
|
|
:global(.ant-pagination-next) {
|
|
border-radius: 6px;
|
|
border: 1px solid #d9d9d9;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|