ffi

src/App.vue

@@ -17,7 +17,7 @@ body,
 html {
   padding: 0;
   margin: 0;
-  line-height: 1.0;
+  line-height: 1.1;
   font-family: "ui-sans-serif", "system-ui", "-apple-system",
     "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
     "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",

src/assets/text/text.css

@@ -1,18 +1,37 @@
 @font-face {
-    font-family: "Big John";
-    src: url('./big-john-woff2-2.ttf');
-    font-weight: normal;
-    font-style: normal;
+  font-family: "FiraSans-BlackItalic";
+  src: url("./FiraSans-BlackItalic.ttf");
+  font-weight: normal;
+  font-style: normal;
 }
 @font-face {
-    font-family: "Arial";
-    src: url('./arial.ttf');
-    font-weight: normal;
-    font-style: normal;
+  font-family: "FiraSans-Condensed";
+  src: url("./FiraSansCondensed-Thin.ttf");
+  font-weight: normal;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'Poppins';
+  font-family: "Poppins-Bold";
+  font-style: normal;
+  font-weight: 600;
+  src: url("./Poppins-SemiBold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Medium";
+  font-style: normal;
+  font-weight: 600;
+  src: url("./Poppins-Medium.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Regular";
+  font-style: normal;
+  font-weight: 600;
+  src: url("./Poppins-Regular.ttf") format("truetype");
+}
+@font-face {
+    font-family: "Poppins-SemiBoldItalic";
     font-style: normal;
     font-weight: 600;
-    src: url('./Poppins-SemiBold.ttf') format('truetype');
+    src: url("./Poppins-SemiBoldItalic.ttf") format("truetype");
   }
+  

src/components/global/ImageTextModal.vue

@@ -17,14 +17,14 @@
         />
       </div>
       <div class="exclusive">
-        <div class="cancel flex justify-end" @click="onCancel">
+        <div class="cancel  pr-2 pt-2 flex justify-end" @click="onCancel">
           <img
             src="../../assets/img/badge/close.png"
             alt="/hero.png"
             class="max-w-full h-auto"
           />
         </div>
-        <div v-if="visible" class="pt-12 w-[450px] text-gray-100 text-content">
+        <div v-if="visible" class="pt-10 w-[450px] text-gray-100 text-content">
           This is an exclusive badge for CEBG Genesis NFT holders. It will
           serve as an identity credential for Genesis NFT holders to
           participate in all future activities
@@ -55,6 +55,7 @@ const onCancel = () => {
   position: relative;
 }
 
+
 .hero-img {
   position: absolute;
   left: 0;
@@ -113,5 +114,25 @@ const onCancel = () => {
     padding: 0;
     box-shadow: none;
   }
+  .ant-modal-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85)!important;
+}
+}
+.ant-modal-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85)!important;
 }
 </style>

src/components/layout/NavBar.vue

@@ -14,7 +14,7 @@
           class="w-[18.75rem] login-btn  h-[3.75rem] mr-6 flex items-center justify-center bg-button-default "
         >
           <div
-            class="text-lg login-btn-item italic text-my-text-color decoration-1"
+            class="text-lg login-btn-item italic text-my-text-color font-poppins-semiBoldItalic decoration-1"
             @click="login"
           >
             WALLET CONNECT
@@ -25,7 +25,7 @@
           class="w-[18.75rem] h-[3.75rem] login-btn  mr-6 flex items-center justify-center bg-button-default "
         >
           <div
-            class="text-lg italic login-btn-item text-my-text-color decoration-1"
+            class="text-lg italic font-poppins-semiBoldItalic login-btn-item text-my-text-color decoration-1"
             @click="logout"
           >
             loginout

src/configs/contracts.ts

