登录按钮改成水墨风格

Build_God_Game/src/views/LoginView.vue

@@ -3,9 +3,7 @@ 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 BlurText from '@/components/BlurText/BlurText.vue'
-import StarBorder from '@/components/StarBorder/StarBorder.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -77,12 +75,10 @@ const handleLogin = async () => {
             {{ errorMsg }}
           </div>
 
-          <StarBorder as="div" color="greenyellow" speed="3s" :thickness="3" @click="handleLogin">
+          <div class="btn-ink" @click="handleLogin">
-            <div class="btn-login">
             <span v-if="isLoading" class="loading-text">登录中...</span>
-              <span v-else class="button-text">登 录</span>
+            <span v-else class="button-text">开始游戏</span>
           </div>
-          </StarBorder>
 
         </form>
 
@@ -125,9 +121,9 @@ const handleLogin = async () => {
 }
 
 .login-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: 36px;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
@@ -221,31 +217,47 @@ const handleLogin = async () => {
   border-radius: 8px;
 }
 
-.login-button {
+.btn-ink {
-  margin-top: 8px;
+  position: relative;
   display: flex;
-  align-items: center;
   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-login {
+.btn-ink::before {
-  display: flex;
+  content: '';
-  justify-content: center;
+  position: absolute;
-  align-items: center;
+  inset: 0;
-  border: 1px dashed greenyellow;
+  background: url(@/assets/brushbutton.png) no-repeat center;
-  border-radius: 15px;
+  background-size: contain;
-  background: rgba(255, 255, 255, 0.03);
+  transition: transform 0.3s ease;
-  padding: 12px 16px;
+  z-index: -1;
-  cursor: pointer;
+}
-  height: 100%;
+
+.btn-ink:hover::before {
+  transform: scale(1.05);
+}
+
+.btn-ink:active::before {
+  transform: scale(0.95);
 }
 
 .button-text,
 .loading-text {
-  color: #ffffff;
+  position: relative;
-  font-weight: bold;
+  z-index: 1;
-  letter-spacing: 0.2em;
 }
 
 .login-footer {