bigdatacloud/login
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change update UI Signin

Browse Source
This commit is contained in:
Thien Pham Van
2026-01-29 10:06:30 +07:00
parent 4abf0af565
commit 27ab77dadc
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
pages/signin.vue
View File

@@ -1,11 +1,7 @@
<template> <template>
<div class="columns is-centered px-0 mx-0"> <div class="columns is-centered px-0 mx-0">
<div <div :class="`column wrapper-login is-${viewport >= 4 ? 4 : 6}`">
:class="`column wrapper-login is-${ <div class="has-background-white px-6 py-6 login-box">
viewport >= 4 ? 4 : 6
}`"
>
<div class="has-background-white px-6 py-6 login-box ">
<div class="login-header"> <div class="login-header">
<Logo /> <Logo />
<h2 class="title mt-4">{{ isVietnamese ? 'Đăng nhập hệ thống' : 'Login' }}</h2> <h2 class="title mt-4">{{ isVietnamese ? 'Đăng nhập hệ thống' : 'Login' }}</h2>
@@ -74,7 +70,7 @@
</p> </p>
</div> </div>
<div class="field is-grouped mt-5 is-align-items-center is-justify-content-space-between"> <div class="field is-grouped mt-5 is-align-items-center is-justify-content-space-between">
<div class="control "> <div class="control">
<button class="button btn-primary" @click="signin()" @keyup.enter="signin()"> <button class="button btn-primary" @click="signin()" @keyup.enter="signin()">
{{ isVietnamese ? 'Đăng nhập' : 'Login' }} {{ isVietnamese ? 'Đăng nhập' : 'Login' }}
</button> </button>
@@ -87,7 +83,12 @@
</div> </div>
</div> </div>
<footer class="login-footer"> <footer class="login-footer">
<span>© 2026 {{ isVietnamese ? 'Bản quyền thuộc về Utopia' : 'Copyright by Utopia Technology JSC' }}</span> <span
>©{{ new Date().getFullYear() }}
{{
isVietnamese ? 'Bản quyền thuộc về Utopia Villas & Resort' : 'Copyright by Utopia Villas & Resort'
}}</span
>
</footer> </footer>
</div> </div>
</div> </div>
@@ -119,7 +120,6 @@ export default {
); );
if (!this.module) return this.$router.push('/welcome'); if (!this.module) return this.$router.push('/welcome');
console.log('this.$route.query', this.$route.query);
}, },
computed: { computed: {
login: { login: {
@@ -179,8 +179,10 @@ export default {
}, },
}, },
isVietnamese() { isVietnamese() {
return navigator.language.toLowerCase().startsWith('vi'); // return navigator.language.toLowerCase().startsWith('vi');
return true;
}, },
getEnv() { getEnv() {
const link = (this.$route.query.link || '').replace(/^https?:\/\//, '').toLowerCase(); const link = (this.$route.query.link || '').replace(/^https?:\/\//, '').toLowerCase();
const module = (this.$route.query.module || '').replace(/^https?:\/\//, '').toLowerCase(); const module = (this.$route.query.module || '').replace(/^https?:\/\//, '').toLowerCase();
@@ -371,7 +373,7 @@ export default {
} }
.subtitle { .subtitle {
font-size: 15px; font-size: 15px;
color: #3F6E73; color: #3f6e73;
margin-bottom: 24px; margin-bottom: 24px;
} }
@@ -396,8 +398,8 @@ export default {
width: 100%; width: 100%;
height: 46px; height: 46px;
background-color: #1F3A3D; /* primary from logo */ background-color: #1f3a3d; /* primary from logo */
color: #FFFFFF; color: #ffffff;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
@@ -410,7 +412,7 @@ export default {
} }
.wrapper-login .btn-primary:hover { .wrapper-login .btn-primary:hover {
background-color: #2C5054; background-color: #2c5054;
} }
.wrapper-login .btn-primary:active { .wrapper-login .btn-primary:active {
@@ -418,7 +420,7 @@ export default {
} }
.wrapper-login .btn-primary:disabled { .wrapper-login .btn-primary:disabled {
background-color: #9CA3AF; background-color: #9ca3af;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -429,13 +431,13 @@ export default {
.wrapper-login .reset-link { .wrapper-login .reset-link {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #3F6E73; color: #3f6e73;
text-decoration: none; text-decoration: none;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.wrapper-login .reset-link:hover { .wrapper-login .reset-link:hover {
color: #1F3A3D; color: #1f3a3d;
text-decoration: underline; text-decoration: underline;
} }
@@ -460,7 +462,7 @@ export default {
/* FOCUS STATE */ /* FOCUS STATE */
.wrapper-login input:focus { .wrapper-login input:focus {
border-color: #1F3A3D; border-color: #1f3a3d;
box-shadow: 0 0 0 3px rgba(31, 58, 61, 0.12); box-shadow: 0 0 0 3px rgba(31, 58, 61, 0.12);
} }
@@ -474,5 +476,4 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> </style>