增加已购买nft列表页面

src/components/market/MoileTop.vue

@@ -4,7 +4,7 @@
       <a href="/"
       ><img
         class="logo"
-        src="@/assets/main/p1/icon_logo_t.png"
+        src="@/assets/main/p1/icon_logo_b.png"
       /></a>
       <label class="mobile-menu-icon" @click="toggleMenu">
         <img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
@@ -91,7 +91,7 @@ export default class extends Vue {
     align-items: center;
   }
   .logo {
-    height: 58px;
+    max-width: 50vw;
   }
   .mobile-menu-icon {
 

src/components/market/NftInfo.vue

@@ -0,0 +1,175 @@
+<template>
+  <a class="card-root" :href="data.id? '/item': 'javascript:void(0)'">
+    <div class="nft-id">#1231231231</div>
+    <nft-item :data="data" ></nft-item>
+    <div class="attr-div">
+      <div class="one-col-info nft-id-mobile">
+        <div class="one-info">
+          <div class="info-title">Token ID</div>
+          <div class="info-val token-color">#1231232</div>
+        </div>
+      </div>
+      <div class="one-col-info">
+        <div class="one-info">
+          <div class="info-title">Level</div>
+          <div class="info-val">1</div>
+        </div>
+      </div>
+      <div class="two-col-info">
+        <div class="one-info">
+          <div class="info-title">HP</div>
+          <div class="info-val">100</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">Speed</div>
+          <div class="info-val">9</div>
+        </div>
+      </div>
+      <div class="two-col-info">
+        <div class="one-info">
+          <div class="info-title">Attack</div>
+          <div class="info-val">20</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">Defence</div>
+          <div class="info-val">13</div>
+        </div>
+      </div>
+      <div class="one-col-info">
+        <div class="one-info">
+          <div class="info-title">Advanced Count</div>
+          <div class="info-val">999</div>
+        </div>
+      </div>
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { ISpineData } from '@/utils/SpineRender'
+import NftItem from '@/components/market/NftItem.vue'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data: ISpineData
+  }
+}
+
+@Component({
+  name: 'NftInfo',
+  components: {
+    NftItem
+  },
+  props: ['data']
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-root{
+    font-family: 'zitic',serif;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    width: 14em;
+    .card{
+      height: 18em;
+      width: 100%;
+      position: relative;
+    }
+    .nft-id {
+      color: #46E0F4;
+    }
+    .attr-div{
+      border: 10px solid #211638;
+      background-color: #211638;
+      border-image-source: url('../../assets/main/detail/border-attr.png');
+      border-image-slice: 10;
+      margin-top: 12px;
+      display: flex;
+      color: white;
+      flex-direction: column;
+      font-size: 11px;
+      .two-col-info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        div {
+          width: 50%;
+        }
+      }
+      .one-col-info {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        div{
+          width: 100%;
+        }
+        &.nft-id-mobile{
+          display: none;
+        }
+      }
+      .one-info{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .info-title {
+          width: 60%;
+        }
+        .info-val {
+          color: #3CF562;
+          width: 40%;
+        }
+      }
+    }
+  }
+  @media (max-width: 767px) {
+    .card-root{
+      width: 90%;
+      flex-direction: row;
+      justify-content: space-between;
+      .card{
+        width: 40vw;
+      }
+      .nft-id{
+        display: none;
+      }
+      .attr-div{
+        width: 45vw;
+        margin-top: 0;
+        margin-left: 20px;
+        .two-col-info {
+          display: flex;
+          flex-direction: column;
+          div{
+            width: 100%;
+          }
+        }
+        .one-col-info {
+          &.nft-id-mobile {
+            display: flex;
+          }
+        }
+        .one-info{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-bottom: 8px;
+          .info-title {
+            width: 40%;
+          }
+          .info-val {
+            color: #3CF562;
+            width: 60%;
+          }
+        }
+      }
+    }
+    .token-color{
+      color: #46E0F4!important;
+    }
+  }
+</style>

src/components/market/NftItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <a class="card" :href="data.id? '/item': 'javascript:void(0)'">
+  <div class="card" >
     <img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png">
     <div v-if="data.id" class="anim-border">
       <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)" />
@@ -12,7 +12,7 @@
         <img :src="require('@/assets/main/card/class_'+data.class+'.png')">
       </div>
     </div>
-  </a>
+  </div>
 </template>
 
 <script lang="ts">

src/components/market/NftList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card-list">
     <div class="grid">
-      <nft-item v-for="c in cardList" :key="c.id" :data="c"></nft-item>
+      <nft-info v-for="c in cardList" :key="c.id" :data="c"></nft-info>
     </div>
   </div>
 </template>
@@ -9,13 +9,13 @@
 import { Component, Vue } from 'vue-property-decorator'
 import Pagination from '@/components/market/Pagination.vue'
 import Card from '@/components/market/Card.vue'
-import NftItem from '@/components/market/NftItem.vue'
+import NftInfo from '@/components/market/NftInfo.vue'
 import { ISpineData } from '@/utils/SpineRender'
 
 @Component({
   name: 'NftList',
   components: {
-    NftItem,
+    NftInfo,
     Card,
     Pagination
   }
@@ -53,12 +53,6 @@ export default class extends Vue {
   row-gap: 1.3125em;
 }
 
-.card-list .grid .card {
-  height: 18em;
-  width: 14em;
-  position: relative;
-}
-
 .spinner {
   height: 100vh;
   -webkit-box-flex: 0;
@@ -85,14 +79,12 @@ export default class extends Vue {
 @media (max-width: 767px) {
   .card-list{
     margin-top: 76px;
-    padding: 26px 20px;
+    padding: 26px 0;
   };
   .card-list .grid {
-    -ms-grid-columns: (1fr)[2];
+    display: flex;
-    grid-template-columns: repeat(2, 1fr);
+    flex-direction: column;
-    -webkit-column-gap: 1.79em;
+    align-items: center;
-    column-gap: 1.79em;
-    row-gap: 1.8em;
   }
 }
 </style>

src/components/market/TopMenu.vue

@@ -6,7 +6,7 @@
           <img
             class="logo"
             alt="logo"
-            src="@/assets/main/p1/icon_logo_t.png" />
+            src="@/assets/main/p1/icon_logo_b.png" />
         </a>
       </div>
       <div class="header-menu">