restyle: layout not login

app/citizen-frontend/src/pages/login.vue

@@ -1,16 +1,16 @@
 <template>
-  <v-app class="bg-gradient">
+  <v-app class="bg-background">
     <v-container>
       <v-row justify="center" no-gutters>
         <v-col class="text-center" cols="12" sm="6">
           <!-- Logo 與品牌名稱 -->
           <v-card class="bg-transparent" variant="flat">
-            <v-avatar class="" color="primary" size="80">
-              <v-icon color="accent" icon="mdi-heart-pulse" size="48" />
+            <v-avatar class="logo-spin-on-load" color="primary" size="80">
+              <v-icon color="red-accent-1" icon="mdi-heart-pulse" size="48" />
             </v-avatar>
 
-            <v-card-title>運動玩轉健康力</v-card-title>
-            <v-card-subtitle>Taipei Masters Hub</v-card-subtitle>
+            <v-card-title class="text-primary font-weight-bold">運動玩轉健康力</v-card-title>
+            <v-card-subtitle class="text-primary">Taipei Masters Hub</v-card-subtitle>
           </v-card>
 
           <!-- 登入卡片 -->
@@ -47,8 +47,8 @@
 
               <v-btn
                 block
-                class="rounded-lg font-weight-bold elevation-2 mb-4 text-button"
-                color="primary"
+                class="glow-sweep-button rounded-lg font-weight-bold elevation-2 mb-4"
+                color="secondary"
                 :loading="loading"
                 size="large"
                 type="submit"
@@ -89,7 +89,7 @@
           </v-card>
 
           <!-- 版權 -->
-          <div class="mt-8 text-caption text-grey-darken-1">
+          <div class="mt-8 text-body-small text-grey-darken-1">
             <p>© 2026 SKYTEK</p>
           </div>
         </v-col>
@@ -111,7 +111,7 @@ const password = ref('')
 const loading = ref(false)
 const lineLoading = ref(false)
 
-function handleLogin() {
+function handleLogin () {
   if (!account.value) return
   loading.value = true
   setTimeout(() => {
@@ -121,7 +121,7 @@ function handleLogin() {
   }, 1000)
 }
 
-function handleLineLogin() {
+function _handleLineLogin () {
   lineLoading.value = true
   setTimeout(() => {
     store.login('0912-345-678') // LINE 模擬登入預設手機
@@ -132,7 +132,53 @@ function handleLineLogin() {
 </script>
 
 <style scoped>
-.bg-gradient {
-  background: linear-gradient(135deg, #f0f9f6 0%, #dcefea 100%) !important;
+.logo-spin-on-load {
+  animation: logo-spin 0.9s ease-out both;
+}
+
+.glow-sweep-button {
+  overflow: hidden;
+  position: relative;
+}
+
+.glow-sweep-button::after {
+  position: absolute;
+  top: -50%;
+  left: -70%;
+  width: 45%;
+  height: 200%;
+  background: linear-gradient(
+    120deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.15) 35%,
+    rgba(255, 255, 255, 0.75) 50%,
+    rgba(255, 255, 255, 0.15) 65%,
+    transparent 100%
+  );
+  content: "";
+  transform: rotate(18deg);
+  animation: glow-sweep 2.4s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes glow-sweep {
+  0% {
+    left: -70%;
+  }
+
+  45%,
+  100% {
+    left: 125%;
+  }
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>