diff --git a/src/assets/business_Emergency/iconDrill2.jpg b/src/assets/business_Emergency/iconDrill2.jpg
new file mode 100644
index 0000000..2104f65
Binary files /dev/null and b/src/assets/business_Emergency/iconDrill2.jpg differ
diff --git a/src/assets/business_Emergency/iconDrill3.svg b/src/assets/business_Emergency/iconDrill3.svg
new file mode 100644
index 0000000..e45f5f1
--- /dev/null
+++ b/src/assets/business_Emergency/iconDrill3.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/business_Emergency/iconDrill4.svg b/src/assets/business_Emergency/iconDrill4.svg
new file mode 100644
index 0000000..d3f670e
--- /dev/null
+++ b/src/assets/business_Emergency/iconDrill4.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.js b/src/pages/business_emergencyDrill/EmergencyDrill.js
index c0f4484..0db4578 100644
--- a/src/pages/business_emergencyDrill/EmergencyDrill.js
+++ b/src/pages/business_emergencyDrill/EmergencyDrill.js
@@ -1,9 +1,13 @@
import React, { useState, useEffect, useRef } from 'react';
import { Button } from "antd";
+import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import styles from './EmergencyDrill.less';
import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection';
import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg';
+import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg';
+import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg';
+import iconDrill4 from '../../assets/business_Emergency/iconDrill4.svg';
const EmergencyDrill = () => {
const [timeType, setTimeType] = useState('month');
@@ -360,10 +364,137 @@ const EmergencyDrill = () => {
- {/* 第一小块 - 70% 宽度 */}
+
+
+
+
+
+
+
+
+ 2023-09-12 09:30
+
+
+
+ 第二生产车间
+
+
+
+ 参与人数:32人
+
+
+
+
+
+
+
+
+
+
+
+
+ 2023-09-12 09:30
+
+
+
+ 第二生产车间
+
+
+
+ 参与人数:32人
+
+
+
+
+
+
+
+
+
+
+
+
+ 2023-09-12 09:30
+
+
+
+ 第二生产车间
+
+
+
+ 参与人数:32人
+
+
+
+
+
+
+
+
+
+
+
+
+ 2023-09-12 09:30
+
+
+
+ 第二生产车间
+
+
+
+ 参与人数:32人
+
+
+
+
+
+
+
+
+
- {/* 第二小块 - 撑满剩余宽度 */}
+
+
+
+ {[1, 2, 3].map((item, index) => (
+
+
+

+
08:45
+
+
+
生产车间火灾应急演练
+
+
2023-09-12
+
+

+

+
+
+
+
+ ))}
+
diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.less b/src/pages/business_emergencyDrill/EmergencyDrill.less
index 536653b..1aea53d 100644
--- a/src/pages/business_emergencyDrill/EmergencyDrill.less
+++ b/src/pages/business_emergencyDrill/EmergencyDrill.less
@@ -293,22 +293,536 @@
.block2 {
width: 100%;
- height: 25%;
+ height: 27%;
padding: 0;
margin: 0;
display: flex;
gap: 15px;
.block2_item1 {
- width: 70%;
+ width: 75%;
height: 100%;
background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ padding: 10px 10px 10px 10px;
+
+ .block2_item1_header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+
+ .colorBlock {
+ width: 3px;
+ height: 16px;
+ background-color: #2E4CD4;
+ margin-right: 8px;
+ }
+
+ .title {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333333;
+ }
+ }
+
+ .block2_item1_content {
+ flex: 1;
+ display: flex;
+ gap: 5px;
+ overflow: hidden;
+
+ .drillCard1 {
+ flex: 1;
+ background-color: #F1F7FF;
+ padding: 8px 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .cardHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .cardTitle {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333333;
+ line-height: 24px;
+ flex: 1;
+ }
+
+ .statusTag {
+ background-color: #D6E4FF;
+ color: #2E4CD4;
+ padding: 2px 6px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+ }
+
+ .cardInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 8px;
+
+ .infoItem {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+
+ .infoIcon {
+ font-size: 12px;
+ color: #999999;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .cardButtons {
+ display: flex;
+ gap: 12px;
+
+ .joinBtn {
+ flex: 1;
+ background-color: #2E4CD4;
+ border-color: #2E4CD4;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background-color: #4D64E0;
+ border-color: #4D64E0;
+ }
+ }
+
+ .detailBtn {
+ flex: 1;
+ background-color: #FFFFFF;
+ border: 1px solid #D9D9D9;
+ color: #666666;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #2E4CD4;
+ border-color: #2E4CD4;
+ }
+ }
+ }
+ }
+
+ .drillCard2 {
+ flex: 1;
+ background-color: #FFFBF7;
+ padding: 8px 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .cardHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .cardTitle {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333333;
+ line-height: 24px;
+ flex: 1;
+ }
+
+ .statusTag {
+ background-color: #FFE8D1;
+ color: #FF8C00;
+ padding: 2px 2px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+ }
+
+ .cardInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 8px;
+
+ .infoItem {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+
+ .infoIcon {
+ font-size: 12px;
+ color: #999999;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .cardButtons {
+ display: flex;
+ gap: 12px;
+
+ .reminderBtn {
+ flex: 1;
+ background-color: #FF8C00;
+ border-color: #FF8C00;
+ color: #FFFFFF;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background-color: #FFA833;
+ border-color: #FFA833;
+ color: #FFFFFF;
+ }
+ }
+
+ .detailBtn {
+ flex: 1;
+ background-color: #FFFFFF;
+ border: 1px solid #D9D9D9;
+ color: #666666;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #FF8C00;
+ border-color: #FF8C00;
+ }
+ }
+ }
+ }
+
+ .drillCard3 {
+ flex: 1;
+ background-color: #F3FFF5;
+ padding: 8px 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .cardHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .cardTitle {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333333;
+ line-height: 24px;
+ flex: 1;
+ }
+
+ .statusTag {
+ background-color: #D4F4DD;
+ color: #52C41A;
+ padding: 2px 6px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+ }
+
+ .cardInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 8px;
+
+ .infoItem {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+
+ .infoIcon {
+ font-size: 12px;
+ color: #999999;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .cardButtons {
+ display: flex;
+ gap: 12px;
+
+ .reportBtn {
+ flex: 1;
+ background-color: #52C41A;
+ border-color: #52C41A;
+ color: #FFFFFF;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background-color: #73D13D;
+ border-color: #73D13D;
+ color: #FFFFFF;
+ }
+ }
+
+ .detailBtn {
+ flex: 1;
+ background-color: #FFFFFF;
+ border: 1px solid #D9D9D9;
+ color: #666666;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #52C41A;
+ border-color: #52C41A;
+ }
+ }
+ }
+ }
+
+ .drillCard4 {
+ flex: 1;
+ background-color: #F3FFF5;
+ padding: 8px 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .cardHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .cardTitle {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333333;
+ line-height: 24px;
+ flex: 1;
+ }
+
+ .statusTag {
+ background-color: #D4F4DD;
+ color: #52C41A;
+ padding: 2px 6px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+ }
+
+ .cardInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 8px;
+
+ .infoItem {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+
+ .infoIcon {
+ font-size: 12px;
+ color: #999999;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .cardButtons {
+ display: flex;
+ gap: 12px;
+
+ .reportBtn {
+ flex: 1;
+ background-color: #52C41A;
+ border-color: #52C41A;
+ color: #FFFFFF;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background-color: #73D13D;
+ border-color: #73D13D;
+ color: #FFFFFF;
+ }
+ }
+
+ .detailBtn {
+ flex: 1;
+ background-color: #FFFFFF;
+ border: 1px solid #D9D9D9;
+ color: #666666;
+ border-radius: 4px;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #52C41A;
+ border-color: #52C41A;
+ }
+ }
+ }
+ }
+ }
}
.block2_item2 {
flex: 1;
height: 100%;
background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ padding: 12px;
+
+ .sectionHeader {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12px;
+
+ .headerLine {
+ width: 2px;
+ height: 16px;
+ background-color: #2E4CD4;
+ margin-right: 8px;
+ }
+
+ .headerTitle {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333333;
+ }
+ }
+
+ .videoContainer {
+ flex: 1;
+ display: flex;
+ gap: 12px;
+ overflow-x: auto;
+
+ .videoCard {
+ flex-shrink: 0;
+ width: 200px;
+ height: 150px;
+ // background-color: pink;
+ overflow: hidden;
+ cursor: pointer;
+ transition: transform 0.2s;
+
+ .videoThumbnail {
+ position: relative;
+ width: 100%;
+ // height: 100%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 92px;
+ object-fit: cover;
+ }
+
+ .videoDuration {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: #FFFFFF;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ }
+ }
+
+ .videoInfo {
+ padding: 6px 12px;
+ background-color: #EEF4FF;
+
+ .videoTitle {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333333;
+ margin-bottom: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .videoMeta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .videoDate {
+ font-size: 12px;
+ color: #666666;
+ }
+
+ .videoActions {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+
+ .actionIcon {
+ width: 14px;
+ height: 14px;
+ // cursor: pointer;
+ // transition: opacity 0.2s;
+
+ // &:hover {
+ // opacity: 0.7;
+ // }
+ }
+ }
+ }
+ }
+ }
+ }
}
}