<template>
  <h-view id="function-center" class="public-style" title="产品查询">
    <h-header class="bar-custom">
      <div slot="center" class="top-word">业务指引-{{ role }}</div>
    </h-header>
    <h-content class="has-footer">
      <!-- 搜索 -->
      <div class="search has-header">
        <img src="@/assets/functionCenter/bgxg-pic@2x.png" alt="">
      </div>
      <div class="fun-item" style="height: 200px">
        <div class="userInfo"> 租前业务</div>
        <div class="info-content">
          <div class="add-name">
            <img src="@/assets/functionCenter/bound@2x.png" alt="">
            <div class="name-title">用户绑定</div>
          </div>
          <div class="add-content" @click="userBind()">
            <img src="@/assets/functionCenter/in@2x.png" alt="">
          </div>
        </div>
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/todo@2x.png" alt="">-->
<!--            <div class="name-title">待办审批</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="todoList()">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/todo@2x.png" alt="">-->
<!--            <div class="name-title">产品查询</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="toproduct()">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/todo@2x.png" alt="">-->
<!--            <div class="name-title">产品试算</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="financingTrial()">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="fun-item-before" style="height: 200px">
        <div class="userInfo"> 租中业务</div>
        <div class="info-content">
          <div class="add-name">
            <img src="@/assets/functionCenter/con-sign@2x.png" alt="">
            <div class="name-title">融租方案确认</div>
          </div>
          <div class="add-content" @click="conSign">
            <img src="@/assets/functionCenter/in@2x.png" alt="">
          </div>
        </div>
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/con-sign@2x.png" alt="">-->
<!--            <div class="name-title">融租合同创建</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="goStart">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
        <!-- <div class="info-content">
          <div class="add-name">
            <img src="@/assets/functionCenter/video@2x.png" alt="" >
            <div class="name-title">视频面签</div>
          </div>
          <div class="add-content" @click="goVideoSign">
            <img src="@/assets/functionCenter/in@2x.png" alt="" >
          </div>
        </div> -->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/car@2x.png" alt="">-->
<!--            <div class="name-title">合同签订</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="goCarConfirm">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/payment@2x.png" alt="">-->
<!--            <div class="name-title">首付还款</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="goReimburse">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
      </div>
<!--      <div class="fun-item-after">-->
<!--        <div class="userInfo"> 租后业务</div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/rent@2x.png" alt="">-->
<!--            <div class="name-title">我的发票</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="goInvoice">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/rent@2x.png" alt="">-->
<!--            <div class="name-title">合同还款</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="goContractRepayment">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/rent@2x.png" alt="">-->
<!--            <div class="name-title">租金还款</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="changeRent">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="info-content">-->
<!--          <div class="add-name">-->
<!--            <img src="@/assets/functionCenter/con-que@2x.png" alt="">-->
<!--            <div class="name-title">合同查询</div>-->
<!--          </div>-->
<!--          <div class="add-content" @click="changeContract('GUTA')">-->
<!--            <img src="@/assets/functionCenter/in@2x.png" alt="">-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
    </h-content>
  </h-view>
</template>