@@ -1,289 +1,452 @@
-export const ERC20ABI = [
+export const ERC20ABI =  [
   {
     inputs: [
       {
-        internalType: 'string',
-        name: 'name_',
-        type: 'string'
+        internalType: "address",
+        name: "_nftTarget",
+        type: "address"
       },
       {
-        internalType: 'string',
-        name: 'symbol_',
-        type: 'string'
+        internalType: "address[]",
+        name: "_manageAddress",
+        type: "address[]"
       }
     ],
-    stateMutability: 'nonpayable',
-    type: 'constructor'
+    stateMutability: "nonpayable",
+    type: "constructor"
   },
   {
     anonymous: false,
     inputs: [
       {
         indexed: true,
-        internalType: 'address',
-        name: 'owner',
-        type: 'address'
+        internalType: "address",
+        name: "user",
+        type: "address"
       },
       {
         indexed: true,
-        internalType: 'address',
-        name: 'spender',
-        type: 'address'
+        internalType: "address",
+        name: "nft",
+        type: "address"
       },
       {
         indexed: false,
-        internalType: 'uint256',
-        name: 'value',
-        type: 'uint256'
+        internalType: "uint256[]",
+        name: "nftSIds",
+        type: "uint256[]"
+      },
+      {
+        indexed: false,
+        internalType: "uint256[]",
+        name: "nftTIds",
+        type: "uint256[]"
       }
     ],
-    name: 'Approval',
-    type: 'event'
+    name: "Minted",
+    type: "event"
   },
   {
     anonymous: false,
     inputs: [
       {
         indexed: true,
-        internalType: 'address',
-        name: 'from',
-        type: 'address'
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
       },
       {
         indexed: true,
-        internalType: 'address',
-        name: 'to',
-        type: 'address'
+        internalType: "bytes32",
+        name: "previousAdminRole",
+        type: "bytes32"
       },
       {
-        indexed: false,
-        internalType: 'uint256',
-        name: 'value',
-        type: 'uint256'
+        indexed: true,
+        internalType: "bytes32",
+        name: "newAdminRole",
+        type: "bytes32"
       }
     ],
-    name: 'Transfer',
-    type: 'event'
+    name: "RoleAdminChanged",
+    type: "event"
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "account",
+        type: "address"
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "sender",
+        type: "address"
+      }
+    ],
+    name: "RoleGranted",
+    type: "event"
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "account",
+        type: "address"
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "sender",
+        type: "address"
+      }
+    ],
+    name: "RoleRevoked",
+    type: "event"
   },
   {
     inputs: [],
-    name: 'name',
+    name: "DEFAULT_ADMIN_ROLE",
     outputs: [
       {
-        internalType: 'string',
-        name: '',
-        type: 'string'
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32"
       }
     ],
-    stateMutability: 'view',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [],
-    name: 'symbol',
+    name: "MANAGE_ROLE",
     outputs: [
       {
-        internalType: 'string',
-        name: '',
-        type: 'string'
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32"
       }
     ],
-    stateMutability: 'view',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      }
+    ],
+    name: "getRoleAdmin",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32"
+      }
+    ],
+    stateMutability: "view",
+    type: "function",
+    constant: true
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      },
+      {
+        internalType: "uint256",
+        name: "index",
+        type: "uint256"
+      }
+    ],
+    name: "getRoleMember",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address"
+      }
+    ],
+    stateMutability: "view",
+    type: "function",
+    constant: true
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      }
+    ],
+    name: "getRoleMemberCount",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256"
+      }
+    ],
+    stateMutability: "view",
+    type: "function",
+    constant: true
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      },
+      {
+        internalType: "address",
+        name: "account",
+        type: "address"
+      }
+    ],
+    name: "grantRole",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
+      },
+      {
+        internalType: "address",
+        name: "account",
+        type: "address"
+      }
+    ],
+    name: "hasRole",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool"
+      }
+    ],
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [],
-    name: 'decimals',
+    name: "nft",
     outputs: [
       {
-        internalType: 'uint8',
-        name: '',
-        type: 'uint8'
+        internalType: "contract IBEERC721",
+        name: "",
+        type: "address"
       }
     ],
