FE-V2-PC/src/views/safetyCheck/laboratorySelfTest/selfInspectionTask/infoDialog.vue

<template>
  <el-dialog class="safetyHazard-info-dialog-box" @close="outDialog"
             :title="infoDialogTitle" :visible.sync="infoDialogType" v-if="infoDialogType"
             width="1184px" append-to-body>
    <div class="info-dialog-title-box">
      <div class="info-dialog-for-title-box" @click="checkTitleButton('info')" :class="infoDialogCheckIndex == 'info'?'info-dialog-for-check':''">
        <p>隐患检查</p>
        <p></p>
      </div>
      <div class="info-dialog-for-title-box" :class="infoDialogCheckIndex == index?'info-dialog-for-check':''"
           @click="checkTitleButton(index)" v-for="(item,index) in infoDialogList" :key="index">
        <p>{{item.name}}</p>
        <p></p>
      </div>
      <div class="info-dialog-for-title-box" v-if="addFormType == 1 || addFormType == 2" @click="checkTitleButton('add')" :class="infoDialogCheckIndex == 'add'?'info-dialog-for-check':''">
        <p>{{addFormTitle}}</p>
        <p></p>
      </div>
    </div>
    <div class="info-dialog-content-box scrollbar-box">
      <div class="info-dialog-content-info" v-if="infoDialogCheckIndex == 'info' && imgDocumentType == 0">
        <div class="text-box-box">
          <p>计划标题</p>
          <p>{{infoDialogData.data1}}</p>
        </div>
        <div class="text-box-two-box">
          <div>
            <p>检查类型</p>
            <p>{{infoDialogData.data2}}</p>
          </div>
          <div>
            <p>任务周期</p>
            <p>{{infoDialogData.data3}}</p>
          </div>
        </div>
        <div class="text-box-two-box">
          <div>
            <p>学院</p>
            <p>{{infoDialogData.data4}}</p>
          </div>
          <div>
            <p>实验室</p>
            <p>{{infoDialogData.data5}}</p>
          </div>
        </div>
        <div class="text-box-two-box">
          <div>
            <p>楼栋</p>
            <p>{{infoDialogData.data6}}</p>
          </div>
        </div>
        <div class="text-box-box">
          <p>检查要求</p>
          <p>{{infoDialogData.data7}}</p>
        </div>
        <div class="text-box-two-box">
          <div>
            <p>检查结果</p>
            <p>{{infoDialogData.data8}}</p>
          </div>
          <div>
            <p>整改期限</p>
            <p>{{infoDialogData.data9}}</p>
          </div>
        </div>
        <div class="button-box">
          <p>整改通知书?整改告知书</p>
          <p class="inquire-button-one" @click="lookDocument">查看</p>
          <p class="add-button-one-90">下载</p>
        </div>
        <div class="text-box-two-box">
          <div>
            <p>检查者</p>
            <p>{{infoDialogData.data10}}</p>
          </div>
          <div>
            <p>创建时间</p>
            <p>{{infoDialogData.data11}}</p>
          </div>
        </div>
        <div class="table-box">
          <p class="table-title-p">第1隐患项</p>
          <div class="table-min">
            <div class="left-box">
              <p></p>
              <p>检查项目</p>
              <p></p>
            </div>
            <div class="right-box text-two-box">
              <p></p>
              <p>{{infoDialogData.data12}}</p>
              <p></p>
              <p>此检查项在当前实验室累计出现 <span>{{infoDialogData.data13}}</span> 次隐患</p>
              <p></p>
            </div>
          </div>
          <div class="table-min">
            <div class="left-box">
              <p></p>
              <p>隐患描述</p>
              <p></p>
            </div>
            <div class="right-box text-box">
              <p></p>
              <p>{{infoDialogData.data14}}</p>
              <p></p>
            </div>
          </div>
          <div class="table-min">
            <div class="left-box">
              <p></p>
              <p>隐患等级</p>
              <p></p>
            </div>
            <div class="right-box text-box">
              <p></p>
              <p>{{infoDialogData.data15}}</p>
              <p></p>
            </div>
          </div>
          <div class="table-min">
            <div class="left-box">
              <p></p>
              <p>检查要点</p>
              <p></p>
            </div>
            <div class="right-box text-box">
              <p></p>
              <p>{{infoDialogData.data16}}</p>
              <p></p>
            </div>
          </div>
          <div class="table-min">
            <div class="left-box">
              <p></p>
              <p>隐患照片</p>
              <p></p>
            </div>
            <div class="right-box img-box">
              <img src="" v-for="(imgItem,index) in infoDialogData.data17" :key="index" @click="lookImg(infoDialogData.data17,index)">
            </div>
          </div>
        </div>
      </div>
      <div class="info-dialog-content-type" v-if="infoDialogCheckIndex == index && imgDocumentType == 0"
           v-for="(item,index) in infoDialogList" :key="index">
        <!--已整改-->
        <div class="has-rectification" v-if="item.rectificationType == 1">
          <div class="button-box">
            <p>整改结果</p>
            <p>{{item.dataA}}</p>
          </div>
          <div class="text-box">
            <p>整改措施</p>
            <p>{{item.dataB}}</p>
          </div>
          <div class="img-box">
            <p>整改照片</p>
            <div>
              <img :src="imgItem.url" @click="lookImg(item.lookImgList,imgIndex)"
                   v-for="(imgItem,imgIndex) in item.lookImgList" :key="imgIndex">
            </div>
          </div>
          <div class="text-box-two">
            <div>
              <p>整改人</p>
              <p>{{item.dataC}}</p>
            </div>
            <div style="margin-left:26px;">
              <p>整改时间</p>
              <p>{{item.dataD}}</p>
            </div>
          </div>
        </div>
        <!--已审核-->
        <div class="has-inspection" v-if="item.rectificationType == 2">
          <div class="type-box">
            <p>审核结果</p>
            <img v-if="item.dataE == 1" src="@/assets/ZDimages/safetyCheck/icon_zcgl_cg.png">
            <img v-else src="@/assets/ZDimages/safetyCheck/icon_zcgl_sb.png">
          </div>
          <div class="text-box">
            <p>审核意见</p>
            <p>{{item.dataF}}</p>
          </div>
          <div class="text-box-two">
            <div>
              <p>审核人</p>
              <p>{{item.dataG}}</p>
            </div>
            <div style="margin-left:26px;">
              <p>审核时间</p>
              <p>{{item.dataH}}</p>
            </div>
          </div>
          <div class="button-box">
            <p>整改报告书</p>
            <p class="inquire-button-one" @click="lookDocument">查看</p>
            <p class="add-button-one-90">下载</p>
          </div>
        </div>
      </div>
      <div class="info-dialog-content-add" v-if="infoDialogCheckIndex == 'add' && imgDocumentType == 0">
        <el-form  :model="addForm" :rules="rules" label-width="90px">
          <!--待整改-->
          <div class="stay-rectification" v-if="addFormType == 1">
            <el-form-item label="整改结果" prop="dataZ">
              <el-radio-group v-model="addForm.dataZ">
                <el-radio :label="0">已整改</el-radio>
                <el-radio :label="1">暂无法整改</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="原因描述" prop="dataX">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入原因描述"
                resize="none"
                maxlength="100"
                show-word-limit
                v-model="addForm.dataX">
              </el-input>
            </el-form-item>
            <el-form-item label="上传照片" prop="upImgList">
              <div class="for-img-box" v-for="(img,imgIndex) in addForm.upImgList" :key="imgIndex">
                <img class="for-img" :src="img.url"  @click="lookImg(addForm.upImgList,imgIndex)">
                <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
              </div>
              <el-upload
                style="display: inline-block;overflow: hidden"
                class="avatar-uploader"
                :action="uploadImgUrl"
                :show-file-list="false"
                :on-success="(res)=>handleAvatarSuccess(res,addForm)"
                :headers="headers"
                :before-upload="(res)=>beforeAvatarUpload(res,addForm)">
                <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
              </el-upload>
            </el-form-item>
            <p style="margin-left:80px;">支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
          </div>
          <!--待审核-->
          <div class="stay-inspection" v-if="addFormType == 2">
            <el-form-item label="审核意见" prop="dataY">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入审核意见"
                resize="none"
                maxlength="100"
                show-word-limit
                v-model="addForm.dataY">
              </el-input>
            </el-form-item>
            <div class="quick-selection-box">
              <p class="quick-selection-title">快捷输入</p>
              <p class="quick-selection-for" @click="stayInspectionClick(item)"
                 v-for="(item,index) in quickSelection" :key="index">{{item}}</p>
            </div>
          </div>
        </el-form>
      </div>
      <div class="info-dialog-content-img" v-if="imgDocumentType == 1">
        <img :src="imgList[imgIndex].url">
        <p class="el-icon-arrow-left left-button-p" @click="infoLeftButton"></p>
        <p class="el-icon-arrow-right right-button-p" @click="infoRightButton"></p>
        <p class="bottom-num-text">{{imgIndex+1}} / {{imgList.length}}</p>
        <p class="out-button" @click="outLook">返回</p>
      </div>
      <div class="info-dialog-content-document" v-if="imgDocumentType == 2">
        <iframe
          class="iframe"
          :src="iframeSrc" scrolling="auto" frameborder="0">
        </iframe>
        <p class="out-button" @click="outLook">返回</p>
      </div>
    </div>
    <div class="bottom-button-box dialog-footer-box" v-if="infoDialogCheckIndex == 'add'">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outDialog">取消</p>
      <p class="dialog-footer-button-primary" v-if="addFormType==1">提交</p>
      <p class="dialog-footer-button-border" v-if="addFormType==2">驳回</p>
      <p class="dialog-footer-button-primary" v-if="addFormType==2">通过</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  import { getToken } from "@/utils/auth";
  export default {
    name: 'infoDialog',
    data(){
      return{
        upDataName:"",
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        infoDialogTitle:"编辑",
        infoDialogType:true,
        //img 与 document 展示状态
        imgDocumentType:0,
        infoDialogCheckIndex:'info',
        infoDialogData:{
          data1:"2023年3月份校级督导检查",
          data2:"校园巡查",
          data3:"2023-01-01至2024-01-01",
          data4:"环境与测绘学院",
          data5:"管制类化学品暂存库 - A103",
          data6:"实验大楼",
          data7:"全部检查",
          data8:"不符合",
          data9:"2023-01-01",
          data10:"李小三",
          data11:"2023-01-01  13:00",
          data12:"1 检查项目名称 — 1.1 检查项目名称名称名称名称 — 1.1.1 检查项目名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称",
          data13:"9",
          data14:"现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患",
          data15:"一般隐患",
          data16:"检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要",
          data17:[
            {name:"1",url:'https://img2.baidu.com/it/u=3219906533,2982923681&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
            {name:"2",url:'https://img1.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500'},
            {name:"3",url:'https://img1.baidu.com/it/u=2995157981,91041597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
            {name:"4",url:'https://img0.baidu.com/it/u=561734853,2461096286&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
            {name:"5",url:'https://img2.baidu.com/it/u=567357414,4240886412&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
          ],
        },
        infoDialogList:[
          {
            name:"隐患整改",
            rectificationType:1,
            dataA:"已整改",
            dataB:"已更换电源",
            dataC:"李腾腾",
            dataD:"2023-03-26  14:00",
            lookImgList:[
              {name:"1",url:'https://img2.baidu.com/it/u=3219906533,2982923681&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
              {name:"2",url:'https://img1.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500'},
              {name:"3",url:'https://img1.baidu.com/it/u=2995157981,91041597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
              {name:"4",url:'https://img0.baidu.com/it/u=561734853,2461096286&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
              {name:"5",url:'https://img2.baidu.com/it/u=567357414,4240886412&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
            ],
          },
          {
            name:"整改复核",
            rectificationType:2,
            dataE:"1",
            dataF:"请补充照片",
            dataG:"李腾腾",
            dataH:"2023-03-26  14:00",
          },
        ],
        //图片
        imgList:[],
        imgIndex:0,
        saveIndex:0,
        //文档地址
        iframeSrc:"",
        // 提交数据
        addFormType:"2",//1整改 2审核
        addFormTitle:"二次整改",
        addForm:{
          dataZ:1,
          dataX:"已更换电源",
          dataY:"",
          upImgList:[],
        },
        rules: {
          dataZ: [
            { required: true, message: "请选择隐患等级", trigger: "change" },
          ],
          dataX: [
            { required: true, message: "请选择检查项目", trigger: "change" },
            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "change" },
          ],
          dataY: [
            { required: true, message: "请输入隐患描述", trigger: "change" },
          ],
        },
        //快速选择
        quickSelection:['复核驳回','未解决','驳回再整改','请补充材料','请补充描述',],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //标签切换
      checkTitleButton(index){
        if(this.infoDialogCheckIndex != index){
          this.$set(this,'imgDocumentType',0);
          this.$set(this,'infoDialogCheckIndex',index);
        }
      },
      //快速选择内容
      stayInspectionClick(val){
        this.$set(this.addForm,'dataY',val);
      },
      //点击查看文档
      lookDocument(url){
        this.$set(this,'iframeSrc',this.urlJudge(url));
        this.$set(this,'imgDocumentType',2);
      },
      //点击查看图片
      lookImg(list,index){
        this.$set(this,'imgList',list)
        this.$set(this,'imgIndex',index)
        this.$set(this,'imgDocumentType',1);
      },
      outLook(){
        this.$set(this,'imgDocumentType',0);
      },
      //图片左右按键
      infoLeftButton(){
        if (this.imgIndex == 0){
          this.msgError('当前是第一张')
        }else{
          this.imgIndex--
        }
      },
      infoRightButton(){
        if (this.imgIndex == this.imgList.length-1){
          this.msgError('当前是最后一张')
        }else{
          this.imgIndex++
        }
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res,item) {
        if(item.upImgList.length>4){
          this.msgError('最多只可上传5张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          name:this.upDataName,
          url:res.data.url,
        };
        item.upImgList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file,item) {
        if(item.upImgList.length>4){
          this.msgError('最多只可上传5张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          if(file.size> 2000000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('png/jpeg/gif格式')
          type = false;
        }
        return type;
      },
      // 删除图片
      delImg(imgIndex){
        this.addForm.upImgList.splice(imgIndex,1);
      },
      //退出
      outDialog(){
        this.$parent.addDialogOpen(false);
      },
    },
  }
</script>

<style scoped lang="scss">
  .safetyHazard-info-dialog-box{
    ::v-deep .el-dialog__body{
      padding:0 0 30px 0;
    }
    ::v-deep .el-form-item__label{
      font-size:16px;
    }
    .info-dialog-title-box{
      border-bottom:1px solid #E0E0E0;
      padding:0 30px;
      .info-dialog-for-title-box{
        height:80px;
        width: 80px;
        margin-right:44px;
        overflow: hidden;
        display: inline-block;
        p:nth-child(1){
          height:44px;
          line-height:44px;
          margin-top:18px;
          text-align: center;
          color:#333;
          font-size:16px;
          cursor: pointer;
        }
        p:nth-child(2){
          height:4px;
          width:40px;
          margin:0 auto;
          border-radius:4px;
        }
      }
      .info-dialog-for-check{
        p:nth-child(1){
          font-size:16px;
          color:#0045AF;
        }
        p:nth-child(2){
          background-color: #0045AF;
        }
      }
    }
    .info-dialog-content-box{
      padding:30px 70px 0;
      height:600px;
      .info-dialog-content-info{
        .text-box-box{
          display: flex;
          margin-top:20px;
          p{
            font-size:16px;
            color:#333;
            line-height:40px;
          }
          p:nth-child(1){
            width:95px;
            text-align: right;
            margin-right:16px;
            font-size:16px;
          }
          p:nth-child(2){
            width:933px;
            padding:0 20px;
            overflow: hidden;
            background: #F5F5F5;
            border-radius:4px;
            font-size:14px;
          }
        }
        .text-box-two-box{
          display: flex;
          margin-top:20px;
          div{
            display: flex;
            p{
              font-size:16px;
              color:#333;
              line-height:40px;
            }
            p:nth-child(1){
              text-align: right;
              margin-right:16px;
              font-size:16px;
            }
            p:nth-child(2){
              padding:0 20px;
              overflow: hidden;
              background: #F5F5F5;
              border-radius:4px;
              font-size:14px;
            }
          }
          div:nth-child(1){
            p:nth-child(1){
              width:95px;
            }
            p:nth-child(2){
              width:400px;
            }
          }
          div:nth-child(2){
            p:nth-child(1){
              width:117px;
            }
            p:nth-child(2){
              width:400px;
            }
          }
        }
        .button-box{
          display: flex;
          margin-top:20px;
          p{
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(1){
            color:#333;
            width:95px;
            text-align: right;
            margin-right:16px;
          }
          p:nth-child(2){
            width:70px;
            height:30px;
            line-height:30px;
            margin-top:5px;
            margin-right:12px;
            font-size:14px;
          }
          p:nth-child(3){
            width:70px;
            height:30px;
            line-height:30px;
            margin-top:5px;
            font-size:14px;
          }
        }
        .table-box{
          margin-left:16px;
          margin-top:20px;
          border:1px solid #e0e0e0;
          border-bottom:none;
          .table-title-p{
            background-color: #F5F5F5;
            line-height:50px;
            padding-left:30px;
            border-bottom:1px solid #e0e0e0;
          }
          .table-min{
            display: flex;
            overflow: hidden;
            border-bottom:1px solid #e0e0e0;
            .left-box{
              width:120px;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              background-color: #F5F5F5;
              border-right:1px solid #e0e0e0;
              p:nth-child(1){
                flex:1;
              }
              p:nth-child(2){
                text-align: center;
                height:14px;
                line-height:14px;
              }
              p:nth-child(3){
                flex:1;
              }
            }
            .right-box{
              flex:1;
              overflow: hidden;
              min-height:60px;
              font-size:14px;
              padding:0 16px;
              line-height:20px;
            }
            .text-box{
              display: flex;
              flex-direction: column;
              p:nth-child(1){
                flex:1;
                min-height:12px;
              }
              p:nth-child(2){

              }
              p:nth-child(3){
                flex:1;
                min-height:12px;
              }
            }
            .text-two-box{
              p:nth-child(1){
                flex:1;
                min-height:12px;
              }
              p:nth-child(2){

              }
              p:nth-child(3){
                flex:1;
                min-height:12px;
              }
              p:nth-child(4){
                span{
                  color:#FF0000;
                }
              }
              p:nth-child(5){
                flex:1;
                min-height:12px;
              }
            }
            .img-box{
              padding:20px;
              img{
                cursor: pointer;
                height:80px;
                width:80px;
                margin-right:10px;
                border-radius:4px;
              }
            }
          }
        }
      }
      .info-dialog-content-type{
        .has-rectification{
          .button-box{
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              text-align: center;
              width:80px;
              height:30px;
              margin-top:5px;
              line-height:30px;
              font-size:14px;
              color:#0183FA;
            }
          }
          .text-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:20px;
              min-height: 70px;
              padding:15px 20px;
              flex:1;
              background-color: #F5F5F5;
              border-radius:4px;
            }
          }
          .img-box{
            margin-top:20px;
            display: flex;
            p{
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            img{
              cursor: pointer;
              width:80px;
              height:80px;
              margin-right:10px;
              border-radius:4px;
            }

          }
          .text-box-two{
            margin-top:20px;
            display: flex;
            div{
              display: flex;
              p:nth-child(1){
                height:40px;
                line-height:40px;
                width:80px;
                font-size:16px;
                color:#333;
                text-align: right;
                margin-right:15px;
              }
              p:nth-child(2){
                width:412px;
                height:40px;
                font-size:14px;
                line-height:40px;
                padding:0 20px;
                background-color: #F5F5F5;
                border-radius:4px;
              }
            }

          }
        }
        .has-inspection{
          .type-box{
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            img{
              width:60px;
              height:52px;
            }
          }
          .text-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:20px;
              min-height: 70px;
              padding:15px 20px;
              flex:1;
              background-color: #F5F5F5;
              border-radius:4px;
            }
          }
          .text-box-two{
            margin-top:20px;
            display: flex;
            div{
              display: flex;
              p:nth-child(1){
                height:40px;
                line-height:40px;
                width:80px;
                font-size:16px;
                color:#333;
                text-align: right;
                margin-right:15px;
              }
              p:nth-child(2){
                width:412px;
                height:40px;
                font-size:14px;
                line-height:40px;
                padding:0 20px;
                background-color: #F5F5F5;
                border-radius:4px;
              }
            }

          }
          .button-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
            }
            p:nth-child(3){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
            }
          }
        }
      }
      .info-dialog-content-add{
        .stay-rectification{
          .up-img-p{
            height:80px;
            width:80px;
            line-height:80px;
            text-align: center;
            font-size:16px;
            border-radius:4px;
            border:1px dashed #E0E0E0;
          }
          .for-img-box{
            width:80px;
            height:80px;
            border-radius:4px;
            display: inline-block;
            overflow: hidden;
            margin-right:20px;
            position: relative;
            .for-img{
              width:80px;
              height:80px;
              display: inline-block;
              overflow: hidden;
            }
            .for-del-button{
              background: rgba(0,0,0,0.7);
              width:20px;
              height:20px;
              line-height: 20px;
              text-align: center;
              color:#fff;
              border-bottom-left-radius:4px;
              cursor: pointer;
              position: absolute;
              top:0;
              right:0;
            }
          }
        }
        .stay-inspection{
          .quick-selection-box{
            display: flex;
            margin-top:20px;
            .quick-selection-title{
              margin-left:90px;
              height:40px;
              line-height:40px;
              font-size:14px;
              margin-right:23px;
            }
            .quick-selection-for{
              width:100px;
              height:40px;
              font-size:14px;
              text-align: center;
              line-height:40px;
              margin-right:10px;
              color:#333;
              background-color: #F5F5F5;
              border-radius:4px;
              cursor: pointer;
            }
            .quick-selection-for:hover{
              background: rgba(1,131,250,0.2);
              color:#0183FA ;
            }
          }
        }
      }
      .info-dialog-content-img{
        img{
          width:1040px;
        }
        .left-button-p{
          cursor: pointer;
          text-align: center;
          line-height:30px;
          color:#fff;
          font-size:16px;
          top:440px;
          left:20px;
          position: absolute;
          width:30px;
          height:30px;
          background-color: #0045AF;
          border-radius:50%;
        }
        .right-button-p{
          cursor: pointer;
          text-align: center;
          line-height:30px;
          color:#fff;
          font-size:16px;
          position: absolute;
          top:440px;
          right:20px;
          width:30px;
          height:30px;
          background-color: #0045AF;
          border-radius:50%;
        }
        .left-button-p:hover{
          background-color: #0183fa;
        }
        .right-button-p:hover{
          background-color: #0183fa;
        }
        .bottom-num-text{
          text-align: center;
          line-height: 30px;
          font-size:16px;
          position: absolute;
          bottom:0;
          width:1026px;
        }
        .out-button{
          width:60px;
          line-height:30px;
          color:#999;
          background-color: #dedede;
          border-radius:4px;
          text-align: center;
          cursor: pointer;
          position: absolute;
          top:17px;
          right:17px;
          z-index:99999;
        }
      }
      .info-dialog-content-document{
        display: flex;
        flex:1;
        height:700px;
        .iframe{
          flex:1;
          height:700px;
        }
        .out-button{
          width:60px;
          line-height:30px;
          color:#999;
          background-color: #dedede;
          border-radius:4px;
          text-align: center;
          cursor: pointer;
          position: absolute;
          top:17px;
          right:17px;
          z-index:99999;
        }
      }
    }
    .bottom-button-box{
      height:60px;
      width:1184px;
      position: absolute;
      bottom:0;
      padding-top:15px;
      border-top:1px solid #D8D8D8;
      display: flex;
    }
  }
</style>