squi-HD/src/views/IncidentDetail/index.scss

    @use 'sass:math';
    @import '../../styles/utils.scss';
    .live-video-container-left {
        position: absolute;
        z-index: 1;
        height: 100%;
        width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
        animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        &.right {
            right: 0;
            animation: fadeInRight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            .live-video-container {
                left: unset;
                right: px2rem(30px * 2);
            }
        }
    }
    
    .live-video-container {
        background-image: url('../../assets/card-bg/live_video_bg.png');
        background-size: cover;
        position: absolute;
        left: px2rem(30px * 2);
        top: calc(50% + px2rem(52px * 2));
        transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
        width: px2rem(1964px);
        height: px2rem(233.5px * 2) * 3 + px2rem(34px * 2) + px2rem(32px * 2) + px2rem(25px * 2);
        // display: flex;
        // flex-wrap: wrap;
        box-sizing: border-box;
        padding: px2rem(50px) px2rem(74px) px2rem(64px);
        .live-video-close {
            position: absolute;
            right: px2rem(-60px);
            // right: px2rem(0px);
            top: 50%;
            transform: translateY(-50%);
            width: px2rem(60px);
            height: px2rem(170px);
            background-image: url('../../assets/card-bg/pack.png');
            background-size: cover;
            cursor: pointer;
        }
        .popup-container {
            background-image: url('../../assets/card-bg/frame_video.png');
            float: left;
            margin-bottom: px2rem(34px);
            &:first-child,
            &:nth-child(3),
            &:nth-child(5) {
                margin-right: px2rem(35px);
            }
            &:nth-child(5),
            &:nth-child(6) {
                margin-bottom: unset;
            }
            width: px2rem(445px * 2);
            height: px2rem(233.5px * 2);
            display: flex;
            justify-content: center;
            align-items: center;
            video {
                max-height: 100%;
                max-width: 100%;
                height: px2rem(442px);
                width: px2rem(862px);
            }
        }
    }
    
    .event-list-c {
        position: absolute;
        // top: px2rem(76px * 2);
        top: 0;
        left: 0;
        // left: px2rem(30px * 2);
        width: px2rem(961px * 2);
        height: px2rem(475px * 2);
        background-color: red;
        z-index: 100;
        background: url("../../assets/card-bg/frame_sjlb@2x.png");
        background-size: 100% 100%;
        .elc-back {
            position: absolute;
            right: px2rem(24px * 2);
            top: px2rem(24px * 2);
            font-size: px2rem(15px * 2);
            font-weight: 400;
            text-align: center;
            color: #00e9ff;
            img {
                width: px2rem(15px * 2);
                height: px2rem(12px * 2);
                vertical-align: middle;
            }
        }
        .elc-content {
            // font-size: 3rem;
            height: px2rem(475px * 2)- px2rem(55px * 4);
            width: px2rem(961px * 2) - px2rem(27px * 4);
            top: px2rem(79px * 2);
            left: px2rem(27px * 2);
            position: absolute;
            overflow-y: auto;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }
            &::-webkit-scrollbar-track {
                background: transparent;
            }
            &::-webkit-scrollbar-thumb {
                background: #39d6fe;
                border-radius: 3px;
            }
            >a {
                color: #fff;
                cursor: pointer;
                &:hover {
                    .title {
                        transition: color 0.2s;
                        color: #7cb3ff;
                    }
                }
            }
            .message-item {
                padding-bottom: px2rem(30px * 2);
                .title {
                    font-size: px2rem(16px * 2);
                    display: flex;
                    align-items: top;
                    padding-bottom: px2rem(13px * 2);
                    color: #fff;
                    .index {
                        color: #fff;
                        width: px2rem(20px * 2);
                        // width: 20px * 2;
                    }
                }
                .desc {
                    font-size: px2rem(16px * 2);
                    padding-left: px2rem(20px * 2);
                    color: rgba(255, 255, 255, 0.5);
                    // padding-left: 20px * 2;
                }
            }
        }
    }
    
    .incident-detail-page-container {
        flex: 1;
        position: absolute;
        width: 100%;
        height: 100vh;
        .detail-left,
        .detail-right {
            position: absolute;
            top: calc(50% + px2rem(52px * 2));
            transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
            height: max-content;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
        }
        .detail-left {
            left: px2rem(30px * 2);
            width: calc(px2rem(480px * 2) * 2 + px2rem(21px * 2));
            // height: calc(px2rem(472px) * 2 + px2rem(21px));
        }
        .detail-right {
            right: px2rem(30px * 2);
            width: px2rem(939px * 2);
            flex-direction: column;
            max-height: 100%;
            // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
        }
        .echarts {
            width: px2rem(642px * 2);
            height: px2rem(887px * 2);
            position: absolute;
            top: px2rem(38px * 2);
            left: 50%;
            transform: translateX(-50%);
        }
        .card-container {
            // position: absolute;
            // top: px2rem(83px);
            &-bg-incident-info {
                // left: px2rem(30px);
                margin-right: px2rem(21px * 2);
                position: relative;
                .event-list {
                    position: absolute;
                    top: px2rem(13px * 2);
                    left: px2rem(23px * 2);
                    img {
                        width: px2rem(47px * 2);
                        height: px2rem(34px * 2);
                    }
                }
                .info-title {
                    margin-top: px2rem(20px * 2);
                    background: url('../../assets/card-bg/kuang_biaoti@2x.png') no-repeat;
                    background-position: center;
                    background-size: 100% 100%;
                    max-height: px2rem(56px * 2);
                    line-height: px2rem(56px * 2);
                    text-align: center;
                    font-size: px2rem(19px * 2);
                    font-weight: 700;
                    color: #FFFD4A;
                }
                .info-container {
                    padding-top: px2rem(30px * 2);
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: center;
                }
                .info-item {
                    display: flex;
                    align-items: center;
                    padding-bottom: px2rem(20px);
                    &:last-child {
                        padding-bottom: 0;
                    }
                    line-height: px2rem(50px * 2);
                    height: px2rem(50px * 2);
                    font-size: px2rem(16px * 2);
                    flex: 1;
                    width: 100%;
                    .info-item-lebel {
                        // padding: 0 px2rem(20px * 2);
                        z-index: 1;
                        // border-top-left-radius: px2rem(50px * 2);
                        // border-bottom-left-radius: px2rem(50px * 2);
                        display: flex;
                        align-items: center;
                        img {
                            min-width: 13px;
                            min-height: 13px;
                            width: px2rem(50px * 2);
                            height: px2rem(50px * 2);
                        }
                        span {
                            padding-left: px2rem(13px * 2);
                        }
                        // &[data-idx='0'] {
                        //     background: linear-gradient(to right, #035fd8, #1acfff);
                        // }
                        // &[data-idx='1'] {
                        //     background: linear-gradient(to right, #ff8b45, #f6b35c);
                        // }
                        // &[data-idx='2'] {
                        //     background: linear-gradient(to right, #8d48e9, #d789ff);
                        // }
                        // &[data-idx='3'] {
                        //     background: linear-gradient(to right, #05b382, #48e9c2);
                        // }
                    }
                    .info-item-value {
                        flex: 1;
                        margin-left: px2rem(-20px * 2);
                        height: px2rem(50px * 2);
                        padding: 0 px2rem(36px * 2);
                        background-color: #01016b;
                        // border-top-right-radius: px2rem(50px * 2);
                        // border-bottom-right-radius: px2rem(50px * 2);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            &-bg-command-chain {
                // left: px2rem(521px);
                margin-right: px2rem(21px * 2);
                .command-chain-container {
                    position: relative;
                    .chain-item {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(24px * 2);
                        width: px2rem(165px * 2);
                        height: px2rem(106px * 2);
                        box-sizing: border-box;
                        margin-bottom: calc(px2rem(65px * 2) - 2px);
                        border: 2px solid #feb459;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        .title {
                            font-size: px2rem(15px * 2);
                            color: #feb459;
                            padding-bottom: px2rem(13px * 2);
                        }
                        .desc {
                            text-align: center;
                            box-sizing: border-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 100%;
                            padding: 0 px2rem(6px * 2);
                            font-size: px2rem(13px * 2);
                        }
                        .logo {
                            position: absolute;
                            width: px2rem(40px * 2);
                            height: px2rem(40px * 2);
                            // min-width: 20px;
                            // min-height: 20px;
                            z-index: 1;
                            bottom: px2rem(-40px * 2);
                            left: 50%;
                            transform: translateX(-50%) translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
                        }
                        &::after {
                            content: '';
                            position: absolute;
                            left: -2px;
                            bottom: calc(px2rem(-65px * 2) - 2px);
                            width: 0;
                            height: 0;
                            border-top: px2rem(65px * 2) solid #feb459;
                            border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
                            border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
                        }
                        &:nth-child(3),
                        &:nth-child(2) {
                            bottom: px2rem((40px - 40px) * 2);
                            margin-bottom: 0;
                            top: unset;
                            left: px2rem(20px * 2);
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                            border-color: #33d3a8;
                            transform: unset;
                            .title {
                                color: #33d3a8;
                            }
                            .logo {
                                bottom: unset;
                                top: px2rem(-40px * 2);
                                left: 50%;
                                transform: translateX(-50%) translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
                            }
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            &::after {
                                position: absolute;
                                left: -2px;
                                bottom: unset;
                                top: calc(px2rem(-65px * 2) - 2px);
                                border-bottom: px2rem(65px * 2) solid #33d3a8;
                                border-top: unset;
                                border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
                                border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
                            }
                        }
                        &:nth-child(3) {
                            left: unset;
                            right: px2rem(20px * 2);
                            border-color: #1bbbf8;
                            .title {
                                color: #1bbbf8;
                            }
                            &::after {
                                border-bottom-color: #1bbbf8;
                            }
                        }
                    }
                    .main-dept {
                        margin-bottom: px2rem(24px * 2);
                        >div {
                            display: table-cell;
                            position: relative;
                            width: 38%;
                        }
                    }
                    .deptline {
                        position: absolute;
                        background: white;
                        width: 8%;
                        height: 1px;
                        right: 0;
                        top: 50%;
                    }
                    .dept-list {
                        display: table-cell;
                        padding-left: px2rem(20px * 2);
                        .leftline {
                            top: px2rem(50px);
                            bottom: px2rem(50px);
                        }
                    }
                    text-align: right;
                    .dept-name {
                        >div {
                            position: absolute;
                            height: 1px;
                            background: white;
                            left: px2rem(20px * -2);
                            width: px2rem(20px * 2);
                            top: px2rem(50px);
                        }
                        position: relative;
                        background-image: url('../../assets/card-bg/bg_zbm@2x.png');
                        width: px2rem(241px * 2);
                        height: px2rem(50px * 2);
                        background-size: 100% 100%;
                        background-position: center;
                        background-repeat: no-repeat;
                        text-align: center;
                        line-height: px2rem(50px * 2);
                        font-size: px2rem(14px * 2);
                        &[datatype='0'] {
                            margin-bottom: px2rem(10px * 2);
                        }
                        // margin-bottom: px2rem(10px * 2);
                    }
                    .dept {
                        width: px2rem(131px * 2);
                        height: px2rem(43px * 2);
                        background-size: 100% 100%;
                        background-position: center;
                        background-repeat: no-repeat;
                        text-align: center;
                        line-height: px2rem(43px * 2);
                        font-size: px2rem(16px * 2);
                        font-weight: 700;
                        // float: left;
                        margin: 0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        &[datatype='1'] {
                            background-image: url('../../assets/card-bg/bg_zbbm@2x.png');
                            color: #49ffc7;
                        }
                        &[datatype='2'] {
                            background-image: url('../../assets/card-bg/bg_xbbm@2x.png');
                            color: #fff75b;
                        }
                        img {
                            width: px2rem(18px * 2);
                            height: px2rem(18px * 2);
                            vertical-align: middle;
                            margin-right: px2rem(9px * 2);
                        }
                    }
                }
            }
            &-bg-incident-plan {
                // top: px2rem(482px + 83px);
                // left: px2rem(30px);
                // margin-top: px2rem(21px * 2);
                margin-right: px2rem(21px * 2);
                .plan-container {
                    .el-checkbox__inner {
                        width: px2rem(16px * 2);
                        min-width: 14px;
                        height: px2rem(16px * 2);
                        min-height: 14px;
                        background-color: transparent;
                        &::after {
                            width: px2rem(10px);
                            height: px2rem(20px);
                            left: px2rem(8px);
                        }
                    }
                    .el-checkbox__label {
                        color: #fff;
                        padding-left: px2rem(28px);
                    }
                    .plan-item {
                        display: flex;
                        align-items: center;
                        margin-right: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-bottom: px2rem(20px);
                        &>span {
                            font-size: px2rem(18px * 2);
                            font-weight: 400;
                        }
                    }
                    .plan-content {
                        font-size: px2rem(17px * 2);
                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #ffffff;
                        // margin-left: px2rem(3px * 2);
                        margin-bottom: px2rem(20px * 2);
                        .plan-title {
                            >img {
                                width: px2rem(35px * 2);
                                height: px2rem(35px * 2);
                                vertical-align: middle;
                                margin-right: px2rem(14px * 2);
                            }
                        }
                        .plan-c {
                            margin-left: px2rem(49px * 2);
                            margin-top: px2rem(0px * 2);
                            opacity: 0.66;
                            font-size: px2rem(14px * 2);
                            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #ffffff;
                            .plan-comm,
                            .plan-cmd {
                                margin-top: px2rem(5px * 2);
                                .pc {
                                    max-width: 80%;
                                }
                            }
                            .plan-comm {
                                .pc {
                                    color: #0ED0FF;
                                }
                            }
                        }
                    }
                }
                .pt,
                .pc {
                    display: inline-block;
                    vertical-align: top;
                }
            }
            &-bg-emergency-linkage {
                // top: px2rem(482px + 83px);
                // left: px2rem(521px);
                margin-top: px2rem(21px * 2);
                .linkage-chain-container {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .linkage-item {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        font-size: px2rem(18px * 2);
                        cursor: pointer;
                        img {
                            width: px2rem(117px * 2);
                            height: px2rem(102px * 2);
                        }
                        span {
                            margin-top: px2rem(10px * 2);
                            margin-bottom: px2rem(10px * 2);
                            color: #87baf8;
                        }
                    }
                }
            }
            &-bg-execution-log {
                // right: px2rem(22px);
                position: relative;
                // &::before {
                //     content: '';
                //     position: absolute;
                //     width: 14px;
                //     height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
                //     background: #112692;
                //     top: calc(px2rem(80px + 20px));
                //     left: 50%;
                //     transform: translateX(-50%);
                //     z-index: -1;
                // }
                .execution-log-container {
                    padding: px2rem(20px * 2) 0;
                    .log-item {
                        position: relative;
                        margin-bottom: px2rem(40px * 2);
                        min-height: px2rem(48px * 2);
                        .log-label {
                            font-size: px2rem(18px * 2);
                            font-weight: 400;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            text-align: right;
                            width: calc(50% - 42px);
                            position: absolute;
                            left: 0;
                            &>span {
                                justify-content: right;
                                display: flex;
                                overflow: hidden;
                                &:last-child {
                                    font-size: px2rem(16px * 2);
                                }
                            }
                        }
                        .log-time {
                            height: px2rem(48px * 2);
                            line-height: px2rem(48px * 2);
                            background-color: #3db3ea;
                            font-size: px2rem(24px * 2);
                            font-family: DIN Alternate, DIN Alternate-Bold;
                            font-weight: 700;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translateY(-50%) translateX(px2rem(-24px));
                            border-top-left-radius: px2rem(48px * 2);
                            border-bottom-left-radius: px2rem(48px * 2);
                            padding-left: px2rem(58px * 2);
                            padding-right: px2rem(10px * 2);
                            .logo-icon {
                                position: absolute;
                                height: px2rem(44px * 2);
                                width: px2rem(44px * 2);
                                background-color: #092093;
                                top: px2rem(2px * 2);
                                left: px2rem(2px * 2);
                                border-radius: px2rem(44px * 2);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .el-icon {
                                    font-size: px2rem(40px);
                                }
                            }
                            &::before,
                            &::after {
                                content: '';
                                right: px2rem(-18px * 2);
                                position: absolute;
                                border-left: px2rem(18px * 2) solid transparent;
                                border-right: px2rem(18px * 2) solid transparent;
                            }
                            &::before {
                                border-top: px2rem(24px * 2) solid #3db3ea;
                            }
                            &::after {
                                bottom: 0;
                                border-bottom: px2rem(24px * 2) solid #3db3ea;
                            }
                        }
                        &.log-item-3,
                        &.log-item-1 {
                            .log-label {
                                left: unset;
                                right: 0;
                                text-align: left;
                                &>span {
                                    justify-content: left;
                                }
                            }
                            .log-time {
                                left: unset;
                                right: 50%;
                                top: 50%;
                                transform: translateY(-50%) translateX(px2rem(24px));
                                border-top-left-radius: unset;
                                border-bottom-left-radius: unset;
                                border-top-right-radius: px2rem(48px * 2);
                                border-bottom-right-radius: px2rem(48px * 2);
                                padding-left: px2rem(10px * 2);
                                padding-right: px2rem(58px * 2);
                                background-color: #09b283;
                                .logo-icon {
                                    top: px2rem(2px * 2);
                                    left: unset;
                                    right: px2rem(2px * 2);
                                    border-radius: px2rem(44px * 2);
                                }
                                &::before,
                                &::after {
                                    content: '';
                                    right: unset;
                                    left: px2rem(-18px * 2);
                                }
                                &::before {
                                    border-top-color: #09b283;
                                }
                                &::after {
                                    border-bottom-color: #09b283;
                                }
                            }
                        }
                        &.log-item-3 {
                            .log-time {
                                background-color: #eaa33f;
                                &::before {
                                    border-top-color: #eaa33f;
                                }
                                &::after {
                                    border-bottom-color: #eaa33f;
                                }
                            }
                        }
                        &.log-item-2 {
                            .log-time {
                                background-color: #c172f9;
                                &::before {
                                    border-top-color: #c172f9;
                                }
                                &::after {
                                    border-bottom-color: #c172f9;
                                }
                            }
                        }
                    }
                    .ptime-bg {
                        width: px2rem(43px * 2);
                        height: px2rem(43px * 2);
                        background-size: 100% 100%;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .pitem3 {
                        .ptime-bg {
                            background-image: url("../../assets/card-bg/dispose@2x.png") !important;
                        }
                    }
                    .pitem1 {
                        .ptime-bg {
                            background-image: url("../../assets/card-bg/warning@2x.png") !important;
                        }
                    }
                    .pitem2 {
                        .ptime-bg {
                            background-image: url("../../assets/card-bg/send@2x.png") !important;
                        }
                    }
                    .pitem4 {
                        .ptime-bg {
                            background-image: url("../../assets/card-bg/archive@2x.png") !important;
                        }
                    }
                    .pitem5 {
                        .ptime-bg {
                            background-image: url("../../assets/card-bg/neglect@2x.png") !important;
                        }
                    }
                    .pitem {
                        position: relative;
                        .pline {
                            position: absolute;
                            width: px2rem(14px * 2);
                            height: 100%;
                            background: #112692;
                            left: px2rem(14px * 2);
                            top: px2rem(5px * 2);
                            z-index: 0;
                            border: none;
                        }
                        .pline::after {
                            background: url('../../assets/icons/detail/arrow@2x.png');
                            width: px2rem(12px * 2);
                            height: px2rem(42px * 2);
                            z-index: 1;
                            position: absolute;
                            content: no-open-quote;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            top: 50%;
                            left: 10%;
                        }
                        &[datatype='last'] {
                            .pline {
                                display: none;
                            }
                        }
                        .pcontent {
                            min-height: px2rem(48px * 2 + 8px *2);
                            padding-bottom: px2rem(28px * 2);
                            z-index: 1;
                            position: relative;
                            font-size: px2rem(17px * 2);
                            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                            font-weight: 400;
                            .pdesc {
                                padding-left: px2rem(31px * 2 + 17px*2 + 14px*2);
                                padding-top: px2rem(20px * 2);
                                .exdesc {
                                    margin-top: px2rem(13px * 2);
                                }
                            }
                            .exdesc {
                                opacity: 0.6;
                                font-size: px2rem(15px * 2);
                                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                                font-weight: 400;
                            }
                            .ptime {
                                background-image: url("../../assets/card-bg/blue@2x.png");
                                width: px2rem(310px * 2);
                                height: px2rem(48px * 2);
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                line-height: px2rem(48px * 2);
                                font-size: px2rem(19px * 2);
                                font-weight: 500;
                                span {
                                    margin-left: px2rem(10px * 2);
                                    padding-right: px2rem(17px * 2);
                                    padding-left: px2rem(38px * 2);
                                    padding-top: px2rem(9px * 2);
                                    padding-bottom: px2rem(9px * 2);
                                    border-radius: px2rem(30px * 2);
                                    background-color: #112692;
                                }
                            }
                        }
                    }
                }
            }
            &-bg-live-monitoring {
                // top: px2rem(564px + 83px);
                // right: px2rem(22px);
                width: px2rem(472px * 2);
                // margin-top: px2rem(48px);
                .el-button {
                    position: absolute;
                    z-index: 1;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0;
                    transition: var(--el-transition-duration);
                    background-color: var(--el-carousel-arrow-background);
                    height: px2rem(80px);
                    width: px2rem(80px);
                    font-size: px2rem(34px);
                    &:hover {
                        background-color: var(--el-carousel-arrow-hover-background);
                    }
                    &:first-child {
                        left: 0;
                    }
                }
                .live-container {
                    overflow-x: hidden;
                    overflow-y: auto;
                    >div {
                        // width: calc(px2rem(419px) + 10px);
                        height: 100%;
                        display: flex;
                        transition: transform 0.5s;
                    }
                    .live-item {
                        width: px2rem(419px);
                        // height: px2rem(285px);
                        text-align: center;
                        margin-right: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex: 1;
                        img,
                        video {
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }
                }
            }
            &-bg-emergency-plan {
                font-size: px2rem(16px * 2);
                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                position: relative;
                .djcc {
                    position: relative;
                    width: px2rem(184px * 2);
                    display: inline-block;
                }
                .dj {
                    width: px2rem(184px * 2);
                    height: px2rem(30px * 2);
                    border: px2rem(1px * 2) solid #007dff;
                    border-radius: px2rem(5px * 2);
                    margin-top: px2rem(5px * 2);
                    padding-left: px2rem(20px * 2);
                    line-height: px2rem(30px * 2);
                }
                .djc {
                    background: url("../../assets/card-bg/img_blue@2x.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: px2rem(104px * 2);
                    height: px2rem(40px * 2);
                    line-height: px2rem(40px * 2);
                    position: absolute;
                    text-align: center;
                    margin-top: px2rem(-35px * 2);
                    right: px2rem(5px * 2);
                    font-size: px2rem(20px * 2);
                    ;
                }
                .dl {
                    display: inline-block;
                    float: right;
                    width: px2rem(112px * 2);
                    height: px2rem(30px * 2);
                    line-height: px2rem(30px * 2);
                    font-size: px2rem(16px * 2);
                    border: px2rem(1px * 2) solid #39d6fe;
                    border-radius: px2rem(5px * 2);
                    text-align: center;
                    margin-top: px2rem(5px * 2);
                    margin-right: px2rem(5px * 2);
                    color: #39d6fe;
                    img {
                        width: px2rem(15px * 2);
                        height: px2rem(15px * 2);
                        vertical-align: middle;
                    }
                }
                .content {
                    margin-top: px2rem(20px * 2);
                    max-height: px2rem(230px * 2);
                    overflow-y: auto;
                    div {
                        margin-bottom: px2rem(25px * 2);
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #39d6fe;
                        border-radius: 3px;
                    }
                    // &::-webkit-scrollbar-track {
                    //     border-radius: 3px;
                    //     background-color: #39d6fe;
                    // }
                    &::-webkit-scrollbar {
                        width: 6px;
                        background-color: rgba(0, 0, 0, 0);
                        opacity: 1;
                    }
                    // &::-webkit-scrollbar-thumb {
                    //     border-radius: 10px;
                    //     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                    //     background-color: #555;
                    // }
                }
            }
            &-bg-accident-scene {
                position: relative;
                .dis {
                    font-size: px2rem(34px);
                    top: px2rem(160px);
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    left: 0;
                }
            }
        }
    }