<template>
  <BasePage>
    <div class="pay">
      <div class="payBox">
        <div class="payTitle">
          全能支付解决方案
        </div>

        <div class="schemeList">
          <div class="schemeItem" v-for="item in schemeList">
            <div class="schemeTitle">
              {{ item.title }}
            </div>
            <div class="schemeDesc">
              {{ item.desc }}
            </div>

            <img :src="item.img" alt="">
          </div>
        </div>
      </div>

      <div class="payBox hasBg">
        <div class="payTitle">
          全能代付解决方案
        </div>

        <div class="negotiation">
          <div class="negotiationLine1">
            <div class="negotiationItem" v-for="item in negotiationList.slice(0, 2)">
              <div class="negotiationTitle">
                {{ item.title }}
              </div>
              <div class="negotiationDesc">
                <div v-for="i in item.desc.split('\n')"> <img src="/img/check.png" alt=""> {{ i }}
                </div>
              </div>
              <img class="iii" :src="item.img" alt="">
            </div>
          </div>
          <div class="negotiationLine2">
            <div class="negotiationItem" v-for="item in negotiationList.slice(2)">
              <img class="iii" :src="item.img" alt="">
              <div class="negotiationTitle">
                {{ item.title }}
              </div>
              <div class="negotiationDesc">
                <div v-for="i in item.desc.split('\n')"> <img src="/img/check.png" alt=""> {{ i }}
                </div>
              </div>
            </div>
          </div>
        </div>



      </div>

      <div class="payBox">
        <div class="payTitle">
          我们的优势
        </div>

        <div class="advantageList">
          <div class="advantageItem" v-for="item in advantageList">
            <img :src="item.img" alt="">
            <div class="advantageContent">
              {{ item.content }}
            </div>
          </div>
        </div>

        <div class="apiBox">
          <div class="apiTitle">
            接口文档
          </div>
          <div class="apiDesc">
            <div>
              单笔代付<br>
              批量代付<br>
              单笔查询
            </div>
            <div>
              批量查询<br>
              单笔交易回单生成<br>
              日终回单生成<br>
            </div>
            <div>
              交易对账
            </div>
          </div>
        </div>

        <div class="apiBox">
          <div class="apiTitle">
            商户自助
          </div>
          <div class="apiDesc">
            <div>
              批量代付<br>
              单笔查询<br>
              批量查询<br>
            </div>
            <div>
              批量业务审核<br>
              账户管理<br>
              账务流水明细
            </div>
            <div>
              商户鉴权查询
            </div>
          </div>
        </div>
      </div>

      <div class="payBox">
        <div class="payTitle">
          代付的合作流程
        </div>

        <div class="processList">
          <div class="line">
            <div class="processItem">
              <img src="/img/processItem1.png" alt="">
              <b>初次交流</b>
              <span>了解业务，熟悉业务模式</span>
            </div>
            <img src="/img/arrow.png" alt="">
            <div class="processItem">
              <img src="/img/processItem2.png" alt="">
              <b>风险审核</b>
              <span>商户资质审核，风险评估，收取相关材料</span>
            </div>
            <img src="/img/arrow.png" alt="">
            <div class="processItem">
              <img src="/img/processItem3.png" alt="">
              <b>项目立项</b>
              <span>确定项目启动，双方安排业务、技术、财务对接人</span>
            </div>
          </div>

          <img class="trs90" style="margin: 5.8vw 11.733vw 5.8vw auto;" src="/img/arrow.png" alt="">

          <div class="line">
            <div class="processItem">
              <img src="/img/processItem4.png" alt="">
              <b>测试联调</b>
              <span>接口及系统开发，双方联调</span>
            </div>
            <img class="trs180" src="/img/arrow.png" alt="">
            <div class="processItem">
              <img src="/img/processItem5.png" alt="">
              <b>制定方案</b>
              <span>合作双方按照确定对接需求方案</span>
            </div>
            <img class="trs180" src="/img/arrow.png" alt="">
            <div class="processItem">
              <img src="/img/processItem6.png" alt="">
              <b>协议签署</b>
              <span>法务审核，确定合作细节</span>
            </div>
          </div>

          <img class="trs90" style="margin: 5.8vw auto 5.8vw 11.733vw;" src="/img/arrow.png" alt="">

          <div class="line">
            <div class="processItem">
              <img src="/img/processItem7.png" alt="">
              <b>系统上线</b>
              <span>协议签署、联调测试完毕,系统上线</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      schemeList: [
        {
          img: '/img/payItem1.png',
          title: '支付方式',
          desc: '微信\n支付宝\n银联快捷'
        },
        {
          img: '/img/payItem2.png',
          title: '支付类型',
          desc: '扫码(主扫、被扫)支付\n公众号(服务窗)支付\n小程序支付\nAPP支付\nH5、快捷支付'
        },
        {
          img: '/img/payItem3.png',
          title: '结算周期',
          desc: 'D+1\nT+1\nD+0'
        },
        {
          img: '/img/payItem4.png',
          title: '结算方式',
          desc: '对公结算\n对私结算'
        },
        {
          img: '/img/payItem5.png',
          title: '结算通道',
          desc: '银行\n支付机构直清'
        },
        {
          img: '/img/payItem6.png',
          title: '技术支持',
          desc: '完善技术接口文档\n对接协助'
        },
      ],
      negotiationList: [
        {
          img: '/img/negotiationItem1.png',
          title: '代付方式',
          desc: '银行\n支付机构'
        },
        {
          img: '/img/negotiationItem2.png',
          title: '代付类型',
          desc: 'API\n表格'
        },
        {
          img: '/img/negotiationItem3.png',
          title: '代付周期',
          desc: 'D0实时\nT+1'
        },
        {
          img: '/img/negotiationItem4.png',
          title: '代付充值',
          desc: '对公\n对私'
        },
        {
          img: '/img/negotiationItem5.png',
          title: '技术支持',
          desc: '完善技术接口文档\n对接协助'
        },
      ],
      advantageList: [
        {
          img: '/img/advantageItem1.png',
          content: '安全',
        },
        {
          img: '/img/advantageItem2.png',
          content: '多渠道接入',
        },
        {
          img: '/img/advantageItem3.png',
          content: '一站式服务',
        },
        {
          img: '/img/advantageItem4.png',
          content: '无限额',
        },
        {
          img: '/img/advantageItem5.png',
          content: '7*24h业务支持',
        },
        {
          img: '/img/advantageItem6.png',
          content: '多类账户付款',
        },
        {
          img: '/img/advantageItem7.png',
          content: '代付额度高',
        },
        {
          img: '/img/advantageItem8.png',
          content: '风控系统结合',
        },
      ]
    };
  },
};
</script>