diff --git a/src/assets/safe_majorHazard/online_monitoring/img1.png b/src/assets/safe_majorHazard/online_monitoring/img1.png
new file mode 100644
index 0000000..deac813
Binary files /dev/null and b/src/assets/safe_majorHazard/online_monitoring/img1.png differ
diff --git a/src/assets/safe_majorHazard/online_monitoring/img2.png b/src/assets/safe_majorHazard/online_monitoring/img2.png
new file mode 100644
index 0000000..b4515eb
Binary files /dev/null and b/src/assets/safe_majorHazard/online_monitoring/img2.png differ
diff --git a/src/assets/safe_majorHazard/online_monitoring/img3.png b/src/assets/safe_majorHazard/online_monitoring/img3.png
new file mode 100644
index 0000000..564b82c
Binary files /dev/null and b/src/assets/safe_majorHazard/online_monitoring/img3.png differ
diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.less b/src/pages/safe_majorHazard/SafeMajorHazardList.less
index 66a34fa..95dd8ca 100644
--- a/src/pages/safe_majorHazard/SafeMajorHazardList.less
+++ b/src/pages/safe_majorHazard/SafeMajorHazardList.less
@@ -20,6 +20,7 @@
             height: auto !important;
             border: none !important;
             line-height: 1.2 !important;
