CounterFireGames/src/components/common/tradingCard.vue

<template>
  <div>
    <a-table :dataSource="nftData" :pagination="false">
      <a-table-column title="NFT" data-index="nft" :width="400">
        <template  #default="{ text: nft }">
          <div class="nft">
            <div class="nft-img">
              <ImgCard :nftData="nft" />
            </div>
            <div class="nft-name">{{ nft.name }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Status" data-index="event" :width="400">
        <template  #default="{ text: event }">
          <div class="status">
            <div class="nft-status">{{ event.data.activity_type }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Price" data-index="event" :width="400">
        <template  #default="{ text: event }">
          <div class="price">
            <div class="nft-price">{{ event.data.details.asset[0].amount }}</div>
            <p>$ &nbsp; 400</p>
          </div>
        </template>
      </a-table-column>
      <a-table-column  title="" data-index="event">
        <template  #default="{ text: event }">
          <div class="price-icon">
            <span>{{event}}</span>
            <img src="@/assets/img/marketplace/ETHicon.png" alt="">
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Quantity" data-index="nft" :width="400">
        <template  #default="{ text: nft }">
          <div class="quantity">
            <div class="nft-quantity">{{ nft.detail.quality }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Sender" data-index="event" :width="400">
        <template  #default="{ text: event }">
          <div class="sender">
            <div class="nft-sender">{{ sliceAddress(event.data.details.from) }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column  title="" data-index="event">
        <template  #default="{ text: event }">
          <div class="from-to-icon">
            <span>{{event}}</span>
            <img src="@/assets/img/marketplace/Arrows.png" alt="">
          </div>
        </template>
      </a-table-column>
      <a-table-column title="recipient" data-index="event" :width="400">
        <template  #default="{ text: event }">
          <div class="recipient">
            <div class="nft-recipient">{{ sliceAddress(event.data.details.to) }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Date" data-index="event" :width="400">
        <template  #default="{ text: event }">
          <div class="date">
            <div class="nft-date">{{ showTime(event.data.indexed_at) }}</div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="Contract" data-index="nft" :width="400">
        <template  #default="{ text: nft }">
          <div class="contract">
            <div class="nft-contract">
              <a :href="nft.meta_url" target="_back">
                <span>Etherscan</span>
                <img src="@/assets/img/marketplace/Links web icon.png" alt="">
              </a>
            </div>
          </div>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script setup>
import { ref } from "vue"
import ImgCard from "@/components/common/imgCard.vue"
import { sliceAddress, showTime } from "@/configs/priceCalculate"

const props = defineProps({
  nftData: {
    type: Array,
    required: true,
  },
});


console.log(props.nftData)


</script>

<style lang="scss" scoped>
div {
  :deep(.ant-table-wrapper) {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .ant-table {
          color: #fff;
          background: #16141b;
          .ant-table-container {
            .ant-table-content {
              .ant-table-thead {
                tr {
                  th {
                    color: #B3B5DA;
                    background: #16141b;
                    border-color: #34354e;
                    text-align: center;
                    &::before {
                      display: none;
                    }
                  }
                }
              }
              .ant-table-tbody {
                tr {
                  background: #16141b;
                  td {
                    border-color: #34354e;
                    background: #16141b !important;
                    overflow: visible !important;
                    vertical-align: middle;
                    >div {
                      text-align: center;
                      font-family: 'Poppins';
                      font-weight: 600;
                      font-size: 20px;
                      color: #F3F0FF;
                    }
                    .nft {
                      display: flex;
                      align-items: center;
                      justify-content: space-evenly;
                      .nft-img {
                        width: 213px;
                        height: 100%;
                        .card-img-common {
                          .img-top {
                            width: 60px;
                            height: 20px;
                            top: 10px;
                            left: 10px;
                            font-size: 14px;
                          }
                          .img-btm {
                            bottom: 15px;
                            left: 20px;
                            >div {
                              width: 58px;
                              height: 20px;
                              font-size: 12px;
                            }
                            div:nth-child(2) {
                              margin-left: 8px;
                            }
                          }
                        }
                      }
                      .nft-name {
                        width: 140px;
                        text-align: left;
                        margin-left: 20px;
                      }
                    }
                    .status {
                      color: #FFC35B;
                    }
                    .price {
                      min-width: 80px;
                      color: #BB7FFF;
                      .nft-price {
                        font-family: 'Anton';
                        font-weight: 400;
                        font-size: 42px;
                      }
                      p {
                        font-size: 24px;
                      }
                    }
                    .price-icon {
                      width: 43px;
                      span {
                        display: none;
                      }
                      img {
                        width: 43px;
                        height: 43px;
                      }
                    }
                    .from-to-icon {
                      width: 34px;
                      span {
                        display: none;
                      }
                      img {
                        width: 34px;
                        height: 16px;
                      }
                    }
                    .nft-date {
                      width: 120px;
                    }
                    .nft-contract {
                      a {
                        display: flex;
                        align-items: end;
                        color: #9950FD;
                        font-size: 15px;
                        span {
                          border-bottom: 2px solid #9950FD;
                        }
                        img {
                          width: 21px;
                          height: 20px;
                          margin-left: 16px;
                        }
                      }
                    }
                  }
                  &:hover {
                    background: #16141b !important;
                    td {
                      background: #16141b !important;
                    }
                    .ant-table-cell-row-hover {
                      background: #16141b !important;
                    }
                    .ant-table-cell {
                      background: #16141b !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>