-    stateMutability: 'view',
-    type: 'function'
-  },
-  {
-    inputs: [],
-    name: 'totalSupply',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256'
-      }
-    ],
-    stateMutability: 'view',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'account',
-        type: 'address'
+        internalType: "uint256",
+        name: "",
+        type: "uint256"
       }
     ],
-    name: 'balanceOf',
+    name: "nftMinted",
     outputs: [
       {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256'
+        internalType: "bool",
+        name: "",
+        type: "bool"
       }
     ],
-    stateMutability: 'view',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'recipient',
-        type: 'address'
+        internalType: "address",
+        name: "",
+        type: "address"
       },
       {
-        internalType: 'uint256',
-        name: 'amount',
-        type: 'uint256'
+        internalType: "uint256",
+        name: "",
+        type: "uint256"
       }
     ],
-    name: 'transfer',
+    name: "ownerToNFTs",
     outputs: [
       {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
+        internalType: "uint256",
+        name: "",
+        type: "uint256"
       }
     ],
-    stateMutability: 'nonpayable',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'owner',
-        type: 'address'
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
       },
       {
-        internalType: 'address',
-        name: 'spender',
-        type: 'address'
+        internalType: "address",
+        name: "account",
+        type: "address"
       }
     ],
-    name: 'allowance',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256'
-      }
-    ],
-    stateMutability: 'view',
-    type: 'function'
+    name: "renounceRole",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'spender',
-        type: 'address'
+        internalType: "bytes32",
+        name: "role",
+        type: "bytes32"
       },
       {
-        internalType: 'uint256',
-        name: 'amount',
-        type: 'uint256'
+        internalType: "address",
+        name: "account",
+        type: "address"
       }
     ],
-    name: 'approve',
-    outputs: [
-      {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
-      }
-    ],
-    stateMutability: 'nonpayable',
-    type: 'function'
+    name: "revokeRole",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'sender',
-        type: 'address'
-      },
-      {
-        internalType: 'address',
-        name: 'recipient',
-        type: 'address'
-      },
-      {
-        internalType: 'uint256',
-        name: 'amount',
-        type: 'uint256'
+        internalType: "bytes4",
+        name: "interfaceId",
+        type: "bytes4"
       }
     ],
-    name: 'transferFrom',
+    name: "supportsInterface",
     outputs: [
       {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
+        internalType: "bool",
+        name: "",
+        type: "bool"
       }
     ],
-    stateMutability: 'nonpayable',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'spender',
-        type: 'address'
+        internalType: "address",
+        name: "_user",
+        type: "address"
       },
       {
-        internalType: 'uint256',
-        name: 'addedValue',
-        type: 'uint256'
+        internalType: "uint256",
+        name: "count",
+        type: "uint256"
       }
     ],
-    name: 'increaseAllowance',
-    outputs: [
-      {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
-      }
-    ],
-    stateMutability: 'nonpayable',
-    type: 'function'
+    name: "mintToUser",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
   },
   {
     inputs: [
       {
-        internalType: 'address',
-        name: 'spender',
-        type: 'address'
+        internalType: "address",
+        name: "_user",
+        type: "address"
       },
       {
-        internalType: 'uint256',
-        name: 'subtractedValue',
-        type: 'uint256'
+        internalType: "uint256[]",
+        name: "_nftIds",
+        type: "uint256[]"
       }
     ],
-    name: 'decreaseAllowance',
+    name: "addNFTData",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function"
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_user",
+        type: "address"
+      }
+    ],
+    name: "getMintableCount",
     outputs: [
       {
-        internalType: 'bool',
-        name: '',
-        type: 'bool'
+        internalType: "uint256",
+        name: "",
+        type: "uint256"
       }
     ],
-    stateMutability: 'nonpayable',
-    type: 'function'
+    stateMutability: "view",
+    type: "function",
+    constant: true
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_user",
+        type: "address"
+      }
+    ],
+    name: "getMintableNftIds",
+    outputs: [
+      {
+        internalType: "uint256[]",
+        name: "",
+        type: "uint256[]"
+      }
+    ],
+    stateMutability: "view",
+    type: "function",
+    constant: true
   }
 ]
 

