jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

污染源管理页面

Browse Source
main
wangyunfei 2 weeks ago
parent 93ec55d48d
commit 57c5589df8
2 changed files with 133 additions and 14 deletions
Show Stats Download Patch File Download Diff File

25
src/pages/business_envInformation/components/PollutionSourceManagement.js
Unescape Escape View File

@ -551,32 +551,45 @@ const PollutionSourceManagement = () => {
{/* 环境分类卡片 */}
<div className={styles.environmentalCategories}>
<div className={styles.categoryCard1}>
<div className={styles.airPollutionText}>AIR POLLUSION</div>
<div className={styles.categoryContent}>
<div className={styles.categoryInfo}>
<div className={`${styles.categoryTitle} ${styles.atmosphereGradient}`}>大气环境</div>
<div className={styles.titleContainer}>
<div className={`${styles.categoryTitle} ${styles.atmosphereGradient}`}>大气环境</div>
<div className={`${styles.categoryTitle} ${styles.atmosphereMirror}`}>大气环境</div>
</div>
<div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<img className={styles.categoryIcon} src={icon_factory} alt="icon_factory" />
</div>
</div>
<div className={styles.categoryCard2}>
<div className={styles.waterPollutionText}>WATER POLLUSION</div>
<div className={styles.categoryContent}>
<div className={styles.categoryInfo}>
<div className={`${styles.categoryTitle} ${styles.waterGradient}`}>水环境</div>
<div className={styles.titleContainer}>
<div className={`${styles.categoryTitle} ${styles.waterGradient}`}>水环境</div>
<div className={`${styles.categoryTitle} ${styles.waterMirror}`}>水环境</div>
</div>
<div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<img src={icon_water} alt="icon_water" className={styles.categoryIcon} />
</div>
</div>
<div className={styles.categoryCard3}>
<div className={styles.soilPollutionText}>SOILPOLLUSION</div>
<div className={styles.categoryContent}>
<div className={styles.categoryInfo}>
<div className={`${styles.categoryTitle} ${styles.soilGradient}`}>土壤及地下水</div>
<div className={styles.titleContainer}>
<div className={`${styles.categoryTitle} ${styles.soilGradient}`}>土壤及地下水</div>
<div className={`${styles.categoryTitle} ${styles.soilMirror}`}>土壤及地下水</div>
</div>
<div className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div>
<img className={styles.categoryIcon} src={icon_soil} alt="icon_soil" />
</div>
@ -613,7 +626,7 @@ const PollutionSourceManagement = () => {
onChange={handleTableChange}
rowKey="key"
size="small"
scroll={{ x: 1200 }}
// scroll={{ x: 1200 }}
rowSelection={{
selectedRowKeys,
onChange: setSelectedRowKeys,

122
src/pages/business_envInformation/components/PollutionSourceManagement.less
Unescape Escape View File

@ -199,23 +199,77 @@
.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;
padding: 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%);
padding: 15px;
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%);
// linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background: linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%);
position: relative;
cursor: pointer;
padding: 15px;
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 {
@ -226,11 +280,17 @@
.categoryInfo {
flex: 1;
.titleContainer {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.categoryTitle {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
margin-bottom: 0px;
&.atmosphereGradient {
background: linear-gradient(183.17deg, #0EE5C5 2.62%, #08C2C2 132.53%);
@ -242,6 +302,21 @@
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 {
@ -254,6 +329,21 @@
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 {
@ -266,6 +356,21 @@
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);
}
}
@ -280,6 +385,7 @@
font-size: 14px;
line-height: 22px;
letter-spacing: 4%;
margin-top: -20px;
}
}
}
@ -445,7 +551,7 @@
// background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
// border-bottom: 2px solid #dee2e6;
font-weight: 400;
}
:global(.ant-table-tbody > tr) {

Write Preview
Loading…
Cancel
Save