<template>
  <div class="alarmPage">
    <div class="top-max-big-box">
      <!-- 预案报警 -->
      <p class="header" v-if="form.warnType==4">{{form.eventName}} - {{form.riskPlanLevel
        ==1?'低风险':(form.riskPlanLevel ==2?'中风险':(form.riskPlanLevel ==3?'较高风险':(form.riskPlanLevel ==4?'高风险':'')))}}
      </p>
      <!-- 化学品 -->
      <p class="header_tow" v-if="form.warnType==1">
        {{form.chemicalWarnType == 1?'化学品违规带离':
        (form.chemicalWarnType == 2?'化学品超时未归还':
        (form.chemicalWarnType == 3?'化学品过期':
        (form.chemicalWarnType == 4?'化学品即将过期':
        (form.chemicalWarnType == 5?'化学品超期未入库':
        (form.chemicalWarnType == 6?'化学品业务操作超时':
        '')))))}}
      </p>
      <!-- 气瓶 -->
      <p class="header_three" v-if="form.warnType==2">{{form.warnContent}}</p>
      <!-- 算法识别 -->
      <p class="header_four" v-if="form.warnType==3">
        {{form.algorithmType == 1?'未穿戴护目镜':(
        form.algorithmType == 2?'未穿戴实验服':(
        form.algorithmType == 3?'未穿戴手套':(
        form.algorithmType == 4?'倒地预警':'')))}}
      </p>
    </div>
    <div class="center-max-big-box">
      <!--监控视屏-->
      <!--海康-->
      <div class="video-max-box" style="padding-top:10px;" v-if="buttonType&&!fullVideoType">
        <H5PlayerVideo class="video-box" v-for="(item,index) in videoList" :key="index"
                       :videoProps="item" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></H5PlayerVideo>
      </div>
      <!-- 预案报警 -->
      <div class="site" v-if="form.warnType==4">
        <img :src="imagesUrl('commonality/icon_wtzg_xx.png')"/>
        <p>{{form.subName}}</p>
        <p></p>
        <p>
          {{form.labSubRelInfoRelVo.buildName}}{{form.labSubRelInfoRelVo.floorName}}{{form.labSubRelInfoRelVo.roomNum}}
        </p>
      </div>
      <!-- 化学品 -->
      <div class="site_tow" v-if="form.warnType==1 || form.warnType==2 || form.warnType==3">
        <div class="site_tow_t">
          <img :src="imagesUrl('commonality/icon_hxpyj_sj.png')"/>
          <p>{{form.warnTime}}</p>
        </div>
        <div class="site_tow_b">
          <img :src="imagesUrl('commonality/icon_wtzg_xx.png')"/>
          <p>{{form.subName}}</p>
          <p></p>
          <p>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</p>
        </div>
      </div>
      <!-- 预案报警 -->
      <div class="basics" v-if="form.warnType==4">
        <div class="small_title">
          <p></p>
          <p>风险概况</p>
        </div>
        <div class="basics_li" style="margin-top:20px;">
          <p>发生时间：</p>
          <!--<p v-if="form.days>0" style="position: absolute;right: 0;top:-33px;">+{{form.days}}</p>-->
          <p v-if="form.days>0" style="position: absolute;right: 0;top:-33px;"></p>
          <p style="padding-right:10px;">{{form.eventStartTime}}{{form.eventEndTime?' - '+form.eventEndTime:''}}
          </p>
        </div>
        <div class="basics_li">
          <p>持续时间：</p>
          <p>{{form.riskDuration?form.riskDuration:'-'}}分钟</p>
        </div>
        <div class="basics_li">
          <p>风险响应人员：</p>
          <p>{{form.handledPerson?form.handledPerson:'-'}}</p>
        </div>
        <div class="basics_li">
          <p>实验室内人员：</p>
          <p>{{form.internalPerson?form.internalPerson:'-'}}</p>
        </div>
      </div>
      <!-- 化学品 化学品违规带离/化学品超时未归还 -->
      <div class="basics" v-if="form.warnType==1 && (form.chemicalWarnType ==1 || form.chemicalWarnType ==2)">
        <div class="small_title">
          <p></p>
          <p>化学品信息</p>
        </div>
        <div class="basics_li" style="margin-top:20px;">
          <p>{{form.chemicalName}}</p>
          <p></p>
        </div>
        <div class="basics_li">
          <p>存放位置：</p>
          <p>{{form.position}}</p>
        </div>
        <div class="basics_li">
          <p>化学品余量：</p>
          <p>{{form.surplus}}</p>
        </div>
        <div class="basics_li" v-if="form.chemicalWarnType==2">
          <p>申领人：</p>
          <p>{{form.collectUserName}}</p>
        </div>
        <div class="basics_li" v-if="form.chemicalWarnType==2">
          <p>申领时间：</p>
          <p>{{form.collectTime}}</p>
        </div>
      </div>
      <!-- 超期未入库 -->
      <div class="basics" v-if="form.warnType==1 && form.chemicalWarnType ==5">
        <div class="small_title">
          <p></p>
          <p>化学品信息</p>
        </div>
        <div v-for="(item,index) in form.chemicalOverdueStockList" :key="index">
          <div class="basics_li" style="margin-top:20px;">
            <p>{{item.chemicalName}}</p>
            <p></p>
          </div>
          <div class="basics_li">
            <p>CAS号：</p>
            <p>{{item.casNum}}</p>
          </div>
          <div class="basics_li">
            <p>化学品类型：</p>
            <p>{{item.chemicalCategory}}</p>
          </div>
        </div>
      </div>
      <!-- 过期/即将过期 -->
      <div class="basics" v-if="form.warnType==1 && (form.chemicalWarnType ==3 || form.chemicalWarnType ==4)">
        <div class="small_title">
          <p></p>
          <p>化学品信息</p>
        </div>
        <div v-for="(item,index) in form.chemicalExpireList" :key="index">
          <div class="basics_li" style="margin-top:20px;">
            <p>{{item.chemicalName}}</p>
            <p></p>
          </div>
          <div class="basics_li">
            <p>存放位置：</p>
            <p>{{item.position}}</p>
          </div>
          <div class="basics_li">
            <p>化学品余量：</p>
            <p>{{item.surplus}}</p>
          </div>
          <div class="basics_li">
            <p>过期时间：</p>
            <p>{{item.expireTime}}</p>
          </div>
        </div>
      </div>
      <!-- 过期/即将过期 -->
      <div class="basics" v-if="form.warnType==1 && form.chemicalWarnType ==6">
        <div class="small_title">
          <p></p>
          <p>操作信息</p>
        </div>
        <div class="basics_li" style="margin-top:20px;">
          <p>{{form.position}}</p>
          <p></p>
        </div>
        <div class="basics_li">
          <p>操作人：</p>
          <p>{{form.operationPerson}}</p>
        </div>
        <div class="basics_li">
          <p>操作类型：</p>
          <p>{{form.alarmType}}</p>
        </div>
      </div>
      <!-- 气瓶 -->
      <div class="basics" v-if="form.warnType==2">
        <div class="small_title">
          <p></p>
          <p>气瓶信息</p>
        </div>
        <div class="basics_li" style="margin-top:20px;">
          <p>{{form.name}}</p>
          <p></p>
        </div>
        <div class="basics_li">
          <p>气体余量：</p>
          <p>{{form.margin}}</p>
        </div>
        <div class="basics_li">
          <p>气瓶规格：</p>
          <p>{{form.specification}}</p>
        </div>
        <div class="basics_li">
          <p>所有人：</p>
          <p>{{form.holder}}</p>
        </div>
        <div class="basics_li">
          <p>入库时间：</p>
          <p>{{form.entryTime}}</p>
        </div>
        <div class="basics_li" v-if="form.chemicalWarnType==2">
          <p>申领人：</p>
          <p>{{form.applyUser}}</p>
        </div>
        <div class="basics_li" v-if="form.chemicalWarnType==2">
          <p>申领时间：</p>
          <p>{{form.applyTime}}</p>
        </div>
      </div>
      <!-- 通知短信 -->
      <div class="note"
            v-if="(form.warnType==4 && form.userLogVoList[0]) || (form.warnType==3 && form.userLogVoList[0]) || (form.warnType==1 && form.chemicalWarnType ==6 && form.userLogVoList[0])">
        <div class="small_title">
          <p></p>
          <p>报警通知</p>
        </div>
        <div class="note_li-box" style="margin-top:20px;" v-for="(item,index) in form.userLogVoList" :key="index">
          <p class="note-li-r-1">{{item.name}}</p>
          <div class="note_li_r-2" v-if="item.isSuccess==1">
            <img :src="imagesUrl('commonality/icon_yjxx_ytz.png')"/>
            <p>{{item.alarmType==1?'电话':'短信'}}已通知</p>
          </div>
        </div>
      </div>
      <!-- 语音播报 预案/算法 -->
      <div class="note" v-if="form.warnType==4 || form.warnType==3">
        <div class="small_title">
          <p></p>
          <p>预警通知</p>
        </div>
        <div class="note_li" style="margin-top:20px;">
          <p>语音播报</p>
          <div class="note_li_r"><img :src="imagesUrl('commonality/icon_yjxx_ytz.png')"/>
            <p>已通知</p>
          </div>
        </div>
      </div>
      <!-- 声光报警通知 化学品/气瓶 -->
      <div class="note" v-if="(form.warnType==1 || form.warnType==2) && form.chemicalWarnType==1">
        <div class="small_title">
          <p></p>
          <p>预警通知</p>
        </div>
        <div class="note_li" style="margin-top:20px;">
          <p>声光报警通知</p>
          <div class="note_li_r"><img
            :src="imagesUrl('commonality/icon_yjxx_ytz.png')"/>
            <p>{{form.voiceBroadcast == 1?'已通知':''}}</p>
          </div>
        </div>
      </div>
      <!-- 报警抓拍-视频 -->
      <div v-if="(form.warnType==1&&form.chemicalWarnType==1&&videoType) || (form.warnType!=1&&videoType)"
            class="picture">
        <div class="small_title" style="border-bottom: none !important;">
          <p></p>
          <p>报警抓拍</p>
          <!--抓拍视屏-->
          <!--海康-->
        </div>
        <div class="video-max-box" v-if="buttonPropsType">
          <H5PlayerVideoTime :videoProps="videoProps"></H5PlayerVideoTime>
        </div>
      </div>
      <!-- 报警抓拍-图片 -->
      <div v-if="snapImg[0]&&!videoType"
            class="picture">
        <div class="small_title" style="border-bottom: none !important;">
          <p></p>
          <p>报警抓拍</p>
        </div>
        <div class="picture_b">
          <div class="img">
            <img v-for="(item,index) in snapImg" @click="lockImg(snapImg)" :key="index"
                 :src="item"/>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-max-big-box" v-if="warnType == 4 && alarmOutType">
      <p class="left-button-p" @click="overWarn()">结束预案</p>
      <p class="right-button-p" @click="voiceButton()">语音广播</p>
    </div>
    <div class="bottom-max-big-box" v-if="warnType == 4 && !alarmOutType">
      <p class="center-text">预案已结束</p>
    </div>
    <voiceBroadcast :trumpetList="trumpetList" v-show="voiceType"></voiceBroadcast>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
    <fullH5PlayerVideoTime v-if="fullVideoTypeBack" :fullVideoProps="fullVideoPropsBack"></fullH5PlayerVideoTime>
  </div>
