<template>
  <div id="rentInfo">
    <list-item :item-height="44">
      <item>
        <div slot="name">商务政策</div>
        <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
      </item>
      <item>
        <div slot="name">设备总价</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">融资金额</div>
        <input slot="content" v-model="baseInfo.address_sp" readonly >
      </item>
      <item>
        <div slot="name">首付款</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">保证金比例</div>
        <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
      </item>
      <item>
        <div slot="name">保证金</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">手续费比例</div>
        <input slot="content" v-model="baseInfo.address_sp" readonly >
      </item>
      <item>
        <div slot="name">手续费</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">预计付款日</div>
        <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
      </item>
      <item>
        <div slot="name">还款周期</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">租赁期数</div>
        <input slot="content" v-model="baseInfo.address_sp" readonly >
      </item>
      <item>
        <div slot="name">年利率</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
    </list-item>
    <div class="top-userInfo">查看还款计划</div>
    <div class="userInfo">担保人信息</div>
    <list-item>
      <item>
        <div slot="name">参数项</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
      <item>
        <div slot="name">产品线</div>
        <input slot="content" v-model="baseInfo.address_sp" readonly >
      </item>
      <item>
        <div slot="name">产品数量</div>
        <input slot="content" v-model="baseInfo.working_place_sp" readonly >
      </item>
    </list-item>
    <div class="alert">
      <div class="alert-content">
        <div class="title">
          <img src="@/assets/intoApproval/info.png" >
          <span class="info-word">提示</span>
        </div>
        <p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。
        <span>为了确保您的权益，请查看全部</span></p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      baseInfo: {},
    }
  },
}
</script>
<style lang="less" scoped>
#rentInfo {
  .top-userInfo {
    height: 45px;
    line-height: 45px;
    text-decoration: underline;
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #00469c;
    letter-spacing: 0;
    padding-left: 16px;
    background: rgba(0, 70, 156, 0.03);
  }
   .userInfo {
      height: 45px;
      line-height: 45px;
      color: #00469c;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 12px;
    }
      .alert {
      height: 93px;
      width: 100%;
      background: rgba(252, 200, 0, 0.16);
    }
    .alert-content {
      width: 334px;
      margin: 0 auto;
      padding-top: 16px;
    }
    .info-word {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #fcc800;
      letter-spacing: 0.5px;
      margin-left: 8px;
    }
    .title {
      display: flex;
      align-items: center;
    }
    .top-info {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #656464;
      letter-spacing: 0.37px;
      margin-top: 7px;
      line-height: 15px;
      span{
          color: #fcc800;
      }
    }
    .alert img {
      width: 18px;
      height: 18px;
    }
}
</style>
