英雄上锁

src/components/assets/cenCard.vue

@@ -21,13 +21,17 @@
             <img :src="icon" alt="">
           </div>
         </div>
-        <div class="link-below" @click="mintHero()">
+        <div class="link-below" v-if="nftData.on_lock == '1'" @click="mintHero()">
+          <img src="@/assets/img/marketplace/Off-Chain.png" alt="">
+        </div>
+        <div class="link-below" v-else>
           <img src="@/assets/img/marketplace/Off-Chain.png" alt="">
         </div>
       </div>
     </div>
     <div class="card-btn">
-      <div class="card-sell" v-if="nftData.on_sale == 0" @click="mintHero()">Mint</div>
+      <div class="card-sell" v-if="nftData.on_lock == '1'" @click="mintHero()">Mint</div>
+      <div class="card-cancel" v-else >Unlock</div>
     </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
@@ -297,6 +301,9 @@ onMounted(() => {
       font-weight: 700;
       font-size: 28px;
     }
+    .card-cancel {
+      background: #7f7f7f;
+    }
   }
 }
 </style>

src/components/assets/imgs.vue

@@ -6,6 +6,9 @@
     <div class="imgs-img">
       <img :src="heroImg[props.nftData.name].img" alt="">
     </div>
+    <div class="imgs-lock" v-if="nftData.on_lock == '1'">
+      Locked
+    </div>
     <div class="imgs-day">
       {{ nftData.detail.max_mining_days }}
     </div>
@@ -61,6 +64,19 @@ const props = defineProps({
       height: 100%;
     }
   }
+  .imgs-lock {
+    position: absolute;
+    left: -10px;
+    bottom: 130px;
+    width: 200px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    background: url('src/assets/img/marketplace/hero_lockBg.png') no-repeat;
+    background-size: 100% 100%;
+  }
   .imgs-day {
     position: absolute;
     right: 3px;

src/components/notice/cecClaim.vue

@@ -86,7 +86,7 @@
       width: 100%;
       height: 4px;
       margin: 20px 0;
-      background: url('src/assets/img/notice/Announcement line.png') no-repeat;
+      background: url('@/assets/img/notice/Announcement_line.png') no-repeat;
       background-size: 100% 100%;
     }
     .claim-content {

src/views/DetailView.vue

@@ -172,7 +172,16 @@
               <div
                 v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()"
               >
-                <div class="mint" @click="mintHero">Mint</div>
+                <div class="mint" @click="mintHero" v-if="detailData.nft.on_lock == '1'">Mint</div>
+                <div class="unLock" v-else>Mint</div>
+              </div>
+              <div
+                v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()"
+              >
+                <div class="lock" v-if="detailData.nft.on_lock == '0'">
+                  <img src="@/assets/img/marketplace/Icon_!.png" alt="">
+                  <p>You need to lock in the game before Minting</p>
+                </div>
               </div>
               <!-- 
               1、添加购物车
@@ -880,6 +889,13 @@ onMounted(() => {
               width: 311px;
               height: 413px;
             }
+            .imgs-lock {
+              bottom: 220px;
+              left: 0px;
+              width: 311px;
+              height: 40px;
+              line-height: 40px;
+            }
             .imgs-day {
               bottom: 180px;
               width: 90px;
@@ -1111,6 +1127,22 @@ onMounted(() => {
             .mint {
               background: #6336d7;
             }
+            .lock {
+              height: 20px;
+              margin: 0;
+              img {
+                width: 20px;
+                height: 20px;
+                margin-right: 10px;
+              }
+              p {
+                font-size: 14px;
+                font-weight: 400;
+              }
+            }
+            .unLock {
+              background: #7f7f7f;
+            }
           }
         }
         .info {

src/views/NoticeView.vue

@@ -23,7 +23,7 @@ const noticeList = ref([
   padding-top: 70px;
   width: 100%;
   height: 100%;
-  background: url('src/assets/img/notice/Announcement bg.png') no-repeat;
+  background: url('@/assets/img/notice/Announcement_bg.png') no-repeat;
   // background-size: 100% 100%;
   .notice-table {
     position: absolute;
@@ -34,7 +34,7 @@ const noticeList = ref([
     li {
       width: 269px;
       height: 130px;
-      background: url('@/assets/img/notice/Announcement button02.png') no-repeat;
+      background: url('@/assets/img/notice/Announcement_button02.png') no-repeat;
       background-size: 100% 100%;
     }
   }