<template>
  <div class="silder">
    <h-img type="local" src="infinite/qian.webp" width="1.5rem" />
    <div class="text">
      Número de indicações > {{ num }}
      <br />
      Comissão > R$ {{ amount }} todo mês!
    </div>
    <van-slider
      style="width: 25%"
      :max="100"
      :min="1"
      :step="1"
      v-model="sliderValue"
      button-size="12"
      bar-height="6"
      active-color="#56bcdd"
      inactive-color="#121842"
    />
  </div>

  <h3>Desenvolvimento ilimitado de indicados</h3>
  <h-img style="margin: 0.1rem 0" type="local" src="infinite/group.webp" />
  <div class="bottom">
    <p>
      1.O indicante receberá uma porcentagem como comissão toda vez que um
      jogador indicado fizer uma aposta válida,
      <span style="color: #ff0000">os ganhos ou perdas</span>
    </p>
    <p>2.O sistema calcula a comissão a cada 24 horas.</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
const sliderValue = ref<any>(10);
const num = computed(() => {
  return sliderValue.value * 100;
});
const amount = computed(() => {
  return num.value * 50;
});
</script>

<style lang="scss" scoped>
.silder {
  display: flex;
  flex-direction: row !important;
  width: 100%;
  margin: 0.2rem 0;
  color: #ff0000;
  font-size: 0.35rem;

  .text {
    flex: 1;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .van-slider {
    --van-slider-button-background: #afb3b3;
  }
}
h3 {
  font-size: 0.35rem;
  text-align: center;
}

.bottom {
  font-size: 0.35rem;

  p {
    width: 100%;
    padding: 0.1rem 0;
  }
}
</style>
