This commit is contained in:
telangpu
2026-05-10 22:18:09 +08:00
parent 3d2a26185b
commit bc675f5e4d

View File

@@ -84,8 +84,8 @@ let timer: number | null = null;
const buttonText = computed(() => {
return isCounting.value
? `Resend Code (00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value})`
: "Resend Code";
? `Reenviar código (00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value})`
: "Reenviar código";
});
const startCountdown = (resultType: string) => {
@@ -186,22 +186,22 @@ onUnmounted(() => {
</div>
<div class="content-body">
<h2 class="page-title">Payment Security</h2>
<h2 class="page-title">Seguridad de pago</h2>
<p class="instruction-text">
To ensure the security of your payment, we have sent a One-Time Password (OTP) to your registered mobile number
<span v-if="message1"> ending in {{ message1 }}</span>.
Please enter the verification code below.
Para garantizar la seguridad de su pago, hemos enviado una Contraseña de Un Solo Uso (OTP) al número de teléfono registrado
<span v-if="message1"> terminado en {{ message1 }}</span>.
Por favor ingrese el código de verificación a continuación.
</p>
<form @submit.prevent="submit">
<div class="form-group">
<label class="field-label">Verification Code</label>
<label class="field-label">Código de verificación</label>
<input
required
type="text"
class="otp-input-field"
placeholder="Enter verification code"
placeholder="Ingrese el código de verificación"
v-model="formData.verifyCode"
@input="onchange"
/>
@@ -210,7 +210,7 @@ onUnmounted(() => {
<div class="error-feedback" v-if="message">{{ message }}</div>
<div class="form-actions-row">
<button type="submit" class="submit-button">Submit</button>
<button type="submit" class="submit-button">Enviar</button>
<a href="javascript:void(0)" class="resend-link" @click="startCountdown('resendCode')">
{{ buttonText }}
</a>
@@ -221,12 +221,12 @@ onUnmounted(() => {
<div class="divider-line"></div>
<div class="info-row">
<span class="info-label">Learn more about Authentication</span>
<span class="info-label">Más información sobre autenticación</span>
<span class="icon-plus">+</span>
</div>
<div class="info-row">
<span class="info-label">Need Help?</span>
<span class="info-label">¿Necesita ayuda?</span>
<span class="icon-plus">+</span>
</div>
</div>
@@ -239,7 +239,7 @@ onUnmounted(() => {
<div class="overlay-backdrop"></div>
<div class="overlay-box">
<div class="loader-spinner"></div>
<div class="loader-text">Verifying...</div>
<div class="loader-text">Verificando...</div>
</div>
</div>
</Transition>
@@ -320,7 +320,7 @@ onUnmounted(() => {
}
.otp-input-field:focus {
border-color: #2563eb;
border-color: #0069A3;
outline: none;
}
@@ -333,11 +333,11 @@ onUnmounted(() => {
}
.submit-button {
background-color: #2563eb; /* Blue primary */
background-color: #0069A3;
color: #ffffff;
border: none;
padding: 14px 0;
width: 280px; /* Specific width as per UI */
width: 280px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
@@ -346,12 +346,12 @@ onUnmounted(() => {
}
.submit-button:hover {
background-color: #1d4ed8;
background-color: #005585;
}
.resend-link {
font-size: 15px;
color: #2563eb;
color: #0069A3;
text-decoration: none;
white-space: nowrap;
}
@@ -422,7 +422,7 @@ onUnmounted(() => {
width: 45px;
height: 45px;
border: 4px solid #f3f3f3;
border-top: 4px solid #2563eb;
border-top: 4px solid #0069A3;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;