FE-V2-PC/src/views/securityCheck/checkRecord/verifyCheckInfo.vue

<!--整改审核详情-->
<template>
    <div class="verifyCheckInfo scrollbar-box" v-if="pageType">
      <!--标题部分-->
      <div class="top-title-box">
        <p class="title-p">问题整改</p>
        <p class="button-p reset-button-one" @click="backPage">返回</p>
      </div>
      <!--步骤条-->
      <div class="top-steps-box">
        <div class="top-steps-left-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_yzg.png">
          <p>待整改</p>
        </div>
        <div class="top-steps-border" :class="stepsType == 0?'top-steps-border-false':'top-steps-border-true'"></div>
        <div class="top-steps-center-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_zgwwc.png" v-if="stepsType == 0">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_fh.png" v-if="stepsType == 1 || stepsType == 4">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_btg.png" v-if="stepsType == 2">
          <p :class="stepsType==0?'color999':''">{{stepsType == 0||stepsType == 1?'整改待复核':(stepsType == 2?'复核未通过':(stepsType == 4?'整改已通过':''))}}</p>
        </div>
        <div class="top-steps-border" :class="stepsType != 4?'top-steps-border-false':'top-steps-border-true'"></div>
        <div class="top-steps-right-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_wwc.png" v-if="stepsType != 4">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_ywc.png" v-if="stepsType == 4">
          <p :class="stepsType!=4?'color999':''">{{newData.isZgStatus == 1?'暂时无法整改':'已整改'}}</p>
        </div>
      </div>
      <!--步骤信息-->
      <div class="top-steps-text-box">
        <div class="top-steps-text-left-box">
          <p>检查时间：{{newData.createTime}}</p>
          <p v-if="newData.firstTime">首次查看时间：{{newData.firstTime}}</p>
        </div>
        <div class="top-steps-text-center-box">
          <p v-if="newData.zgqrTime">整改时间：{{newData.zgqrTime}}</p>
          <p v-if="newData.zgbhTime">驳回时间：{{newData.zgbhTime}}</p>
        </div>
        <div class="top-steps-text-right-box">
          <p :class="stepsTimeType?'stepsTimeTypeTrue':''">整改截止时间：{{newData.zgjzTime}}</p>
        </div>
      </div>
      <!--整改单位/人员信息-->
      <div class="center-info-top-box">
        <div class="center-left-box">
          <img src="@/assets/newImages/icon_7.png">
          <div>
            <p>{{newData.zgType == 0?'一般整改':(newData.zgType == 1?'重大整改':'')}}</p>
            <p>{{newData.jcDwName}}</p>
          </div>
        </div>
        <div class="center-center-box">
          <img src="@/assets/newImages/icon_8.png">
          <div>
            <p>{{newData.laboratoryName}}</p>
            <p>{{newData.buildingName}}{{newData.fjNumber}}</p>
          </div>
        </div>
        <div class="center-right-box">
          <img src="@/assets/newImages/icon_9.png">
          <div>
            <p>{{newData.fzrName}}</p>
            <p>{{newData.fzrLxfs}}</p>
          </div>
        </div>
      </div>
      <!--整改信息部分-->
      <div class="center-info-box">
        <div class="center-info-for-max-box">
          <p class="center-info-for-max-title">{{newData.isZgStatus == 1?'暂时无法整改':'已整改信息'}}</p>
          <!--检查项循环-->
          <div class="center-info-for-box">
            <div class="center-info-for-title-box">
              <p class="title-left">{{newData.detailsList.jcxSstkNum}}</p>
              <div class="title-right">
                <p>{{newData.detailsList.jcxName}}</p>
              </div>
            </div>
            <div class="center-info-for-big-box" :class="allDataType?'center-info-for-big-box-all':(!newData.detailsList.detailslogList[1]?'center-info-for-big-box-all':'')">
              <div class="center-info-for-big-title-box">
                <p>条款：</p>
                <p>{{newData.detailsList.jcxSstkMs}}</p>
              </div>
              <div class="center-info-for-big-flex-box">
                <div class="center-info-for-big-flex-left-box">
                  <p class="center-info-for-big-flex-left-title">隐患照片：</p>
                  <div class="center-info-for-big-flex-left-img-box" v-if="newData.detailsList.yhImg[0]">
                    <img :src="item" v-for="(item,index) in newData.detailsList.yhImg" :key="index" @click="lockImg(item)">
                  </div>
                  <p v-if="!newData.detailsList.yhImg[0]">未上传照片</p>
                </div>
                <div class="center-info-for-big-flex-right-box">
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>检查时间：</p>
                    <p>{{newData.createTime}}</p>
                  </div>
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>检查人：</p>
                    <p>{{newData.jcRyxm}}</p>
                  </div>
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>隐患描述：</p>
                    <p>{{newData.detailsList.yhMs}}</p>
                  </div>
                </div>
              </div>
              <div class="center-info-for-min-box">
                <!--整改循环-->
                <div class="center-info-for-min" v-for="(item,index) in newData.detailsList.detailslogList" :key="index" v-if="index == 0 || allDataType">
                  <div class="center-info-for-min-left-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>整改信息</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改时间：</p>
                      <p>{{item.createTime}}</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改人：</p>
                      <p>{{item.zgUserName}}</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改描述：</p>
                      <p>{{item.zgMs}}</p>
                    </div>
                    <div class="for-min-img-box">
                      <p class="for-min-img-box-left-title">整改照片：</p>
                      <div class="for-min-img-box-left-img-box" v-if="item.yhZghImg[0]">
                        <img :src="minItem" v-for="(minItem,minIndex) in item.yhZghImg" :key="minIndex" @click="lockImg(minItem)">
                      </div>
                      <p v-if="!item.yhZghImg[0]">未上传照片</p>
                    </div>
                  </div>
                    <div class="center-info-for-min-right-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>复核信息</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核时间：</p>
                      <p>{{item.spTime}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核人：</p>
                      <p>{{item.spUserName}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核结果：</p>
                      <p :class="item.spStatus == 1?'spStatusColorA':'spStatusColorB'">{{item.spStatus == 1 ? '复核通过':'复核驳回'}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核备注：</p>
                      <p>{{item.spSm}}</p>
                    </div>
                    <div class="for-min-input-box" v-if="!item.spTime && stepsType == 1"  v-hasPermi="['laboratory:checkRecordDetails:approve']">
                      <p>复核备注：</p>
                      <el-form ref="form" :model="form" :rules="rules" style="width:580px;">
                      <el-form-item label="" prop="spMs">
                        <el-input
                          class="min-input-textarea"
                          type="textarea"
                          resize="none"
                          style="color:red;"
                          maxlength="50"
                          :autosize="{ minRows: 4, maxRows: 4}"
                          placeholder="请输入内容"
                          v-model="form.spMs">
                        </el-input>
                      </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
              <!--查看更多复核信息-->
              <div class="all-button-box" v-if="newData.detailsList.detailslogList[1] && !allDataType" @click="lookAllData">
                <p>查看更多复核记录</p>
                <img src="@/assets/ZDimages/secuityCheck/icon_wtzg_jcjlxl.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-button-box" v-hasPermi="['laboratory:checkRecordDetails:approve']">
        <p class="null-p"></p>
        <p class="button-p del-button-one-90" @click="auditButton(1)" v-if="stepsType == 1">复核驳回</p>
        <p class="button-p add-button-one-90" @click="auditButton(2)" v-if="stepsType == 1">复核通过</p>
        <!--<p class="button-p reset-button-one" @click="downloadGenNotice" v-if="newData.zgType == 1">整改通知书</p>-->
        <!--<p class="button-p reset-button-one" @click="downloadGenReport" v-if="newData.zgStatus == 3 || newData.zgStatus == 4">整改报告</p>-->
        <p class="null-p"></p>
      </div>
      <!--查看图片-->
      <el-dialog :title="imgTitle" :visible.sync="imgOpen" width="1200px" append-to-body>
        <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
          <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { getDettailsList, checkRecordUpdate,editList } from "@/api/laboratory/checkRecord";
  export default {
    name: 'verifyCheckInfo',
    props:{
      infoId:{},
    },
    data() {
      return {
        pageType:false,
        //整改状态
        stepsType:1,
        //逾期状态
        stepsTimeType:false,
        newData:{},
        active:0,
        textOne:"",
        textTwo:"",
        textTree:"",
        //查看图片
        imgOpen:false,
        imgTitle:"",
        imgUrl:"",
        //审核相关
        auditTitle:"",
        auditType:"",
        auditOpen:false,
        form:{
          spMs:"",
        },
        rules: {
          spMs: [
            { required: true, message: "请输入复核备注", trigger: "blur" },
            { required: true, message: "请输入复核备注", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //是否展示所有数据
        allDataType:false,
      }
    },
    created() {
      this.getInfo();
    },
    methods: {
      //查看所有
      lookAllData(){
        this.allDataType = true;
      },
      getInfo(){
        console.log("this.infoId",this.infoId)
        let obj = {
          id:this.infoId,
        };
        getDettailsList(obj).then( response => {
          let obj = JSON.parse(JSON.stringify(response.data));
          if(obj.details.yhImg){
            obj.details.yhImg = obj.details.yhImg.split(",");
          }
          if(obj.details.zmClImg){
            obj.details.zmClImg = obj.details.zmClImg.split(",");
          }
          if(obj.details.yhZghImg){
            obj.details.yhZghImg = obj.details.yhZghImg.split(",");
          }
          let newOjb = obj.record;
          newOjb.detailsList = obj.details;
          // spStatus检查项状态 0待整改 1整改待复核 2复核未通过 4完成
          // zgStatus 检查逾期  5逾期' 其他未逾期
          if(newOjb.detailsList.spStatus == 0){
            this.stepsType = 0;
          }else if (newOjb.detailsList.spStatus == 1){
            this.stepsType = 1;
          }else if (newOjb.detailsList.spStatus == 2){
            this.stepsType = 2;
          }else if (newOjb.detailsList.spStatus == 4){
            this.stepsType = 4;
          }
          if(newOjb.zgStatus == 5 && newOjb.detailsList.spStatus != 4){
            this.stepsTimeType = true
          }else{
            this.stepsTimeType = false
          }
          for(let i=0;i<newOjb.detailsList.detailslogList.length;i++){
            if(newOjb.detailsList.detailslogList[i].yhZghImg){
              newOjb.detailsList.detailslogList[i].yhZghImg = newOjb.detailsList.detailslogList[i].yhZghImg.split(",");
            }else{
              newOjb.detailsList.detailslogList[i].yhZghImg = [];
            }
          }
          this.$set(this,'newData',newOjb);
          this.pageType = true;
        });
      },
      //返回
      backPage(){
        this.$parent.goPageInfo(1);
      },
      //查看图片
      lockImg(url){
        this.imgTitle = "照片查看";
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //审核
      auditButton(type){
        // console.log(this.$refs["form"][0].validate);
        this.$refs["form"][0].validate(valid => {
          if (valid) {
            if(type == 1){
              let obj = {
                checkId:this.newData.id,//检查单
                id:this.newData.detailsList.id,//隐患项
                spStatus:"2",
                spMs:this.form.spMs,
                yhZghImg:this.form.yhZghImg+'',
              }
              editList(obj).then( response => {
                this.msgSuccess(response.msg);
                this.backPage();
              })
            }else if(type == 2){
              let obj = {
                checkId:this.newData.id,//检查单
                id:this.newData.detailsList.id,//隐患项
                spStatus:"4",
                spMs:this.form.spMs,
                yhZghImg:this.form.yhZghImg+'',
              }
              editList(obj).then( response => {
                this.msgSuccess(response.msg);
                this.backPage();
              })
            }
          }
        })
      },
      //关闭审核窗口
      cancel(){
        this.auditOpen = false;
      },
      //提交审核
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.auditType == 1){
              //通过
              let obj = {
                id:this.newData.id,
                createUserId:this.newData.createUserId,
                zgJg:this.form.zgJg,
                zgStatus:4,
              };
              checkRecordUpdate(obj).then( response => {
                this.auditOpen = false;
                this.msgSuccess("通过成功")
                this.getInfo();
              })
            }else if(this.auditType == 2){
              //驳回
              let obj = {
                id:this.newData.id,
                createUserId:this.newData.createUserId,
                fbYy:this.form.fbYy,
                zgStatus:2,
              };
              checkRecordUpdate(obj).then( response => {
                this.auditOpen = false;
                this.msgSuccess("驳回成功")
                this.getInfo();
              })
            }
          }
        })
      },
      //整改通知书
      downloadGenNotice(){
        this.download('/laboratory/checkOption/genNotice/'+this.newData.id, {
        }, `整改通知书.docx`)
      },
      //整改报告
      downloadGenReport(){
        this.download('/laboratory/checkOption/genReport/'+this.newData.id, {
        }, `整改报告.docx`)
      },
    }
  }
</script>

<style scoped lang="scss">
  .verifyCheckInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: scroll;
    *{
      margin:0;
    }
    /*标题部分*/
    .top-title-box{
      display: flex;
      height:80px;
      border-bottom:1px solid #e0e0e0;
      .title-p{
        margin-left:20px;
        flex:1;
        line-height:80px;
        font-size:18px;
        color:#0045AF;
      }
      .button-p{
        margin:20px;
      }
    }
    /*步骤条*/
    .top-steps-box{
      display: flex;
      width:870px;
      margin:30px auto 0;
      .top-steps-left-box{
        width:100px;
        display: flex;
        img{
          width:30px;
          height:30px;
        }
        p{
          flex:1;
          text-align:center;
          font-size:16px;
          line-height:30px;
          height:30px;
        }
      }
      .top-steps-border{
        width:260px;
        height:0;
        margin:14px 10px 0 0;
      }
      .color999{
        color:#999!important;
      }
      .top-steps-border-true{
        border:1px dashed #0183FA;
      }
      .top-steps-border-false{
        border:1px dashed #999;
      }
      .top-steps-center-box{
        width:130px;
        display: flex;
        img{
          width:30px;
          height:30px;
        }
        p{
          flex:1;
          text-align:center;
          font-size:16px;
          line-height:30px;
          height:30px;
        }
      }
      .top-steps-right-box{
        width:140px;
        display: flex;
        img{
          width:30px;
          height:30px;
        }
        p{
          flex:1;
          text-align:left;
          margin-left:5px;
          font-size:16px;
          line-height:30px;
          height:30px;
        }
      }
    }
    /*步骤信息*/
    .top-steps-text-box{
      display: flex;
      width:1000px;
      margin:10px auto 0;
      p{
        line-height:28px;
        font-size:14px;
        color:#999999;
        font-weight:500;
      }
      .top-steps-text-left-box{
        width:230px;
        p{
          text-align: left;
        }
      }
      .top-steps-text-center-box{
        flex:1;
        p{
          text-align: center;
        }
      }
      .top-steps-text-right-box{
        width:240px;
        p{
          text-align: left;
        }
        .stepsTimeTypeTrue{
          color:#FF4343;
        }
      }
    }
    /*整改单位/人员信息*/
    .center-info-top-box{
      border-top:1px solid #e0e0e0;
      margin:20px 20px 0;
      display: flex;
      p{
        margin:0;
        font-weight:500;
      }
      .center-left-box{
        margin-right:100px;
        display: flex;
        margin-top:20px;
        margin-left:20px;
        img{
          width:40px;
          height:40px;
          margin:10px 20px;
        }
        div{
          line-height:30px;
          font-size:16px;
        }
      }
      .center-center-box{
        margin-right:100px;
        display: flex;
        margin-top:20px;
        img{
          width:40px;
          height:40px;
          margin:10px 20px;
        }
        div{
          line-height:30px;
          font-size:16px;
        }
      }
      .center-right-box{
        display: flex;
        margin-top:20px;
        img{
          width:40px;
          height:40px;
          margin:10px 20px;
        }
        div{
          line-height:30px;
          font-size:16px;
        }
      }
    }
    /*整改信息部分*/
    .center-info-box{
      flex:1;
      .center-info-for-max-box{
        .center-info-for-max-title{
          padding-left:20px;
          border-bottom:1px solid #e0e0e0;
          flex:1;
          height:68px;
          line-height:68px;
          font-size:18px;
          color:#0045AF;
        }
        .center-info-for-box{
          margin: 20px 20px 0;
          .center-info-for-title-box{
            display: flex;
            overflow: hidden;
            .title-left{
              background: #0183FA;
              padding:0 10px;
              color:#fff;
              line-height:50px;
            }
            .title-right{
              background: #CCE6FE;
              flex:1;
              padding:15px 18px;
              color:#333;
              p{
                display: inline-block;
                line-height:20px;
              }
            }
          }
          .center-info-for-big-box{
            border-left:1px solid #e0e0e0;
            border-right:1px solid #e0e0e0;
            border-bottom:1px solid #e0e0e0;
            font-weight:500;
            overflow: hidden;
            .center-info-for-big-title-box{
              display: flex;
              font-size:14px;
              margin:23px 0 27px 0;
              p:nth-child(1){
                width:116px;
                text-align: right;
                color:#999;
              }
              p:nth-child(2){
                flex:1;
                color:#333;
                margin-right:20px;
              }
            }
            .center-info-for-big-flex-box{
              display: flex;
              .center-info-for-big-flex-left-box{
                width:790px;
                overflow: hidden;
                font-size:14px;
                display: flex;
                .center-info-for-big-flex-left-title{
                  width:116px;
                  text-align: right;
                  color:#999;
                }
                .center-info-for-big-flex-left-img-box{
                  img{
                    margin:0 10px 10px 0;
                    width:120px;
                    height:120px;
                  }
                }
              }
              .center-info-for-big-flex-right-box{
                flex:1;
                .center-info-for-big-flex-right-text-box{
                  display: flex;
                  margin:0 40px 25px 0;
                  p{
                    line-height:14px;
                    font-size:14px;

                  }
                  p:nth-child(1){
                    width:100px;
                    color: #999;
                    text-align: right;
                  }
                  p:nth-child(2){
                    flex: 1;
                    color:#333;
                  }
                }
              }
            }
            .center-info-for-min-box{
              border:1px solid #e0e0e0;
              margin:0 40px;
              .center-info-for-min:nth-child(1){
                border:none;
              }
              .center-info-for-min{
                display: flex;
                padding:15px 17px;
                border-top:1px dashed #e0e0e0;
                .for-min-title-box{
                  display: flex;
                  p:nth-child(1){
                    height:20px;
                    width:4px;
                    background:#0183FA;
                    margin-right:10px;
                  }
                  p:nth-child(2){
                    font-size:16px;
                    line-height:20px;
                    color:#333;
                  }
                }
                .center-info-for-min-left-box{
                  width:760px;
                  .for-min-text-box{
                    display: flex;
                    margin-top:20px;
                    p{
                      font-size:14px;
                      line-height:14px;
                    }
                    p:nth-child(1){
                      width:75px;
                      text-align: right;
                      color:#999;
                    }
                    p:nth-child(2){
                      flex:1;
                      color:#333;
                      margin-right:90px;
                    }
                    .spStatusColorA{
                      color:#21CC1D!important;
                    }
                    .spStatusColorB{
                      color:#FF0000!important;
                    }
                  }
                  .for-min-img-box{
                    width:790px;
                    overflow: hidden;
                    font-size:14px;
                    line-height:14px;
                    display: flex;
                    margin-top:20px;
                    .for-min-img-box-left-title{
                      width:75px;
                      text-align: right;
                      color:#999;
                    }
                    .for-min-img-box-left-img-box{
                      img{
                        margin:0 10px 10px 0;
                        width:120px;
                        height:120px;
                      }
                    }
                  }
                }
                .center-info-for-min-right-box{
                  flex:1;
                  .for-min-text-box{
                    display: flex;
                    margin-top:20px;
                    p{
                      font-size:14px;
                      line-height:14px;
                    }
                    p:nth-child(1){
                      width:75px;
                      text-align: right;
                      color:#999;
                    }
                    p:nth-child(2){
                      flex:1;
                      color:#333;
                    }
                    .spStatusColorA{
                      color:#21CC1D!important;
                    }
                    .spStatusColorB{
                      color:#FF0000!important;
                    }
                  }
                  .for-min-input-box{
                    display: flex;
                    margin-top:20px;
                    p{
                      font-size:14px;
                      line-height:14px;
                    }
                    p:nth-child(1){
                      width:75px;
                      text-align: right;
                      color:#999;
                    }
                    .min-input-textarea{
                      flex:1;
                      color:#333;
                      font-size:14px;
                      line-height:16px;
                    }
                  }
                }
              }
            }
            .all-button-box{
              display: flex;
              height:50px;
              width:140px;
              margin:0 auto;
              cursor: pointer;
              p{
                line-height:50px;
                text-align: center;
                font-size:14px;
                color:#0183FA;
              }
              img{
                width:12px;
                height:10px;
                margin:20px 0 20px 10px;
              }
            }
          }
          .center-info-for-big-box-all{
            padding-bottom:20px;
          }
        }
      }

      .text-box{
        display: flex;
        margin-top:10px;
        p{
          font-weight:500;
        }
        p:nth-child(1){
          width:80px;
          line-height:30px;
        }
        p:nth-child(2){
          flex:1;
          padding-top:5px;
          line-height:20px;
        }
      }
      .center-info-top-box{
        display: flex;
        p{
          margin:0;
          font-weight:500;
        }
        .center-left-box{
          width:360px;
          display: flex;
          margin-top:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:18px;
          }
        }
        .center-center-box{
          width:360px;
          display: flex;
          margin-top:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:18px;
          }
        }
        .center-right-box{
          width:360px;
          display: flex;
          margin-top:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:18px;
          }
        }
      }
      .center-info-title{
        font-size:18px;
        margin-top:10px;
        line-height:40px;
      }
      .center-for-box{
        margin-top:20px;
        border:1px solid #dedede;
        padding:20px;
        display: flex;
        p{
          margin:0;
          font-weight:500;
        }
        .center-for-left-box{
          width:500px;
          .for-title-p{
            line-height:20px;
            font-size:16px;
            margin-bottom:10px;
          }
          .for-text-box{
            display: flex;
            font-size:14px;
            p:nth-child(1){
              width:80px;
              line-height:30px;
            }
            p:nth-child(2){
              flex:1;
              padding-top:5px;
              line-height:20px;
            }
          }
        }
        .center-for-right-box{
          margin-left:40px;
          flex:1;
          .for-img-max-box{
            display: flex;
            .for-img-max-title-p{
              line-height:80px;
              width:120px;
            }
            .for-img-box{
              flex:1;
              img{
                cursor: pointer;
                height:80px;
                width:80px;
                margin:0 10px 10px 0;
              }
            }
          }
        }
      }
    }
    .bottom-button-box{
      display: flex;
      padding:20px 0 ;
      .null-p{
        flex:1;
      }
      .button-p{
        width:120px;
        margin-right:20px;
      }
    }
  }
</style>