Bit_Wise_World/src/views/index/ico/Subscription.vue

<template>
  <!-- 认购 -->
  <div class="subscription">
    <div class="subscription-content" v-if="subscriptionData > 0">
      <div class="subscription-head pf400 fs12 fc666666">
        <div class="head-name">名称</div>
        <div class="head-price">单价</div>
        <div class="head-operate">操作</div>
      </div>
      <div class="subscription-body">
        <div
          class="subscription-item"
          v-for="(item, index) in subscriptionData"
          :key="index">
          <div class="item-name pf400 fs14 fc2C3131">Bitcoin</div>
          <div class="item-price pf400 fs14 fc2C3131">15.3156</div>
          <div class="item-operate">
            <div class="text pf500 fs12 fcFFFFFF">认购</div>
          </div>
        </div>
      </div>
    </div>
    <div class="subscription-null" v-else>
      <img
        src="../../../assets/icon/index/subscription-null.svg"
        class="img-null"
        alt="" />
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue";

  const subscriptionData = ref(6);
</script>
<style lang="less" scoped>
  .subscription {
    width: 349px;

    .subscription-content {
      margin-top: 10px;
      width: 100%;

      .subscription-head {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        height: 24px;

        .head-name {
          width: 116px;
          height: 24px;
          line-height: 24px;
          text-align: left;
          letter-spacing: 0.17px;
        }

        .head-price {
          width: 117px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          letter-spacing: 0.17px;
        }

        .head-operate {
          width: 116px;
          height: 24px;
          line-height: 24px;
          text-align: right;
          letter-spacing: 0.17px;
        }
      }

      .subscription-body {
        width: 100%;

        .subscription-item {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          margin-top: 13px;
          padding-bottom: 13px;
          width: 100%;
          border-bottom: 1px solid #f5f5f5;

          .item-name {
            width: 116px;
            height: 24px;
            line-height: 24px;
            text-align: left;
            letter-spacing: 0.17px;
          }

          .item-price {
            width: 117px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            letter-spacing: 0.17px;
          }

          .item-operate {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            width: 116px;
            height: 24px;

            .text {
              width: 61px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              border-radius: 5px;
              background: #45b26b;
            }
          }
        }
      }
    }

    .subscription-null {
      .img-null {
        margin-top: 117px;
        width: 343px;
        height: 267px;
      }
    }
  }
</style>