<template>
  <div class="page">
    <BaseHeader class="pos-sticky pos-top-none"></BaseHeader>
    <div class="banner h-600 c-fff flex flex-col items-center justify-center">
      <div class="fs-40 mb-20">接触美国、加拿大、欧洲等地的独立零售商</div>
      <div class="fs-16">注册即可开始在 易杰 的 B2B 市场销售</div>
      <div class="input-wrap border border-solid border-white flex items-center w-420 mt50">
        <input class="flex-1 bg-transparent border-none appearance-none focus:outline-none px-20 c-fff fs-16 placeholder-white" placeholder="手机号" type="text" v-model="phone">
        <router-link :to="{path: '/register', query: {phone}}" class="submit-btn w-140 bg-white c-674668 fs-16 text-center lh-50 cursor-pointer underline-transparent">成为供应商</router-link>
      </div>

    </div>
    <div class="part-1 c-111 lg:w-950 2xl:w-1200 py-30">
      <div class="item flex">
        <div class="text pl-30 flex-1 flex flex-col justify-center">
          <div class="fs-40 mb20">触达境外新客户</div>
          <div class="fs-16 c-333 w-270 lh-normal">我们管理付款处理，直接向您付款，并为您的合格客户提供 60 天的付款期限。</div>
        </div>
        <img class="w-490 block" src="@/assets/images/welcome_list_1.png" alt="">
      </div>
      <div class="item flex">
        <img class="w-490 block" src="@/assets/images/welcome_list_2.png" alt="">
        <div class="text pl-30 flex-1 flex flex-col justify-center">
          <div class="fs-40 mb20">在亦杰展示您的品牌</div>
          <div class="fs-16 c-333 w-270 lh-normal">我们管理付款处理，直接向您付款，并为您的合格客户提供 60 天的付款期限。</div>
        </div>
      </div>
      <div class="item flex">
        <div class="text pl-30 flex-1 flex flex-col justify-center">
          <div class="fs-40 mb20">节约您的时间和金钱</div>
          <div class="fs-16 c-333 w-270 lh-normal">我们管理付款处理，直接向您付款，并为您的合格客户提供 60 天的付款期限。</div>
        </div>
        <img class="w-490 block" src="@/assets/images/welcome_list_3.png" alt="">
      </div>
    </div>
    <div class="part-2 pt-60 pb-100">
      <div class="c-111 fs-40 text-center">获得来自全世界的订单</div>
      <img src="@/assets/images/welcome_map.png" alt="" class="lg:w-950 2xl:w-1200 block mt80">

      <router-link to="login" class="btn">加入亦杰</router-link>

    </div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
    name: 'Agreement'
})
const phone = ref()
</script>
<style lang="less" scoped>
.banner{
  background-color: #674668;
}
.part-1{
  margin: 0 auto;
  .text{
  }
}
.part-2{
  background-color: #F9F4FA;
  img{
    margin: 80px auto;
  }
  .btn{
    display: block;
    margin: 0 auto;
    width: 420px;
    height: 80px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    border-radius: 0px 0px 0px 0px;
    color: #111;
    font-size: 28px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    text-decoration: none;
    transition: .3s;
    &:hover{
      box-shadow: 0px 3px 6px 1px #674668;

    }
  }
}
</style>