<template>
  <div class="about-cont">
    <div class="top-banner" />
    <div class="banner-desc" v-html="bannnerDesc" />
    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">发展历程</div>
    </div>

    <div class="time-line">
      <!-- <div class="time-l"></div>
      <div class="time-r"></div> -->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in timelines"
          :key="index"
        >
          <span class="timp-span" v-html="activity.content" />
          <template slot="dot">
            <div class="time-line-node" />
            <div class="time-stamp">{{ activity.timestamp }}</div>
          </template>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannnerDesc: `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长安银科定位为数字化应收账款服务商，主要为客户提供应收账款融资和管理服务。成立至今，公司已累计为中小微企业提供人民币融资超65亿元，美元融资超3300万元，港币融资近500万元，受托资产管理超人民币9亿元，支持中小企业超过1500家。⽬前，公司设有⻄安、上海、深圳和资产管理共四个运营中心，业务涵盖建筑⾏业、交通物流、⼯程机械、跨境电商、机械制造等不同⾏业。随着国际和国内环境的不断变化，贸易中产⽣的应收账款规模不断增⼤，且周期不断加长，由此，客户融资和管理需求也不断增强。长安银科基于对贸易的深刻理解和长期的业务实践，精耕应收账款服务市场，为客户提供全⽅位的专业化服务，包括应收账款融资、⾮融资性坏账担保、应收账款催收、资信调查与评估等业务。在“专业化、科技化、国际化”展业理念的指导下，长安银科根据不同贸易形态产⽣的应收账款的特点，在国际及国内贸易两个⽅向上，向市场推出10多种服务产品。其中，国际贸易⽅向，可以为传统出⼝模式（B2B）和跨境电商新业态（B2C）两种模式提供超过5种服务产品，从⽽最⼤限度的满⾜因出⼝贸易⽽产⽣的应收账款融资和管理需求。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长安银科的发展，得益于⼴阔的商业贸易市场和客户⽀持。未来，公司将紧紧围绕数字化应收账款服务商的核心定位，坚持⾼质量稳健发展之路，在“守时、专业、精准”的经营理念指导下，依托国内、国际两个应收账款市场，充分运⽤科技⼿段，为客户提供贴心、⾼效、专业的服务。`,
      timelines: [
        {
          timestamp: '2023年',
          content: `11月<br/>长安银科获得“商业保理行业团体标准示范单位”荣誉称号。荣获第八届（2023）中国商业保理行业创新案例奖。<br/>
          10月<br/>长安银科荣获“支持拓宽融资渠道 - 十佳金融创新产品（模式）”奖（西安市金融工作局）。<br/>
          9月<br/>长安银科喜获“西安市先进制造业协会”副理事长单位。<br/>
          4月<br/>长安银科获评“中国（陕西）自由贸易试验区西安区域首批合伙人企业”。<br/>
          3月<br/>长安银科喜获“特殊贡献奖”（经发控股）。<br/>
          2月<br/>中国商业保理行业发展十周年（2012-2022）功勋奖 匠心奖。
          `
        },
        {
          timestamp: '2022年',
          content: `
          11月<br/>长安银科喜获“中国人民银行征信中心2021年度征信系统数据质量工作优秀机构”和“中国人民银行征信中心2021年度征信系统数据质量工作优秀个人”奖。<br/>
          6月<br/>长安银科完成与建行银行系统对接。<br/>
          4月<br/>长银保理喜获“最佳业务创新金融企业”奖（西安经开区）。<br/>
          4月20日<br/>“深圳长银科技服务有限公司”正式成立，完成工商注册。<br/>
          4月2日<br/>“上海银颗科技服务有限公司”正式成立，完成工商注册。<br/>
          3月<br/>长安银科完成与苏宁银行系统对接。
          `
        },
        {
          timestamp: '2021年',
          content: `
          12月<br/>长安银科喜获“2021第四届全球跨境电商节暨第六届深圳国际跨境电商贸易博览会”“优秀跨境电商金融服务商”称号。<br/>
          10月<br/>长银保理荣获第六届（2021）中国商业保理行业创新奖。<br/>
          `
        },
        {
          timestamp: '2020年',
          content: `
          12月<br/>长安银科正式成为深圳市跨境电子商务协会理事单位。<br/>
          8月<br/>长安银科喜获国家版权局的首批著作权证书。<br/>
          5月<br/>长银保理荣获第五届（2020）中国商业保理行业创新奖。
          `
        },
        {
          timestamp: '2019年',
          content: `
          10月<br/>中国人民银行征信中心验收通过长银保理征信系统。<br/>
          4月<br/>长银保理荣获第四届（2019）中国商业保理行业创新奖。<br/>
          4月<br/>长银保理荣获西安经开区及自贸区颁发的丝路国际保理平台。<br/>
          1月<br/>长银保理取得金融机构代码证。
          `
        },
        {
          timestamp: '2018年',
          content: `
          7月<br/>长银保理与美国CIT金融集团签署战略合作协议。<br/>
          4月<br/>长银保理荣获第三届（2018）中国商业保理行业创新奖。<br/>
          3月21日<br/>“西安银叶科技服务有限公司”正式成立，完成工商注册。
          `
        },
        {
          timestamp: '2017年',
          content: `
          12月<br/>长银保理与德国最大保理银行Deutsche Factor Bank签署战略合作协议。<br/>
          7月<br/>长银保理成为西北地区第一家进入中信保被保险名单的保理企业。<br/>
          7月<br/>长银保理成功加入国际保理商联合会（ FCI ）。<br/>
          3月<br/>长银保理荣获第二届（2017）中国商业保理行业创新奖。
          `
        },
        {
          timestamp: '2016年',
          content: `
          12月<br/>长银保理加入中国服务贸易协会商业保理专委会（CFEC），并担任常务委员一职。<br/>
          11月16日<br/>“长安银科商业保理有限公司”正式成立，完成工商注册。<br/>
          8月19日<br/>“长安银科资产管理有限公司”正式成立，完成工商注册。
          `
        }
      ]
    }
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.time-line {
  ::v-deep .el-timeline-item__tail {
    border-color: #FE7D0B;
  }
  ::v-deep .el-timeline-item__content {
    padding-left: 80px;
  }
  .time-line-node {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FE7D0B;
    // box-shadow: 4px 4px 2px rgba(254, 125, 11, .2);
  }
  .time-stamp {
    position: absolute;
    top: -4px;
    right: -76px;
    transition: translateY(-50);
    width: 72px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    background-image: url('../../../assets/aboutUs/tip.png');
  }
  .timp-span {
    color: #333;
    font-size: 14px;
    line-height: 30px;
  }
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1930px) {
  .about-cont {
    .top-banner {
      height: 730px !important;
      background-size: cover !important;
    }
    .banner-desc {
      width: 56% !important;
      text-align: justify;
    }
    .time-line {
      width: 56% !important;
      margin: 0 auto;
    }
  }
}
.about-cont {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  .top-banner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 630px;
    background: url('../../../assets/aboutUs/top-banner.png') no-repeat center;
  }
  .banner-desc {
    width: 65%;
    font-size: 16px;
    line-height: 30px;
    color: #000;
    margin: 60px auto 76px;
    text-align: justify;
  }
  .line-cont {
    width: 100%;
    text-align: center;
    background-color: #fff;
    .line {
      width: 18px;
      height: 2px;
      border: 2px solid #D9D9D9;
      margin: 0 auto 20px;
    }
    .line-desc {
      font-size: 16px;
      font-weight: 600;
      color: #2C4270;
    }
  }
  .line-cont-orange {
    padding: 90px 0 75px;
    .line-desc {
      color: #FE7D0B;
    }
  }
  .time-line {
    width: 50%;
    margin: 0 auto;
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .about-cont {
    position: relative;
    width: 100%;
    padding: 0 0 270px;
    margin-top: 60px;
    .top-banner {
      width: 100%;
      height: 124px;
      background-size: cover;
    }
  }
  .banner-desc {
    width: 100% !important;
    margin: 60px auto 0 !important;
    padding: 0 20px;
    text-align: justify;
  }
  .time-line {
    .el-timeline {
      padding-left: 0;
    }
  }
}
</style>
