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 = () => { {/* 环境分类卡片 */}
+
+
AIR POLLUSION
-
大气环境
+ + +
+
大气环境
+
大气环境
+
特征污染物名录库
icon_factory
+
WATER POLLUSION
-
水环境
+
+
水环境
+
水环境
+
特征污染物名录库
icon_water -
+
SOILPOLLUSION
-
土壤及地下水
+
+
土壤及地下水
+
土壤及地下水
+
特征污染物名录库
- icon_soil
@@ -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) {