From 57c5589df8d6e87b09f9521f480280cd9c1e7fd2 Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Tue, 14 Oct 2025 17:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B1=A1=E6=9F=93=E6=BA=90=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PollutionSourceManagement.js   |  25 +++-
 .../components/PollutionSourceManagement.less | 122 ++++++++++++++++--
 2 files changed, 133 insertions(+), 14 deletions(-)

diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js
index b10c7f8..299f9be 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.js
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js
@@ -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,
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.less b/src/pages/business_envInformation/components/PollutionSourceManagement.less
index e2aea78..7f48f4c 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.less
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.less
@@ -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) {