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

<template>
  <div class="entrusting-order">
    <div class="order-header pf400 fs12 fc666666">
      <div class="header-buy">买盘</div>
      <div class="header-number">数量(AVAX)</div>
      <div class="header-price">价格(AVAX)</div>
      <div class="header-number2">数量(AVAX)</div>
      <div class="header-sell">卖盘</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">{{ index + 1 }}</div>
        <div class="item-number fs400 fs12 fc444444">37.80K</div>
        <div class="item-price fs400 fs12">
          <div class="fc45B26B">40,166.82</div>
          <div class="price-second fcFF7171">39,962.74</div>
        </div>
        <div class="item-number2 fs400 fs12 fc444444">37.80K</div>
        <div class="item-sell fs400 fs12 fcA8A8A8">{{ index + 1 }}</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>
  .entrusting-order {
    width: 100%;

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

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

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

      .header-price {
        width: 133px;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }

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

      .header-sell {
        width: 40px;
        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: 46px;
          height: 21px;
          line-height: 21px;
          text-align: left;
        }

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

        .item-price {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 163px;
          height: 21px;
          text-align: center;

          .price-second {
            margin-left: 9px;
          }
        }

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

        .item-sell {
          width: 40px;
          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>