contract-details.vue

<!--
 * @Description: 合同详情
 * @Author: your name
 * @Date: 2019-09-25 15:38:21
 * @LastEditTime : 2019-12-26 12:08:42
 * @LastEditors  : Please set LastEditors
 -->
<template>
  <h-view id="details" class="public-style" title="经销商签约">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>签约详情</span>
      </div>
    </h-header>
    <Tab :tabNums="tabNum" @getTabNum="getTabNum" />
    <!-- 基本信息 -->
    <h-content v-if="tabNum === 0">

      <!-- 法人信息 -->
      <LegalPerson v-if="bp_flag" :baseInfo="baseInfo"/>

      <!-- 个人信息（自然人） -->
      <Personal v-if="!bp_flag" :baseInfo="baseInfo"/>

      <div class="equipment-list">担保人信息<span v-if="guarantorInfo.length === 0">(无)</span></div>
      <list-item v-if="guarantorInfo.length" :item-height="76">
        <item v-for="(item,index) in guarantorInfo" :key="index">
          <div slot="name">
            <span class="name-box">{{ index+1 }}</span>
            <span class="name">担保人{{ index+1 }}姓名</span>
            <span class="card-num">证件号</span>
          </div>
          <div slot="content" class="right">
            <img src="@/assets/intoApproval/introduce.png" >
            <span :title="item.bp_name">{{ item.bp_name }}</span>
            <br >
            <span>{{ item.bp_class==='NP'? item.id_card_no: item.organization_code }}</span>
          </div>
        </item>
      </list-item>

      <!-- 联系人 -->
      <div class="bottom-call-wrap">
        <div class="bottom-call">
          <div class="left">
            <img src="@/assets/distributorSign/call.png" alt="">
          </div>
          <div class="center">
            <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
            <p>联系电话：{{ baseInfo.agent_phone }}</p>
          </div>
          <div class="right1" @click="callUp(baseInfo.agent_phone)">
            <img src="@/assets/distributorSign/calls.png" alt="">
          </div>
        </div>
      </div>
    </h-content>
    <h-content v-if="tabNum === 1">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">商务政策</div>
          <input slot="content" v-model="info.product_plan_id_n" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">设备总价</div>
          <span slot="content">{{ info.equip_price * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">融资金额</div>
          <span slot="content">{{ info.finance_amount * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">首付款</div>
          <span slot="content">{{ info.down_payment * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保证金比例</div>
          <span slot="content">{{ info.deposit_ratio_n }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保证金</div>
          <span slot="content">{{ info.deposit * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">手续费比例</div>
          <input slot="content" v-model="info.lease_charge_ratio_n" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">手续费</div>
          <span slot="content">{{ parseFloat(info.lease_charge * info.product_num).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保险押金</div>
          <span slot="content">{{ info.insurance_fee * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">GPS费用</div>
          <span slot="content">{{ info.gps_fee * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name">首次付款合计</div>
          <span slot="content">{{ parseFloat(info.first_pay).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">预计付款日</div>
          <span slot="content">{{ dateConverse(info.lease_start_date) }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">还款周期</div>
          <input slot="content" v-model="info.annual_pay_times_n" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">租赁期数</div>
          <input slot="content" v-model="info.lease_times" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">年利率</div>
          <input slot="content" v-model="info.int_rate_n" readonly>
        </item>
      </list-item>
      <div class="repay-plan">
        <p @click="repayPlan">查看还款计划</p>
      </div>
      <div class="equipment-list-fund">
        <span/>
      <p>设备清单</p></div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">设备识别号</div>
          <input slot="content" v-model="info.product_code" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">产品名称</div>
          <input slot="content" v-model="info.product_name" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">产品数量</div>
          <input slot="content" v-model="info.product_num" readonly>
        </item>
      </list-item>
      <div class="bottom-call-wrap">
        <div class="bottom-call">
          <div class="left">
            <img src="@/assets/distributorSign/call.png" alt="">
          </div>
          <div class="center">
            <p>业务经办：{{ baseInfo.bp_user_id_n }}</p>
            <p>联系电话：{{ baseInfo.agent_phone }}</p>
          </div>
          <div class="right1" @click="callUp(baseInfo.agent_phone)">
            <img src="@/assets/distributorSign/calls.png" alt="">
          </div>
        </div>
      </div>
    </h-content>
    <h-content v-if="tabNum === 2">
      <list-item :item-height="56">
        <item :proportion="[7,1]">
          <div slot="name" class="aguremrnt-list">
            <img src="@/assets/distributorSign/gray.png" alt="" class="pics">
            <p class="second">经销商担保协议</p>
            <img :src="agentPic" alt="" class="read">
          </div>
          <div slot="content" class="in-detail" @click="goContractContent('经销商担保协议')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
        </item>
      </list-item>

    </h-content>
    <bottom-tab v-if="confirm_status!=='APPROVED'" class="add-box">
      <tab-button class="before" @click.native="takePhonto">
        <img src="@/assets/constractSigning/certification.png" >认证
      </tab-button>
      <tab-button class="next" @click.native="contractConfirm()">
        <img src="@/assets/intoApproval/approve.png" >确认签约
      </tab-button>
    </bottom-tab>
    <!--活体检测-->
    <body-check ref="body" :check_id="$route.params.check_id" :confirm_id="confirm_id"></body-check>
  </h-view>
</template>

<script>
import Tab from '@/pages/distributorSign/details-tab'
import LegalPerson from '@/pages/distributorSign/legal-person'
import Personal from '@/pages/distributorSign/personal'
import bodyCheck from './body-check'
export default {
  name: 'ContractDetails',
  components: {
    Tab,
    Personal,
    LegalPerson,
    bodyCheck,
  },
  data () {
    return {
      showModalValue: false,
      info: {}, // 租赁信息
      tabNum: 0,
      baseInfo: {}, // 基本信息
      project_id: '',
      bp_flag: false,
      guarantorInfo: [], // 担保人信息
      bp_class: '', // 商业伙伴类型
      confirm_status: '', // 签约状态
      faceListUpload: [], // 自拍照上传
      confirm_note: '', // 审批意见
      confirm_id: '',
      agentPic: '', // 经销商担保协议图片
      readed: require('@/assets/constractSigning/read.png'), // 已读
      unRead: require('@/assets/constractSigning/unread.png'), // 未读
      signCheckFlag: false, // 签约校验，为true已认证通过可进行签约，否则不可签约
    }
  },
  computed: {},
  watch: {
    $route (to, from) {
      hlsPopup.hideConfirm()
    },
    bp_class () {
      if (this.bp_class === 'NP') {
        this.bp_flag = false
        // this.getBseMsg()
      } else {
        this.bp_flag = true
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ContractList') {
        vm.tabNum = 0
        vm.baseInfo = {}
        vm.info = {}
        vm.bp_flag = false
        vm.signCheckFlag = false
        vm.guarantorInfo = []
        vm.faceListUpload = []
        vm.confirm_note = ''
        vm.bp_class = vm.$route.params.item.bp_class
        vm.project_id = vm.$route.params.item.project_id
        vm.confirm_id = vm.$route.params.item.confirm_id
        vm.confirm_status = vm.$route.params.item.confirm_status
        vm.agentPic = vm.unRead
        if (vm.bp_class === 'NP') {
          vm.bp_flag = false
          vm.getBseMsg()
          vm.getGuarantor()
        } else {
          vm.bp_flag = true
          vm.getBseMsg()
          vm.getGuarantor()
        }
        vm.getLease()
      } else if (from.name === 'ContractContent') {
        vm.tabNum = 2
        vm.agentPic = vm.readed
      }
    })
  },
  created () {},
  methods: {
    // 签约校验
    async signCheck () {
      let vm = this
      let url = process.env.basePath + 'sign_check'
      let param = {
        confirm_id: vm.confirm_id,
        data_class: 'PRJ_PROJECT',
      }
      vm.hlsPopup.showLoading('请稍后!')
      let res = await vm.hlsHttp.post(url, param)
      vm.hlsPopup.hideLoading()
      if (res.result === 'S') {
        return true
      } else {
        // vm.hlsPopup.showLongCenter(res.message)
      }
    },
    goBodyCheck (confirm_id) { // 活体检测
      this.$refs.body.show()
     /* this.$router.push({
        name: 'BodyCheck',
        params: {
          check_id: this.$route.params.check_id,
          confirm_id: confirm_id,
        },
      })*/
    },
    /*  goElectronicSign () { // 电子签
     let vm = this
     let url = process.env.basePath + 'get_sign_url'
     let param = {
       confirm_id: vm.confirm_id,
       data_class: 'PRJ_PROJECT',
     }
     vm.hlsPopup.showLoading('请稍后')
     vm.hlsHttp.post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       if (res.info.msg === 'success') {
         vm.$router.push({
           name: 'ElectronicSign',
           params: {
             url: res.info.data.url,
           },
         })
       } else {
         vm.hlsPopup.showLongCenter(res.info.msg)
       }
     })
   }, */
    // 签约确认
    async contractConfirm () {
      let vm = this
      let flag = await this.signCheck()
      if (flag) { // 只有认证通过后方可进行签约操作
        this.hlsPopup.showConfirm({
          title: '提示',
          content: '您确认签约吗？',
          onConfirm: (data) => {
            if (data) {
              vm.issure('APPROVED')
            }
          },
        })
      }
    },

    takePhonto () {
      let vm = this
      hlsPopup.showConfirm({
        title: '提示',
        content: '请自拍一张',
        onConfirm: function (index) {
          if (index === 1) {
            vm.takePhontoOpenCamera()
          } else {

          }
        },
      })
    },
    // 打开相机自拍
    takePhontoOpenCamera () {
      let vm = this
      vm.faceListUpload = []
      let obj = {
        'pkvalue': vm.$route.params.check_id,
        'source_type': 'PRJ_CDD_ITEM_CHECK',
        'picture': '',
        'filePath': '',
        'attachment_id': '',
        'user_id': 1,
        'fileName': 'face',
      }
      let cameraoptions = {
        quality: 100,
        cameraDirection: 1,
      }
      let success = function (imgdata) {
        obj.filePath = imgdata
        // obj.filePath = 'http://hlsapp.hand-china.com/file/XCMG/2.jpg'
        vm.confirmContractSign(imgdata)
        vm.faceListUpload.push(obj)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    // 执行同意的逻辑(查询对应的身份证正面图片->人脸识别->确认签约)
    async confirmContractSign (faceImg) {
      let idCardImgUrl = await this.idCardImgUrlGet()
      if (idCardImgUrl) {
        this.faceIdentify(faceImg, idCardImgUrl)
      }
    },
    // 获取身份证照片
    async idCardImgUrlGet () {
      let vm = this
      let url = $config.basePath + 'prj_id_card_query'
      let param = {
        confirm_id: vm.confirm_id,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if (res.result === 'S' && res.info) {
        let cardUrl = process.env.filePath + 'attachment_id=' + res.info.attachment_id + '&access_token=' + window.localStorage.access_token
        return cardUrl
      } else if (res.result === 'S' && !res.info) {
        hlsPopup.showLongCenter('未找到身份证照片')
        return null
      } else {
        hlsPopup.showLongCenter(res.message)
        return null
      }
    },
    // 人脸比对
    faceIdentify (faceImg, idCardImgUrl) {
      let vm = this
      let obj = {
        'fileUrl': faceImg,
        'idCardImgUrl': idCardImgUrl,
      }
      hlsPopup.showLoading('正在比对')
      let url = process.env.ocrPath + '/baidu/ocr/face'
      hlsUtil.baiduOcrFace(obj, url, function (res) {
        hlsPopup.hideLoading()
        if (res.success) {
          vm.save_picture(vm.faceListUpload)
          let identifyScore = res.result.result.score.toFixed(0)
          hlsPopup.showPopup({
            title: '提示',
            content: `识别分数为${identifyScore},请进行活体检测`,
            onConfirm: () => {
              // 进入活体检测页面
              vm.goBodyCheck(vm.confirm_id)
            },
          })
        } else {
          hlsPopup.showLongCenter('比对失败,请保证和绑定时是同一个人')
        }
      })
    },

    // 确认逻辑
    issure (status) {
      let vm = this
      let url = process.env.basePath + 'do_confrim_bp'
      let param = {
        'master': {
          confirm_id: vm.confirm_id,
          confirm_status: status,
          confirm_note: vm.confirm_note,
        },
      }
      vm.hlsPopup.showLoading('提交数据中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.save_picture(vm.faceListUpload)
          vm.hlsPopup.showSuccess('签约成功')
          window.localStorage.setItem('backflag', true)
          vm.$routeGo()
        } else {
          vm.hlsPopup.showSuccess(res.message)
        }
      })
    },
    // 图片保存
    save_picture (list) {
      // alert('list' + JSON.stringify(list))
      let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            /* hlsPopup.hideLoading()
            hlsPopup.showLongCenter('图片上传成功') */
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  vm.faceListUpload.push(list[j])
                  // alert('faceListUpload' + JSON.stringify(vm.faceListUpload))
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // 基本信息
    getBseMsg () {
      let vm = this
      let url = ''
      let url1 = $config.basePath + 'prj_np_info_query'
      let url2 = $config.basePath + 'prj_org_info_query'
      vm.bp_class === 'NP' ? url = url1 : url = url2
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          //  vm.lists = res.lists
          vm.baseInfo = res.info
          if (res.info.auth_flag) {
            window.localStorage.setItem('auth_flag', res.info.auth_flag)
          }
        }
      })
    },

    // 担保人
    getGuarantor () {
      let vm = this
      let url = $config.basePath + 'prj_guarantor_list_query'
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.guarantorInfo = res.lists
        }
      })
    },
    getLease () {
      let vm = this
      let url = $config.basePath + 'prj_lease_query'
      let param = {
        project_id: vm.project_id,
      }
      // 租赁信息
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.info = res.info
        }
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
    callUp (phonenumber) {
      window.open('tel:' + phonenumber)
    },
    // 跳转合同详情
    goContractContent (name) {
      this.$router.push({
        name: 'ContractContent',
        params: {
          name,
        },
      })
    },
    repayPlan () {
      this.$router.push({
        name: 'FinancDetails',
        params: {
          project_id: this.project_id,
          product_num: this.info.product_num,
        },
      })
    },
  },
}
</script>
<style lang='less'>
#details {
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
}
.in-detail{
          background-color: rgba(0,70,156,0.08);
          width: 48px;
          height: 56px;
          text-align: center;
          line-height: 65px;

          img{
              width: 16px;
          }
      }
.name-box {
      display: inline-block;
      text-align: center;
      line-height: 16px;
      color: #00469c;
      width: 16px;
      height: 16px;
      background: #cddbec;
      border-radius: 4px;
    }
    .name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      margin-left: 10px;
    }
    .card-num {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      display: block;
      margin-left: 31px;
      margin-top: 7px;
    }
    .right {
      position: relative;
    }
    .right span {
      float: right;
      margin-right: 48px;
      display: block;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 150px;
      margin-top: -10px;
      text-align: right
    }
    .right span:last-child {
      margin-top: 7px;
    }
    .right img {
      position: absolute;
      top: 30%;
      left: 88%;
      width: 14px;
      height: 16px;
    }
.font-color {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #656464;
    letter-spacing: 0;
}
.repay-plan {
    height: 44px;
    width: 100%;
  margin-top: -10px;
   // background: rgba(0,70,156,0.03);
  background: #F2F2F2;
    p {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #00469C;
        letter-spacing: 0;
        height: 44px;
        width: 84px;
        line-height: 44px;
        font-weight: bold;
        text-decoration: underline;
        margin-left: 16px;
    }
}
  .equipment-list-fund{
    height: 40px;
    line-height: 40px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    color: #00469c;
    font-size: 15px;
    //margin-left: 16px;
    position: relative;
    margin-top: -10px;
    span{
      width: 4px;
      height: 20px;
      background: #00469c;
    }
    p{
      padding-left: 10px;
    }
  }
.equipment-list {
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      color: #00469c;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
      margin-top: -10px;
}
.equipment-list::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 10px;
}
.equipment-list:nth-of-type(3) {
  margin-top: 0
}
    // .left {
    //     width: 60px;
    //     height: 60px;
    //     background: rgba(0,70,156,0.03);
    //     margin-left: -15px;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center
    // }
.bottom-call-wrap{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #ffffff;
  margin-top: -10px;
  .bottom-call {
    margin-top: 10px;
   width: 100%;
    height: 58%;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      width: 16%;
      height: 60px;
      // background: rgba(0,70,156,0.03);
      background: #F2F2F2;
      display: flex;
      justify-content: center;
      align-items: center
    }
    .center {
      height: 100%;
      width: 66%;
      margin-left: 2px;
      // background: rgba(0,70,156,0.03);
      background: #F2F2F2;
      p {
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0.43px;
      }
    }
    .right1 {
      height: 100%;
      width: 16%;
      //background: rgba(0,70,156,0.20);
      background: #CCCCCC;
      display: flex;
      justify-content: center;
      align-items: center
    }
  }
}
.aguremrnt-list {
    display: flex;
    flex-direction: row;
    .pic {
        margin-left: -3px;
    }
    .pics {
        //    width: 21px;
           height: 30px;
           }
    .read {
        height: 16px;
        margin-top: 8px;
        margin-left: 12.5px;
    }
    .second {
        height: 32px;
        line-height: 32px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        margin-left: 21px;
        color: #383F45;
        letter-spacing: 0.43px;
    }
    .first {
        margin-left: 13px;
    }
}
  .footer-button {
    .approve {
      width: 358.6px;
      height: 44px;
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
      //letter-spacing: 10px;
      img {
        width: 16.8px;
        height: 16.8px;
      }
    }
  }
  .footer-button:nth-of-type(1) {
    //bottom: 92px;
    .approve {
      width: 358.6px;
      height: 44px;
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
    }
  }
  .footer-button:nth-of-type(2) {
    bottom: 46px;
    .approve {
      width: 358.6px;
      height: 44px;
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
    }
  }
  .approveContent {
    position: absolute;
    top: 50%;
    background-color: #fafafa;
    overflow-y: scroll;
  }
  .approveBottom {
    width: 343px;
    margin: 0 auto;
    span {
      display: block;
      width: 100%;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: #00469c;
      height: 21px;
      line-height: 21px;
      margin: 16px 0;
      img {
        float: right;
      }
    }
    textarea {
      width: 343px;
      height: 178px;
      border-radius: 2px;
      padding: 10px;
    }
    span::after {
      content: "";
      display: block;
      position: relative;
      left: 70px;
      top: -17px;
      width: 14px;
      height: 14px;
      background: url("../../assets/intoApproval/approv.png");
      background-size: 14px 14px;
    }
  }
  .reject,
  .same {
    width: 175px;
    height: 40px;
    border-radius: 4px;
    font-family: PingFangSC-Semibold;
    font-size: 15px;
    img {
      width: 13px;
      height: 13px;
    }
  }
  .reject {
    color: #656464;
    border: 1px solid #656464;
  }
  .same {
    color: #ffffff;
    background: #00469c;
    border: 1px solid #00469c;
  }
  .add-box {
    .before {
      border: 1px solid #fdb62f;
      border-radius: 4px;
      color: #fdb62f;
      img{
        width: 18px;
      }
    }
    .next {
      background: #1d3fff;
      border-radius: 4px;
      color: #fff;
      img{
        width: 18px;
      }
    }
  }
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>