diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.js b/src/pages/safe_majorHazard/SafeMajorHazardList.js
index 866d116..a887d7c 100644
--- a/src/pages/safe_majorHazard/SafeMajorHazardList.js
+++ b/src/pages/safe_majorHazard/SafeMajorHazardList.js
@@ -32,25 +32,29 @@ const SafeMajorHazardList = () => {
     };
 
 
-        return (
+    return (
         <div className={styles.container}>
             <div className={styles.TopButton}>
-                <Button className={styles.TopButtonItem}
+                <Button
+                    className={`${styles.TopButtonItem} ${activeModule === "responsibility" ? styles.active : ""}`}
                     onClick={() => handleModuleClick("responsibility")}
                 >责任落实
                 </Button>
-                <Button className={styles.TopButtonItem} 
-                onClick={() => handleModuleClick("monitoring")}
+                <Button 
+                    className={`${styles.TopButtonItem} ${activeModule === "monitoring" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("monitoring")}
                 >在线监测预警
-                    </Button>
-                <Button className={styles.TopButtonItem}
-                onClick ={() => handleModuleClick("risk")}
-                    >风险管控
-                    </Button>
-                <Button className={styles.TopButtonItem}
-                onClick={() =>handleModuleClick("evaluation")}
-                    >评估报告及隐患处理
-                    </Button>
+                </Button>
+                <Button 
+                    className={`${styles.TopButtonItem} ${activeModule === "risk" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("risk")}
+                >风险管控
+                </Button>
+                <Button 
+                    className={`${styles.TopButtonItem} ${activeModule === "evaluation" ? styles.active : ""}`}
+                    onClick={() => handleModuleClick("evaluation")}
+                >评估报告及隐患处理
+                </Button>
             </div>
             <div className={styles.content}>
                 {renderModule()}
diff --git a/src/pages/safe_majorHazard/SafeMajorHazardList.less b/src/pages/safe_majorHazard/SafeMajorHazardList.less
index d353ec3..66a34fa 100644
--- a/src/pages/safe_majorHazard/SafeMajorHazardList.less
+++ b/src/pages/safe_majorHazard/SafeMajorHazardList.less
@@ -1,15 +1,15 @@
 .container {
-    background-color: pink;
-    // background-color: transparent;
+    background-color: transparent;
     width: 100%;
     height: 89vh;
     overflow: hidden;
+    display: flex; 
+    flex-direction: column; 
 
     .TopButton {
         display: flex;
         gap: 24px;
         margin-left: 6px;
-        background-color: red;
 
         .TopButtonItem {
             background-color: transparent !important;
@@ -26,12 +26,22 @@
                 border: none !important;
             }
 
-            &:active,
             &:focus {
                 background-color: #2E4CD4 !important;
                 color: #fff !important;
             }
+
+            &.active {
+                background-color: #2E4CD4 !important;
+                color: #fff !important;
+            }
         }
     }
 
+    .content {
+        // ======== 内容区域样式 ========
+        flex: 1; // ======== 占据剩余空间 ========
+        overflow-y: auto; // ======== 允许垂直滚动 ========
+        padding: 0; // ======== 无内边距 ========
+    }
 }
\ No newline at end of file
diff --git a/src/pages/safe_majorHazard/module/EvaluationReport.js b/src/pages/safe_majorHazard/module/EvaluationReport.js
index 593239c..b6297cc 100644
--- a/src/pages/safe_majorHazard/module/EvaluationReport.js
+++ b/src/pages/safe_majorHazard/module/EvaluationReport.js
@@ -3,14 +3,14 @@ import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Resu
 
 const EvaluationReport = () => {  // ======== 定义评估报告及隐患处理组件函数 ========
     return (  // ======== 返回JSX结构 ========
-        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
-            <Card title="评估报告及隐患处理" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"评估报告及隐患处理"，最小高度400px ========
+        <div style={{ padding: '8px' }}>  // ======== 外层容器，设置24px内边距 ========
+            <Card title="评估报告及隐患处理" style={{ height: '100%' }}>  // ======== Card组件，标题为"评估报告及隐患处理"，高度为父级100% ========
                 <Result  // ======== Result组件，用于显示状态页面 ========
                     status="info"  // ======== 设置状态为info（信息类型） ========
                     title="评估报告及隐患处理模块"  // ======== 设置标题 ========
                     subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
                 />  // ======== Result组件结束 ========
-            </Card>  // ======== Card组件结束 ========
+            </Card>  
         </div>  // ======== 外层容器结束 ========
     );  // ======== return语句结束 ========
 };  // ======== 组件函数结束 ========
diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
index 059ccad..874ff58 100644
--- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js
+++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js
@@ -5,7 +5,7 @@ import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Resu
 const OnlineMonitoring = () => {  // ======== 定义在线监测预警组件函数 ========
     return (  // ======== 返回JSX结构 ========
         <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
-            <Card title="在线监测预警" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"在线监测预警"，最小高度400px ========
+            <Card title="在线监测预警" style={{ height: '100%' }}>  // ======== Card组件，标题为"在线监测预警"，高度为父级100% ========
                 <Result  // ======== Result组件，用于显示状态页面 ========
                     status="info"  // ======== 设置状态为info（信息类型） ========
                     title="在线监测预警模块"  // ======== 设置标题 ========
diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
index b2fa793..2dda0b6 100644
--- a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
@@ -1,19 +1,139 @@
 
-import React from 'react';  // ======== 导入React库，用于创建React组件 ========
-import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Result组件 ========
-
-const ResponsibilityImplementation = () => {  // ======== 定义责任落实组件函数 ========
-    return (  // ======== 返回JSX结构 ========
-        <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
-            <Card title="责任落实" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"责任落实"，最小高度400px ========
-                <Result  // ======== Result组件，用于显示状态页面 ========
-                    status="info"  // ======== 设置状态为info（信息类型） ========
-                    title="责任落实模块"  // ======== 设置标题 ========
-                    subTitle="此功能正在开发中，敬请期待..."  // ======== 设置副标题，提示开发中 ========
-                />  // ======== Result组件结束 ========
-            </Card>  // ======== Card组件结束 ========
-        </div>  // ======== 外层容器结束 ========
-    );  // ======== return语句结束 ========
-};  // ======== 组件函数结束 ========
-
-export default ResponsibilityImplementation;  // ======== 导出组件供其他文件使用 ========
+import React from 'react'; 
+import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col} from 'antd';  
+import StandardTable from '@/components/StandardTable';
+import styles from './ResponsibilityImplementation.less';
+
+
+
+const ResponsibilityImplementation = () => {  
+
+    const columns = [
+        {
+            title:"编号",
+            dataIndex:"id",
+            key:"id",
+            width:60,
+        },
+        {
+            title:"责任区域",
+            dataIndex:"zrqy",
+            key:"zrqy",
+            width:120,
+        },
+        {
+            title:"设备型号",
+            dataIndex:"sbxh",
+            key:"sbxh",
+            width:120,
+        },
+        {
+            title:"危险源类型",
+            dataIndex:"wxlylx",
+            key:"wxlylx",
+            width:120,
+        },
+        {
+            title:"责任人",
+            dataIndex:"zrr",
+            key:"zrr",
+            width:120,
+        },
+        {
+            title:"联系方式",
+            dataIndex:"lxfs",
+            key:"lxfs",
+            width:120,
+        },
+        {
+            title:"巡检频率",
+            dataIndex:"xjpl",
+            key:"xjpl",
+            width:120,
+        },
+        {
+            title:"最近巡检",
+            dataIndex:"zjxj",
+            key:"zjxj",
+            width:120,
+        },
+        {
+            title:"状态",
+            dataIndex:"zt",
+            key:"zt",
+            width:120,
+        },
+        {
+            title:"操作",
+            dataIndex:"cz",
+            key:"cz",
+            width:120,
+            render: (text, record) => {  // ======== 渲染操作列 ========
+                const handleView = (record) => {  // ======== 定义查看函数 ========
+                    console.log('查看记录:', record);  // ======== 打印记录信息到控制台 ========
+                    // 这里可以添加查看详情的逻辑  // ======== 注释：可以添加查看详情的逻辑 ========
+                };  // ======== 函数结束 ========
+                
+                return (  // ======== 返回按钮组件 ========
+                    <Button type="link" onClick={() => handleView(record)}>查看</Button>  // ======== 查看按钮，点击时调用handleView函数 ========
+                );  // ======== return语句结束 ========
+            }  // ======== render函数结束 ========
+        }
+    ];
+
+    // 生成20条假数据
+    const generateMockData = () => {  // ======== 定义生成假数据的函数 ========
+        const data = [];  // ======== 创建空数组存储数据 ========
+        const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区'];  // ======== 责任区域选项 ========
+        const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀'];  // ======== 设备型号选项 ========
+        const statuses = ['正常', '维护中', '故障', '停用', '检修'];  // ======== 状态选项 ========
+        const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二'];  // ======== 责任人姓名选项 ========
+        
+        for (let i = 1; i <= 20; i++) {  // ======== 循环生成20条数据 ========
+            data.push({  // ======== 添加一条数据到数组 ========
+                key: i.toString(),  // ======== 唯一标识 ========
+                id: `WX${String(i).padStart(3, '0')}`,  // ======== 编号：WX001, WX002... ========
+                zrqy: areas[Math.floor(Math.random() * areas.length)],  // ======== 随机选择责任区域 ========
+                sbxh: devices[Math.floor(Math.random() * devices.length)],  // ======== 随机选择设备型号 ========
+                zrr: names[Math.floor(Math.random() * names.length)],  // ======== 随机选择责任人 ========
+                zt: statuses[Math.floor(Math.random() * statuses.length)],  // ======== 随机选择状态 ========
+            });  // ======== 数据对象结束 ========
+        }  // ======== 循环结束 ========
+        return data;  // ======== 返回生成的数据数组 ========
+    };  // ======== 函数结束 ========
+
+    const tableData = generateMockData();  // ======== 调用函数生成假数据 ========
+
+    return ( 
+        <div  className={styles.containerR}> 
+            <div className={styles.containerOne}> 
+                <div className={styles.containerOneLeft}>1</div>
+                <div className={styles.containerOneRight}>2</div>
+            </div>  
+
+            <div className={styles.containerTwo}>
+                <div>重大危险源安全包信息库</div>
+                    <div>
+                        <Input placeholder="搜索危险源编号" />
+                        <Button>新增责任人</Button>
+                        <Button>导出清单</Button>
+                        <StandardTable
+                            columns={columns}  // ======== 表格列配置 ========
+                            data={{  // ======== 数据对象，包含list和pagination ========
+                                list: tableData,  // ======== 表格数据列表 ========
+                                pagination: {  // ======== 分页配置 ========
+                                    currentPage: 1,  // ======== 当前页码 ========
+                                    pageSize: 5,  // ======== 每页显示10条数据 ========
+                                    total: tableData.length,  // ======== 总数据条数 ========
+                                }  // ======== 分页配置结束 ========
+                            }}  // ======== 数据对象结束 ========
+                            selectedRows={[]}  // ======== 选中的行数据，初始为空数组 ========
+                            onSelectRow={() => {}}  // ======== 行选择事件处理函数 ========
+                            onChange={() => {}}  // ======== 表格变化事件处理函数 ========
+                        /> 
+                    </div>
+                    </div>
+        </div> 
+    );  
+}; 
+export default ResponsibilityImplementation;  
diff --git a/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
new file mode 100644
index 0000000..2c9c433
--- /dev/null
+++ b/src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
@@ -0,0 +1,30 @@
+.containerR {
+    padding: 8px 6px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .containerOne {
+        height: 30%;
+        display: flex;
+        margin-bottom: 12px;
+        background-color: aqua;
+        gap: 12px;
+
+        .containerOneLeft{
+            background-color: #999;
+            width:58%;
+            // margin-right: 12px;
+        }
+        .containerOneRight{
+            background-color: #999;
+            width:42%;
+        }
+    }
+    
+
+    .containerTwo{
+        flex: 1;
+        background-color: blue;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/safe_majorHazard/module/RiskAssessment.js b/src/pages/safe_majorHazard/module/RiskAssessment.js
index cd00a05..d77d7c4 100644
--- a/src/pages/safe_majorHazard/module/RiskAssessment.js
+++ b/src/pages/safe_majorHazard/module/RiskAssessment.js
@@ -5,7 +5,7 @@ import { Card, Result } from 'antd';  // ======== 导入Ant Design的Card和Resu
 const RiskAssessment = () => {  // ======== 定义风险管控组件函数 ========
     return (  // ======== 返回JSX结构 ========
         <div style={{ padding: '24px' }}>  // ======== 外层容器，设置24px内边距 ========
-            <Card title="风险管控" style={{ minHeight: '400px' }}>  // ======== Card组件，标题为"风险管控"，最小高度400px ========
+            <Card title="风险管控" style={{ height: '100%' }}>  // ======== Card组件，标题为"风险管控"，高度为父级100% ========
                 <Result  // ======== Result组件，用于显示状态页面 ========
                     status="info"  // ======== 设置状态为info（信息类型） ========
                     title="风险管控模块"  // ======== 设置标题 ========