restyle: login page

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

@@ -1,27 +1,24 @@
 <template>
   <v-app class="bg-gradient">
-    <v-container class="fill-height px-4 d-flex justify-center align-center">
+    <v-container>
-      <div class="w-100 max-width-mobile text-center">
+      <v-row justify="center" no-gutters>
+        <v-col class="text-center" cols="12" sm="6">
           <!-- Logo 與品牌名稱 -->
-        <div class="mb-8 animate-fade-in">
+          <v-card class="bg-transparent" variant="flat">
-          <v-avatar class="elevation-4 mb-3 border-accent" color="primary" size="80">
+            <v-avatar class="" color="primary" size="80">
               <v-icon color="accent" icon="mdi-heart-pulse" size="48" />
             </v-avatar>
 
-          <!-- <h1 class="text-h4 font-weight-black text-primary mb-1">運動玩轉健康力</h1>
+            <v-card-title>運動玩轉健康力</v-card-title>
-          <p class="text-subtitle-1 text-grey-darken-1 font-weight-medium">Taipei Masters Hub</p> -->
+            <v-card-subtitle>Taipei Masters Hub</v-card-subtitle>
-        </div>
+          </v-card>
 
           <!-- 登入卡片 -->
-        <v-card class="elevation-12 rounded-xl pa-6 border-accent-light" color="surface">
+          <v-card class="rounded-lg mt-4" color="surface">
-          <v-card-text>
+            <v-card-title> 市民登入 </v-card-title>
-            <div class="text-left mb-6">
+            <v-card-text> 請輸入您的手機號碼或信箱 </v-card-text>
-              <h2 class="text-h5 font-weight-bold text-primary mb-1">市民登入</h2>
-              <p class="text-body-2 text-grey">請輸入您的手機號碼或信箱以進入健康護照</p>
-            </div>
-
             <!-- 表單 -->
-            <v-form @submit.prevent="handleLogin">
+            <v-form class="pa-4" @submit.prevent="handleLogin">
               <v-text-field
                 v-model="account"
                 class="mb-4"
@@ -40,7 +37,7 @@
                 class="mb-6"
                 color="primary"
                 hide-details="auto"
-                label="密碼 (預設可留空)"
+                label="密碼"
                 placeholder="請輸入密碼"
                 prepend-inner-icon="mdi-lock-outline"
                 rounded="lg"
@@ -60,14 +57,14 @@
               </v-btn>
             </v-form>
 
-            <div class="d-flex align-center justify-center my-4">
+            <!-- <div class="d-flex align-center justify-center my-4">
               <v-divider class="mr-3" />
               <span class="text-caption text-grey font-weight-bold">或使用以下方式快捷登入</span>
               <v-divider class="ml-3" />
-            </div>
+            </div> -->
 
             <!-- LINE 一鍵登入 (高齡場景極度實用) -->
-            <v-btn
+            <!-- <v-btn
               block
               class="rounded-lg font-weight-bold text-white mb-4 text-button d-flex align-center justify-center"
               color="#06C755"
@@ -79,23 +76,24 @@
             >
               <v-icon class="mr-2" icon="mdi-message-text" />
               使用 LINE 帳號一鍵登入
-            </v-btn>
+            </v-btn> -->
-          </v-card-text>
 
             <v-card-actions class="justify-center">
-            <span class="text-caption text-grey">
+              <span class="text-body-small text-grey">
                 登入即表示您同意本平台的
-              <a class="text-accent text-decoration-none font-weight-bold" href="#">個資授權條款</a>
+                <a class="text-accent text-decoration-none font-weight-bold" href="#">
+                  個資授權條款
+                </a>
               </span>
             </v-card-actions>
           </v-card>
 
-        <!-- 底部輔助說明 -->
+          <!-- 版權 -->
           <div class="mt-8 text-caption text-grey-darken-1">
             <p>© 2026 SKYTEK</p>
-          <p>技術支援: 健康中心</p>
-        </div>
           </div>
+        </v-col>
+      </v-row>
     </v-container>
   </v-app>
 </template>
@@ -137,32 +135,4 @@ function handleLineLogin() {
 .bg-gradient {
   background: linear-gradient(135deg, #f0f9f6 0%, #dcefea 100%) !important;
 }
-
-.border-accent {
-  border: 3px solid #47c2a6 !important;
-}
-
-.border-accent-light {
-  border: 1px solid rgba(71, 194, 166, 0.2) !important;
-}
-
-.max-width-mobile {
-  max-width: 420px;
-}
-
-/* 微小動畫 */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.8s ease-out;
-}
 </style>