From 6f80564bc54d66100e115fcb5a7a84dc8ed89452 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Mon, 22 Jun 2026 11:49:29 +0800
Subject: [PATCH] restyle: login page

---
 app/citizen-frontend/src/pages/login.vue | 102 ++++++++---------------
 1 file changed, 36 insertions(+), 66 deletions(-)

diff --git a/app/citizen-frontend/src/pages/login.vue b/app/citizen-frontend/src/pages/login.vue
index 9a2b9ae..e5befc2 100644
--- a/app/citizen-frontend/src/pages/login.vue
+++ b/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">
-      <div class="w-100 max-width-mobile text-center">
-        <!-- Logo 與品牌名稱 -->
-        <div class="mb-8 animate-fade-in">
-          <v-avatar class="elevation-4 mb-3 border-accent" color="primary" size="80">
-            <v-icon color="accent" icon="mdi-heart-pulse" size="48" />
-          </v-avatar>
+    <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>
 
-          <!-- <h1 class="text-h4 font-weight-black text-primary mb-1">運動玩轉健康力</h1>
-          <p class="text-subtitle-1 text-grey-darken-1 font-weight-medium">Taipei Masters Hub</p> -->
-        </div>
-
-        <!-- 登入卡片 -->
-        <v-card class="elevation-12 rounded-xl pa-6 border-accent-light" color="surface">
-          <v-card-text>
-            <div class="text-left mb-6">
-              <h2 class="text-h5 font-weight-bold text-primary mb-1">市民登入</h2>
-              <p class="text-body-2 text-grey">請輸入您的手機號碼或信箱以進入健康護照</p>
-            </div>
+            <v-card-title>運動玩轉健康力</v-card-title>
+            <v-card-subtitle>Taipei Masters Hub</v-card-subtitle>
+          </v-card>
 
+          <!-- 登入卡片 -->
+          <v-card class="rounded-lg mt-4" color="surface">
+            <v-card-title> 市民登入 </v-card-title>
+            <v-card-text> 請輸入您的手機號碼或信箱 </v-card-text>
             <!-- 表單 -->
-            <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-card-text>
+            </v-btn> -->
 
-          <v-card-actions class="justify-center">
-            <span class="text-caption text-grey">
-              登入即表示您同意本平台的
-              <a class="text-accent text-decoration-none font-weight-bold" href="#">個資授權條款</a>
-            </span>
-          </v-card-actions>
-        </v-card>
+            <v-card-actions class="justify-center">
+              <span class="text-body-small text-grey">
+                登入即表示您同意本平台的
+                <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>
+          <!-- 版權 -->
+          <div class="mt-8 text-caption text-grey-darken-1">
+            <p>© 2026 SKYTEK</p>
+          </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>