Bit_Wise_World/src/views/asset/otc/order/All.vue

<template>
  <div class="order-all">
    <div class="order-item">
      <div class="user-info">
        <div class="info-left">
          <div class="info-shangjia">
            <img src="@/assets/img/index/user/default-head.png" alt="" />
            <div class="pf500 fs14 fc2C3131">商家昵称</div>
            <div class="vip pf500 fs10 fcDF384C">V2</div>
          </div>
          <div class="number pf400 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
        </div>
        <div class="info-right pf500 fs12 fcFFFFFF">待放行</div>
      </div>
      <div class="pay-way pf500 fs12 fcA8A8A8">
        <div>付款方式</div>
        <div class="way-right">
          <div class="color"></div>
          银行卡
        </div>
      </div>
      <div class="order-number pf500 fs12 fcA8A8A8">
        <div>订单号</div>
        <div class="number-right">
          2508050505052008502060
          <img src="@/assets/icon/index/CopySimple.svg" alt="" />
        </div>
      </div>
      <div class="goods-info">
        <div class="info-item">
          <div class="item-top pf500 fs12 fcA8A8A8">购买单价</div>
          <div class="item-bottom pf500 fs12 fc2C3131">6.95 USDT</div>
        </div>
        <div class="info-item">
          <div class="item-top pf500 fs12 fcA8A8A8">购买数量</div>
          <div class="item-bottom pf500 fs12 fc2C3131">0.215 USDT</div>
        </div>
        <div class="info-item">
          <div class="item-top pf500 fs12 fcA8A8A8">购买金额</div>
          <div class="item-bottom pf500 fs12 fc2C3131">1250 CNY</div>
        </div>
      </div>
      <div class="order-func pf500 fs16 fcFFFFFF">
        <div class="kefu">联系客服</div>
        <div class="order">取消订单</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .order-all {
    margin: 0 auto;
    margin-top: 15px;
    padding: 15px 10px;
    width: 345px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    box-sizing: border-box;

    .user-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .info-left {
        .info-shangjia {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          img {
            margin-right: 4px;
            width: 24px;
            height: 24px;
          }

          .vip {
            margin-left: 4px;
            width: 18px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            background: #df384c1a;
          }
        }

        .number {
          margin-top: 4px;
        }
      }

      .info-right {
        width: 76px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 5px;
        background: #df384c;
      }
    }

    .pay-way {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 7px;
      height: 18px;

      .way-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }

      .color {
        margin-right: 4px;
        width: 3px;
        height: 10px;
        border-radius: 2px;
        background: #df384c;
      }
    }

    .order-number {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 3px;
      height: 18px;

      .number-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        img {
          margin-left: 4px;
        }
      }
    }

    .goods-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 3px;
      width: 345px;
      height: 38px;

      .info-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 30%;
        height: 100%;

        .item-top {
          height: 18px;
          line-height: 18px;
        }

        .item-bottom {
          height: 20px;
          line-height: 20px;
        }
      }
    }

    .order-func {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;
      width: 345px;
      height: 38px;

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

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