Bit_Wise_World/src/views/market/Contract.vue

<template>
  <div class="contract">
    <div class="coin-head">
      <div class="name">
        <div class="name-text pf400 fs12 fc666666">交易对</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name price">
        <div class="name-text pf400 fs12 fc666666">最新价</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
      <div class="name today">
        <div class="name-text pf400 fs12 fc666666">今日涨跌幅</div>
        <div class="list-sort">
          <div class="sort-up">
            <img src="../../assets/icon/index/Triangle.svg" alt="" />
          </div>
          <div class="sort-bottom">
            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="coin-body">
      <div class="body-item" v-for="(item, index) in 10" :key="index">
        <div class="item-left">
          <div class="coin-img">
            <img src="../../assets/img/index/Frame 7.svg" alt="" />
          </div>
          <div class="coin-name">
            <div class="upper-name pf500 fs14 fc2C3131">Bitcoin</div>
            <div class="letter-name pf400 fs10 fcA9A9A9">BTC</div>
          </div>
          <div class="coin-echars"></div>
          <div class="coin-price">
            <div class="upper-price pf500 fs14 fc2C3131">48.503.12</div>
            <div class="letter-price pf400 fs10 fcA9A9A9">￥ 4250.00</div>
          </div>
        </div>
        <div class="item-right pf500 fs12 fcFFFFFF">+2.18%</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .contract {
    margin-top: 11px;

    .coin-head {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 6px;
      width: 100%;
      height: 24px;

      .name {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 24px;

        .list-sort {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 4px;
          width: 8px;
          height: 16px;

          .sort-up,
          .sort-bottom {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 8px;
            height: 8px;

            img {
              width: 8px;
              height: 4px;
            }
          }
        }
      }

      .price {
        margin-left: 128px;
      }

      .today {
        margin-left: 47px;
      }
    }

    .coin-body {
      margin-top: 9px;
      width: 100%;

      .body-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 23.5px;
        width: 100%;
        height: 38px;

        &:nth-child(1) {
          margin-top: 0;
        }

        .item-left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 276px;
          height: 100%;

          .coin-img {
            width: 32px;
            height: 32px;

            img {
              width: 32px;
              height: 32px;
            }
          }

          .coin-name {
            margin-left: 10px;
            width: 85px;
            height: 34px;

            .upper-name {
              height: 20px;
              line-height: 20px;
            }

            .letter-name {
              height: 14px;
              line-height: 14px;
            }
          }

          .coin-echars {
            width: 60px;
            height: 35px;
          }

          .coin-price {
            margin-left: 13px;
            width: 75px;
            height: 38px;

            .upper-price {
              height: 20px;
              line-height: 20px;
              text-align: right;
            }

            .letter-price {
              height: 16px;
              line-height: 16px;
              text-align: right;
            }
          }
        }

        .item-right {
          margin-left: 8px;
          width: 61px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #45b26b;
          border-radius: 5px;
        }
      }
    }
  }
</style>