<template>
  <div>
    <!-- 分润明细 -->
    <BackBar1 :title="$t('follow.l118')">
      <div class="icon-box">
        <shareIcon1 />
      </div>
    </BackBar1>
    <div class="container">
      <div class="title flex">
        <div>
          <!-- 数据总览 -->
          {{ $t('follow.l127') }}
        </div>
        <div class="btn" @click="settlementPop = true">
          <!-- 申请结算 -->
          {{ $t('follow.l117') }}
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 累计跟单人数 -->
          {{ $t('follow.l70') }}
        </div>
        <div class="right">
          123
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 跟单总收益 -->
          {{ $t('follow.l1') }}
        </div>
        <div class="right">
          99,542.39 USD
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 交易次数 -->
          {{ $t('follow.l72') }}
        </div>
        <div class="right">
          99
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 分润总收益 -->
          {{ $t('follow.l128') }}
        </div>
        <div class="right">
          99,542.39 USD
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 已结算分润 -->
          {{ $t('follow.l129') }}
        </div>
        <div class="right">
          99,542.39 USD
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 未结算分润 -->
          {{ $t('follow.l130') }}
        </div>
        <div class="right">
          99,542.39 USD
        </div>
      </div>
    </div>
    <div class="conatiner1">
      <div class="top">
        <div class="title">
          <!-- 分润明细 -->
          {{ $t('follow.l118') }}
        </div>
      </div>
      <listView />
    </div>
    <van-popup v-model="settlementPop" round position="bottom">
      <settlement @cancel="settlementPop = false" />
    </van-popup>
  </div>
</template>
<script>
import settlement from "@/view/copyTrade/myCopy/components/settlement.vue";
import BackBar1 from '@/components/backBar1'
import listView from "./components/list.vue";
import shareIcon1 from "@/components/shareIcon1";
export default {
  components: {
    BackBar1,
    shareIcon1,
    listView,
    settlement
  },
  data () {
    return {
      settlementPop: false
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 5px 16px 20px;
}
.title {
  font-size: 16px;
  font-weight: 600;
  justify-content: space-between;
}
.btn {
  background-color: #000;
  border-radius: 15px;
  line-height: 26px;
  padding: 0 14px;
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.cell {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 12px;
  padding-top: 15px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F6F6F6;
  .right {
    min-width: 0px;
    max-width: 100%;
  }
  .lab {
    color: #B6B6B6;
  }
}
.conatiner1 {
  .top {
    background-color: #fff;
    padding: 0 16px;
    position: sticky;
    top: 50px;
    z-index: 4;
  }
}
</style>