<script>
export default {
  name: 'FunctionList',
  data () {
    return {
      prolists: [],
      divisionList: [],
      list_flag: false,
      factory_bp_id: '',
      searchInput: '', // 搜索内容
      pagenum: 1,
      role: '未绑定',
      // multipleRole: window.localStorage.getItem('multipleRole'),
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    // if (true) {
    next(vm => {
      if (window.localStorage.getItem('user_phone')) {
        vm.userQuery()
      }
    })
    // }
    // next()
  },
  // created () {
  //    this.userQuery()
  // },
  methods: {
    userQuery () {
      let vm = this
      // let url = $config.basePath + 'user_query'
      // let param = {
      //   phone: window.localStorage.getItem('user_phone'),
      // }
      // vm.hlsPopup.showLoading('请稍候')
      // vm.$post(url, param).then(function (res) {
      //   vm.hlsPopup.hideLoading()
      //   if (res.result === 'S') {
      //     if (res.info.user_bp_status === 'APPROVED') {
      //       vm.flag = false
      //     }
      //     window.localStorage.setItem('user_phone', res.info.user_phone)
      //     vm.user_bp_status = res.info.user_bp_status
      //     vm.user_bp_class = res.info.user_bp_class
      //     vm.bp_id = res.info.user_bp_id
      //     vm.bp_identity = res.info.bp_identity
      //     vm.app_user_id = res.info.app_user_id
      //     window.localStorage.removeItem('bp_id')
      //     window.localStorage.setItem('bp_id', res.info.user_bp_id)
      //     window.localStorage.setItem('user_bp_status', res.info.user_bp_status)
      //     window.localStorage.setItem('bp_name', res.info.user_bp_name)
      //     window.localStorage.setItem('bp_identity', res.info.bp_identity)
      //     window.localStorage.setItem('bp_class', res.info.user_bp_class)
      //     // 有角色信息就不设置缓存，可能在角色切换时做了处理，此处不设置角色
      //     if (localStorage.bp_type || localStorage.multipleRole) {
      //       vm.user_bp_type = localStorage.bp_type
      //     } else {
      //       window.localStorage.setItem('bp_type', res.info.user_bp_type)
      //       window.localStorage.setItem('multipleRole', res.info.user_bp_type)
      //       vm.user_bp_type = res.info.user_bp_type
      //     }
      //     // vm.bp_type_n = res.info.user_bp_type_n
      //     vm.user_bp_name = res.info.user_bp_name
      //     vm.user_phone = res.info.user_phone
      //     if (vm.user_bp_type === 'TENANT') {
      //       vm.role = '主承租人'
      //     } else if (vm.user_bp_type === 'GUTA') {
      //       vm.role = '担保人'
      //     } else if (vm.user_bp_type === 'FACTORY') {
      //       vm.role = '主机厂'
      //     } else if (vm.user_bp_type === 'AGENT') {
      //       vm.role = '经销商'
      //     } else if (vm.user_bp_type === 'OFFICE') {
      //       vm.role = '办事处'
      //     } else if (vm.user_bp_type === 'MANAGER') {
      //       vm.role = '业务经理'
      //     }
      //     if (vm.user_bp_type === 'AGENT') {
      //       vm.isAGENT = true
      //     } else {
      //       vm.isAGENT = false
      //     }
      //     if (vm.user_bp_type === 'GUTA' || vm.user_bp_type === 'TENANT' || vm.user_bp_type === 'AGENT') {
      //       vm.isMultiRole = true
      //     } else {
      //       vm.isMultiRole = false
      //     }
      //   } else {
      //     this.hlsPopup.showLongCenter(res.message)
      //   }
      // })

        let obj = JSON.parse(window.localStorage.getItem("now_user_bp_bind_id"));

        if(!Object.keys(obj).length) return vm.role = '未绑定';

        let user_bp_status =  obj.bp_status;
        let user_bp_class =  obj.bp_class;
        let bp_id =  obj.bp_id;
        let bp_identity =  obj.bp_identity;
        let bp_type =  obj.bp_type;
        let bp_name =  obj.bp_name;

        let user_phone =   window.localStorage.getItem("user_phone");

          if (user_bp_status === 'APPROVED') {
            vm.flag = false
          }

          vm.user_bp_status = user_bp_status
          vm.user_bp_class = user_bp_class
          vm.bp_id = bp_id
          vm.bp_identity = bp_identity
          vm.user_bp_type = bp_type

          vm.user_bp_name = bp_name
          vm.user_phone = user_phone

          if (bp_type === 'TENANT') {
            vm.role = '主承租人'
          } else if (bp_type === 'GUTA') {
            vm.role = '担保人'
          } else if (bp_type === 'FACTORY') {
            vm.role = '主机厂'
          } else if (bp_type === 'AGENT') {
            vm.role = '经销商'
          } else if (bp_type === 'OFFICE') {
            vm.role = '办事处'
          } else if (bp_type === 'MANAGER') {
            vm.role = '业务经理'
          }
          if (bp_type === 'AGENT') {
            vm.isAGENT = true
          } else {
            vm.isAGENT = false
          }
          if (bp_type === 'GUTA' || bp_type === 'TENANT' || bp_type === 'AGENT') {
            vm.isMultiRole = true
          } else {
            vm.isMultiRole = false
          }
    },
    // 进入融资合同创建
    goStart () {
      let vm = this
      if (this.bp_id) {
        if (vm.user_bp_type === 'MANAGER') {
          this.$router.push({
            name: 'StartList',
          })
        } else {
          hlsPopup.showLongCenter('您当前角色非业务经理，无法使用该功能！')
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 融租方案确认
    conSign () {
      // .首付还款、租金还款、融租方案确认需对业务经理角色做控制，点击无法进入，提示“当前角色非承租人或担保人，无法使用该功能！”
      /*if (this.user_bp_type === 'MANAGER') {
        hlsPopup.showLongCenter('当前角色非承租人或担保人，无法使用该功能！')
        return
      }*/
      if (this.bp_id) {
        this.$router.push({
          name: 'ContractSigning',
          params: {
            user_bp_type: this.user_bp_type,
          },
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 视频面签
    goVideoSign () {
      let vm = this
      if (this.bp_id) {
        if (vm.user_bp_type === 'OFFICE' || vm.user_bp_type === 'FACTORY' || vm.user_bp_type === 'AGENT') {
          hlsPopup.showLongCenter('您当前角色非承租人或担保人，无法使用该功能！')
        } else {
          this.$router.push({
            name: 'VideoSign',
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入 合同查询
    changeContract (e) {
      let vm = this
      if (this.bp_id) {
        vm.$router.push({
          name: 'ContractRecords',
          params: {
            bp_type: e,
          },
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入合同签订
    goCarConfirm () {
      let vm = this
      if (vm.bp_id) {
        if (vm.user_bp_type === 'OFFICE' || vm.user_bp_type === 'FACTORY') {
          hlsPopup.showLongCenter('您当前角色非承租人或担保人或经销商，无法使用该功能！')
        } else {
          vm.$router.push({
            name: 'ConfirmList',
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入我的还款
    goReimburse () {
      let vm = this
      // .首付还款、租金还款、融租方案确认需对业务经理角色做控制，点击无法进入，提示“当前角色非承租人或担保人，无法使用该功能！”
      if (this.user_bp_type === 'MANAGER') {
        hlsPopup.showLongCenter('当前角色非承租人或担保人，无法使用该功能！')
        return
      }
      if (this.bp_id) {
        if (vm.user_bp_type === 'OFFICE' || vm.user_bp_type === 'FACTORY' || vm.user_bp_type === 'AGENT') {
          hlsPopup.showLongCenter('您当前角色非承租人或担保人，无法使用该功能！')
        } else {
          this.$router.push({
            name: 'FirstPay',
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    goInvoice () {
      let vm = this
      if (this.bp_id) {
        if (vm.user_bp_type === 'TENANT') {
          this.$router.push({
            name: 'MyInvoice',
          })
        } else {
          hlsPopup.showLongCenter('您当前角色非承租人，无法使用该功能！')
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    goContractRepayment () {
      if (this.bp_id) {
        this.$router.push({
          name: 'ContractRepayment',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    changeRent () {
      let vm = this
      // 首付还款、租金还款、融租方案确认需对业务经理角色做控制，点击无法进入，提示“当前角色非承租人或担保人，无法使用该功能！”
      if (this.user_bp_type === 'MANAGER') {
        hlsPopup.showLongCenter('当前角色非承租人或担保人，无法使用该功能！')
        return
      }
      if (this.bp_id) {
        if (vm.user_bp_type === 'OFFICE' || vm.user_bp_type === 'FACTORY' || vm.user_bp_type === 'AGENT') {
          hlsPopup.showLongCenter('您当前角色非承租人或担保人，无法使用该功能！')
        } else {
          this.$router.push({
            name: 'NewList',
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    userBind () {
      // .首付还款、租金还款、融租方案确认需对业务经理角色做控制，点击无法进入，提示“当前角色非承租人或担保人，无法使用该功能！”
      if (this.user_bp_type === 'MANAGER') {
        hlsPopup.showLongCenter('业务经理无需进行用户绑定！')
        return
      }
      window.localStorage.setItem('from', true)
      if (!this.bp_id && this.user_bp_status === 'NEW') {
        this.$router.push({
          name: 'UserBind',
        })
      } else if (this.bp_id && this.user_bp_status === 'NEW') {
        //  this.description = '待提交'
        if (this.user_bp_class === 'NP') {
          this.$router.push({
            name: 'NPBaseInfo',
            params: {
              bp_id: this.bp_id,
              user_bp_name: this.user_bp_name,
            },
          })
        } else if (this.user_bp_class === 'ORG') {
          this.$router.push({
            name: 'EnterpriseNew',
            params: {
              bp_id: this.bp_id,
              user_bp_name: this.user_bp_name,
              bp_class: this.user_bp_class,
            },
          })
        }
      } else if (
        (this.bp_id && this.user_bp_status === 'RETURN') ||
          (this.bp_id && this.user_bp_status === 'REJECT')
      ) {
        if (this.user_bp_class === 'NP') {
          this.$router.push({
            name: 'NPBaseInfo',
            params: {
              bp_id: this.bp_id,
              user_bp_name: this.user_bp_name,
            },
          })
        } else if (this.user_bp_class === 'ORG') {
          this.$router.push({
            name: 'EnterpriseNew',
            params: {
              bp_id: this.bp_id,
              user_bp_name: this.user_bp_name,
              bp_class: this.user_bp_class,
            },
          })
        }
      } else if (this.bp_id && this.user_bp_status === 'APPROVED') {
        // this.description = '解除绑定'  已绑定
        hlsPopup.showLongCenter('您已完成用户绑定，请到个人中心查看或修改信息！')
      } else {
        //   this.description = '审批中'
        hlsPopup.showLongCenter('您的用户绑定申请正在审批中！')
      }
    },
    toproduct () {
      this.$router.push({
        name: 'QueryHome',
      })
    },
    financingTrial () {
      this.$router.push({
        name: 'FinancingTrial',
      })
    },
    todoList () {
      if (this.bp_id) {
        if (this.user_bp_type !== 'OFFICE' && this.user_bp_type !== 'AGENT') {
          hlsPopup.showLongCenter('仅经销商/办事处业务员角色可使用该功能！')
        } else {
          this.$router.push({
            name: 'ToDoList',
          })
        }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    showMessage () {
      hlsPopup.showLongCenter('暂未开放')
    },
  },
}
</script>
<style lang='less'>
  #function-center {
    .search {
      background-color: #fff;
      position: absolute;
      width: 100%;
      z-index: 1;
      width: 100%;
      position: absolute;
      top: 0;

      img {
        width: 100%;
        height: 150px;
      }
    }

    .fun-item {
      background: #FFFFFF;
      border-radius: 0.4rem;
      width: 80%;
      margin-left: 10%;
      position: absolute;
      z-index: 2;
      margin-top: 1.4rem;

      .userInfo {
        height: 35px;
        line-height: 35px;
        color: @headerColor;
        margin-top: 5px;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #1D3FFF;
        letter-spacing: 0;
        margin-left: 30px;
        position: relative;
      }

      .userInfo::before {
        content: "";
        display: block;
        width: 4px;
        height: 16px;
        background-color: @headerColor;
        position: absolute;
        left: -15px;
        top: 9px;
      }

      .info-content {
        width: 85%;
        margin-left: 10%;
        height: 40px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;

        .add-name {
          width: 70%;
          display: -webkit-flex;
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: start;
          justify-content: flex-start;
          -webkit-box-align: center;
          align-items: center;
          -webkit-justify-content: flex-start;
          -webkit-align-items: center;

          img {
            height: 15px;
            width: 15px;
          }
        }

        .name-title {
          margin-left: 2%;
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #656464;
          letter-spacing: 0;
          line-height: 18px;
        }

      }

      .add-content {
        width: 20%;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        -webkit-align-items: center;

        img {
          height: 15px;
          width: 14px;
        }
      }
    }

    .fun-item-before {
      background: #FFFFFF;
      border-radius: 0.4rem;
      width: 80%;
      margin-left: 10%;
      margin-top: 5.6rem;
      position: absolute;
      //  position: absolute;
      // z-index: 2;
      .userInfo {
        height: 35px;
        line-height: 35px;
        color: @headerColor;
        margin-top: 5px;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #1D3FFF;
        letter-spacing: 0;
        margin-left: 30px;
        position: relative;
      }

      .userInfo::before {
        content: "";
        display: block;
        width: 4px;
        height: 16px;
        background-color: @headerColor;
        position: absolute;
        left: -15px;
        top: 9px;
      }

      .info-content {
        width: 85%;
        margin-left: 10%;
        height: 40px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;

        .add-name {
          width: 70%;
          display: -webkit-flex;
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: start;
          justify-content: flex-start;
          -webkit-box-align: center;
          align-items: center;
          -webkit-justify-content: flex-start;
          -webkit-align-items: center;

          img {
            height: 15px;
            width: 15px;
          }
        }

        .name-title {
          margin-left: 2%;
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #656464;
          letter-spacing: 0;
          line-height: 18px;
        }

      }

      .add-content {
        width: 20%;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        -webkit-align-items: center;

        img {
          height: 15px;
          width: 14px;
        }
      }

    }

    .fun-item-after {
      background: #FFFFFF;
      border-radius: 0.4rem;
      width: 80%;
      margin-left: 10%;
      margin-top: 9.8rem;
      margin-bottom: 1.5rem;
      //  position: absolute;
      // z-index: 2;
      .userInfo {
        height: 35px;
        line-height: 35px;
        color: @headerColor;
        margin-top: 5px;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #1D3FFF;
        letter-spacing: 0;
        margin-left: 30px;
        position: relative;
      }

      .userInfo::before {
        content: "";
        display: block;
        width: 4px;
        height: 16px;
        background-color: @headerColor;
        position: absolute;
        left: -15px;
        top: 9px;
      }

      .info-content {
        width: 85%;
        margin-left: 10%;
        height: 40px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;

        .add-name {
          width: 70%;
          display: -webkit-flex;
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: start;
          justify-content: flex-start;
          -webkit-box-align: center;
          align-items: center;
          -webkit-justify-content: flex-start;
          -webkit-align-items: center;

          img {
            height: 15px;
            width: 15px;
          }
        }

        .name-title {
          margin-left: 2%;
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #656464;
          letter-spacing: 0;
          line-height: 18px;
        }

      }

      .add-content {
        width: 20%;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        align-items: center;
        -webkit-justify-content: flex-end;
        -webkit-align-items: center;

        img {
          height: 15px;
          width: 14px;
        }
      }

    }

  }

  .platform-ios {
    #query {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #query {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }

  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #query {
        .scrollContent {
          padding-top: 2.72rem;
        }

        .search {
          input {
            background: url("../../assets/contractStart/search1.png") 320px no-repeat;
            background-size: 16px 16px;
            background-color: rgba(239, 239, 239, 0.55);
            padding: 8px 12px;
            border-radius: 4px;
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #888c8f;
          }
        }
      }
    }
  }
</style>
