<template>
  <div class="e-commerce">
    <div class="top-banner">
      <div class="banner-cont">
        <div class="banner-cont-1">最高可借 ￥{{ amount === 0 ? '3,000,000' : amount }}</div>
        <div class="banner-cont-2">告别账期烦恼 资金周转更灵活</div>
        <div class="banner-cont-3" @click="handleCalc">额度测算</div>
      </div>
    </div>
    <div class="pro-desc">
      <div v-for="item in bannerList" :key="item.aniDesc" class="pro-desc-item">
        <img :src="item.aniGif" />
        <div class="pro-desc-item-info">{{ item.aniDesc }}</div>
        <div class="pro-desc-overlay" />
      </div>
    </div>
    <div class="list-card" style="padding: 0 220px 0 215px;">
      <img class="about" src="@/assets/login/about.gif" />
      <div class="card-sec">
        <div class="sec-side-title">关于我们</div>
        <div class="sec-title">长安银科</div>
        <div class="sec-article">西安银叶科技服务有限公司(下称:“银叶科技”)为长安银科旗下科技子公司，定位为数字化应收账款服务商，主要为客户提供应贸易数字化、应收账款管理等服务。目前业务涵盖建筑行业、交通物流、工程机械、跨境电商、机械制造等不同行业，基于对贸易的深刻理解和长期的业务实践，公司精耕细作于应收账款服务市场，根据不同场景，推出相应的服务产品，同时可以为客户提供专属的服务。未来，公司将紧紧围绕数字化应收账款服务商的核心定位，坚持高质量稳健发展之路，在“守时、专业、精准”的经营理念指导下，依托国内、国际两个应收账款市场，充分运用科技手段，为客户提供贴心、高效、专业的服务。</div>
        <div class="sec-learn">了解更多 >></div>
      </div>
    </div>
    <div class="list-card" style="padding: 0 277px 0 155px;">
      <div class="card-sec">
        <div class="sec-title">国内电商</div>
        <div class="sec-article">国内电商保理融资产品是指与指定或合作的平台，依据电商卖家在电商平台已发货订单生成的待结算金额为商家提供保理融资服务的产品。产品依托公司指定或合作的电商平台，通过回款闭环管理等措施，以保理业务模式为商家提供融资及其他服务。该业务模式为线上交易，应收账款期限短、交易频次高、买方付款稳定。</div>
        <div class="sec-learn">了解更多 >></div>
      </div>
      <img class="eco-img" src="@/assets/login/eco.png" />
    </div>
    <div class="main-title" style="margin: 270px 0 48px 0;">专业技能</div>
    <div class="skill-desc">货物出运后可提前收款，增强现金流。全球知名机构收款，资金安全回流。进口商资信评估，信用担保缓释风险。应收账款无追买断，优化财务报表。不占银行授信，无抵押、不担保。可选择多币种融资，节省换汇成本。</div>
    <div class="product-cont">
      <ProductList />
    </div>
    <div class="main-title" style="margin: 270px 0 80px 0;">融资流程</div>
    <div class="carousel-cont">
      <Carousel />
    </div>
    <div class="main-title" style="margin: 167px 0 100px 0;">合作平台</div>
    <div class="platform-cont">
      <img v-for="item in platformList" :src="item.img" :key="item.idx" />
    </div>
    <div class="platform-desc">国内电商保理融资产品是指与指定或合作的平台，依据电商卖家在电商平台已发货订单生成的待结算金额为商家提供保理融资服务的产品。</div>
    <AmountCalculation ref="amountCalcRef" @getAmount="getAmount" />
  </div>
</template>

<script>
export default {
  components: {
    ProductList: () => import('./ProductList.vue'),
    Carousel: () => import('./FinancialCarousel.vue'),
    AmountCalculation: () => import('./AmountCalculation.vue')
  },
  data() {
    return {
      bannerList: [
        {
          aniGif: require('@/assets/login/desc-1.gif'),
          aniDesc: '通过率高'
        },
        {
          aniGif: require('@/assets/login/desc-2.gif'),
          aniDesc: '利率低'
        },
        {
          aniGif: require('@/assets/login/desc-3.gif'),
          aniDesc: '急速放款'
        }
      ],
      platformList: [
        {
          idx: 1,
          img: require('@/assets/login/douyin.png')
        },
        {
          idx: 2,
          img: require('@/assets/login/kuaishou.png')
        },
        {
          idx: 3,
          img: require('@/assets/login/pdd.png')
        },
        {
          idx: 4,
          img: require('@/assets/login/meituan.png')
        }
      ],
      amount: 0
    }
  },
  methods: {
    handleCalc() {
      this.$refs.amountCalcRef.dialogFormVisible = true
      this.$refs.amountCalcRef.totalAmount = 0
      this.$refs.amountCalcRef.ruleForm = {
        amount: null,
        backRate: null
      }
    },
    getAmount(amount) {
      this.amount = amount
    }
  }
}
</script>

<style lang="scss" scoped>
.e-commerce {
  width: 100%;
  margin-top: 90px;
  padding-bottom: 183px;
  .top-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 670px;
    padding: 0 100px;
    background: url('../../../assets/login/login_bg.png') no-repeat center center;
    .banner-cont {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 860px;
      height: 317px;
      background-color: #fff;
      opacity: .85;
      border-radius: 17px;
      .banner-cont-1 {
        font-size: 24px;
        color: #131820;
      }
      .banner-cont-2 {
        font-size: 40px;
        font-weight: 700;
        margin: 16px 0 40px;
        color: #131820;
      }
      .banner-cont-3 {
        width: 360px;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        border-radius: 27.5px;
        background-color: #E9423A;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }
    }
  }
  .pro-desc {
    display: flex;
    width: 100%;
    padding: 0 100px;
    margin-top: 32px;
    justify-content: space-between;
    .pro-desc-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 552px;
      height: 118px;
      position: relative;
      .pro-desc-item-info {
        margin-left: 15px;
        font-size: 24px;
        color: #131820;
      }
      .pro-desc-overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #D9D9D9;
        opacity: .2;
      }
    }
  }
  .list-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 100px;
    margin-top: 136px;
    .about {
      width: 706px;
      height: 706px;
      margin-right: 76px;
    }
    .eco-img {
      width: 642px;
      height: 390px;
      margin-left: 146px;
    }
    .card-sec {
      flex: 1;
      .sec-side-title {
        font-size: 16px;
        color: #32373E;
        margin-bottom: 25px;
      }
      .sec-title {
        font-size: 24px;
        font-weight: 700;
        color: #131820;
        margin-bottom: 60px;
      }
      .sec-article {
        text-indent: 32px;
        font-size: 16px;
        line-height: 24px;
        color: #131820;
        margin-bottom: 90px;
      }
      .sec-learn {
        font-size: 16px;
        cursor: pointer;
        text-align: right;
        color: #E9423A;
      }
    }
  }
  .main-title {
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: #000;
  }
  .skill-desc {
    width: 100%;
    padding: 0 344px;
    text-indent: 28px;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 90px;
    color: #575757;
  }
  .product-cont {
    padding: 0 210px;
    width: 100%;
  }
  .carousel-cont {
    width: 100%;
    height: 650px;
  }
  .platform-cont {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 344px;
    margin-bottom: 56px;
    img {
      width: 112px;
      height: 112px;
    }
  }
  .platform-desc {
    width: 100%;
    padding: 0 344px;
    text-indent: 28px;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 90px;
    color: #000;
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {}
@media screen and (max-width: 768px) {}
@media screen and (min-width: 1930px) {}
</style>
