Bit_Wise_World/src/views/bitcoin/components/assetlessStateData.vue

<script setup>

</script>

<template>
  <div class="menu-content-l">
        <div class="menu-content-lb pf400 fs14 fc666666">
          <span>价格</span><span>数量(USDT)</span>
        </div>
        <div class="menu-content-lb2">
          <p class="pf600 fs16 fcDF384C">5,678.00</p>
          <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
        </div>
        <div  class="menu-content-lb1">
          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
            <span class="">40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span class="">40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
          </div>
          <div class="menu-content-lb1r pf400 fs14 fc444444">
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
          </div>
        </div>
        <div class="menu-content-lb1">
          <div class="menu-content-lb1l pf400 fs12 fc333333">
            <span class="fs12">深度1</span>
            <img src="../../../assets/icon/bitcoin/shendul.svg" alt="">

          </div>
          <div class="menu-content-lb1r pf400 fs14 fc444444">
            <img src="../../../assets/icon/bitcoin/wuzichan.svg" alt="">
          </div>
        </div>

      </div>
</template>

<style scoped lang="less">
  .menu-content-l{
        flex: 1;
        .menu-content-lb{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding-right: 14px;
        }
        .menu-content-lb1{
          margin-top: 5px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
           padding-right: 14px;
          .menu-content-lb1l{
            display: flex;
            flex-direction: column;
            line-height: 22px;
          }
          .menu-content-lb1r{
            display: flex;
            flex-direction: column;
            line-height: 22px;
          }
        }
        .menu-content-lb1:nth-child(3){
          .menu-content-lb1l{
            color: #45b26b;
          }
        }
        .menu-content-lb1:nth-child(4){
          .menu-content-lb1l{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background-color: #f5f5f5;
            border-radius: 6px;
            height: 24px;
            padding: 0 5px 0 13px;
          }
          .menu-content-lb1r{
            margin-left: 15px;
          }
        }
        .menu-content-lb2{
          margin-top: 8px;
          line-height: 16px;
          //span:nth-child(2){
          //  //border-style: dashed;
          //}
        }
      }
</style>