ffi

src/components/global/ImageTextModal.vue

@@ -0,0 +1,30 @@
+<template>
+    <a-modal :visible="visible" :footer="null" width="800px" title="示例弹框" @cancel="onCancel">
+      <a-row align="middle" class="h-full">
+        <a-col :span="12" class="text-center">
+          <img :src="imageSrc" alt="示例图片" class="max-w-full h-auto" />
+        </a-col>
+        <a-col :span="12" class="text-center">
+          <p>{{ textContent }}</p>
+        </a-col>
+      </a-row>
+    </a-modal>
+  </template>
+  
+  <script setup>
+  import {  defineEmits } from 'vue'
+  
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+    }
+  })
+  
+  const emit = defineEmits(['update:visible'])
+  
+  const onCancel = () => {
+    emit('update:visible', false)
+  }
+  </script>
+  

src/views/ClaimBadgeView.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="my-container">
     <div class="nav">
-      <div class="h-16 bg-black-color flex items-center justify-between">
+      <div class="h-[5.625rem] flex items-center justify-between">
-        <div class="w-14 h-14 ml-5 flex items-center justify-center">
+        <div class="h-38 w-38 ml-5 flex items-center justify-center">
           <img
             src="@/assets/img/home/header-logo.png"
             alt="Logo"
-            class="w-14 h-14"
+            class="h-38 w-38"
           />
         </div>
         <div
           v-if="!chain.logined"
-          class="w-50 mr-6 flex items-center justify-center bg-button-default bg-yellow-300"
+          class="w-[18.75rem] h-[3.75rem] mr-6 flex items-center justify-center bg-button-default bg-yellow-300"
         >
           <button
-            class="pl-11 pr-11 pb-3 pt-3 text-lg italic text-my-text-color decoration-1"
+            class="text-lg italic text-my-text-color decoration-1"
             @click="login"
           >
             WALLET CONNECT
@@ -22,10 +22,10 @@
         </div>
         <div
           v-else
-          class="w-50 mr-6 flex items-center justify-center bg-yellow-300"
+          class="w-[18.75rem] h-[3.75rem] mr-6 flex items-center justify-center bg-button-default bg-yellow-300"
         >
           <button
-            class="pl-11 pr-11 pb-3 pt-3 text-lg italic text-my-text-color decoration-1"
+            class="text-lg italic text-my-text-color decoration-1"
             @click="logout"
           >
             loginout
@@ -34,6 +34,12 @@
       </div>
     </div>
     <div class="content-top">
+      <div class="text-left">
+        <img src="../assets/img/badge/left-text.png" alt="" />
+      </div>
+      <div class="text-right">
+        <img src="../assets/img/badge/right-text.png" alt="" />
+      </div>
       <div class="bg"><img src="../assets/img/badge/bg.png" alt="" /></div>
       <div class="content mx-auto container pb-60">
         <div class="flex justify-between pt-20 mx-auto w-3/6">
@@ -65,6 +71,7 @@
               <div><div class="btn mx-auto mt-8">Claim</div></div>
             </div>
           </div>
+          <div></div>
           <div
             class="card shadow-md rounded p-5 cards-container"
             :style="{
@@ -102,7 +109,7 @@
           </div>
           <div class="flex justify-center pt-6">
             <div class="flex w-2/4 justify-between">
-              <div class="btn-more ml-20">more</div>
+              <div class="btn-more ml-20" @click="handlHero">more</div>
               <div class="btn-more mr-20">more</div>
             </div>
           </div>
@@ -110,6 +117,7 @@
       </div>
     </div>
     <ChainModel></ChainModel>
+    <image-text-modal v-model:visible="visible"></image-text-modal>
   </div>
 </template>
 
@@ -129,10 +137,12 @@ import { useMouse, useRafFn } from "@vueuse/core";
 import { useParallaxScroll } from "../hooks/useParallaxScroll";
 import { useMouseRotation } from "../hooks/useMouseRotation";
 import ChainModel from "../components/home/ChainModel.vue";
+import ImageTextModal from "../components/global/ImageTextModal.vue";
+
 const chain = useChainStore();
 const scrollOffset = ref("0%");
 const parallaxFactor = 0.135; // 视差滚动系数，可以根据需要调整
-
+const visible = ref(false);
 async function login(event) {
   if (!chain.logined) {
     await chain.chainManager.login();
@@ -145,7 +155,9 @@ const logout = async () => {
 
   chain.logined = chain.chainManager.isLogined;
 };
-
+const handlHero = () => {
+  visible.value = true;
+};
 const handleScroll = () => {
   const currentScrollTop =
     window.pageYOffset || document.documentElement.scrollTop;
@@ -186,14 +198,15 @@ onBeforeUnmount(() => {
   transition: transform 0.5s ease-out;
 }
 .nav {
-  background: url(../assets/img/badge/);
+  background: url("../assets/img/badge/nav-bg.png") no-repeat;
+  background-size: 100% 100%;
 }
 .content-top {
   position: relative;
   .bg {
     position: absolute;
     left: 0;
-    top: 0;
+    top: -10px;
     bottom: 0;
     right: 0;
     z-index: -1;
@@ -203,6 +216,16 @@ onBeforeUnmount(() => {
       height: 100%;
     }
   }
+  .text-left {
+    position: absolute;
+    left: 85px;
+    bottom: 30px;
+  }
+  .text-right {
+    position: absolute;
+    right: 85px;
+    top: 30px;
+  }
 }
 .item-left {
   font-size: 20px;
@@ -341,6 +364,10 @@ onBeforeUnmount(() => {
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: 20px;
+  font-size: 22px;
+  font-family: "Poppins";
+  font-weight: bold;
+  color: #34290a;
 }
 
 .bg-button-default:hover {
@@ -349,5 +376,9 @@ onBeforeUnmount(() => {
   background-repeat: no-repeat;
   border-radius: 20px;
   box-shadow: 0 0 2px #ffff00, 0 0 4px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
+  font-size: 22px;
+  font-family: "Poppins";
+  font-weight: bold;
+  color: #34290a;
 }
 </style>