<script lang='ts' setup>
</script>

<template>
  <div class="bg-text-900 rounded-xl p-7">
    <div>
      <div class="text-sm mb-2">
        累计总收益
      </div>
      <div class="text-4xl font-bold">
        {{ formatAmountWithSplit(190421321) }}
      </div>
      <div class="flex items-center gap-2 text-xs mt-1">
        <div>昨日收益</div>
        <div>+{{ formatAmountWithSplit(864314) }}</div>
      </div>
    </div>
    <div class="h-px bg-text-800 my-5" />
    <div class="flex justify-around">
      <div class="flex-col-center">
        <div class="text-base font-bold">
          {{ formatAmountWithSplit(42523) }}
        </div>
        <div class="text-xs">
          本月收益
        </div>
      </div>
      <div class="h-auto w-px bg-text-800" />
      <div class="flex-col-center">
        <div class="text-base font-bold">
          {{ formatAmountWithSplit(12345) }}
        </div>
        <div class="text-xs">
          待确认收益
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
h4 {
  font-size: var(--title-font-size);
}
</style>
