把水墨背景的图片做成一个组件

Build_God_Game/src/components/InkButton/InkButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <div class="ink-button" @click="$emit('click', $event)">
+    <span class="ink-button-text">{{ text }}</span>
+  </div>
+</template>
+
+<style scoped>
+.ink-button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 220px;
+  height: 80px;
+  margin: 0 auto;
+  font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 4px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  z-index: 1;
+}
+
+.ink-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: url(@/assets/brushbutton.png) no-repeat center;
+  background-size: contain;
+  transition: transform 0.3s ease;
+  z-index: -1;
+}
+
+.ink-button:hover::before {
+  transform: scale(1.05);
+}
+
+.ink-button:active::before {
+  transform: scale(0.95);
+}
+
+.ink-button-text {
+  position: relative;
+  z-index: 1;
+}
+</style>

Build_God_Game/src/views/LoginView.vue

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import Particles from '@/components/Particles/Particles.vue'
 import BlurText from '@/components/BlurText/BlurText.vue'
+import InkButton from '@/components/InkButton/InkButton.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -75,10 +76,7 @@ const handleLogin = async () => {
             {{ errorMsg }}
           </div>
 
-          <div class="btn-ink" @click="handleLogin">
+          <InkButton :text="isLoading ? '登录中...' : '登 录'" @click="handleLogin" />
-            <span v-if="isLoading" class="loading-text">登录中...</span>
-            <span v-else class="button-text">开始游戏</span>
-          </div>
 
         </form>
 
@@ -217,49 +215,6 @@ const handleLogin = async () => {
   border-radius: 8px;
 }
 
-.btn-ink {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 220px;
-  height: 80px;
-  margin: 0 auto;
-  font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
-  font-size: 18px;
-  font-weight: bold;
-  color: #ffffff;
-  letter-spacing: 4px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  z-index: 1;
-}
-
-.btn-ink::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: url(@/assets/brushbutton.png) no-repeat center;
-  background-size: contain;
-  transition: transform 0.3s ease;
-  z-index: -1;
-}
-
-.btn-ink:hover::before {
-  transform: scale(1.05);
-}
-
-.btn-ink:active::before {
-  transform: scale(0.95);
-}
-
-.button-text,
-.loading-text {
-  position: relative;
-  z-index: 1;
-}
-
 .login-footer {
   margin-top: 28px;
   text-align: center;

Build_God_Game/src/views/RegisterView.vue

@@ -3,9 +3,8 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import Particles from '@/components/Particles/Particles.vue'
-import GlareHover from '@/components/GlareHover/GlareHover.vue'
 import Shuffle from '@/components/Shuffle/Shuffle.vue'
-import StarBorder from '@/components/StarBorder/StarBorder.vue'
+import InkButton from '@/components/InkButton/InkButton.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -120,13 +119,7 @@ const handleRegister = async () => {
             {{ errorMsg }}
           </div>
 
-          <StarBorder as="div" color="yellowgreen" speed="3s" :thickness="3" @click="handleRegister">
+          <InkButton :text="isLoading ? '注册中...' : registerSuccess ? '注册成功！' : '立即注册'" @click="handleRegister" />
-            <div class="btn-register">
-              <span v-if="isLoading" class="loading-text">注册中...</span>
-              <span v-else-if="registerSuccess" class="button-text">注册成功！</span>
-              <span v-else class="button-text">立即注册</span>
-            </div>
-          </StarBorder>
 
         </form>
 
@@ -169,9 +162,9 @@ const handleRegister = async () => {
 }
 
 .register-card {
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 20px;
   padding: 32px;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
@@ -255,26 +248,6 @@ const handleRegister = async () => {
   border-radius: 8px;
 }
 
-.btn-register {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px dashed yellowgreen;
-  border-radius: 15px;
-  padding: 12px 16px;
-  cursor: pointer;
-  height: 100%;
-}
-
-.button-text,
-.loading-text {
-  color: #ffffff;
-  font-size: 0.9rem;
-  font-weight: 400;
-  letter-spacing: 0.2em;
-}
-
 .register-footer {
   margin-top: 28px;
   text-align: center;