<template>
  <div class="list">
    <div class="li" v-for="item in 7" :key="item">
      <van-image
        width="36"
        height="36"
        round
        fit="cover"
        :src="'/img/home/user.png'"
      />
      <div class="body" v-if="item == 1">
        <div class="name-box">
          <div class="name">
            <!-- 申请结算 -->
            {{ $t('follow.l117') }}
          </div>
          <div class="time flex">
            <div class="lab">
              <!-- 申请时间  -->
              {{ $t('follow.l131') }}
            </div>
            <div>
              2024/04/29/14:32:27
            </div>
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 结算金额 -->
            {{ $t('option.l34') }}
          </div>
          <div class="right">
            + 2,124.98 USD
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 当前状态 -->
            {{ $t('follow.l135') }}
          </div>
          <div class="right">
            待审核
          </div>
        </div>
      </div>
      <div class="body" v-else>
        <div class="name-box">
          <div class="name">
            用户昵称
          </div>
          <div class="time flex">
            <div class="lab">
              <!--  交易时间 -->
              {{ $t('product.l82') }}
            </div>
            <div>
              2024/04/29/14:32:27
            </div>
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 跟单标的 -->
            {{ $t('follow.l132') }}
          </div>
          <div class="right">
            贵州茅台 600519.SH
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 跟单数量 -->
            {{ $t('follow.l133') }}
          </div>
          <div class="right">
            200
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 跟单收益 -->
            {{ $t('follow.l134') }}
          </div>
          <div class="right up">
            + 2,124.98 USD
          </div>
        </div>
        <div class="cell flex">
          <div class="lab">
            <!-- 分润金额 -->
            {{ $t('follow.l28') }}
          </div>
          <div class="right down">
            + 2,124.98 USD
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 20px 16px 10px;
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  padding: 9px 9px 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.body {
  flex: 1;
  min-width: 0px;
  padding-top: 4px;
  padding-left: 10px;
  .cell {
    column-gap: 6px;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 12px;
    color: #B6B6B6;
    &+.cell {
      margin-top: 10px;
    }
  }
  .right {
    flex: 1;
    text-align: right;
    min-width: 0px;
  }
}
.name-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 12px;
  margin-bottom: 10px;
  .name {
    font-size: 15px;
    font-weight: 500;
  }
  .time {
    font-size: 10px;
    color: #B6B6B6;
    column-gap: 4px;
  }
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}
</style>