<template>
  <div class="pop">
    <div class="box flex">
      <div>
        <!-- 活动规则 -->
        {{ $t('rules.l22') }}
      </div>
      <img class="close" @click="cancel" src="/img/activities/close.png" alt="极度证券">
    </div>
    <div class="container">
      <div class="sub" style="margin-bottom: 12px;">
        <!-- 1.本次活动仅限2024年  月 日之后新注册用户参与 -->
        {{ $t('rules.l23') }}
      </div>
      <div class="sub" style="margin-bottom: 12px;">
        <!-- 2.完成注册即送价值1000 USD的交易抵扣券 -->
        {{ $t('rules.l24') }}
      </div>
      <div class="text" style="margin-bottom: 14px">
        <!-- 包含： -->
        {{ $t('rules.l25') }}
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 港股手续费抵扣券 -->
            {{ $t('rules.l7') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 沪深手续费抵扣券 -->
            {{ $t('rules.l8') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 美股手续费抵扣券 -->
            {{ $t('rules.l9') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 200USD 综合市场手续费抵扣券 -->
            {{ $t('rules.l10') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 港股利息抵扣券 -->
            {{ $t('rules.l11') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 沪深利息抵扣券 -->
            {{ $t('rules.l12') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 100USD 美股利息抵扣券 -->
            {{ $t('rules.l13') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="flex cell">
        <div class="left">
          <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
          <div class="text">
            <!-- 200USD 综合市场利息抵扣券 -->
            {{ $t('rules.l14') }}{{ language == 'zh-CN' || language == 'zh-TW' ? '' : '(1)' }}
          </div>
        </div>
        <div v-if="language == 'zh-CN' || language == 'zh-TW'">
          x1
        </div>
      </div>
      <div class="sub1">
        <!-- 3.抵扣券和现金券的使用期限为30天，为避免奖励失效，请您及时领取并尽快使用 -->
        {{ $t('rules.l26') }}
      </div>
      <div class="sub1">
        <!-- 4.完成身份认证即送200 USD的赠金，赠金仅限交易使用，不可直接取出。如通过赠金交易获得盈利，盈利部分可取出，所以取款时，账户需预留至少与赠金数量一致的余额 -->
        {{ $t('rules.l27') }}
      </div>
      <div class="sub1">
        <!-- 5.所有卡券的使用均遵循极度证券卡券使用规则，查看卡券使用规则 -->
        {{ $t('rules.l28') }}
      </div>
      <div class="sub1">
        <!-- 6.综合交易手数仅统计外汇、贵金属、能源及BTC、ETH的交易，其他不计入其中 -->
        {{ $t('rules.l29') }}
      </div>
      <div class="sub1">
        <!-- 7.存款与取款：建议您优先使用数字货币存款和取款，最小充币额0.01USDT，取款限额100.00-100000.00USDT；法币存取款的限额在不同支付通道会有较大差异，具体以存取款页面限额要求为准。 -->
        {{ $t('rules.l33') }}
      </div>
      <div class="sub1">
        <!-- 8.为避免作弊刷量的情况，仅用赠金而未存入自有资金进行交易，由此获得的各种奖励超过50USD的，最终取款金额不得超过50USD -->
        {{ $t('rules.l30') }}
      </div>
      <div class="sub1">
        <!-- 9.如果多个用户使用相同的ip地址或设备，则只有第一个参与者才有资格获得奖励。严格禁止影响活动公平性的作弊行为和其他行为，一旦发现，您将被取消参加活动的资格，并追回已发放至违规账户的活动奖励 -->
        {{ $t('rules.l31') }}
      </div>
      <div class="sub1">
        <!-- 10.极度证券保留对本次活动进行最终解释的权利，包括但不限于修改、更改或取消活动，如有疑问，请联系客服 -->
        {{ $t('rules.l32') }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['ruleList'],
  methods: {
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  line-height: 1;
  padding-bottom: 26px;
  background-color: #fff;
  .text,.text1 {
    font-size: 14px;
    color: #888888;
    line-height: 22px;
  }
  .text1 {
    font-weight: 600;
  }
}
.cell {
  justify-content: space-between;
  color: #888888;
  line-height: 22px;
  .icon {
    width: 14px;
    margin-right: 6px;
    transform: translateY(4px)
  }
  .left {
    display: flex;
    align-items: flex-start;
  }
  .left,.text {
    flex: 1;
    min-width: 0px;
  }
}
.row {
  justify-content: space-between;
  font-size: 12px;
  color: #888888;
  padding-bottom: 5px;
}
.col {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F6F6F6;
  column-gap: 20px;
  line-height: 22px;
  .right {
    flex: 1;
    min-width: 0px;
    text-align: right;
  }
}
.tip {
  font-size: 12px;
  color: #F6465D;
  line-height: 16px;
  margin-top: 13px;
  margin-bottom: 20px;
}
.sub1 {
  color: #888888;
  font-weight: 600;
  line-height: 22px;
  margin-top: 12px;
}
.container {
  max-height: calc(100vh - 106px);
  overflow-y: auto;
  padding: 0 16px;
  .title {
    margin-bottom: 12px;
  }
  .sub {
    font-weight: 600;
    line-height: 22px;
    color: #888888;
  }
}
.box {
  padding: 10px 16px;
  justify-content: space-between;
  background-color: #fff;
  .close {
    width: 16px;
  }
}
</style>