From a37721adbfff4cd84fbe6581ed8d0f9002c1af2e Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Tue, 25 Jan 2022 18:03:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=B2=E8=B4=AD=E4=B9=B0nf?=
 =?UTF-8?q?t=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main/detail/border-attr.png | Bin 0 -> 650 bytes
 src/components/market/MoileTop.vue     |   4 +-
 src/components/market/NftInfo.vue      | 175 +++++++++++++++++++++++++
 src/components/market/NftItem.vue      |   4 +-
 src/components/market/NftList.vue      |  22 +---
 src/components/market/TopMenu.vue      |   2 +-
 6 files changed, 187 insertions(+), 20 deletions(-)
 create mode 100755 src/assets/main/detail/border-attr.png
 create mode 100644 src/components/market/NftInfo.vue

diff --git a/src/assets/main/detail/border-attr.png b/src/assets/main/detail/border-attr.png
new file mode 100755
index 0000000000000000000000000000000000000000..35aa1278af75aeafcdd7dd13d585fb50c44ecb0f
GIT binary patch
literal 650
zcmeAS@N?(olHy`uVBq!ia0vp^VL+_T!3HF!YV4m3q&N#aB8wRqxP?HN@zUM8KMV{^
zHl8kyAsLNtZ^wEBCrTXnxcvK#ea9thJ)LJyY0e4Jvk2k3_q$NAv1y69prh-9v%3V@
z-ln+-I$rD*but%nW^!e5baiE2>~rx`w(l{MK&OWu+upu8Vr^k)!coE>ef#rn>Gr*E
zetw>}Id+frl2uwuW-%Q7mYcQjYKG}mfBxDVfk}nT6KvlsUH&L-_Sg1v3+l`NuK9fO
z-D}pB`uF<kzjUehRaM2a>om*ShJ2Pkv*@YM*|%(+oKC0xD|c_aSX&oSeSE&`>BV_2
z*P`a%|N3%ManGC5JwH^oY_XlfxWKJ@HqY-m#fa@<T_tu|RRtFJmETT}+|scB{n@aE
zhvSqQH=O)o#pzo4_0hckMREteP2-vCfBWcz=R4DDM9mnze!h9Jq&HrH{qX+jEldl|
zB)^@$@nr4Cb&R&AzWpa2ZEF0#DXD7m#Yx=EsohgsQ}1n_^R${nM?{RX)zv9+VnBon
zS<D+I#+_mN5;|V`wl%E2G}n7`YRJu}-Lr)_6wA(5?uuTu?$(LNVwuJ34)OXV7%#Bp
z67pKK_g=BFdfVwG()X-49S*(4ax3s>8+WRl+J@DyAHJVj;!;=tZvPjz$NQ7|e<m{o
z^`9zkoVj!2hwBTjJj}nmwmtm+>VrnD_y5%_|Fq(4xZck#{TrXh8~?enXVt2IH~hA|
z2>w6AP%!+(n>X<{=JNgYcxZSt!&Lv{?fBa(JsCboPjXzFe`Z@NFhMaec)I$ztaD0e
F0su;vFRcIo

literal 0
HcmV?d00001

diff --git a/src/components/market/MoileTop.vue b/src/components/market/MoileTop.vue
index 4585a92..fbe90c7 100644
--- a/src/components/market/MoileTop.vue
+++ b/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 {
 
diff --git a/src/components/market/NftInfo.vue b/src/components/market/NftInfo.vue
new file mode 100644
index 0000000..56e2f70
--- /dev/null
+++ b/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>
diff --git a/src/components/market/NftItem.vue b/src/components/market/NftItem.vue
index aa2bd11..e161430 100644
--- a/src/components/market/NftItem.vue
+++ b/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">
diff --git a/src/components/market/NftList.vue b/src/components/market/NftList.vue
index 79bda28..79fe293 100644
--- a/src/components/market/NftList.vue
+++ b/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];
-    grid-template-columns: repeat(2, 1fr);
-    -webkit-column-gap: 1.79em;
-    column-gap: 1.79em;
-    row-gap: 1.8em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 }
 </style>
diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index e12baa9..f2a554a 100644
--- a/src/components/market/TopMenu.vue
+++ b/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">