<template>
  <div>
    <div class="top">
      <div class="header">
        <img class="back" @click="$router.back()" src="/img/join/left.png" alt="极度证券">
        加入我们
      </div>
      <img class="img" src="/img/join/top.png" alt="极度证券">
    </div>
    <div class="container">
      <div class="box">
        <div class="title">业内最高返佣</div>
        <div class="tip">跟随 极度小二 每月提升被动收入,如果您是内容创作者、社区长、社媒博主等意见领袖,极度将帮您实现影响力变现。轻松赚取高额返佣，增加被动收益!</div>
        <div class="btn" @click="$router.push('/chat')">
          立即赚钱
        </div>
      </div>
      <div class="box1">
        <div class="title">为什么加入 极度 代理商计划?</div>
        <div class="tip">极度为代理商提供业内最高返佣，并打造安全、透明、便捷的交易环境</div>
      </div>
      <div class="box2 flex">
        <img class="logo" src="/img/join/logo.png" alt="极度证券">
        <img class="img" src="/img/join/img.png" alt="极度证券">
        <div class="title">业内最高返佣</div>
        <div class="tip1">高达<span class="span">50%</span>现货和合约交易手续费返佣</div>
        <div class="btn1 flex" @click="$router.push('/chat')">
          <img class="icon1" src="/img/join/icon1.png" alt="极度证券">成为代理商
        </div>
      </div>
      <div class="ul">
        <div class="li flex">
          <img class="icon" src="/img/join/icon2.png" alt="极度证券">
          <div class="right">
            <div class="name">代理商计划增值服务</div>
            <div class="tip2">极度高层见面会、业内顶级峰会门票、各种体育与娱乐赛事</div>
          </div>
        </div>
        <div class="li flex">
          <img class="icon" src="/img/join/icon3.png" alt="极度证券">
          <div class="right">
            <div class="name">丰富的线下活动</div>
            <div class="tip2">极度高层见面会、业内顶级峰会门票、各种体育与娱乐赛事</div>
          </div>
        </div>
        <div class="li flex">
          <img class="icon" src="/img/join/icon4.png" alt="极度证券">
          <div class="right">
            <div class="name">拓展内容支持</div>
            <div class="tip2">我们为您提供通俗易懂的创意视频脚本示例让您的分享与众不同您只需要拍摄录制并将其分享给您的粉丝</div>
          </div>
        </div>
      </div>
      <div class="btn" @click="$router.push('/chat')">
        立即加入
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  position: relative;
  margin-bottom: 28px;
  .img {
    display: block;
    width: 100%;
  }
  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 9px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    .back {
      position: absolute;
      left: 9px;
      top: 11px;
      width: 24px;
      cursor: pointer;
    }
  }
}
.container {
  padding: 0 18px 21px;
}
.box {
  text-align: center;
  margin-bottom: 33px;
  .title {
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 18px;
  }
  .btn {
    margin-top: 29px;
  }
}
.box1 {
  text-align: center;
  margin-bottom: 11px;
  .title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 7px;
    line-height: 28px;
  }
}
.box2 {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 21px 14px 25px;
  background-image: url('@/assets/img/join_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .logo {
    position: absolute;
    top: 15px;
    left: 14px;
    height: 18px;
  }
  .img {
    width: 207px;
    margin-bottom: 19px;
  }
  .title {
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 13px;
  }
  .tip1 {
    color: #767676;
    font-size: 16px;
    margin-bottom: 19px;
  }
  .span {
    color: var(--color-);
  }
  .btn1 {
    height: 44px;
    border-radius: 6px;
    border: 1px solid var(--color-);
    justify-content: center;
    font-size: 16px;
    color: var(--color-);
    background-color: #fff;
    padding: 0 26px;
    cursor: pointer;
  }
  .icon1 {
    width: 16px;
    margin-right: 4px;
  }
}
.ul {
  padding: 1px 0 29px;
  .li {
    border-radius: 12px;
    border: 1px solid #EEEEEE;
    padding: 18px 14px;
    column-gap: 13px;
    margin-top: 10px;
  }
  .icon {
    width: 64px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .name {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .tip2 {
    font-size: 12px;
    color: #A3A3A3;
    line-height: 16px;
  }
}
.tip {
  color: #A3A3A3;
  line-height: 22px;
}
.btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background-color: var(--color-);
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
</style>