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.environmentalCategories}>
<div className={styles.categoryCard1}> <div className={styles.categoryCard1}>
<div className={styles.airPollutionText}>AIR POLLUSION</div>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <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 className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div> </div>
<img className={styles.categoryIcon} src={icon_factory} alt="icon_factory" /> <img className={styles.categoryIcon} src={icon_factory} alt="icon_factory" />
</div> </div>
</div> </div>
<div className={styles.categoryCard2}> <div className={styles.categoryCard2}>
<div className={styles.waterPollutionText}>WATER POLLUSION</div>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <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 className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div> </div>
<img src={icon_water} alt="icon_water" className={styles.categoryIcon} /> <img src={icon_water} alt="icon_water" className={styles.categoryIcon} />
</div> </div>
</div> </div>
<div className={styles.categoryCard3}> <div className={styles.categoryCard3}>
<div className={styles.soilPollutionText}>SOILPOLLUSION</div>
<div className={styles.categoryContent}> <div className={styles.categoryContent}>
<div className={styles.categoryInfo}> <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 className={`${styles.categorySubtitle} ${styles.pollutantSubtitle}`}>特征污染物名录库</div>
</div> </div>
<img className={styles.categoryIcon} src={icon_soil} alt="icon_soil" /> <img className={styles.categoryIcon} src={icon_soil} alt="icon_soil" />
</div> </div>
@ -613,7 +626,7 @@ const PollutionSourceManagement = () => {
onChange={handleTableChange} onChange={handleTableChange}
rowKey="key" rowKey="key"
size="small" size="small"
scroll={{ x: 1200 }} // scroll={{ x: 1200 }}
rowSelection={{ rowSelection={{
selectedRowKeys, selectedRowKeys,
onChange: setSelectedRowKeys, onChange: setSelectedRowKeys,

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

@ -199,23 +199,77 @@
.categoryCard1 { .categoryCard1 {
flex: 1; flex: 1;
background: linear-gradient(90deg, rgba(27, 201, 181, 0.2) 0%, rgba(58, 255, 216, 0) 100%); 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 { .categoryCard2 {
flex: 1; flex: 1;
background: linear-gradient(90deg, rgba(36, 149, 255, 0.2) 0%, rgba(85, 164, 255, 0) 100%); 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 { .categoryCard3 {
flex: 1; flex: 1;
background: background: linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%);
linear-gradient(90deg, rgba(25, 60, 234, 0.2) 0%, rgba(139, 193, 255, 0) 100%); position: relative;
// linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
cursor: pointer; 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 { .categoryContent {
@ -226,11 +280,17 @@
.categoryInfo { .categoryInfo {
flex: 1; flex: 1;
.titleContainer {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.categoryTitle { .categoryTitle {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 5px; margin-bottom: 0px;
&.atmosphereGradient { &.atmosphereGradient {
background: linear-gradient(183.17deg, #0EE5C5 2.62%, #08C2C2 132.53%); background: linear-gradient(183.17deg, #0EE5C5 2.62%, #08C2C2 132.53%);
@ -242,6 +302,21 @@
font-size: 24px; font-size: 24px;
line-height: 22px; line-height: 22px;
letter-spacing: 0%; 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 { &.waterGradient {
@ -254,6 +329,21 @@
font-size: 24px; font-size: 24px;
line-height: 22px; line-height: 22px;
letter-spacing: 0%; 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 { &.soilGradient {
@ -266,6 +356,21 @@
font-size: 24px; font-size: 24px;
line-height: 22px; line-height: 22px;
letter-spacing: 0%; 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; font-size: 14px;
line-height: 22px; line-height: 22px;
letter-spacing: 4%; letter-spacing: 4%;
margin-top: -20px;
} }
} }
} }

Write Preview
Loading…
Cancel
Save