de-net/src/view/popup/tabbar-page/nft/detail.vue

<template>
  <div class="nft-detail-wrapper">
    <div class="back-bar"></div>
    <div class="content">
      <div class="nft-img">
        <img
          class="img"
          src="https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
          alt=""
        />
      </div>

      <div class="desc item">
        <div class="title">Description</div>
        <div class="desc-content">
            Created by <span>Azuki</span>
        </div>
      </div>

      <div class="prop item">
        <div class="title">Properties</div>
        <div class="prop-content">
            <div class="prop-item">

            </div>
        </div>
      </div>

      <div class="about item">
        <div class="title">About</div>
      </div>

      <div class="detail item">
        <div class="title">Details</div>
      </div>

      <div class="date item">
        <div class="title">Date of possession</div>
      </div>

      <div class="price item">
        <div class="title">Purchase price</div>
      </div>
    </div>
    <div class="bottom-bar"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";

let propList = ref([
    {
        
    }
])

</script>


<style scoped lang="scss">
.nft-detail-wrapper {
  width: 100%;
  height: 100%;

  .back-bar {
    height: 48px;
    background: #ffffff;
    box-shadow: 0px 0.5px 0px #d1d9dd;
    box-sizing: border-box;
    padding: 14px;
  }

  .content {
    width: 100%;
    height: calc(100% - 120px);
    padding: 0 16px;
    box-sizing: border-box;
    overflow-y: auto;

    .nft-img {
        margin-top: 23px;
        margin-bottom: 20px;
        text-align: center;
        .img {
            width: 280px;
            border-radius: 26px;
        }
    }

    .item {
      border: 1px solid #e3e3e3;
      border-radius: 10px;
      padding: 14px;
      box-sizing: border-box;
      margin-bottom: 12px;

      .title {
        font-weight: 600;
        font-size: 14px;
      }
    }

    .desc {
        margin-top: 10px;
        .desc-content {
            font-weight: 500;
            font-size: 14px;
            color: #929292;

            span {
                color: #1D9BF0;
            }
        }
    }
  }

  .bottom-bar {
    background: #ffffff;
    box-shadow: inset 0px 1px 0px #ececec;
    height: 70px;
    padding: 15px 16px;
    box-sizing: border-box;
  }
}
</style>