diff --git a/src/pages/business_emergencyAccident/EmergencyAccident.js b/src/pages/business_emergencyAccident/EmergencyAccident.js index 07ab758..429a178 100644 --- a/src/pages/business_emergencyAccident/EmergencyAccident.js +++ b/src/pages/business_emergencyAccident/EmergencyAccident.js @@ -1,70 +1,41 @@ import React, { useState } from 'react'; -import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd'; +import { Button } from 'antd'; import styles from './EmergencyResource.less'; -import ComplianceManagement from './components/ComplianceManagement'; //合规性管理 -import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警 -import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理 -import EvaluationReport from './components/EvaluationReport'; //评估报告 -import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理 -import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理 +import EventWarningManagement from './components/EventWarningManagement'; +import EventNotification from './components/EventNotification'; - - -const SafeMajorHazardList = () => { - const [activeModule, setActiveModule] = useState('organization'); +const EmergencyAccident = () => { + const [activeModule, setActiveModule] = useState('warning'); const handleModuleClick = (module) => { - setActiveModule(module) - } - + setActiveModule(module); + }; const renderModule = () => { switch (activeModule) { - case 'organization': - return ; - case 'equipment': - return ; - case 'firefighting': - return ; - case 'other': - return ; - case 'equipmentManagement': - return ; - case 'pollutionSource': - return ; + case 'warning': + return ; + case 'notification': + return ; default: - return ; + return ; } }; - return (
- - -
@@ -74,4 +45,4 @@ const SafeMajorHazardList = () => { ); }; -export default SafeMajorHazardList; +export default EmergencyAccident; diff --git a/src/pages/business_emergencyAccident/EmergencyResource.less b/src/pages/business_emergencyAccident/EmergencyResource.less index 08e9b05..df1e33c 100644 --- a/src/pages/business_emergencyAccident/EmergencyResource.less +++ b/src/pages/business_emergencyAccident/EmergencyResource.less @@ -3,20 +3,20 @@ width: 100%; height: 89vh; overflow: hidden; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; .TopButton { - background-color: white; + background-color: #fff; width: 100%; - padding: 8px 30px 5px 30px; + padding: 8px 30px 10px 30px; display: flex; gap: 24px; margin-left: 6px; .TopButtonItem { background-color: #FFFFFF !important; - color: #999999 !important; + color: #333333 !important; font-family: 'PingFang SC', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; @@ -27,33 +27,34 @@ border: none !important; box-shadow: none !important; position: relative !important; - display: flex !important; + display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; transition: all 0.3s ease !important; + width: fit-content !important; &:hover { - color: #999999 !important; + color: #333333 !important; border: none !important; } &:focus { - color: #999999 !important; + color: #333333 !important; border: none !important; } &.active { - background: linear-gradient(98.03deg, #00E49C 0.68%, #00D841 98.3%) !important; - box-shadow: 0px 2px 2px 0px #AEEDDE !important; - color: #FFFFFF !important; - + color: #2E4CD4 !important; + &::after { content: ''; - width: 28px; - height: 5px; - background-color: #FFFFFF; - border-radius: 6px; + position: absolute; + bottom: -10px; + left: 14px; + right: 14px; + height: 4px; + background-color: #2E4CD4; opacity: 1; } } diff --git a/src/pages/business_emergencyAccident/components/EventNotification.js b/src/pages/business_emergencyAccident/components/EventNotification.js new file mode 100644 index 0000000..089973f --- /dev/null +++ b/src/pages/business_emergencyAccident/components/EventNotification.js @@ -0,0 +1,16 @@ +import React from 'react'; +import styles from './EventNotification.less'; + +const EventNotification = () => { + return ( +
+
+

事件通知

+ {/* 这里可以添加具体的内容 */} +
+
+ ); +}; + +export default EventNotification; + diff --git a/src/pages/business_emergencyAccident/components/EventNotification.less b/src/pages/business_emergencyAccident/components/EventNotification.less new file mode 100644 index 0000000..f69fbff --- /dev/null +++ b/src/pages/business_emergencyAccident/components/EventNotification.less @@ -0,0 +1,12 @@ +.container { + width: 100%; + height: 100%; + padding: 20px; + + .content { + background-color: #fff; + padding: 20px; + border-radius: 8px; + } +} + diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.js b/src/pages/business_emergencyAccident/components/EventWarningManagement.js new file mode 100644 index 0000000..a033c84 --- /dev/null +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.js @@ -0,0 +1,16 @@ +import React from 'react'; +import styles from './EventWarningManagement.less'; + +const EventWarningManagement = () => { + return ( +
+
+

事件预警管理

+ {/* 这里可以添加具体的内容 */} +
+
+ ); +}; + +export default EventWarningManagement; + diff --git a/src/pages/business_emergencyAccident/components/EventWarningManagement.less b/src/pages/business_emergencyAccident/components/EventWarningManagement.less new file mode 100644 index 0000000..f69fbff --- /dev/null +++ b/src/pages/business_emergencyAccident/components/EventWarningManagement.less @@ -0,0 +1,12 @@ +.container { + width: 100%; + height: 100%; + padding: 20px; + + .content { + background-color: #fff; + padding: 20px; + border-radius: 8px; + } +} +