src/views/ClaimBadgeView.vue

@@ -8,13 +8,19 @@
       <div class="text-right">
         <img src="../assets/img/badge/right-text.png" alt="" />
       </div>
+      <div
+        class="star-bg"
+        :style="{ transform: `translateX(${bgTranslateX}px)` }"
+      >
+        <img src="../assets/img/badge/star-bg.png" alt="" />
+      </div>
       <div class="bg"><img src="../assets/img/badge/bg.png" alt="" /></div>
       <div class="content mx-auto pb-60">
         <div class="flex pt-20">
           <div class="card shadow-md rounded cards-container">
             <div></div>
             <div
-              class="card-title text-xl font-bold mb-10 text-yellow-color cards-container"
+              class="card-title text-xl mb-8 text-yellow-color font-poppins-semiBoldItalic cards-container"
             >
               <div>GENESIS</div>
             </div>
@@ -35,25 +41,25 @@
             </div>
           </div>
           <div class="genesicard">
-            <div class="genesis-title pt-24">
+            <div class="genesis-title pt-24 font-firaSans-blackItalic">
               Genesis NFT <br />
               holder Only
             </div>
             <div class="title-boder">
               <img src="../assets/img/badge/title-boder.png" alt="" />
             </div>
-            <div class="text-content">
+            <div class="text-content font-poppins-regular">
               <p>This is an exclusive badge for CEBG Genesis NFT holders.</p>
               <p>
                 It will serve as an identity credential for Genesis NFT holders
                 to participate in all future activities.
               </p>
             </div>
-            <div class="december flex align-center">
+            <div class="december flex items-center">
               <div class="date-icon">
                 <img src="../assets/img/badge/date-icon.png" alt="" />
               </div>
-              <div class="ml-3 flex align-center">December 1 (st), 2022</div>
+              <div class="ml-3">December 1 (st), 2022</div>
             </div>
             <div class="december-number">2000 / 4000</div>
             <div
@@ -62,10 +68,13 @@
             >
               <div class="claim-item">Claim your Airdorp</div>
             </div>
+            <div class="dis-msg">
+              <div class="msg">You’re not eligible for this stage.<img  class="rabbit" src="../assets/img/badge/rabbit.png" alt=""></div> 
+            </div>
           </div>
           <div class="card shadow-md rounded cards-container">
             <div
-              class="text-xl font-bold card-title-right mb-4 p-3 text-black-color-300 cards-container"
+              class="text-xl font-bold font-poppins-semiBoldItalic card-title-right mb-4 p-3 text-black-color-300 cards-container"
             >
               EXPLORER
             </div>
@@ -112,7 +121,7 @@ import {
   onMounted,
   computed,
   watchEffect,
-  onBeforeUnmount,
+  onUnmounted,
 } from "vue";
 
 import { useAppStore } from "@/store/app";
@@ -159,12 +168,25 @@ const {
 const handClaimBadge = () => {
   isbtn.value = true;
 };
+
+const bgTranslateX = ref(0);
+const scrollPos = ref(0);
+
+const handleScrolls = () => {
+  const newScrollPos = window.scrollY;
+  const scrollDelta = newScrollPos - scrollPos.value;
+  bgTranslateX.value -= scrollDelta / 3; // 背景图片水平方向移动的速度
+  scrollPos.value = newScrollPos;
+};
+
 onMounted(() => {
   window.addEventListener("scroll", handleScroll);
+  window.addEventListener("scroll", handleScrolls);
 });
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   window.removeEventListener("scroll", handleScroll);
+  window.removeEventListener("scroll", handleScrolls);
 });
 </script>
 