</template>
<script>
  import H5PlayerVideo from '@/components/H5PlayerVideo.vue';
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo.vue';
  import H5PlayerVideoTime from '@/components/H5PlayerVideoTime/H5PlayerVideoTime.vue';
  import fullH5PlayerVideoTime from '@/components/H5PlayerVideoTime/fullH5PlayerVideo.vue';
  import voiceBroadcast from '@/components/voiceBroadcast/voiceBroadcast.vue';
  import {iotCameraFindByCondition, iotCameraGetPlaybackURLs,systemMineWarningNoticeDetail,
    laboratoryEventFindByEventId,iotAppSpeakerFindHorn,laboratoryPlanCloseRiskPlan } from "@/api/index";
  import { Toast,Dialog } from 'vant';
  export default {
    name: 'alarmPage',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo,
      H5PlayerVideoTime,
      fullH5PlayerVideoTime,
      voiceBroadcast
    },
    data() {
      return {
        //列表请求参数
        getData: {
          pageNum: 1,
          pageSize: 20,
        },
        total: 0,
        warningId: null,
        warnType: null,
        form: {
          userLogVoList:[],
          recordVideo:[],
        },
        currentTime: '',
        timeStatus: false,
        //报警预案视频相关
        webViewUrl:'',
        videoType: false,
        //图片相关
        snapImg:[],
        //监控视频
        videoList: [],
        buttonType: false,
        width: null,
        height: null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
        //回放全屏视频参数
        fullVideoPropsBack:{},
        fullVideoTypeBack:false,
        videoProps:{},
        buttonPropsType:false,
        alarmOutType:false,
        //喇叭数据
        trumpetList:[],
        voiceType:false,
      }
    },
    created() {
      const ratio = 0.5625;
      const winWidth = window.innerWidth;
      let width = parseInt(winWidth - 40);
      let height = parseInt(this.accMul(width, ratio));
      this.$set(this, 'width', width);
      this.$set(this, 'height', height)
    },
    mounted() {
      this.initialize();
    },
    methods: {
      initialize() {
        let alarmUrl = localStorage.getItem('alarmUrl');
        let list = alarmUrl.split("?")[1].split("&");
        let codeData = {};
        list.forEach((item) => {
          codeData[item.split("=")[0]] = item.split("=")[1];
        });
        if (codeData.noticeId) {
          this.$set(this, 'warningId', codeData.noticeId);
          this.$set(this, 'warnType', 1);
          this.systemMineWarningNoticeDetail();
        } else if (codeData.eventId) {
          this.$set(this, 'warningId', codeData.eventId);
          this.$set(this, 'warnType', 4);
          this.laboratoryEventFindByEventId();
        } else if (codeData.id) {
          this.$set(this, 'warningId', codeData.id);
          this.$set(this, 'warnType', 4);
          this.laboratoryEventFindByEventId();
        }
      },
      //预警记录-非预案详情
      systemMineWarningNoticeDetail() {
        let obj = {
          id: this.warningId
        };
        systemMineWarningNoticeDetail(obj).then(response => {
          if (response.data.warnType == 3) {
            document.title = '算法识别预警信息';
          } else if (response.data.warnType == 1) {
            document.title = '化学品预警信息';
          } else if (response.data.warnType == 2) {
            document.title = '气瓶预警信息';
          }
          let list = [];
          response.data.warningNoticeLogVoList.forEach((item) => {
            let minList = item.noticePreson.split(',');
            minList.forEach((minItem) => {
              list.push({
                name: minItem,
                alarmType: item.alarmType,
                isSuccess: 1,
              })
            })
          })
          response.data.userLogVoList = list;
          response.data.recordVideo = response.data.recordVideo ? response.data.recordVideo : [];
          this.$set(this, 'form', response.data);
          this.$set(this, 'snapImg', response.data.snapImg ? response.data.snapImg : []);
          //录像数据
          if (response.data.recordVideo) {
            let newData = JSON.parse(response.data.recordVideo);
            if (!newData.endTime) {
              this.$set(this, 'webViewUrl', '');
              this.$set(this, 'videoType', false);
              return
            }else{
              this.$set(this, 'videoType', true);
              this.warningVideo(newData.cameraIndexCode,newData.startTime,newData.endTime);
            }
          } else {
            this.$set(this, 'webViewUrl', '');
            this.$set(this, 'videoType', false);
          }
          //监控数据
          this.subVideo();
        })
      },
      //预案详情
      laboratoryEventFindByEventId() {
        let obj = {
          eventId: this.warningId
        };
        laboratoryEventFindByEventId(obj).then(response => {
          document.title = '预案报警信息';
          response.data.warnType = 4;
          response.data.eventStartTime = this.parseTime(response.data.eventStartTime, "{y}-{m}-{d} {h}:{i}:{s}");
          response.data.eventEndTime = response.data.eventEndTime ? this.parseTime(response.data.eventEndTime, "{h}:{i}:{s}") : null;
          if (response.data.recordPhoto) {
            response.data.recordPhoto = response.data.recordPhoto.split(',')
          }
          let list = [];
          response.data.messageLogVoList.forEach((item) => {
            let minList = item.nickRoleName.split(',');
            minList.forEach((minItem) => {
              list.push({
                name: minItem,
                alarmType: item.alarmType,
                isSuccess: 1,
              })
            })
          })
          response.data.userLogVoList = list;
          response.data.recordVideo = response.data.recordVideo ? response.data.recordVideo : [];
          this.$set(this, 'form', response.data);
          this.$set(this, 'snapImg', response.data.snapImg ? response.data.snapImg : []);
          //录像数据
          if (response.data.recordVideo) {
            if (response.data.recordVideo[0]) {
              let newData = JSON.parse(response.data.recordVideo);
              if (!newData.endTime) {
                this.$set(this, 'webViewUrl', '');
                this.$set(this, 'videoType', false);
              }else{
                this.$set(this, 'videoType', true);
                this.warningVideo(newData.cameraIndexCode,newData.startTime,newData.endTime);
              }
            } else {
              this.$set(this, 'webViewUrl', '');
              this.$set(this, 'videoType', false);
            }
          } else {
            this.$set(this, 'webViewUrl', '');
            this.$set(this, 'videoType', false);
          }
          //查询实验室喇叭数据
          this.iotAppSpeakerFindHorn();
          //监控数据
          this.subVideo();
          if(response.data.eventEndTime){
            this.$set(this,'alarmOutType',false);
          }else{
            this.$set(this,'alarmOutType',true);
          }
        })
      },
      overWarn(){
        Dialog.confirm({
          title: '提示',
          message: '是否确认结束预案?',
        }).then(() => {
            laboratoryPlanCloseRiskPlan({eventId:this.warningId}).then(response => {
              this.$set(this,'alarmOutType',false);
            });
          })
          .catch(() => {
          });
      },
      voiceButton(){
        this.$set(this,'voiceType',!this.voiceType);
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode) {
        this.$set(this, 'fullVideoProps', {cameraIndexCode: cameraIndexCode});
        this.$set(this, 'fullVideoType', true);
      },
      //全屏关闭-开启轮播
      outFullScreen() {
        this.$set(this, 'fullVideoType', false);
        this.$set(this, 'fullVideoProps', {});
      },
      //全屏开启-关闭轮播
      stopTimeBack(videoProps){
        this.$set(this,'fullVideoPropsBack',videoProps);
        this.$set(this,'fullVideoTypeBack',true);
        this.$set(this,'videoType',0);
      },
      //全屏关闭-开启轮播
      outFullScreenBack(){
        this.$set(this,'fullVideoTypeBack',false);
        this.$set(this,'fullVideoPropsBack',{});
        this.$set(this,'videoType',1);
      },
      //实验室-查询喇叭列表
      iotAppSpeakerFindHorn(){
        let self = this;
        let obj = {
          subId: this.form.subId,
          floorId: this.form.labSubRelInfoRelVo.floorId,
        }
        iotAppSpeakerFindHorn(obj).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            response.data[i].type = false;
          }
          this.$set(this, 'trumpetList', response.data)
        })
      },
      //实验室监控
      subVideo() {
        let self = this;
        // type 1.楼栋 2.楼层 3.楼道 4.实验室 5.楼道+实验室
        let obj = {
          page: '1',
          pageSize: '4',
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          streamType: 1,
          passageway: this.form.labSubRelInfoRelVo.floorId,
          subIds: [this.form.subId],
          source: 5,
        };
        iotCameraFindByCondition(obj).then(response => {
          let list = [];
          for (let i = 0; i < response.data.records.length; i++) {
            list.push(
              {
                width: this.width, //(宽度:非必传-默认600)
                height: this.height, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
                cameraIndexCode: response.data.records[i].deviceNo,
              }
            )
          }
          this.$set(this, 'videoList', list)
          this.$nextTick(() => {
            setTimeout(function () {
              self.$set(self, 'buttonType', true);
            }, 1000);
          })
        });
      },
      //视频回放
      warningVideo(cameraIndexCode,startTime,endTime){
        let self = this;
        //视频回放流地址
        let obj = {
          cameraIndexCode :cameraIndexCode, //摄像头编号
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          startTime:startTime,    //开始时间 2025-03-07 09:29:00
          endTime :endTime,    //结束时间
          streamType:0,
        }
        iotCameraGetPlaybackURLs(obj).then(response => {
          let newObj = {
            width: this.width, //(宽度:非必传-默认600)
            height: this.height, //(高度:非必传-默认338)
            url: response.data,
            cameraIndexCode: obj.cameraIndexCode,
          }
          this.$set(this,'videoProps',newObj);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'buttonPropsType', true);
            },1000);
          })
        })
      },
      //乘法
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
        try {
          m += s1.split(".")[1].length
        } catch (e) {
        }
        try {
          m += s2.split(".")[1].length
        } catch (e) {
        }
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
      },
      imagesUrl(imgUrl) {
        return 'https://zj-wechat.oss-cn-beijing.aliyuncs.com/xcx_images/xcx_v3/' + imgUrl
      },
    },
  }
