ffi

src/App.vue

@@ -17,6 +17,7 @@ body,
 html {
   padding: 0;
   margin: 0;
+  line-height: 1.0;
   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/views/ClaimBadgeView.vue

@@ -35,7 +35,7 @@
             </div>
           </div>
           <div class="genesicard">
-            <div class="genesis-title pt-16">
+            <div class="genesis-title pt-24">
               Genesis NFT <br />
               holder Only
             </div>
@@ -56,24 +56,29 @@
               <div class="ml-3 flex align-center">December 1 (st), 2022</div>
             </div>
             <div class="december-number">2000 / 4000</div>
-            <div class="claim">
+            <div
+              :class="isbtn === true ? 'disabled-claim' : 'claim'"
+              @click="handClaimBadge"
+            >
               <div class="claim-item">Claim your Airdorp</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"
+            >
+              EXPLORER
+            </div>
+            <div class="card-body cards-container flex pt-24" 
             :style="{
               transform: `translate3d(0, ${scrollOffset}, 0) ${cardStyle2.transform}`,
             }"
             @mouseenter="startTracking2"
             @mouseleave="stopTracking2"
-          >
-            <div
-              class="text-xl font-bold card-title-right mb-4 text-black-color-300 cards-container"
             >
-              EXPLORER
-            </div>
-            <div class="card-body cards-container flex pt-12">
               <img src="../assets/img/badge/explorer BG.png" alt="" />
             </div>
           </div>
@@ -117,6 +122,7 @@ import ImageTextModal from "../components/global/ImageTextModal.vue";
 const scrollOffset = ref("0%");
 const parallaxFactor = 0.135; // 视差滚动系数，可以根据需要调整
 const visible = ref(false);
+const isbtn = ref(false);
 
 const handlHero = () => {
   visible.value = true;
@@ -146,6 +152,9 @@ const {
   stopTracking: stopTracking2,
 } = useMouseRotation();
 
+const handClaimBadge = () => {
+  isbtn.value = true;
+};
 onMounted(() => {
   window.addEventListener("scroll", handleScroll);
 });
@@ -234,7 +243,7 @@ onBeforeUnmount(() => {
   font-family: "Poppins";
   font-weight: 400;
 }
-p{
+p {
   margin: 0;
 }
 .btn-more {
@@ -347,8 +356,8 @@ p{
   margin-right: 194px;
 }
 .title-boder {
-  margin-top: 20px;
+  margin-top: 25px;
-  margin-bottom: 21px;
+  margin-bottom: 25px;
 }
 .text-content {
   font-size: 14px;
@@ -370,9 +379,49 @@ p{
   font-family: Arial;
   font-weight: 400;
   color: #ffffff;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   // line-height: 60px;
 }
+.disabled-claim {
+  width: 300px;
+  height: 64px;
+  font-size: 18px;
+  font-family: Arial;
+  font-weight: 400;
+  color: #8b8b8b;
+  display: flex;
+  cursor: pointer;
+  border-radius: 12px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #a6a6a6;
+  user-select: none;
+  cursor: not-allowed;
+  // background: #FFEA00;
+  .claim-item {
+    position: relative;
+    padding-right: 20px;
+  }
+  .claim-item::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 100%; /* 将图标放在文字的右侧 */
+    transform: translateY(-50%); /* 垂直居中对齐 */
+    width: 10px; /* 设置图标宽度 */
+    height: 10px; /* 设置图标高度 */
+    background-image: url("../assets/img/badge/grey.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-left: 0px; /* 与文字之间的间距 */
+    transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
+  }
+}
+.disabled-claim:hover .claim-item::after {
+  background-image: url("../assets/img/badge/grey.png");
+  margin-left: 10px; /* 在 hover 时向前移动 4px */
+}
 .claim {
   width: 300px;
   height: 64px;
@@ -380,15 +429,17 @@ p{
   font-family: Arial;
   font-weight: 400;
   color: #2f2b0b;
+  user-select: none;
   display: flex;
   cursor: pointer;
   border-radius: 12px;
   align-items: center;
   justify-content: center;
-  background: #FFEA00;
+  background: #ffea00;
   // background-size: contain;
   .claim-item {
     position: relative;
+    padding-right: 20px;
   }
   .claim-item::after {
     content: "";
@@ -402,15 +453,13 @@ p{
     background-image: url("../assets/img/badge/triangle-black.png");
     background-size: contain;
     background-repeat: no-repeat;
-    margin-left: 10px; /* 与文字之间的间距 */
+    margin-left: 0px; /* 与文字之间的间距 */
     transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
-
   }
-
+}
-}  
 .claim:hover .claim-item::after {
   background-image: url("../assets/img/badge/triangle-black.png");
-   margin-left: 16px; /* 在 hover 时向前移动 4px */
+  margin-left: 10px; /* 在 hover 时向前移动 4px */
 }
 .claim:hover {
   width: 300px;
@@ -424,7 +473,6 @@ p{
   align-items: center;
   justify-content: center;
   background: #ffba00;
-  
 }
 @keyframes slide-up {
   0% {