feat: 简化登录页面样式
- 隐藏租户选择、记住密码切换按钮 - 移除手机/二维码/注册/三方登录/忘记密码 - Logo 添加苹果风格圆角矩形 - 开发环境开启自动填充,生产环境关闭
This commit is contained in:
parent
88fe4674b6
commit
6c6c946b04
@ -9,7 +9,7 @@
|
||||
>
|
||||
<!-- 左上角的 logo + 系统标题 -->
|
||||
<div class="relative flex items-center text-white">
|
||||
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
|
||||
<img alt="" class="mr-10px h-48px w-48px rounded-[22px]" src="@/assets/imgs/logo.png" />
|
||||
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
|
||||
</div>
|
||||
<!-- 左边的背景图 + 欢迎语 -->
|
||||
@ -21,7 +21,7 @@
|
||||
>
|
||||
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
|
||||
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
|
||||
<div key="3" class="mt-5 text-14px font-normal text-white">
|
||||
<div key="3" class="mt-5 text-14px font-normal text-white login-message">
|
||||
{{ t('login.message') }}
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
@ -51,16 +51,6 @@
|
||||
>
|
||||
<!-- 账号登录 -->
|
||||
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 手机登录 -->
|
||||
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 二维码登录 -->
|
||||
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 注册 -->
|
||||
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 三方登录 -->
|
||||
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 忘记密码 -->
|
||||
<ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
@ -75,7 +65,7 @@ import { useAppStore } from '@/store/modules/app'
|
||||
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
|
||||
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
||||
|
||||
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
|
||||
import { LoginForm } from './components'
|
||||
|
||||
defineOptions({ name: 'Login' })
|
||||
|
||||
@ -106,6 +96,12 @@ $prefix-cls: #{$namespace}-login;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-message {
|
||||
columns: 2;
|
||||
column-gap: 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -25,7 +25,8 @@
|
||||
<LoginFormTitle class="w-full" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="px-10px">
|
||||
<!-- 租户选择已隐藏,默认使用租户1 -->
|
||||
<!-- <el-col :span="24" class="px-10px">
|
||||
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
|
||||
<el-input
|
||||
v-model="loginData.loginForm.tenantName"
|
||||
@ -35,13 +36,14 @@
|
||||
type="primary"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<el-col :span="24" class="px-10px">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginData.loginForm.username"
|
||||
:placeholder="t('login.usernamePlaceholder')"
|
||||
:prefix-icon="iconAvatar"
|
||||
:autocomplete="autoComplete"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -53,28 +55,16 @@
|
||||
:prefix-icon="iconLock"
|
||||
show-password
|
||||
type="password"
|
||||
:autocomplete="autoComplete"
|
||||
@keyup.enter="getCode()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="px-10px mt-[-20px] mb-[-20px]">
|
||||
<el-col :span="24" class="px-10px mt-[-20px] mb-[-10px]">
|
||||
<el-form-item>
|
||||
<el-row justify="space-between" style="width: 100%">
|
||||
<el-col :span="6">
|
||||
<el-checkbox v-model="loginData.loginForm.rememberMe">
|
||||
{{ t('login.remember') }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :offset="6" :span="12">
|
||||
<el-link
|
||||
class="float-right"
|
||||
type="primary"
|
||||
@click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
|
||||
>
|
||||
{{ t('login.forgetPassword') }}
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-checkbox v-model="loginData.loginForm.rememberMe">
|
||||
{{ t('login.remember') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="px-10px">
|
||||
@ -96,7 +86,8 @@
|
||||
mode="pop"
|
||||
@success="handleLogin"
|
||||
/>
|
||||
<el-col :span="24" class="px-10px">
|
||||
<!-- 底部切换按钮已隐藏 -->
|
||||
<!-- <el-col :span="24" class="px-10px">
|
||||
<el-form-item>
|
||||
<el-row :gutter="5" justify="space-between" style="width: 100%">
|
||||
<el-col :span="8">
|
||||
@ -153,7 +144,7 @@
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -189,6 +180,11 @@ const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
|
||||
|
||||
// 自动填充控制:开发环境开启,生产环境关闭
|
||||
const autoComplete = computed(() => {
|
||||
return import.meta.env.DEV ? 'on' : 'off'
|
||||
})
|
||||
|
||||
const LoginRules = {
|
||||
tenantName: [required],
|
||||
username: [required],
|
||||
@ -197,13 +193,13 @@ const LoginRules = {
|
||||
const loginData = reactive({
|
||||
isShowPassword: false,
|
||||
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
|
||||
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
|
||||
tenantEnable: 'false', // 默认禁用租户选择
|
||||
loginForm: {
|
||||
tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
|
||||
tenantName: '1', // 默认租户ID为1
|
||||
username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
|
||||
password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
|
||||
captchaVerification: '',
|
||||
rememberMe: true // 默认记录我。如果不需要,可手动修改
|
||||
rememberMe: true // 默认记住密码
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user