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.
590 lines
19 KiB
Plaintext
590 lines
19 KiB
Plaintext
.pollutionDashboard {
|
|
width: 100%;
|
|
min-height: 75vh;
|
|
// background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
|
|
// 顶部统计区域
|
|
.statsSection {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
height: 35vh;
|
|
align-items: stretch;
|
|
|
|
// 污染物排放统计卡片
|
|
.pollutantStatsCard {
|
|
width: 37%;
|
|
height: 100%;
|
|
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
// 超标排放统计卡片
|
|
.exceedanceStatsCard {
|
|
width: 40%;
|
|
height: 100%;
|
|
background: url('@/assets/business_envinformation/background8.svg'),
|
|
linear-gradient(180.21deg, rgba(255, 227, 227, 0.58) 0.18%, #FFFFFF 53.1%),
|
|
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.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;
|
|
}
|
|
|
|
.filterGroup {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.exceedanceTimeFilter,
|
|
.exceedanceCategoryFilter {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
|
|
:global(.ant-select-selector) {
|
|
border-radius: 2px;
|
|
border: 1px solid #FFC3C3;
|
|
background: #FFDEDEB2;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 卡片头部筛选器
|
|
.cardHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 0;
|
|
|
|
.cardTitle {
|
|
background: transparent;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.filterGroup {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.timeFilter,
|
|
.categoryFilter {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
|
|
: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;
|
|
flex: 1;
|
|
|
|
.pieChartContainer {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
background: transparent;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
|
|
.chartTitle {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
}
|
|
|
|
.chartCenterContent {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
background: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chartValue {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #FF2F2F;
|
|
background: transparent;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.chartLabel {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
background: transparent;
|
|
margin: 0;
|
|
margin-top: 2px;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 条形图容器
|
|
.barChartContainer {
|
|
flex: 1;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
// 环境分类卡片区域
|
|
.environmentalCategories {
|
|
flex: 1; // 撑满剩余宽度
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
// background-color: pink;
|
|
|
|
.categoryCard1 {
|
|
flex: 1;
|
|
background: linear-gradient(90deg, rgba(27, 201, 181, 0.2) 0%, rgba(58, 255, 216, 0) 100%);
|
|
position: relative;
|
|
padding: 5px 15px;
|
|
|
|
.airPollutionText {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 12px;
|
|
background: linear-gradient(183.17deg, rgba(0, 255, 217, 0.1) 2.62%, rgba(0, 153, 131, 0.1) 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.categoryCard2 {
|
|
flex: 1;
|
|
background: linear-gradient(90deg, rgba(36, 149, 255, 0.2) 0%, rgba(85, 164, 255, 0) 100%);
|
|
position: relative;
|
|
padding: 5px 15px;
|
|
|
|
.waterPollutionText {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 12px;
|
|
background: linear-gradient(183.17deg, rgba(0, 170, 255, 0.1) 2.62%, rgba(89, 186, 255, 0.1) 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.categoryCard3 {
|
|
flex: 1;
|
|
background: linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%);
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 5px 15px;
|
|
|
|
.soilPollutionText {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 12px;
|
|
background: linear-gradient(183.17deg, rgba(0, 89, 255, 0.1) 2.62%, rgba(89, 117, 255, 0.1) 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.categoryContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.categoryInfo {
|
|
flex: 1;
|
|
|
|
.titleContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.categoryTitle {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 0px;
|
|
|
|
&.atmosphereGradient {
|
|
background: linear-gradient(183.17deg, #0EE5C5 2.62%, #08C2C2 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&.atmosphereMirror {
|
|
background: linear-gradient(183.17deg, rgba(168, 255, 242, 0) 2.62%, rgba(86, 237, 214, 0) 65.7%, #00D9B9 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 0px;
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
&.waterGradient {
|
|
background: linear-gradient(183.17deg, #40AFFF 2.62%, #00B3FF 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&.waterMirror {
|
|
background: linear-gradient(183.17deg, rgba(64, 175, 255, 0) 2.62%, rgba(0, 179, 255, 0) 65.7%, #00B3FF 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 0px;
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
&.soilGradient {
|
|
background: linear-gradient(183.17deg, #6E90FF 2.62%, #3D90EF 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&.soilMirror {
|
|
background: linear-gradient(183.17deg, rgba(110, 144, 255, 0) 2.62%, rgba(61, 144, 239, 0) 65.7%, #3D90EF 132.53%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Alimama ShuHeiTi', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 22px;
|
|
letter-spacing: 0%;
|
|
margin-top: 0px;
|
|
transform: scaleY(-1);
|
|
}
|
|
}
|
|
|
|
.categorySubtitle {
|
|
font-size: 12px;
|
|
color: #666;
|
|
|
|
&.pollutantSubtitle {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-family: 'Alibaba PuHuiTi', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
letter-spacing: 4%;
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.categoryIcon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 5px;
|
|
// border-radius: 50%;
|
|
// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
.factoryIcon,
|
|
.waterIcon,
|
|
.soilIcon {
|
|
font-size: 20px;
|
|
filter: grayscale(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格卡片
|
|
.tableCard {
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
// 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: rgba(0, 0, 0, 1);
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 12px 16px;
|
|
margin: -20px -20px 10px -20px;
|
|
// border-radius: 12px 12px 0 0;
|
|
// border-bottom: 2px solid #e8f4fd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.titleButtons {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
|
|
.titleAddButton {
|
|
background: rgba(0, 212, 138, 1);
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
height: 32px;
|
|
padding: 4px 15px;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
}
|
|
}
|
|
|
|
.titleReportButton {
|
|
border-radius: 4px;
|
|
border: 1px solid #d9d9d9;
|
|
background: #fff;
|
|
color: #666;
|
|
transition: all 0.3s ease;
|
|
height: 32px;
|
|
padding: 4px 15px;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
border-color: #40a9ff;
|
|
color: #40a9ff;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 自定义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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 表格样式优化
|
|
:global(.ant-table) {
|
|
// border-radius: 8px;
|
|
overflow: hidden;
|
|
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
|
|
:global(.ant-table-thead > tr > th) {
|
|
// background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
|
|
// border-bottom: 2px solid #dee2e6;
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
: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;
|
|
// }
|
|
// }
|
|
} |