@@ -175,18 +197,36 @@ onBeforeUnmount(() => {
 .content {
   width: 1200px;
 }
+.my-container {
+  background: #0c0c0c;
+  position: relative;
+  z-index: 1;
+}
 .content-top {
   position: relative;
+  .star-bg {
+    position: absolute;
+    left: 30px;
+    top:30px;
+    bottom: 0;
+    right: 20px;
+    z-index: -1;
+    img {
+      // width: 100%;
+      // // object-fit: cover;
+      // height: 100%;
+    }
+  }
   .bg {
     position: absolute;
     left: 0;
-    top: -10px;
+    top: 0;
     bottom: 0;
     right: 0;
-    z-index: -1;
+    z-index: -2;
     img {
       width: 100%;
-      object-fit: cover;
+      // object-fit: cover;
       height: 100%;
     }
   }
@@ -199,16 +239,22 @@ onBeforeUnmount(() => {
   .text-right {
     position: absolute;
     right: 85px;
-    top: 30px;
+    top: -130px;
+    z-index: -1;
     animation: slide-down 1s ease-out;
   }
 }
 .item-left {
   font-size: 20px;
-  font-family: "Poppins";
+  // font-family: "Poppins";
   font-weight: 500;
   color: #ffb900;
 }
+.timeline{
+  width:1188px;
+  margin-left: 5px;
+  height: 38px; 
+}
 .card {
   transition: transform 0.1s ease;
   transform-style: preserve-3d;
@@ -217,7 +263,7 @@ onBeforeUnmount(() => {
 }
 .card-title {
   font-size: 80px;
-  font-family: "Poppins";
+  // font-family: "Poppins";
   font-weight: normal;
   color: #ffb900;
   line-height: 60px;
@@ -227,7 +273,7 @@ onBeforeUnmount(() => {
 }
 .card-title-right {
   font-size: 40px;
-  font-family: "Fira Sans";
+  // font-family: "Fira Sans";
   font-weight: normal;
 }
 .btn {
@@ -254,22 +300,23 @@ p {
   width: 145px;
   height: 28px;
   cursor: pointer;
-  margin-left: 150px;
+  margin-left: 153px;
   // border: 1px solid #ffb900;
-  background: url("../assets/img/badge/more.png");
+  background: url("../assets/img/badge/more-active.png");
   color: #ffba00;
   text-align: center;
   line-height: 28px;
   &:hover {
-    background: url("../assets/img/badge/more-active.png");
+    background: url("../assets/img/badge/more.png");
   }
 }
 .btn-more-right {
   width: 145px;
+  cursor: pointer;
   height: 28px;
   position: relative;
   display: inline-block;
-  margin-right: 50px;
+  margin-right: 48px;
   background: url("../assets/img/badge/more.png");
   font-size: 14px;
   font-family: Arial;
@@ -277,9 +324,6 @@ p {
   color: #a7a7a7;
   text-align: center;
   line-height: 28px;
-  &:hover {
-    background: url("../assets/img/badge/more-active.png");
-  }
 }
 .btn-more-right:hover .dropdown-menu {
   display: block;
@@ -291,7 +335,7 @@ p {
   top: 100%;
   left: 0;
   // background-color: white;
-  background: url('../assets/img/badge/dropdown-menu-bg.png') no-repeat;
+  background: url("../assets/img/badge/dropdown-menu-bg.png") no-repeat;
   min-width: 145px;
   // box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   list-style-type: none;
@@ -398,15 +442,28 @@ p {
 }
 .genesis-title {
   font-size: 40px;
-  font-family: "Fira Sans";
+  letter-spacing: 3px;
+  // font-family: "Fira Sans";
   font-weight: normal;
   text-transform: uppercase;
   color: #fffefe;
 }
 .genesicard {
+  position: relative; /* 添加相对定位以便伪元素定位 */
   width: 302px;
   margin-left: 39px;
-  margin-right: 194px;
+  margin-right: 167px;
+}
+
+.genesicard::before {
+  content: ""; /* 设置为空内容 */
+  position: absolute; /* 使用绝对定位 */
+  right: -80px; /* 距离元素右侧 60px */
+  top: 95px; /* 顶部与元素对齐 */
+  bottom: 0; /* 底部与元素对齐 */
+  width: 1px; /* 设置边框宽度 */
+  height: 460px;
+  background-color: #343434; /* 设置边框颜色 */
 }
 .title-boder {
   margin-top: 25px;
@@ -527,6 +584,29 @@ p {
   justify-content: center;
   background: #ffea00;
 }
+.dis-msg {
+  width: 300px;
+  height: 50px;
+  margin-top: 41px;
+  line-height: 50px;
+  
+  font-size: 12px;
+  font-family: "Poppins";
+  font-weight: 400;
+  color: #b5b5b5;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid #353535;
+  border-radius: 12px 0px 12px 0px;
+  .msg{
+    margin-left: 21px;
+    position: relative;
+    .rabbit{
+      position: absolute;
+      right: 0;
+      top: -24px;
+    }
+  }
+}
 .more-btns {
   justify-content: space-between;
 }

src/views/MarketplaceView.vue

@@ -1,13 +1,55 @@
 <template>
-    <div>
-
-    </div>
+  <div>
+    <h1>可铸造的 NFT 数量：{{ mintableCount }}</h1>
+    <button @click="mintNFTs">领取勋章</button>
+  </div>
 </template>
 
-<script setup>
+<script>
+import { ref } from 'vue';
+import { ethers } from 'ethers';
+import NftDistributorABI from './NftDistributorABI.json'; // 从编译后的合约中导入 ABI
 
+export default {
+  setup() {
+    const mintableCount = ref(0);
+    const nftDistributorAddress = '0x123...'; // 替换为实际的合约地址
+    const provider = new ethers.providers.Web3Provider(window.ethereum); // 使用 MetaMask 提供的以太坊 provider
+    const nftDistributorContract = new ethers.Contract(nftDistributorAddress, NftDistributorABI, provider);
+
+    const loadMintableCount = async () => {
+      try {
+        const userAddress = await provider.getSigner().getAddress(); // 获取当前用户的地址
+        const count = await nftDistributorContract.getMintableCount(userAddress);
+        mintableCount.value = count.toNumber();
+      } catch (error) {
+        console.error('Error fetching mintable count:', error);
+      }
+    };
+
+    const mintNFTs = async () => {
+      try {
+        const signer = provider.getSigner(); // 获取当前用户的签名器
+        const userAddress = await signer.getAddress(); // 获取当前用户的地址
+        const contractWithSigner = nftDistributorContract.connect(signer);
+
+        const tx = await contractWithSigner.mintToUser(userAddress, mintableCount.value);
+        await tx.wait(); // 等待交易被确认
+
+        // 重新加载可铸造的 NFT 数量，因为用户已经铸造了 NFT
+        await loadMintableCount();
+      } catch (error) {
+        console.error('Error minting NFTs:', error);
+      }
+    };
+
+    // 页面载入时获取可铸造的 NFT 数量
+    loadMintableCount();
+
+    return {
+      mintableCount,
+      mintNFTs,
+    };
+  },
+};
 </script>
-
-<style lang="scss" scoped>
-
-</style>

tailwind.config.js

@@ -12,6 +12,14 @@ export default {
         "black-color-300": "#A7A7A7",
         "text-yellow-color": "#FFB900",
       },
+      fontFamily: {
+        'poppins-bold': ['Poppins-Bold', 'sans-serif'],
+        'poppins-medium': ['Poppins-Medium', 'sans-serif'],
+        'poppins-regular': ['Poppins-Regular', 'sans-serif'],
+        'firaSans-blackItalic': ['FiraSans-BlackItalic', 'sans-serif'],
+        'firaSans-condensed': ['FiraSans-Condensed', 'sans-serif'],
+        'poppins-semiBoldItalic': ['Poppins-SemiBoldItalic', 'sans-serif'],
+      },
       borderRadius: {
         custom: "1rem",
       },