skytek/sports-empower-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyle: login page

Browse Source
This commit is contained in:
skytek_xinliang
2026-06-22 11:49:29 +08:00
parent c2d4c06e7e
commit 6f80564bc5
1 changed files with 36 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/pages/login.vue
+36 -66
View File
@@ -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>