<template>
  <!-- 新币预览 -->
  <div class="coin-preview">
    <div class="subscription-head pf400 fs12 fc666666">
      <div class="head-first">SN</div>
      <div class="head-first">CD</div>
      <div class="head-first">LD</div>
      <div class="head-first">IP</div>
      <div class="head-first">API</div>
      <div class="head-first">SPD</div>
      <div class="head-first">SPED</div>
      <div class="head-first">FDLG</div>
    </div>
    <div class="subscription-body">
      <div
        class="subscription-item pf400 fs12 fc2C3131"
        v-for="(item, index) in 5"
        :key="index">
        <div class="item-first">{{ index + 1 }}</div>
        <div class="item-first">XYAN</div>
        <div class="item-first">11/06</div>
        <div class="item-first">66.3</div>
        <div class="item-first">25.2%</div>
        <div class="item-first">10/13</div>
        <div class="item-first">10/13</div>
        <div class="item-first">495%</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .coin-preview {
    width: 349px;

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

      .head-first {
        width: 44.5px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.17px;

        &:first-child {
          width: 31.5px;
          text-align: left;
        }

        &:last-child {
          width: 48.5px;
          text-align: right;
        }
      }
    }

    .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-first {
          width: 44.5px;
          text-align: center;
          letter-spacing: 0.17px;

          &:first-child {
            width: 31.5px;
            text-align: left;
          }

          &:last-child {
            width: 48.5px;
            text-align: right;
          }
        }
      }
    }
  }
</style>
