应急预案（未添加下载）

src/api/incident.ts

@@ -2,25 +2,25 @@ import request from '@/utils/request';
 import { BaseResponse } from './type';
 
 export interface IncidentItem {
-  id?: string; // 非必须
-  type?: number; // 非必须 事件类型
-  level?: number; // 非必须 事件等级
-  addr?: string; // 非必须 地址
-  locations?: string; // 非必须 经纬度
-  createDept?: string; // 非必须 上报部门
-  source?: string; // 非必须 来源
-  des?: string; // 非必须 事件描述
-  pic?: string; // 非必须 图片
-  video?: string; // 非必须 视频
-  expr1?: null; // 非必须
-  expr2?: null; // 非必须
-  exprJson?: null; // 非必须
-  name?: string; // 非必须
-  status?: number; // 非必须 状态
-  madinDept?: string; // 非必须
-  assistDept?: string; // 非必须
-  createBy?: string; // 非必须
-  createTime?: string; // 非必须
+  id?: string; // 
+  type?: number; //  事件类型
+  level?: number; //  事件等级
+  addr?: string; //  地址
+  locations?: string; //  经纬度
+  createDept?: string; //  上报部门
+  source?: string; //  来源
+  des?: string; //  事件描述
+  pic?: string; //  图片
+  video?: string; //  视频
+  expr1?: null; // 
+  expr2?: null; // 
+  exprJson?: null; // 
+  name?: string; // 
+  status?: number; //  状态
+  madinDept?: string; // 
+  assistDept?: string; // 
+  createBy?: string; // 
+  createTime?: string; // 
 }
 
 export interface IncidentListResponse extends BaseResponse {
@@ -53,6 +53,7 @@ export interface IncidentItemDetailProcessItem {
   status?: null;
   createTime?: string;
   createBy?: null;
+  userRead?: string;
 }
 export interface IncidentItemDetailTaskItem {
   id?: string;
@@ -65,10 +66,21 @@ export interface IncidentItemDetailTaskItem {
   createBy?: null;
 }
 
+export interface IncidentItemEmergencyPlan {
+  id?: string;
+  planId?: string;
+  level?: number;
+  taskName?: string;
+  taskDes?: string;
+  createBy?: null;
+  createTime?: string;
+}
+
 export interface IncidentItemDetail {
   baseInfo?: IncidentItem; // 基本信息
   process?: IncidentItemDetailProcessItem[]; //处置信息
   task?: IncidentItemDetailTaskItem[]; // 处置任务
+  baseTask?: Map<string, IncidentItemEmergencyPlan[]>;
 }
 export interface IncidentItemDetailResponse extends BaseResponse {
   data: IncidentItemDetail;

src/views/IncidentDetail/EmergencyCard/index.tsx

@@ -2,15 +2,9 @@ import Card from '@/components/Card';
 import { useIncidentStore } from '@/store';
 import { defineComponent, ref } from 'vue-demi';
 
-const lists = [
-  '生成处置方法',
-  '组织应急队伍',
-  '现场救援',
-  '这里处置方案文字这里处置方案文字',
-  '这里处置方案文字这里处置方案文字',
-  '这里处置方案文字这里处置方案文字',
-  '这里处置方案文字这里处置方案文字',
-];
+// @ts-ignore
+import Icondownload from '@/assets/icons/detail/download@2x.png';
+
 
 export default defineComponent({
   name: 'EmergencyCard',
@@ -22,11 +16,24 @@ export default defineComponent({
     return () => (
       <Card cardType="emergency-plan">
         <div class="plan-container">
-          <el-checkbox-group v-model={types.value}>
-            {store?.incidentDetail?.task?.map((t) => (
-              <el-checkbox disabled class="plan-item" label={t.taskName} />
+          <div class="toph">
+            <div class="djcc">
+              <div class="dj">等级</div>
+              <div class="djc">I级</div>
+            </div>
+
+            <div class="dl">
+              <img src={Icondownload} />
+              下载附件
+            </div>
+          </div>
+          <div class="content">
+            {store.incidentDetail.baseTask[
+              store.incidentDetail.baseInfo?.level
+            ].map((i, index) => (
+              <div>{index + 1 + '、' + i.taskName}</div>
             ))}
-          </el-checkbox-group>
+          </div>
         </div>
       </Card>
     );

src/views/IncidentDetail/ExecutionLogCard/index.tsx

@@ -64,7 +64,9 @@ export default defineComponent({
           {store.incidentDetail?.process?.map((item, idx) => (
             <div
               class={`pitem pitem${(idx % 3) + 1}`}
-              datatype={`${idx + 1 == store.incidentDetail?.process?.length?"last":"1"}`}>
+              datatype={`${
+                idx + 1 == store.incidentDetail?.process?.length ? 'last' : '1'
+              }`}>
               <div class="pcontent">
                 <div class="ptime">
                   <span>
@@ -72,38 +74,11 @@ export default defineComponent({
                   </span>
                 </div>
                 <div class="pdesc">
-                  <div>
-                    {item.des?.includes('>>>>') ? (
-                      <>
-                        <span>{item.des.split('>>>>')[0]}</span>
-                        <span class="exdesc">
-                          <span
-                            style={{
-                              boxSizing: 'border-box',
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap',
-                              width: '75%',
-                            }}>
-                            {item.des.split('>>>>')[1]}
-                          </span>
-                          等
-                          {
-                            <span style={{ color: '#00d0ff' }}>
-                              {item.des.split('>>>>')[1]?.split(',')?.length ??
-                                0}
-                            </span>
-                          }
-                          人未读
-                        </span>
-                      </>
-                    ) : (
-                      item.des
-                    )}
+                  <div> {item.des} </div>
+                  <div class="exdesc" style={`${item.userRead==null?"display:none":""}`}>
+                    {item.userRead}
+                    <span style="color:#39D6FE">30</span>人未读
                   </div>
-                  {/* <div class="exdesc">
-                    张三、李四、王五、李四、王五等<span>30</span>人未读
-                  </div> */}
                 </div>
               </div>
               <div class="pline"></div>

src/views/IncidentDetail/index.scss

@@ -1,719 +1,779 @@
-@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 {
+    @use 'sass:math';
+    @import '../../styles/utils.scss';
+    .live-video-container-left {
         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);
+        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);
+            }
         }
     }
-}
-
-.incident-detail-page-container {
-    flex: 1;
-    position: absolute;
-    width: 100%;
-    height: 100vh;
-    .detail-left,
-    .detail-right {
+    
+    .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)));
-        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);
-            .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(22px * 2);
-                font-weight: 700;
-                color: #0ed0ff;
+        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);
             }
-            .info-container {
-                padding-top: px2rem(30px * 2);
-                display: flex;
-                flex-direction: column;
-                align-items: start;
-                justify-content: center;
+            &:nth-child(5),
+            &:nth-child(6) {
+                margin-bottom: unset;
             }
-            .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(18px * 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;
-                }
+            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);
             }
         }
-        &-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;
+    }
+    
+    .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);
+                .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(22px * 2);
+                    font-weight: 700;
+                    color: #0ed0ff;
+                }
+                .info-container {
+                    padding-top: px2rem(30px * 2);
                     display: flex;
                     flex-direction: column;
-                    align-items: center;
+                    align-items: start;
                     justify-content: center;
-                    .title {
-                        font-size: px2rem(17px * 2);
-                        color: #feb459;
-                        padding-bottom: px2rem(13px * 2);
+                }
+                .info-item {
+                    display: flex;
+                    align-items: center;
+                    padding-bottom: px2rem(20px);
+                    &:last-child {
+                        padding-bottom: 0;
                     }
-                    .desc {
-                        text-align: center;
-                        box-sizing: border-box;
+                    line-height: px2rem(50px * 2);
+                    height: px2rem(50px * 2);
+                    font-size: px2rem(18px * 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;
-                        width: 100%;
-                        padding: 0 px2rem(6px * 2);
-                        font-size: px2rem(13px * 2);
                     }
-                    .logo {
+                }
+            }
+            &-bg-command-chain {
+                // left: px2rem(521px);
+                margin-right: px2rem(21px * 2);
+                .command-chain-container {
+                    position: relative;
+                    .chain-item {
                         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;
+                        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 {
-                            color: #33d3a8;
+                            font-size: px2rem(17px * 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 {
-                            bottom: unset;
-                            top: px2rem(-40px * 2);
+                            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(24px * 2));
+                            transform: translateX(-50%) translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
                         }
-                        border-bottom-left-radius: 10px;
-                        border-bottom-right-radius: 10px;
                         &::after {
+                            content: '';
                             position: absolute;
                             left: -2px;
-                            bottom: unset;
-                            top: calc(px2rem(-65px * 2) - 2px);
-                            border-bottom: px2rem(65px * 2) solid #33d3a8;
-                            border-top: unset;
+                            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) {
-                        left: unset;
-                        right: px2rem(20px * 2);
-                        border-color: #1bbbf8;
-                        .title {
-                            color: #1bbbf8;
+                        &: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;
+                            }
                         }
-                        &::after {
-                            border-bottom-color: #1bbbf8;
+                        &: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);
+                    .main-dept {
+                        margin-bottom: px2rem(24px * 2);
+                        >div {
+                            display: table-cell;
+                            position: relative;
+                            width: 38%;
+                        }
                     }
-                }
-                text-align: right;
-                .dept-name {
-                    >div {
+                    .deptline {
                         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(16px * 2);
-                    &[datatype='0'] {
-                        margin-bottom: px2rem(10px * 2);
+                        width: 8%;
+                        height: 1px;
+                        right: 0;
+                        top: 50%;
                     }
-                    // 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;
+                    .dept-list {
+                        display: table-cell;
+                        padding-left: px2rem(20px * 2);
+                        .leftline {
+                            top: px2rem(50px);
+                            bottom: px2rem(50px);
+                        }
                     }
-                    &[datatype='2'] {
-                        background-image: url('../../assets/card-bg/bg_xbbm@2x.png');
-                        color: #fff75b;
+                    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(16px * 2);
+                        &[datatype='0'] {
+                            margin-bottom: px2rem(10px * 2);
+                        }
+                        // margin-bottom: px2rem(10px * 2);
                     }
-                    img {
-                        width: px2rem(18px * 2);
-                        height: px2rem(18px * 2);
-                        vertical-align: middle;
-                        margin-right: px2rem(9px * 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);
+            &-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;
+                    .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;
+                        }
                     }
                 }
             }
-        }
-        &-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%;
+            &-bg-emergency-linkage {
+                // top: px2rem(482px + 83px);
+                // left: px2rem(521px);
+                margin-top: px2rem(21px * 2);
+                .linkage-chain-container {
                     display: flex;
-                    flex-direction: column;
+                    flex-wrap: wrap;
                     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 {
+                    .linkage-item {
+                        width: 50%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
                         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;
+                        cursor: pointer;
+                        img {
+                            width: px2rem(117px * 2);
+                            height: px2rem(102px * 2);
                         }
-                        &::before {
-                            border-top: px2rem(24px * 2) solid #3db3ea;
-                        }
-                        &::after {
-                            bottom: 0;
-                            border-bottom: px2rem(24px * 2) solid #3db3ea;
+                        span {
+                            margin-top: px2rem(10px * 2);
+                            margin-bottom: px2rem(10px * 2);
+                            color: #87baf8;
                         }
                     }
-                    &.log-item-3,
-                    &.log-item-1 {
+                }
+            }
+            &-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 {
-                            left: unset;
-                            right: 0;
-                            text-align: left;
+                            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: left;
+                                justify-content: right;
+                                display: flex;
+                                overflow: hidden;
+                                &:last-child {
+                                    font-size: px2rem(16px * 2);
+                                }
                             }
                         }
                         .log-time {
-                            left: unset;
-                            right: 50%;
+                            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: 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;
+                            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: unset;
-                                right: 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: unset;
-                                left: px2rem(-18px * 2);
+                                right: px2rem(-18px * 2);
+                                position: absolute;
+                                border-left: px2rem(18px * 2) solid transparent;
+                                border-right: px2rem(18px * 2) solid transparent;
                             }
                             &::before {
-                                border-top-color: #09b283;
+                                border-top: px2rem(24px * 2) solid #3db3ea;
                             }
                             &::after {
-                                border-bottom-color: #09b283;
+                                bottom: 0;
+                                border-bottom: px2rem(24px * 2) solid #3db3ea;
                             }
                         }
-                    }
-                    &.log-item-3 {
-                        .log-time {
-                            background-color: #eaa33f;
-                            &::before {
-                                border-top-color: #eaa33f;
+                        &.log-item-3,
+                        &.log-item-1 {
+                            .log-label {
+                                left: unset;
+                                right: 0;
+                                text-align: left;
+                                &>span {
+                                    justify-content: left;
+                                }
                             }
-                            &::after {
-                                border-bottom-color: #eaa33f;
+                            .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-2 {
-                        .log-time {
-                            background-color: #c172f9;
-                            &::before {
-                                border-top-color: #c172f9;
+                        &.log-item-3 {
+                            .log-time {
+                                background-color: #eaa33f;
+                                &::before {
+                                    border-top-color: #eaa33f;
+                                }
+                                &::after {
+                                    border-bottom-color: #eaa33f;
+                                }
                             }
-                            &::after {
-                                border-bottom-color: #c172f9;
+                        }
+                        &.log-item-2 {
+                            .log-time {
+                                background-color: #c172f9;
+                                &::before {
+                                    border-top-color: #c172f9;
+                                }
+                                &::after {
+                                    border-bottom-color: #c172f9;
+                                }
                             }
                         }
                     }
-                }
-                .pitem1 {
-                    .ptime {
-                        background-image: url("../../assets/card-bg/blue@2x.png") !important;
-                    }
-                }
-                .pitem2 {
-                    .ptime {
-                        background-image: url("../../assets/card-bg/red@2x.png") !important;
-                    }
-                }
-                .pitem3 {
-                    .ptime {
-                        background-image: url("../../assets/card-bg/yellow@2x.png") !important;
-                    }
-                }
-                .pitem {
-                    position: relative;
-                    .pline {
-                        position: absolute;
-                        width: px2rem(14px * 2);
-                        height: 100%;
-                        background: #112692;
-                        left: px2rem(17px * 2);
-                        top: 0;
-                        z-index: 0;
-                        border: none;
+                    .pitem1 {
+                        .ptime {
+                            background-image: url("../../assets/card-bg/blue@2x.png") !important;
+                        }
                     }
-                    .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%;
+                    .pitem2 {
+                        .ptime {
+                            background-image: url("../../assets/card-bg/red@2x.png") !important;
+                        }
                     }
-                    &[datatype='last'] {
-                        .pline {
-                            display: none;
+                    .pitem3 {
+                        .ptime {
+                            background-image: url("../../assets/card-bg/yellow@2x.png") !important;
                         }
                     }
-                    .pcontent {
-                        min-height: px2rem(48px * 2 + 158px *2);
-                        z-index: 1;
+                    .pitem {
                         position: relative;
-                        font-size: px2rem(18px * 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);
+                        .pline {
+                            position: absolute;
+                            width: px2rem(14px * 2);
+                            height: 100%;
+                            background: #112692;
+                            left: px2rem(17px * 2);
+                            top: 0;
+                            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;
                             }
                         }
-                        .exdesc {
-                            opacity: 0.6;
-                            font-size: px2rem(16px * 2);
+                        .pcontent {
+                            min-height: px2rem(48px * 2 + 158px *2);
+                            z-index: 1;
+                            position: relative;
+                            font-size: px2rem(18px * 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(254px * 2);
-                            height: px2rem(48px * 2);
-                            background-repeat: no-repeat;
-                            background-size: 100% 100%;
-                            font-family: DIN Alternate, DIN Alternate-Bold;
-                            line-height: px2rem(48px * 2);
-                            text-align: right;
-                            font-size: px2rem(24px * 2);
-                            font-weight: 700;
-                            span {
-                                padding-right: px2rem(24px * 2);
+                            .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(16px * 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(254px * 2);
+                                height: px2rem(48px * 2);
+                                background-repeat: no-repeat;
+                                background-size: 100% 100%;
+                                font-family: DIN Alternate, DIN Alternate-Bold;
+                                line-height: px2rem(48px * 2);
+                                text-align: right;
+                                font-size: px2rem(24px * 2);
+                                font-weight: 700;
+                                span {
+                                    padding-right: px2rem(24px * 2);
+                                }
                             }
                         }
                     }
                 }
             }
-        }
-        &-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);
+            &-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;
+                    }
                 }
-                &: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%;
+                        }
+                    }
                 }
             }
-            .live-container {
-                overflow-x: hidden;
-                overflow-y: auto;
-                >div {
-                    // width: calc(px2rem(419px) + 10px);
-                    height: 100%;
-                    display: flex;
-                    transition: transform 0.5s;
+            &-bg-emergency-plan {
+                font-size: px2rem(18px * 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);
                 }
-                .live-item {
-                    width: px2rem(419px);
-                    // height: px2rem(285px);
+                .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-right: 10px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    flex: 1;
-                    img,
-                    video {
-                        max-width: 100%;
-                        max-height: 100%;
+                    margin-top: px2rem(-35px * 2);
+                    right: px2rem(5px * 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);
+                    color: #39d6fe;
+                    img {
+                        width: px2rem(15px * 2);
+                        height: px2rem(15px * 2);
+                        vertical-align: middle;
+                    }
+                }
+                .content {
+                    margin-top: px2rem(20px * 2);
+                    max-height: px2rem(250px * 2);
+                    overflow-y: auto;
+                    div {
+                        margin-bottom: px2rem(25px * 2);
                     }
                 }
             }
+            &-bg-accident-scene {}
         }
-        &-bg-accident-scene {}
-    }
-}
+    }