<template>
  <div class="com">
    <div class="title flex">
      <div>
        <!-- 收益明细 -->
        {{ $t('follow.l18') }}
      </div>
      <div class="btn" @click="cancel">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 跟单总收益 -->
          {{ $t('follow.l1') }}
        </div>
        <div class="amount up">
          + 17.68 USD
        </div>
      </div>
      <div class="box">
        <div class="col flex">
          <div class="lab">
            <!-- 已实现收益 -->
            {{ $t('follow.l19') }}
          </div>
          <div class="up">
            + 2.68 USD
          </div>
        </div>
        <div class="col flex">
          <div class="lab">
            <!-- 浮动收益 -->
            {{ $t('follow.l20') }}
          </div>
          <div class="up">
            + 2.68 USD
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 分润支出 -->
          {{ $t('follow.l21') }}
        </div>
        <div class="amount down">
          + 17.68 USD
        </div>
      </div>
      <div class="box">
        <div class="col flex">
          <div class="lab">
            <!-- 已结分润 -->
            {{ $t('follow.l22') }}
          </div>
          <div class="down">
            + 2.68 USD
          </div>
        </div>
        <div class="col flex">
          <div class="lab">
            <!-- 预扣分润 -->
            {{ $t('follow.l23') }}
          </div>
          <div class="down">
            + 2.68 USD
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 跟单净收益 -->
          {{ $t('follow.l24') }}
        </div>
        <div class="amount down">
          + 17.68 USD
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    cancel(){
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  padding: 17px 16px 18px;
  .title {
    font-size: 16px;
    justify-content: space-between;
    margin-bottom: 17px;
  }
}
.btn {
  font-size: 14px;
}
.row {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  &+.row {
    margin-top: 10px;
  }
  .top {
    justify-content: space-between;
    color: #888888;
    font-weight: 600;
    height: 42px;
    padding: 0 13px;
    .amount {
      font-weight: 400;
      font-size: 14px;
    }
  }
}
.box {
  border-top: 1px solid #F6F6F6;
  padding: 15px 13px;
  .col {
    justify-content: space-between;
    &+.col {
      margin-top: 14px;
    }
  }
  .lab {
    font-size: 12px;
    color: #B6B6B6;
    opacity: 0.88;
  }
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}

</style>