+            box-shadow: none !important;
 
             &:hover {
                 color: #333333 !important;
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js
index d77d7c4..1142008 100644
--- a/src/pages/safe_majorHazard/module/RiskAssessment.js
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.js
@@ -1,19 +1,173 @@
 
-import React from 'react';  // ======== 导入React库，用于创建React组件 ========
-import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
-
-const RiskAssessment = () => {  // ======== 定义风险管控组件函数 ========
-    return (  // ======== 返回JSX结构 ========
-        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
-            <Card title="风险管控" style={{ height: '100%' }}>  // ======== Card组件，标题为"风险管控"，高度为父级100% ========
-                <Result  // ======== Result组件，用于显示状态页面 ========
-                    status="info"  // ======== 设置状态为info（信息类型） ========
-                    title="风险管控模块"  // ======== 设置标题 ========
-                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
-                />  // ======== Result组件结束 ========
-            </Card>  // ======== Card组件结束 ========
-        </div>  // ======== 外层容器结束 ========
-    );  // ======== return语句结束 ========
-};  // ======== 组件函数结束 ========
-
-export default RiskAssessment;  // ======== 导出组件供其他文件使用 ========
\ No newline at end of file
+import React from 'react';  
+import { Card, Result, Select } from 'antd';
+import { CheckCircleOutlined } from '@ant-design/icons';
+import styles from './RiskAssessment.less';
+
+import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
+import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
+import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
+
+const RiskAssessment = () => { 
+    return (  
+        <div className={styles.Rcontainer}>
+            {/* 第一个div - 高度20% */}
+            <div className={styles.RcontainerTop}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.blocksContainer}>
+                        {/* 块1 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>总危险源数量</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img1} alt="总危险源数量" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块2 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>高风险设备</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img2} alt="高风险设备" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块3 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>今日预警次数</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img3} alt="今日预警次数" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块4 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>未处理预警</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <span className={styles.arrow}>↑</span>
+                                    较昨日 +2
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img1} alt="未处理预警" className={styles.blockImage} />
+                            </div>
+                        </div>
+
+                        {/* 块5 */}
+                        <div className={styles.blockItem}>
+                            <div className={styles.blockLeft}>
+                                <div className={styles.blockTitle}>已处理预警</div>
+                                <div className={styles.blockNumber}>65</div>
+                                <div className={styles.blockChange}>
+                                    <CheckCircleOutlined className={styles.checkIcon} />
+                                    已完成
+                                </div>
+                            </div>
+                            <div className={styles.blockRight}>
+                                <img src={img2} alt="已处理预警" className={styles.blockImage} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+       
+            <div className={styles.RcontainerMiddle}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.middleBlock1}>
+                        <div className={styles.block1Header}>
+                            
+                            <div className={styles.block1Title}>
+                                <div className={styles.titleIcon}></div>
+                                危险源风险热力分布
+                            </div>
+                            <Select
+                                className={styles.block1Select}
+                                defaultValue="全部区域"
+                                options={[
+                                    { value: '全部区域', label: '全部区域' },
+                                    { value: '区域A', label: '区域A' },
+                                    { value: '区域B', label: '区域B' },
+                                    { value: '区域C', label: '区域C' }
+                                ]}
+                            />
+                        </div>
+                        
+                        {/* 第二行 - 简易曲线图 */}
+                        <div className={styles.block1Chart}>
+                            <svg width="100%" height="100%" viewBox="0 0 300 150">
+                                {/* 坐标轴 */}
+                                <line x1="20" y1="130" x2="280" y2="130" stroke="#ddd" strokeWidth="1"/>
+                                <line x1="20" y1="20" x2="20" y2="130" stroke="#ddd" strokeWidth="1"/>
+                                
+                                {/* 曲线 */}
+                                <path 
+                                    d="M 30 100 Q 80 60 130 80 T 230 50 T 280 70" 
+                                    stroke="#1269FF" 
+                                    strokeWidth="2" 
+                                    fill="none"
+                                />
+                                
+                                {/* 数据点 */}
+                                <circle cx="30" cy="100" r="3" fill="#1269FF"/>
+                                <circle cx="80" cy="60" r="3" fill="#1269FF"/>
+                                <circle cx="130" cy="80" r="3" fill="#1269FF"/>
+                                <circle cx="180" cy="50" r="3" fill="#1269FF"/>
+                                <circle cx="230" cy="50" r="3" fill="#1269FF"/>
+                                <circle cx="280" cy="70" r="3" fill="#1269FF"/>
+                                
+                                {/* 网格线 */}
+                                <line x1="50" y1="20" x2="50" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
+                                <line x1="100" y1="20" x2="100" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
+                                <line x1="150" y1="20" x2="150" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
+                                <line x1="200" y1="20" x2="200" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
+                                <line x1="250" y1="20" x2="250" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div className={styles.middleBlock2}>
+                        <p>第二个小块内容</p>
+                    </div>
+
+                </div>
+            </div>
+
+            {/* 第三个div - 占满剩余位置 */}
+            <div className={styles.RcontainerBottom}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.titleLeft}>
+                        <div className={styles.titleIcon}></div>
+                        <div>风险控制措施</div>
+                    </div>
+                    <div className={styles.contentArea}>
+                        <p>这里是第三个区域的内容，占满剩余位置</p>
+                    </div>
+                </div>
+            </div>
+                </div>
+    ); 
+}; 
+
+export default RiskAssessment; 
\ No newline at end of file
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.less b/src/pages/safe_majorHazard/module/RiskAssessment.less
new file mode 100644
index 0000000..ed39b76
--- /dev/null
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.less
@@ -0,0 +1,234 @@
+.Rcontainer {
+    padding: 8px 6px 0px 6px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    // 第一个div - 高度20%
+    .RcontainerTop {
+        height: 16%;
+        // background-color: #fff;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            // padding: 15px;
+
+            .blocksContainer {
+                flex: 1;
+                display: flex;
+                gap: 10px;
+                height: 100%;
+
+                .blockItem {
+                    flex: 1;
+                    height: 100%;
+                    display: flex;
+                    background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
+                    border-radius: 4px;
+                    border: 2px solid #FFFFFF;
+
+                    .blockLeft {
+                        width: 60%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        padding: 15px;
+                        padding-left: 20px;
+                        gap: 8px;
+
+                        .blockTitle {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #666666;
+                            line-height: 1.2;
+                        }
+
+                        .blockNumber {
+                            font-family: PingFang SC;
+                            font-weight: 700;
+                            font-size: 24px;
+                            color: #333333;
+                            line-height: 1.2;
+                        }
+
+                        .blockChange {
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #1269FF;
+                            line-height: 1.2;
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+
+                            .arrow {
+                                font-size: 14px;
+                                font-weight: bold;
+                            }
+
+                            .checkIcon {
+                                font-size: 16px;
+                                color: #1269FF;
+                            }
+                        }
+                    }
+
+                    .blockRight {
+                        flex: 1;
+                        height: 100%;
+                        background-color: transparent;
+                        border-radius: 0 4px 4px 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .blockImage {
+                            // width: 80%;      
+                            height: 130%;
+                            // height: 80%;
+                            object-fit: contain;
+                            margin-right: -10px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 第二个div - 高度30%
+    .RcontainerMiddle {
+        height: 30%;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            display: flex;
+            gap: 10px;
+            height: 100%;
+
+
+
+            .middleBlock1 {
+                flex: 1;
+                height: 100%;
+                background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+
+                border: 2px solid #fff;
+                border-radius: 4px;
+                position: relative;
+                padding: 0px 10px 10px 2px;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+
+                .block1Header {
+                    position: absolute;
+                    top: 5px;
+                    left: 10px;
+                    right: 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    z-index: 10;
+
+                    .block1Title {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 14px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+
+                    .block1Select {
+                        width: 120px;
+                    }
+                }
+
+                .block1Chart {
+                    width: 100%;
+                    height: 100%;
+                    margin-top: 20px;
+                }
+            }
+
+            .middleBlock2 {
+                flex: 1;
+                height: 100%;
+                background-color: pink;
+                border: 2px solid #fff;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+            }
+
+        }
+    }
+
+    // 第三个div - 占满剩余位置
+    .RcontainerBottom {
+        flex: 1; // 占满剩余空间
+        background-color: #fff;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+
+        .sectionContent {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+
+            .titleLeft {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                font-family: PingFang SC;
+                font-weight: 500;
+                font-style: Medium;
+                font-size: 14px;
+                line-height: 100%;
+                letter-spacing: 0%;
+                color: #333333;
+                margin-bottom: 10px;
+
+                .titleIcon {
+                    width: 3px;
+                    height: 16px;
+                    background-color: #2E4CD4;
+                }
+            }
+
+            .contentArea {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+    }
+}
\ No newline at end of file