Bit_Wise_World/src/views/market/details/LatestTransactions.vue

<template>
  <div class="latest-order">
    <div class="order-header pf400 fs12 fc666666">
      <div class="header-buy">时间</div>
      <div class="header-number">方向</div>
      <div class="header-price">价格(AVAX)</div>
      <div class="header-number2">数量(AVAX)</div>
    </div>
    <div class="order-body">
      <div class="order-item" v-for="(item, index) in 15" :key="index">
        <div class="item-buy fs400 fs12 fcA8A8A8">13:44:25</div>
        <div class="item-number fs400 fs12 fc45B26B">买入</div>
        <div class="item-price fs400 fs12">
          <div class="fc444444">1.2505</div>
        </div>
        <div class="item-number2 fs400 fs12 fc444444">40,166.82</div>
      </div>
    </div>
    <div class="buy-sell pf500 fs16 fcFFFFFF">
      <div class="buy-btn">买入(做多)</div>
      <div class="sell-btn">卖出(做空)</div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .latest-order {
    width: 100%;

    .order-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 6px;
      width: 100%;
      height: 24px;

      .header-buy {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-number {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-price {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: left;
      }

      .header-number2 {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: right;
      }
    }

    .order-body {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .order-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .item-buy {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: left;
        }

        .item-number {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: left;
        }

        .item-price {
          width: 25%;
          height: 21px;
          text-align: left;
        }

        .item-number2 {
          width: 25%;
          height: 21px;
          line-height: 21px;
          text-align: right;
        }
      }
    }

    .buy-sell {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
      width: 345px;
      height: 38px;

      .buy-btn {
        width: 164px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #45b26b;
        border-radius: 6px;
      }

      .sell-btn {
        width: 164px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #df384c;
        border-radius: 6px;
      }
    }
  }
</style>