fix: classname
This commit is contained in:
skytek_xinliang
@@ -87,7 +87,7 @@
|
||||
size="18"
|
||||
/>
|
||||
|
||||
<div class="text-body-2 text-grey-darken-3">
|
||||
<div class="text-body-medium text-grey-darken-3">
|
||||
<span class="font-weight-bold">{{ apt.date }}</span>
|
||||
<span class="ml-4 text-grey-darken-1">{{ apt.time }}</span>
|
||||
</div>
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
<!-- <div class="d-flex align-start mb-2">
|
||||
<v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-map-marker" size="18" />
|
||||
<div class="text-body-2 text-grey-darken-3">{{ apt.location }}</div>
|
||||
<div class="text-body-medium text-grey-darken-3">{{ apt.location }}</div>
|
||||
</div> -->
|
||||
|
||||
<div class="d-flex align-start mb-3">
|
||||
@@ -106,7 +106,7 @@
|
||||
size="18"
|
||||
/>
|
||||
|
||||
<div class="text-body-2 text-grey-darken-3">
|
||||
<div class="text-body-medium text-grey-darken-3">
|
||||
剩餘名額：<span
|
||||
class="font-weight-bold"
|
||||
:class="apt.slots < 10 ? 'text-error' : 'text-success'"
|
||||
|
||||
@@ -201,7 +201,7 @@
|
||||
報告計算完成！
|
||||
</h2>
|
||||
|
||||
<p class="text-body-2 text-grey-darken-2 mb-6">
|
||||
<p class="text-body-medium text-grey-darken-2 mb-6">
|
||||
您的健康力五維雷達圖、與同齡區間的參考值以及健康力總分已成功計算更新。
|
||||
</p>
|
||||
|
||||
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<v-divider class="mb-3" />
|
||||
|
||||
<div class="text-body-2 text-grey-darken-3 whitespace-pre-line">
|
||||
<div class="text-body-medium text-grey-darken-3 whitespace-pre-line">
|
||||
{{ station.reference }}
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
@@ -1,54 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import EmailCompletionForm from '@/components/auth/EmailCompletionForm.vue'
|
||||
import Layout from '@/components/layout/DefaultLayout.vue'
|
||||
import { EMAIL_COMPLETION_REQUIRED } from '@/config/features'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { getApiErrorStatus } from '@/utils/api-error'
|
||||
import { shallowRef } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import EmailCompletionForm from "@/components/auth/EmailCompletionForm.vue";
|
||||
import Layout from "@/components/layout/DefaultLayout.vue";
|
||||
import { EMAIL_COMPLETION_REQUIRED } from "@/config/features";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { getApiErrorStatus } from "@/utils/api-error";
|
||||
|
||||
const store = useAppStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = shallowRef(false)
|
||||
const errorMessage = shallowRef('')
|
||||
const store = useAppStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loading = shallowRef(false);
|
||||
const errorMessage = shallowRef("");
|
||||
|
||||
function redirectTarget() {
|
||||
const target = String(route.query.redirect ?? '')
|
||||
if (!target.startsWith('/') || target.startsWith('//') || target.startsWith('/complete-email')) {
|
||||
return '/'
|
||||
const target = String(route.query.redirect ?? "");
|
||||
if (
|
||||
!target.startsWith("/") ||
|
||||
target.startsWith("//") ||
|
||||
target.startsWith("/complete-email")
|
||||
) {
|
||||
return "/";
|
||||
}
|
||||
|
||||
return target
|
||||
return target;
|
||||
}
|
||||
|
||||
async function handleSubmit(email: string) {
|
||||
errorMessage.value = ''
|
||||
loading.value = true
|
||||
errorMessage.value = "";
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
await store.updateEmail(email)
|
||||
await router.replace(redirectTarget())
|
||||
await store.updateEmail(email);
|
||||
await router.replace(redirectTarget());
|
||||
} catch (error) {
|
||||
const status = getApiErrorStatus(error)
|
||||
const status = getApiErrorStatus(error);
|
||||
if (status === 409) {
|
||||
errorMessage.value = '使用者資料已更新，請重新整理後再試。'
|
||||
errorMessage.value = "使用者資料已更新，請重新整理後再試。";
|
||||
} else if (status === 422) {
|
||||
errorMessage.value = '請輸入正確且不超過 50 碼的 E-Mail。'
|
||||
errorMessage.value = "請輸入正確且不超過 50 碼的 E-Mail。";
|
||||
} else if (status !== 401) {
|
||||
errorMessage.value = 'E-Mail 儲存失敗，請稍後再試。'
|
||||
errorMessage.value = "E-Mail 儲存失敗，請稍後再試。";
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function skipForNow() {
|
||||
if (EMAIL_COMPLETION_REQUIRED) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
await router.replace(redirectTarget())
|
||||
await router.replace(redirectTarget());
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -58,9 +62,13 @@ async function skipForNow() {
|
||||
<v-row justify="center" no-gutters>
|
||||
<v-col cols="12" sm="8" md="6">
|
||||
<v-card class="rounded-xl mt-6" color="surface">
|
||||
<v-card-title class="text-primary font-weight-bold"> 註冊 E-Mail </v-card-title>
|
||||
<v-card-title class="text-primary font-weight-bold">
|
||||
註冊 E-Mail
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-body-1 mb-5">填寫 E-Mail，有助於日後接收帳號安全與重要服務通知。</p>
|
||||
<p class="text-body-large mb-5">
|
||||
填寫 E-Mail，有助於日後接收帳號安全與重要服務通知。
|
||||
</p>
|
||||
|
||||
<EmailCompletionForm
|
||||
:error-message="errorMessage"
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import ForgotPasswordForm from '@/components/auth/ForgotPasswordForm.vue'
|
||||
import PasswordRecoveryShell from '@/components/auth/PasswordRecoveryShell.vue'
|
||||
import { useForgotPassword } from '@/composables/useForgotPassword'
|
||||
import ForgotPasswordForm from "@/components/auth/ForgotPasswordForm.vue";
|
||||
import PasswordRecoveryShell from "@/components/auth/PasswordRecoveryShell.vue";
|
||||
import { useForgotPassword } from "@/composables/useForgotPassword";
|
||||
const recoverySteps = [
|
||||
{ title: '輸入已註冊手機門號', icon: 'mdi-phone' },
|
||||
{ title: '收起E-Mail，使用連結進行重設密碼', icon: 'mdi-email-outline' },
|
||||
]
|
||||
{ title: "輸入已註冊手機門號", icon: "mdi-phone" },
|
||||
{ title: "收起E-Mail，使用連結進行重設密碼", icon: "mdi-email-outline" },
|
||||
];
|
||||
|
||||
const { accepted, loading, disabled, errorMessage, fieldErrors, remainingSeconds, submit } =
|
||||
useForgotPassword()
|
||||
const {
|
||||
accepted,
|
||||
loading,
|
||||
disabled,
|
||||
errorMessage,
|
||||
fieldErrors,
|
||||
remainingSeconds,
|
||||
submit,
|
||||
} = useForgotPassword();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -16,7 +23,11 @@ const { accepted, loading, disabled, errorMessage, fieldErrors, remainingSeconds
|
||||
<template #description>
|
||||
<v-sheet class="pa-4 mb-6" color="background" rounded="lg">
|
||||
<ol aria-label="密碼重設流程" class="recovery-flow ma-0 pa-0">
|
||||
<li v-for="(step, index) in recoverySteps" :key="step.title" class="recovery-step">
|
||||
<li
|
||||
v-for="(step, index) in recoverySteps"
|
||||
:key="step.title"
|
||||
class="recovery-step"
|
||||
>
|
||||
<v-avatar
|
||||
class="recovery-step-icon"
|
||||
color="primary"
|
||||
@@ -28,7 +39,7 @@ const { accepted, loading, disabled, errorMessage, fieldErrors, remainingSeconds
|
||||
</v-avatar>
|
||||
<div class="recovery-step-content">
|
||||
<span class="recovery-step-number text-primary">
|
||||
步驟 {{ String(index + 1).padStart(2, '0') }}
|
||||
步驟 {{ String(index + 1).padStart(2, "0") }}
|
||||
</span>
|
||||
<p class="text-title-small text-high-emphasis ma-0">
|
||||
{{ step.title }}
|
||||
@@ -42,12 +53,17 @@ const { accepted, loading, disabled, errorMessage, fieldErrors, remainingSeconds
|
||||
<v-alert type="success" variant="tonal" role="status">
|
||||
如果帳號存在，系統將寄送密碼重設信件。
|
||||
</v-alert>
|
||||
<p class="mt-4 text-body-1">請查看信箱與垃圾郵件匣。</p>
|
||||
<p class="mt-4 text-body-large">請查看信箱與垃圾郵件匣。</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-alert v-if="errorMessage" class="mb-4" type="error" variant="tonal" role="alert">{{
|
||||
errorMessage
|
||||
}}</v-alert>
|
||||
<v-alert
|
||||
v-if="errorMessage"
|
||||
class="mb-4"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
role="alert"
|
||||
>{{ errorMessage }}</v-alert
|
||||
>
|
||||
<ForgotPasswordForm
|
||||
:loading="loading"
|
||||
:disabled="disabled"
|
||||
@@ -83,7 +99,7 @@ const { accepted, loading, disabled, errorMessage, fieldErrors, remainingSeconds
|
||||
left: 19px;
|
||||
width: 2px;
|
||||
background: rgba(var(--v-theme-primary), 0.18);
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
.recovery-step-icon {
|
||||
|
||||
@@ -170,62 +170,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card class="rounded-xl elevation-2 mb-4 py-4" color="surface">
|
||||
<v-card-text>
|
||||
<v-row density="compact">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="rounded-xl mb-4" color="surface" variant="flat">
|
||||
<v-card-text class="pa-5 pa-sm-6">
|
||||
<div class="d-flex align-center ga-4 mb-6">
|
||||
<v-avatar
|
||||
class="flex-shrink-0"
|
||||
color="primary"
|
||||
rounded="lg"
|
||||
size="48"
|
||||
variant="tonal"
|
||||
>
|
||||
<v-icon
|
||||
aria-hidden="true"
|
||||
icon="mdi-lock-open-outline"
|
||||
size="26"
|
||||
/>
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h2
|
||||
class="text-title-medium font-weight-bold text-high-emphasis mb-1"
|
||||
>
|
||||
登入後可使用完整功能
|
||||
</h2>
|
||||
<p class="text-body-small text-medium-emphasis ma-0">
|
||||
使用手機門號登入；既有帳號可先建立密碼。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-row dense>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold"
|
||||
color="primary"
|
||||
prepend-icon="mdi-login"
|
||||
size="large"
|
||||
to="/login"
|
||||
variant="outlined"
|
||||
variant="flat"
|
||||
>
|
||||
登入平台
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold"
|
||||
color="primary"
|
||||
prepend-icon="mdi-account-plus-outline"
|
||||
size="large"
|
||||
to="/register"
|
||||
variant="text"
|
||||
variant="outlined"
|
||||
>
|
||||
既有帳號建立密碼
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg"
|
||||
color="primary"
|
||||
prepend-icon="mdi-lock-reset"
|
||||
to="/forgot-password"
|
||||
variant="text"
|
||||
>
|
||||
忘記密碼
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<div class="d-flex align-center mt-4 px-4">
|
||||
<v-icon
|
||||
class="mr-3"
|
||||
color="primary"
|
||||
icon="mdi-lock-outline"
|
||||
size="28"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="font-weight-bold text-grey-darken-4">
|
||||
登入後可使用完整功能
|
||||
</div>
|
||||
</div>
|
||||
<v-divider />
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-center justify-space-between ga-2 px-5 px-sm-6 py-1 bg-background"
|
||||
>
|
||||
<span class="text-body-medium text-medium-emphasis"
|
||||
>無法登入？</span
|
||||
>
|
||||
<v-btn
|
||||
class="rounded-lg"
|
||||
color="primary"
|
||||
prepend-icon="mdi-lock-reset"
|
||||
to="/forgot-password"
|
||||
variant="text"
|
||||
>
|
||||
忘記密碼
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -244,10 +263,12 @@
|
||||
<v-avatar class="mb-4" color="primary" size="64">
|
||||
<v-icon color="white" icon="mdi-refresh-circle" size="34" />
|
||||
</v-avatar>
|
||||
<p class="text-body-1 font-weight-bold text-grey-darken-4 mb-2">
|
||||
<p
|
||||
class="text-body-large font-weight-bold text-grey-darken-4 mb-2"
|
||||
>
|
||||
確定要重新計算目前的體適能評級嗎？
|
||||
</p>
|
||||
<p class="text-body-2 text-grey-darken-2 mb-0">
|
||||
<p class="text-body-medium text-grey-darken-2 mb-0">
|
||||
系統會依各測驗項目的最新成績重新計算分組。
|
||||
</p>
|
||||
</template>
|
||||
@@ -317,10 +338,10 @@
|
||||
<v-icon color="white" icon="mdi-calendar-check" size="34" />
|
||||
</v-avatar>
|
||||
|
||||
<p class="text-body-1 font-weight-bold text-grey-darken-4 mb-2">
|
||||
<p class="text-body-large font-weight-bold text-grey-darken-4 mb-2">
|
||||
預約普測，建立您的體適能分組
|
||||
</p>
|
||||
<p class="text-body-2 text-grey-darken-2 mb-0">
|
||||
<p class="text-body-medium text-grey-darken-2 mb-0">
|
||||
完成預約並到現場參加量測後，系統才能建立您的體適能分組與課程建議。
|
||||
</p>
|
||||
</v-card-text>
|
||||
|
||||
@@ -16,119 +16,137 @@
|
||||
</v-card>
|
||||
|
||||
<!-- 登入卡片 -->
|
||||
<v-card class="rounded-lg mt-4" color="surface">
|
||||
<v-card-title> 登入 </v-card-title>
|
||||
<v-card-text> 請輸入您的手機號碼與登入密碼 </v-card-text>
|
||||
<v-alert
|
||||
v-if="route.query.passwordReset === 'success'"
|
||||
class="mx-4 mb-4"
|
||||
type="success"
|
||||
variant="tonal"
|
||||
>
|
||||
密碼已更新，請使用新密碼登入。
|
||||
</v-alert>
|
||||
<!-- 表單 -->
|
||||
<v-form class="pa-4" @submit.prevent="handleLogin">
|
||||
<v-alert
|
||||
v-if="csrfRecoveryMessage"
|
||||
class="mb-4"
|
||||
density="compact"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
<v-card
|
||||
class="rounded-xl mt-4 text-left"
|
||||
color="surface"
|
||||
variant="flat"
|
||||
>
|
||||
<v-card-title class="text-center">登入</v-card-title>
|
||||
<v-form @submit.prevent="handleLogin">
|
||||
<div class="pa-5 pa-sm-6">
|
||||
<v-alert
|
||||
v-if="route.query.passwordReset === 'success'"
|
||||
class="mb-4"
|
||||
type="success"
|
||||
variant="tonal"
|
||||
role="status"
|
||||
>
|
||||
密碼已更新，請使用新密碼登入。
|
||||
</v-alert>
|
||||
|
||||
<v-alert
|
||||
v-if="csrfRecoveryMessage"
|
||||
class="mb-4"
|
||||
density="compact"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
role="alert"
|
||||
>
|
||||
{{ csrfRecoveryMessage }}
|
||||
</v-alert>
|
||||
|
||||
<v-alert
|
||||
v-if="errorMessage"
|
||||
class="mb-4"
|
||||
density="compact"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
role="alert"
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</v-alert>
|
||||
|
||||
<v-text-field
|
||||
v-model="account"
|
||||
autocomplete="tel-national"
|
||||
inputmode="tel"
|
||||
class="mb-5"
|
||||
color="primary"
|
||||
:disabled="loading"
|
||||
hide-details="auto"
|
||||
label="手機號碼"
|
||||
placeholder="例如：0912345678"
|
||||
prepend-inner-icon="mdi-phone"
|
||||
required
|
||||
rounded="lg"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
autocomplete="current-password"
|
||||
class="mb-6"
|
||||
color="primary"
|
||||
:disabled="loading"
|
||||
hide-details="auto"
|
||||
label="登入密碼"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
required
|
||||
rounded="lg"
|
||||
type="password"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold mb-3"
|
||||
color="primary"
|
||||
:disabled="loading || remainingSeconds > 0"
|
||||
:loading="loading"
|
||||
prepend-icon="mdi-login"
|
||||
size="large"
|
||||
type="submit"
|
||||
variant="flat"
|
||||
>
|
||||
{{
|
||||
remainingSeconds > 0
|
||||
? `${remainingSeconds} 秒後再試`
|
||||
: "登入健康平台"
|
||||
}}
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold"
|
||||
color="primary"
|
||||
:disabled="loading"
|
||||
prepend-icon="mdi-account-plus-outline"
|
||||
size="large"
|
||||
to="/register"
|
||||
variant="outlined"
|
||||
>
|
||||
既有帳號建立密碼
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-center justify-space-between ga-2 px-5 px-sm-6 py-1 bg-background"
|
||||
>
|
||||
{{ csrfRecoveryMessage }}
|
||||
</v-alert>
|
||||
|
||||
<v-alert
|
||||
v-if="errorMessage"
|
||||
class="mb-4"
|
||||
density="compact"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</v-alert>
|
||||
|
||||
<v-text-field
|
||||
v-model="account"
|
||||
class="mb-6"
|
||||
color="primary"
|
||||
hide-details="auto"
|
||||
label="手機號碼"
|
||||
placeholder="例如: 0910666888"
|
||||
prepend-inner-icon="mdi-phone"
|
||||
required
|
||||
rounded="lg"
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
class="mb-6"
|
||||
color="primary"
|
||||
hide-details="auto"
|
||||
label="登入密碼"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
required
|
||||
rounded="lg"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="glow-sweep-button rounded-lg font-weight-bold elevation-2 mb-4"
|
||||
color="secondary"
|
||||
:disabled="remainingSeconds > 0"
|
||||
:loading="loading"
|
||||
type="submit"
|
||||
>
|
||||
{{
|
||||
remainingSeconds > 0
|
||||
? `${remainingSeconds} 秒後再試`
|
||||
: "登入健康平台"
|
||||
}}
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold mb-3"
|
||||
color="primary"
|
||||
to="/register"
|
||||
variant="outlined"
|
||||
>
|
||||
既有帳號建立密碼
|
||||
</v-btn>
|
||||
<v-btn block color="primary" to="/forgot-password" variant="text">
|
||||
忘記密碼
|
||||
</v-btn>
|
||||
<span class="text-body-medium text-medium-emphasis"
|
||||
>無法登入？</span
|
||||
>
|
||||
<v-btn
|
||||
class="rounded-lg"
|
||||
color="primary"
|
||||
:disabled="loading"
|
||||
prepend-icon="mdi-lock-reset"
|
||||
to="/forgot-password"
|
||||
variant="text"
|
||||
>
|
||||
忘記密碼
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
<!-- <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> -->
|
||||
|
||||
<!-- LINE 一鍵登入 (高齡場景極度實用) -->
|
||||
<!-- <v-btn
|
||||
block
|
||||
class="rounded-lg font-weight-bold text-white mb-4 text-button d-flex align-center justify-center"
|
||||
color="#06C755"
|
||||
:loading="lineLoading"
|
||||
size="large"
|
||||
style="text-transform: none"
|
||||
variant="flat"
|
||||
@click="handleLineLogin"
|
||||
>
|
||||
<v-icon class="mr-2" icon="mdi-message-text" />
|
||||
使用 LINE 帳號一鍵登入
|
||||
</v-btn> -->
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<span class="text-body-small text-grey">
|
||||
<v-card-actions class="justify-center px-5 py-4">
|
||||
<span class="text-body-small text-medium-emphasis text-center">
|
||||
登入即表示您同意本平台的
|
||||
<a
|
||||
class="text-accent text-decoration-none font-weight-bold"
|
||||
class="text-primary text-decoration-none font-weight-bold"
|
||||
href="#"
|
||||
>
|
||||
個資授權條款
|
||||
@@ -212,6 +230,8 @@ async function finishAuthentication() {
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
if (loading.value || remainingSeconds.value > 0) return;
|
||||
|
||||
const phone = normalizePhone(account.value);
|
||||
|
||||
if (!/^09\d{8}$/.test(phone)) {
|
||||
@@ -258,41 +278,3 @@ async function _handleLineLogin() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user