<template>
  <div class="qualify-cont">
    <div class="top-banner">
      <div class="banner-cont">
        <div class="banner-img" />
        <div class="banner-desc">国家级贸易协会及保理协会成员，为客户提供行业领先的优质服务。</div>
      </div>
    </div>
    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">安全合规</div>
    </div>
    <div class="safe-cont">
      <div class="safe-sec">
        <div class="safe-sec-title safe-sec-1">资金安全</div>
        <div class="safe-sec-desc">长安银科及其服务商合作建立成熟完善的反洗钱及反恐融资合规体系，在客户准入时即对客户进⾏合规身份认证。客户正式开通服务后，长安银科与其服务商从系统技术、实操运营、理后管理等多个方面确保客户资金和金融交易安全。</div>
      </div>
      <div class="safe-sec">
        <div class="safe-sec-title safe-sec-2">隐私保护</div>
        <div class="safe-sec-desc">长安银科采集的客户信息均经客户同意，做出承诺，保证信息安全。加密储存，防止对外泄露。</div>
      </div>
      <div class="safe-sec">
        <div class="safe-sec-title safe-sec-3">系统安全</div>
        <div class="safe-sec-desc">长安银科系统采用国际最高标准服务器，建立了统一集成的技术和操作平台，保证系统安全稳定不宕机。同时，系统采用加密传输通道以及加签验签技术，保证客户使用系统的安全性。</div>
      </div>
    </div>

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">资质荣誉</div>
    </div>

    <div class="cert-cont">
      <el-row>
        <el-col
          v-for="(item, index) in certList"
          :key="item.text"
          :span="[0, 1].includes(index) ? 12 : 8"
        >
          <div class="cert-img">
            <img :src="item.ingUrl">
          </div>
          <div class="cert-text">{{ item.text }}</div>
        </el-col>
      </el-row>
    </div>

    <!-- <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">媒体报道</div>
    </div>

    <div class="media-cont">
      <el-row>
        <el-col :span="12">
          <div class="video-cont">
            <video controls loop>
              <source src="@/assets/glory/glory.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="video-desc">长安银科2019年获得国家外汇管理局正式批准的美元融资资格，随后人民日报、金融时报、央广网、凤凰卫视、陕西卫视、西安电视台、陕西自贸、经开区政府等等对此事进行多种渠道的报道。报道称此举为企业融资难、融资贵的问题开辟了新的途径，填补了外汇管理资本项目商业保理业务政策的空白，是全国自贸区金融创新工作的一项重要突破。</div>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      certList: [
        {
          ingUrl: require('@/assets/glory/cert_1.png'),
          text: '中国服务贸易协会商业保理委员会(Commercial Factoring Expertise Committee of CATIS)常务委员单位'
        },
        {
          ingUrl: require('@/assets/glory/cert_2.png'),
          text: '国际保理商联合会(Factors Chain International)会员'
        },
        // {
        //   ingUrl: require('@/assets/glory/cert_3.png'),
        //   text: '《国家外管局美元融资业务批复》 全国首家（目前唯一）具有美元融资资格的保理公司',
        //   hide: false
        // },
        {
          ingUrl: require('@/assets/glory/cert_4.png'),
          text: '2017-2023年度连续7年 荣获中国商业保理行业创新奖'
        },
        {
          ingUrl: require('@/assets/glory/cert_5.png'),
          text: '最佳业务创新金融企业'
        },
        {
          ingUrl: require('@/assets/glory/cert_6.png'),
          text: '深圳市跨境电子商务协会理事单位'
        },
        {
          ingUrl: require('@/assets/glory/cert_7.png'),
          text: '2021第四届优秀跨境电商“金融服务商”'
        },
        {
          ingUrl: require('@/assets/glory/cert_8.png'),
          text: '丝路国际保理平台'
        },
        {
          ingUrl: require('@/assets/glory/cert_9.png'),
          text: '2023年商业保理行业团体标准示范单位'
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
video::-webkit-media-controls-panel {
  box-shadow: none;
}

video::-webkit-media-controls {
  box-shadow: none;
}
@media screen and (min-width: 1930px) {
  .qualify-cont {
    .top-banner {
      background-size: cover !important;
      height: 710px !important;
    }
  }
}
.qualify-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/glory/top-banner.png') no-repeat center;
    .banner-cont {
      display: flex;
      flex-direction: column;
      width: 50%;
      justify-content: center;
      align-items: flex-start;
      padding-left: 50px;
      .banner-img {
        width: 344px;
        height: 36px;
        background: url('../../../assets/glory/banner-desc.png') no-repeat center;
      }
      .banner-desc {
        width: 344px;
        color: #fff;
        font-size: 16px;
        margin-top: 40px;
        text-indent: 32px;
        line-height: 26px;
      }
    }
  }
  .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;
    }
  }

  .safe-cont {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .safe-sec {
      width: 38%;
    }
    .safe-sec:nth-child(2) {
      margin: 104px 0;
    }
    .safe-sec-title {
      color: #2C4270;
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .safe-sec-desc {
      color: #000;
      font-size: 16px;
      text-indent: 30px;
      line-height: 24px;
    }
    .safe-sec-1::before {
      display: inline-block;
      content: ' ';
      width: 32px;
      height: 28px;
      margin-right: 6px;
      vertical-align: middle;
      background: url('../../../assets/glory/sec_1.png') no-repeat center;
    }
    .safe-sec-2::before {
      display: inline-block;
      content: ' ';
      width: 32px;
      height: 28px;
      margin-right: 6px;
      vertical-align: middle;
      background: url('../../../assets/glory/sec_2.png') no-repeat center;
    }
    .safe-sec-3::before {
      display: inline-block;
      content: ' ';
      width: 32px;
      height: 28px;
      margin-right: 6px;
      vertical-align: middle;
      background: url('../../../assets/glory/sec_3.png') no-repeat center;
    }
  }

  .cert-cont {
    width: 100%;
    .el-row {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 100px;
    }
    .el-col {
      // width: 26%;
      margin: 10px auto;
    }
    .cert-text {
      max-width: 350px;
      font-size: 14px;
      line-height: 21px;
      margin: 20px auto;
    }
    .el-col:nth-child(1) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-bottom: 20px;
      .cert-img {
        margin: 0 70px 0 0;
      }
      .cert-text {
        margin: 0 30px 0 0;
      }
    }
    .el-col:nth-child(2) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 20px;
      .cert-img {
        margin: 0 0 0 100px;
      }
      .cert-text {
        margin: 0 0 0 128px;
      }
    }
    .el-col:nth-child(2) .cert-text {
      width: 210px;
    }
    .el-col:nth-child(3) .cert-text {
      width: 192px;
    }
  }

  .media-cont {
    width: 100%;
    margin-bottom: 170px;
    .el-row {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-col:nth-child(1) {
        display: flex;
        justify-content: flex-end;
      }
      .el-col:nth-child(2) {
        display: flex;
        justify-content: flex-start;
      }
    }
    .video-cont {
      width: 48%;
      height: 240px;
      margin-right: 20px;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .video-desc {
      width: 48%;
      color: #000;
      line-height: 24px;
      font-size: 16px;
      text-indent: 32px;
      margin-left: 20px;
    }
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .qualify-cont {
    width: 100%;
    padding: 0 0px 170px;
    margin-top: 60px;
    .top-banner {
      width: 100%;
      height: 180px;
      background-size: cover;
      .banner-cont {
        padding: 0;
        .banner-img {
          width: 150px;
          height: 24px;
          // transform: scale(.5);
          background: url('../../../assets/glory/banner-desc.png') no-repeat center;
        }
        .banner-desc {
          width: 150px;
          font-size: 12px;
          margin-top: 10px;
          text-indent: 24px;
          line-height: 20px;
        }
      }
    }
    .safe-cont {
      width: 100%;
      padding: 0 15px;
      .safe-sec {
        width: 100%;
      }
      .el-row {
        display: flex;
        flex-direction: column;
        .el-col {
          width: 45px;
        }
      }
    }

    .cert-cont {
      width: 100%;
      padding: 0 15px;
      .el-row {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 0;
      }
      .el-col {
        width: 100%;
        margin: 0;
      }
      .cert-text {
        margin-bottom: 20px;
      }
      .el-col:nth-child(1) {
      display: block;
      margin-bottom: 20px;
      .cert-img {
        margin: 0;
      }
      .cert-text {
        margin: 0 auto;
      }
    }
    .el-col:nth-child(2) {
      display: block;
      margin-bottom: 20px;
      .cert-img {
        margin: 0;
      }
      .cert-text {
        margin: 0 auto;
      }
    }
    }

    .media-cont {
      margin-bottom: 60px;
      padding: 0 15px;
      .el-row {
        display: flex;
        flex-direction: column;
      }
      .el-col {
        width: 100%;
        .video-cont {
          width: 100%;
          height: 240px;
          margin: 0 auto;
        }
        .video-desc {
          width: 100%;
          margin-top: 20px;
          margin-bottom: 60px;
          // padding: 0;
          margin: 20px auto 0;
        }
      }
    }
  }

}
</style>