</script>
<style scoped lang="scss">
  .alarmPage {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: #f5f5f5;
    overflow: hidden;
    .top-max-big-box {
      height: 80px;
      .header {
        width: 750px;
        height: 80px;
        font-size: 28px;
        font-weight: 400;
        color: #D40000;
        line-height: 80px;
        text-align: center;
        background: rgba(212, 0, 0, 0.2);
      }

      .header_tow {
        width: 750px;
        height: 80px;
        font-size: 28px;
        font-weight: 400;
        color: #FF4800;
        line-height: 80px;
        text-align: center;
        background: rgba(255, 72, 0, 0.2);
      }

      .header_three {
        width: 750px;
        height: 80px;
        font-size: 28px;
        font-weight: 400;
        color: #FF4800;
        line-height: 80px;
        text-align: center;
        background: rgba(255, 72, 0, 0.2);
      }
      .header_four {
        width: 750px;
        height: 80px;
        font-size: 28px;
        font-weight: 400;
        color: #FFA34E;
        line-height: 80px;
        text-align: center;
        background: rgba(255, 163, 78, 0.2);
      }
    }
    .center-max-big-box {
      flex: 1;
      overflow-y: scroll;
      overflow-x: hidden;
      padding-bottom:20px;
      .video-max-box{
        .video-box {
          margin: 0 auto 10px;
        }
      }
      .red_color {
        color: #D40000;
        border: 1px solid #D40000;
      }

      .orange_color {
        color: #FF4800;
        border: 1px solid #FF4800;
      }

      .yellow_color {
        color: #FFA34E;
        border: 1px solid #FFA34E;
      }

      .info-max-box {
        flex: 1;
        overflow: scroll;
      }

      .site {
        padding: 26px;
        background: #FFFFFF;
        display: flex;
        border-radius: 20px 20px 20px 20px;
        margin: 20px 30px;

        >img {
          width: 30px;
          height: 30px;
          margin: auto 22px auto 30px;
        }

        >p:nth-of-type(1) {
          font-size: 28px;
          width:200px;
          color: #333333;
          line-height: 32px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }

        >p:nth-of-type(2) {
          display: inline-block;
          width: 2px;
          background: #E0E0E0;
          margin: 0 24px;
        }

        >p:nth-of-type(3) {
          font-size: 28px;
          flex: 1;
          color: #333333;
          line-height: 32px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
      }

      .site_tow {
        width: 690px;
        height: 170px;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        margin: 20px 30px;
        overflow: hidden;

        .site_tow_t {
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 32px;

          >img {
            width: 30px;
            height: 30px;
            margin-right: 22px;
            margin-left: 30px;
          }

          >p:nth-of-type(1) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }
        }

        .site_tow_b {
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 20px;

          >img {
            width: 30px;
            height: 30px;
            margin-right: 22px;
            margin-left: 30px;
          }

          >p:nth-of-type(1) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }

          >p:nth-of-type(2) {
            display: inline-block;
            width: 2px;
            height: 20px;
            background: #E0E0E0;
            margin: 0 24px 0 28px;
          }

          >p:nth-of-type(3) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }
        }

      }

      .small_title {
        height: 90px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #E0E0E0;

        >p:nth-of-type(1) {
          display: inline-block;
          width: 4px;
          height: 30px;
          background: #0183FA;
          margin: 0 22px 0 28px;
        }

        >p:nth-of-type(2) {
          font-size: 30px;
          font-weight: 400;
          color: #333333;
          line-height: 30px;
        }
      }

      .basics {
        margin-left: 30px;
        width: 690px;
        height: auto;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        padding-bottom: 16px;
        box-sizing: border-box;

        .basics_li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 30px;
          position: relative;

          >p:nth-child(1) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 60px;
          }

          >p:nth-child(2) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 60px;
            flex: 1;
            text-align: right;
          }
          >p:nth-child(3) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 60px;
            flex: 1;
            text-align: right;
          }
        }
      }

      .note {
        margin-left: 30px;
        margin-top: 20px;
        width: 690px;
        height: auto;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        padding-bottom: 16px;
        box-sizing: border-box;
        .note_li-box{
          display: flex;
          margin: 0 30px;
          .note-li-r-1{
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 60px;
            flex: 1 !important;;
          }
          .note_li_r-2 {
            width:190px;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            >img {
              width: 28px;
              height: 28px;
              margin-right: 10px;
            }

            font-size: 28px;
            font-weight: 400;
            color: #0183FA;
            line-height: 60px;

          }
        }
        .note_li {
          display: flex;
          justify-content: space-between;
          margin: 0 30px;

          >p:nth-of-type(1) {
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 60px;
          }

          .note_li_r {
            width:140px;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            >img {
              width: 28px;
              height: 28px;
              margin-right: 10px;
            }

            font-size: 28px;
            font-weight: 400;
            color: #0183FA;
            line-height: 60px;

          }
        }
      }

      .picture {
        margin-left: 30px;
        width: 690px;
        height: auto;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        margin-top: 20px;

        .picture_b {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          padding: 40px 30px 10px;
          box-sizing: border-box;

          .videoOpacity1 {
            opacity: 1;
          }

          .videoOpacity0 {
            opacity: 0;
          }

          .video {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 10px 10px 10px 10px;
            margin-right: 38px;
            margin-bottom: 10px;

            .video_t {
              width: 150px;
              height: 150px;
              border-radius: 10px 10px 10px 10px;
              position: absolute;
            }

            .video_b {
              width: 40px;
              height: 40px;
              position: absolute;
              left: 55px;
              top: 55px;
            }
          }

          .img {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            >img {
              width: 180px;
              height: 180px;
              border-radius: 10px 10px 10px 10px;
              margin-right: 38px;
              margin-bottom: 20px;
            }

            >img:nth-child(3n+3) {
              margin-right: 0;
            }
          }

        }
      }

      .bottom_btn {
        width: 690px;
        height: 90px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #0183FA;
        font-size: 30px;
        font-weight: 400;
        color: #0183FA;
        line-height: 90px;
        text-align: center;
        background: #F5F5F5;
        margin: 90px 30px 30px;

      }
    }
    .bottom-max-big-box {
      height: 100px;
      background: #fff;
      display: flex;
      border-top:1px solid #dedede;
      .left-button-p{
        color:#fff;
        background-color: #FFA54F;
        flex:1;
        height:80px;
        line-height:82px;
        border-radius:6px;
        font-size:30px;
        margin:10px 0 10px 10px;
      }
      .right-button-p{
        color:#fff;
        background-color: #0183fa;
        flex:1;
        height:80px;
        line-height:82px;
        border-radius:6px;
        font-size:30px;
        margin:10px 10px 10px 10px;
      }
      .center-text{
        flex:1;
        line-height: 100px;
        text-align: center;
        font-size:30px;
        color:#999;
      }
    }
  }
</style>
