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

<template>
  <div class="trans-relu">
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">资金费率/倒计时</div>
      <div class="pf500 fs12 fc666666">59.0507%/02:24:27</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最小下单数量</div>
      <div class="pf500 fs12 fc666666">0.001 BTC</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最小下单名义价值</div>
      <div class="pf500 fs12 fc666666">100 USDT</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">市价单单笔最大数量</div>
      <div class="pf500 fs12 fc666666">210 BTC</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">限价单单笔最大数量</div>
      <div class="pf500 fs12 fc666666">200</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最大挂单数量</div>
      <div class="pf500 fs12 fc666666">10</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最大条件单挂单数量</div>
      <div class="pf500 fs12 fc666666">0.30 USDT</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最小价格波动</div>
      <div class="pf500 fs12 fc666666">556.80 USDT</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">最小下单价格</div>
      <div class="pf500 fs12 fc666666">5%</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">限价订单价格上限比率</div>
      <div class="pf500 fs12 fc666666">5%</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">限价订单价格下限比率</div>
      <div class="pf500 fs12 fc666666">5%</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">价差保护阈值</div>
      <div class="pf500 fs12 fc666666">5%</div>
    </div>
    <div class="info-second margin-top8">
      <div class="pf400 fs14 fc666666">强平清算费</div>
      <div class="pf500 fs12 fc666666">5%</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>
  .trans-relu {
    width: 349px;

    .margin-top15 {
      margin-top: 15px;
    }

    .margin-top8 {
      margin-top: 8px;
    }

    .margin-top3 {
      margin-top: 3px;
    }

    .info-second {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 20px;
    }

    .buy-sell {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 138px;
      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>