<template>
  <div class="wrapper">
    <div class="poster">
      <img class="backIcon" src="@/assets/common/back_icon_2.png" alt="" @click="back" />
      <img class="loansDetail" src="@/assets/loans/loans_detail.png" alt="" />
    </div>
    <div class="intro">
      <p>
        <span class="b">“网捷贷”</span>
        是中国农业银行个人客户专享的自助小额消费贷款。客户足不出户即可享受在线申请，秒速审批，在线用款，灵活还款的便捷服务，满足客户日常消费资金需求。
        <span class="a">纯线上最高额度20万元。</span>
      </p>
    </div>
    <div class="section">
      <div class="title">
        <div class="line"></div>
        <p>产品特点</p>
        <div class="line"></div>
      </div>
      <div class="content">
        <p>1. 申请易 纯线上、全自动、免担保</p>
        <p>2. 到账快 一键申请，实时到账</p>
        <p>3. 灵活用 随借随还，可循环使用</p>
        <p>4. 低成本 年利率4.35%，用款起息，按日计算</p>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <div class="line"></div>
        <p>贷款对象</p>
        <div class="line"></div>
      </div>
      <div class="content">
        <p>农行房贷客户、贵宾客户、代发工资客户，缴纳公积金的优质单位客户</p>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <div class="line"></div>
        <p>申请流程</p>
        <div class="line"></div>
      </div>
      <div class="content">
        <p>登入农行网银掌银 → 选择贷款、网捷贷 → 在线申请签约 → 在线用款 → 按约还款</p>
      </div>
      <van-button class="button" color="#EB4E3F" @click="register">立即申请</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";

Vue.use(Button);
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
    register() {
      window.location.href =
        "app:中国农业银行_bankabc://%7b%22method%22%3a%22jumpToSharedProduct%22%2c%22param%22%3a%22rR4uOmAzpF49gqwDYQiLpzHEyZ12Eb2zSvUIvqC1Tz4%2fknUug5sQ4eBk%2fcV61d99026ljSbdORzNlVBXexpjmAfX0Wl1lPPFcVOexJLrQZs%3d%22%7d";
    },
  },
};
</script>

<style lang="stylus" scoped>
.wrapper {
  height 100vh
  overflow auto;
  background: linear-gradient(180deg, #EB4E3F 0%, #FC7D50 100%);

  .poster {
    position: relative;
    width 100%;
    height 700px;
    background url('~@/assets/loans/loans_detail_poster.png');
    background-size cover

    .backIcon {
      position absolute;
      top: 64px;
      left 30px;
      width 40px;
      height 41px;
    }

    .loansDetail {
      position absolute;
      top: 126px;
      left 0;
      right 0;
      margin auto;
      width 554px;
      height 77px;
    }
  }

  .intro {
    position: relative;
    margin -80px 30px 30px
    padding 30px;
    background: #FFFFFF;
    border-radius: 26px;

    p {
      font-size: 26px;
      line-height: 42px;
      font-weight: 500;
      color: #676767;

      .b {
        font-weight: 600;
        color: #333333;
      }

      .a {
        color: #EB4E3F;
      }

    }
  }

  .section {
    margin 30px;
    padding 40px 30px 30px;
    background: #FFFFFF;
    border-radius: 26px;

    .title {
      display flex;
      align-items center;
      justify-content center;

      .line {
        width 40px;
        height 6px;
        background #EB4E3F;
        border-radius 5px;
      }
      p {
        margin 0 20px;
        font-size: 30px;
        font-weight: 500;
        color: #333333;
      }
    }

    .content {
      margin-top 30px;
      p {
        font-size: 26px;
        color: #676767;
        line-height: 42px;
      }
    }

    .button {
      display block
      margin 30px auto 0;
      width: 230px;
      height: 74px;
      background: #EB4E3F;
      border-radius: 24px;
      font-size: 28px;
    }
  }
}
</style>
