<template>
  <div>
    <div class="header" v-if="!appFlag">
      <div class="back">
        <backIcon/>
      </div>
      <!-- 合伙人计划 -->
      {{ $t('join.l') }}
    </div>
    <div class="img1-box">
      <img class="img1" src="/img/join/img1.png?1" alt="极度证券">
      <img v-if="language == 'zh-CN'" class="timg" src="/img/join/text.png" alt="极度证券">
      <img v-else-if="language == 'zh-TW'" class="timg" src="/img/join/text_tw.png" alt="极度证券">
      <img v-else class="timg" src="/img/join/text_en.png" alt="极度证券">
    </div>
    <div class="container">
      <div class="section">
        <div class="title">
          <!-- 轻松三步 赚取高额佣金 -->
          {{ $t('join.l1') }}
        </div>
        <div class="box">
          <div class="line"></div>
          <div class="flex item">
            <div class="radius"></div>
            <img class="icon" src="/img/join/icon5.png" alt="极度证券">
            <div class="right">
              <div class="sub">
                <!-- 申请代理商 -->
                {{ $t('join.l2') }}
              </div>
              <div class="text">
                <!-- 填写影响力证明资料等待极度官方审核 -->
                {{ $t('join.l3') }}
              </div>
            </div>
          </div>
          <div class="flex item">
            <div class="radius"></div>
            <img class="icon" src="/img/join/icon6.png" alt="极度证券">
            <div class="right">
              <div class="sub">
                <!-- 取得专属推广后台 -->
                {{ $t('join.l4') }}
              </div>
              <div class="text">
                <!-- 分享专属推广资源邀请更多朋友加入 -->
                {{ $t('join.l5') }}
              </div>
            </div>
          </div>
          <div class="flex item">
            <div class="radius"></div>
            <img class="icon" src="/img/join/icon7.png" alt="极度证券">
            <div class="right">
              <div class="sub">
                <!-- 赚取佣金 -->
                {{ $t('join.l6') }}
              </div>
              <div class="text">
                <!-- 好友每次存款、交易都将为您提供收入 -->
                {{ $t('join.l7') }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section1">
        <div class="flex box">
          <img class="icon" src="/img/join/icon8.png" alt="极度证券">
          <div class="right">
            <div class="sub">
              <!-- 授权合伙人后台 -->
              {{ $t('join.l8') }}
            </div>
            <div class="text">
              <!-- 如果您是自媒体创作者、社媒博主、社群主等拥有一定粉丝的用户，极度证券将帮您实现影响力变现，轻松赚取高额分成！ -->
              {{ $t('join.l9') }}
            </div>
          </div>
        </div>
        <div class="cell">
          <div class="btn" v-if="status == 1">
            <div>
              <!-- 您已提交过申请 -->
              {{ $t('join.l10') }}
            </div>
            <div class="tip">
              <!-- 申请结果将在3个工作日内，通过系统消息通知您，请耐心等待。 -->
              {{ $t('join.l11') }}
            </div>
          </div>
          <div class="btn" v-else @click="toApply">
            <div>
              <!-- 立即申请 -->
              {{ $t('join.l12') }}
            </div>
            <div class="tip">
              <!-- 还等什么？轻轻一按 高额收益天天赚 -->
              {{ $t('join.l13') }}
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <!-- 为什么要成为极度合伙人？ -->
        {{ $t('join.l14') }}
      </div>
      <div class="tip1">
        <!-- 极度证券为合伙人提供业界最高返佣，并打造安全、透明、便利的交易环境 -->
        {{ $t('join.l15') }}
      </div>
      <div class="section2">
        <div class="item">
          <div class="top">
            <img class="icon" src="/img/join/icon9.png" alt="极度证券">
            <div class="title">
              <!-- 业内最高返佣 -->
              {{ $t('join.l16') }}
            </div>
            <div class="text">
              <!-- 与极度证券一起成长，每月轻松提升被动收益 -->
              {{ $t('join.l17') }}
            </div>
          </div>
          <div class="flex">
            <div class="router" @click="toApply">
              <!-- 成为合伙人 -->
              {{ $t('join.l18') }}
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <img class="icon" src="/img/join/icon10.png" alt="极度证券">
            <div class="title">
              <!-- 无需缴纳押金 -->
              {{ $t('join.l19') }}
            </div>
            <div class="text">
              <!-- 低门槛合伙人体系，佣金每日结算，独立代理后台，每笔收入清晰透明 -->
              {{ $t('join.l20') }}
            </div>
          </div>
          <div class="flex">
            <div class="router" @click="toApply">
              <!-- 成为合伙人 -->
              {{ $t('join.l18') }}
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <!-- 丰富的线下活动 -->
        {{ $t('join.l21') }}
      </div>
      <div class="tip1">
        <!-- 极度证券高层见面会，业内顶级峰会门票，各种金融大咖座谈、讲座 -->
        {{ $t('join.l22') }}
      </div>
      <div class="section3">
        <div class="flex">
          <div class="router" @click="toApply">
            <!-- 成为合伙人 -->
            {{ $t('join.l18') }}
          </div>
        </div>
        <img class="img2" src="/img/join/img2.png" alt="极度证券">
      </div>
      <div class="section4 bg1">
        <div class="title">
          <!-- 拓展内容支持 -->
          {{ $t('join.l23') }}
        </div>
        <div class="sub">
          <!-- 极度为您提供丰富的推广模板 -->
          {{ $t('join.l24') }}
        </div>
        <div class="text">
          <!-- 让您的分享与众不同 -->
          {{ $t('join.l25') }}
        </div>
        <div class="text">
          <!-- 您只需要轻轻一点 -->
          {{ $t('join.l26') }}
        </div>
        <div class="text">
          <!-- 将推广海报分享给您的粉丝 -->
          {{ $t('join.l27') }}
        </div>
        <div class="flex">
          <div class="router" @click="toApply">
            <!-- 成为合伙人 -->
            {{ $t('join.l18') }}
          </div>
        </div>
      </div>
      <div class="section4 bg2">
        <div class="title">
          <!-- 配置专属客服人员 -->
          {{ $t('join.l28') }}
        </div>
        <div class="sub">
          <!-- 协助您成为收入丰厚的合伙人 -->
          {{ $t('join.l29') }}
        </div>
        <div class="text">
          <!-- 覆盖全球数十个国家、地区 -->
          {{ $t('join.l30') }}
        </div>
        <div class="text">
          <!-- 本土化专业服务 -->
          {{ $t('join.l31') }}
        </div>
        <div class="text">
          <!-- 无时区化差异 -->
          {{ $t('join.l32') }}
        </div>
        <div class="flex">
          <div class="router" @click="toApply">
            <!-- 成为合伙人 -->
            {{ $t('join.l18') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backBar from '@/components/backBar'
export default {
  props: ['status'],
  components: {
    backBar
  },
  data () {
    return {
      uid: ''
    }
  },
  created () {
    this.uid = this.$route.params.uid
  },
  methods: {
    toApply() {
      if (this.status == 1) {
        return
      }
      this.$router.push('/join-apply/' + this.uid)
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.img1-box {
  position: relative;
  .timg {
    position: absolute;
    bottom: 69px;
    left: 50%;
    transform: translateX(-50%);
    width: 59.46vw;
  }
}
.img1 {
  display: block;
  width: 100%;
}
.container {
  padding: 0 17px 39px;
  margin-top: -46px;
  position: relative;
  z-index: 2;
}
.section {
  box-shadow: 0px 4px 13px 0px rgba(225,225,225,0.5);
  border-radius: 12px;
  padding: 25px 0 20px;
  margin-bottom: 21px;
  background-color: #fff;
  .title {
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    margin-bottom: 9px;
  }
  .box {
    position: relative;
  }
  .item {
    padding-left: 20px;
    padding-right: 10px;
    &+.item {
      margin-top: 13px;
    }
  }
  .radius {
    background-color: var(--color-);
    border-radius: 50%;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    position: relative;
    z-index: 2;
  }
  .icon {
    height: 66px;
    margin-right: 1px;
  }
  .right {
    flex: 1;
    min-width: 10%;
  }
  .sub {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .text {
    font-size: 12px;
    line-height: 16px;
    color: #A3A3A3;
  }
  .line {
    position: absolute;
    top: 32px;
    bottom: 30px;
    width: 1px;
    left: 24px;
    background-image: linear-gradient(to bottom, #D5D5D5 0%, #D5D5D5 50%, transparent 50%);
    background-size: 1px 10px;
    background-repeat: repeat-y;
  }
}
.section1 {
  border-radius: 12px;
  background-color: #F7FAFE;
  margin-bottom: 35px;
  padding: 22px 10px 14px;
  .box {
    margin-bottom: 16px;
  }
  .icon {
    width: 100px;
    margin-right: 2px;
  }
  .right {
    flex: 1;
    min-width: 10%;
  }
  .sub {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 7px;
  }
  .text {
    font-size: 12px;
    line-height: 16px;
    color: #A3A3A3;
  }
  .cell {
    padding: 0 5px;
  }
  .btn {
    cursor: pointer;
    text-align: center;
    background-color: var(--color-);
    color: #FEFFFF;
    border-radius: 6px;
    padding: 9px 10px 11px;
    font-size: 16px;
    font-weight: 600;
  }
  .tip {
    font-size: 12px;
    line-height: 14px;
    margin-top: 5px;
    opacity: 0.72;
    font-weight: 400;
  }
}
.title {
  font-weight: 600;
  margin-bottom: 7px;
  font-size: 20px;
}
.tip1 {
  font-size: 12px;
  color: #A3A3A3;
  line-height: 16px;
}
.section2 {
  margin-top: 16px;
  margin-bottom: 30px;
  display: flex;
  .item {
    flex: 1;
    max-width: calc(100% - 5px);
    background: #F7FAFE;
    border-radius: 12px;
    padding: 8px 13px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &+.item {
      margin-left: 10px;
    }
  }
  .icon {
    display: block;
    width: 74px;
    margin-bottom: 9px;
    margin-left: 4px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .text {
    font-size: 12px;
    color: #A3A3A3;
    line-height: 16px;
    margin-bottom: 8px;
  }
}
.router {
  cursor: pointer;
  color: var(--color-);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: underline;
}
.section3 {
  padding-top: 12px;
  .img2 {
    display: block;
    width: 100%;
    margin-top: 16px;
  }
}
.section4 {
  margin-top: 26px;
  padding: 23px 19px 19px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .sub {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 17px;
  }
  .text {
    font-size: 12px;
    line-height: 17px;
    color: #A3A3A3;
  }
  .router {
    margin-top: 17px;
  }
}
.bg1 {
  background-image: url('@/assets/img/join_bg1.png');
}
.bg2 {
  background-image: url('@/assets/img/join_bg2.png');
}
</style>