<template>
  <!-- 挖矿产出 -->
  <HeaderNav headerText="挖矿产出"></HeaderNav>
  <div class="mining-output">
    <div class="output-item pf500 fs14 fc2C3131" v-for="(item, index) in 3" :key="index">
      <div class="item-left"><img src="@/assets/icon/coin/bnb.svg" alt="" />BTC</div>
      <div class="item-right">0.2525 USDT</div>
    </div>
  </div>
</template>
<script setup>
  import HeaderNav from "../components/HeaderNav.vue";
</script>
<style lang="less" scoped>
  .mining-output {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .output-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      width: 345px;
      height: 30px;

      &:first-child {
        margin-top: 0;
      }

      .item-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 30px;

        img {
          margin-right: 10px;
          width: 30px;
          height: 30px;
        }
      }

      .item-right {
      }
    }
  }
</style>
