.containerDutyLog {
    padding: 15px 0px 15px 5px;
    background: transparent;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    // A块：顶部统计卡片区域
    .blockA {
        width: 100%;
        height: 18%;
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
        background: url('@/assets/business_Emergency/bgDrill2.svg') no-repeat center center;
        background-size: 100% 100%;
        border-radius: 2px;
        padding: 1 6px;

        .statCard {
            flex: 1;
            height: 100%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(208, 225, 255, 0.6) 100%);
            border-radius: 2px;
            border: 2px solid #FFFFFF;
            margin: 0px 20px 0px 5px ;
            display: flex;
            align-items: center;
            gap: 16px;

            .statIcon {
                width: 48px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;

                .cubeIcon {
                    width: 32px;
                    height: 32px;
                    background: #1890FF;
                    border-radius: 4px;
                }

                .warningIcon {
                    width: 0;
                    height: 0;
                    border-left: 16px solid transparent;
                    border-right: 16px solid transparent;
                    border-bottom: 28px solid #1890FF;
                    position: relative;

                    &::after {
                        content: '!';
                        position: absolute;
                        top: 8px;
                        left: -6px;
                        color: #fff;
                        font-weight: bold;
                        font-size: 16px;
                    }
                }

                .successIcon {
                    width: 32px;
                    height: 32px;
                    background: #1890FF;
                    border-radius: 2px;
                    position: relative;

                    &::after {
                        content: '✓';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-weight: bold;
                        font-size: 18px;
                    }
                }

                .clockIcon {
                    width: 32px;
                    height: 32px;
                    background: #1890FF;
                    border-radius: 2px;
                    position: relative;

                    &::after {
                        content: 'L';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-weight: bold;
                        font-size: 18px;
                    }
                }
            }

            .statContent {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .statNumber {
                    font-size: 32px;
                    font-weight: 600;
                    color: #333333;
                    line-height: 1;
                    margin-bottom: 8px;
                }

                .statLabel {
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
    }

    // B块：主要内容区域
    .blockB {
        width: 100%;
        flex: 1;
        display: flex;
        gap: 16px;
        overflow: hidden;

        // 左块
        .blockBLeft {
            width: 400px;
            display: flex;
            flex-direction: column;
            gap: 16px;

            // 上部分：事件类型分布
            .leftTop {
                flex: 1;
                background: #FFFFFF;
                border-radius: 2px;
                padding: 16px;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .sectionTitle {
                    font-size: 16px;
                    font-weight: 600;
                    color: #333333;
                    margin-bottom: 16px;
                }

                .chartWrapper {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .pieChartContainer {
                    display: flex;
                    align-items: center;
                    gap: 24px;
                    width: 100%;
                    height: 200px;
                    position: relative;

                    // ECharts 图表容器
                    >div:first-child {
                        width: 200px;
                        height: 200px;
                        flex-shrink: 0;
                    }

                    .pieLegend {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        .legendItem {
                            display: flex;
                            align-items: center;
                            gap: 8px;

                            .legendColor {
                                width: 12px;
                                height: 12px;
                                border-radius: 2px;
                                flex-shrink: 0;
                            }

                            .legendText {
                                font-size: 14px;
                                color: #666666;
                            }
                        }
                    }
                }
            }

            // 下部分：最近值班日志
            .leftBottom {
                flex: 1;
                background: #FFFFFF;
                border-radius: 2px;
                padding: 16px;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .sectionTitle {
                    font-size: 16px;
                    font-weight: 600;
                    color: #333333;
                    margin-bottom: 16px;
                }

                .recentLogsList {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    overflow-y: auto;

                    .logCard {
                        background: #F5F5F5;
                        border-radius: 2px;
                        padding: 12px;

                        .logTitle {
                            font-size: 14px;
                            font-weight: 500;
                            color: #333333;
                            margin-bottom: 8px;
                        }

                        .logInfo {
                            font-size: 12px;
                            color: #999999;
                            margin-bottom: 8px;
                            display: flex;
                            gap: 8px;

                            .logLocation {
                                margin-left: 8px;
                            }
                        }

                        .logDescription {
                            font-size: 13px;
                            color: #666666;
                            line-height: 1.5;
                            margin-bottom: 8px;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .logFooter {
                            display: flex;
                            justify-content: flex-end;

                            .statusTag {
                                padding: 2px 8px;
                                border-radius: 12px;
                                font-size: 12px;
                                border: 1px solid;
                            }
                        }
                    }
                }
            }
        }

        // 右块：值班日志列表
        .blockBRight {
            flex: 1;
            background: #FFFFFF;
            border-radius: 2px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .sectionTitle {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                margin-bottom: 16px;
            }

            .searchBar {
                display: flex;
                gap: 12px;
                margin-bottom: 16px;
                align-items: center;

                .searchInput {
                    flex: 1;
                    max-width: 300px;
                }

                .filterSelect {
                    width: 120px;
                }

                .addButton {
                    background: #1890FF;
                    border-color: #1890FF;
                    color: #FFFFFF;
                    border-radius: 2px;
                    height: 32px;
                    padding: 0 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:hover {
                        background: #40A9FF;
                        border-color: #40A9FF;
                    }
                }
            }

            .tableContainer {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                :global {
                    .ant-table-wrapper {
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        .ant-spin-nested-loading {
                            flex: 1;
                            display: flex;
                            flex-direction: column;

                            .ant-spin-container {
                                flex: 1;
                                display: flex;
                                flex-direction: column;

                                .ant-table {
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;

                                    .ant-table-container {
                                        flex: 1;
                                        display: flex;
                                        flex-direction: column;

                                        .ant-table-body {
                                            flex: 1;
                                            overflow-y: auto;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .ant-table-thead>tr>th {
                        background: #F5F5FA;
                        font-weight: 500;
                        color: #333333;
                        font-size: 14px;
                        text-align: center;
                        border-radius: 0;
                    }

                    .ant-table-tbody>tr>td {
                        color: #666666;
                        font-size: 13px;
                        text-align: center;
                    }

                    .ant-table-tbody>tr:hover>td {
                        background: #F5F5F5;
                    }

                    .ant-pagination {
                        margin-top: 16px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding: 0;
                    }
                }

                .actionButtons {
                    display: flex;
                    gap: 8px;
                    justify-content: center;
                    align-items: center;

                    .ant-btn-link {
                        padding: 0;
                        height: auto;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}