mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 13:28:38 +08:00
优化登录相关组件
This commit is contained in:
@@ -80,14 +80,14 @@ function testAccount(account: string) {
|
||||
</h3>
|
||||
<div>
|
||||
<ElFormItem prop="account">
|
||||
<ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
|
||||
<ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:user-3-fill" />
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="password">
|
||||
<ElInput v-model="form.password" type="password" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
|
||||
<ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:lock-2-fill" />
|
||||
</template>
|
||||
@@ -131,42 +131,3 @@ function testAccount(account: string) {
|
||||
</div>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(input[type="password"]::-ms-reveal) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: inherit;
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
white-space: nowrap;
|
||||
background-color: var(--g-container-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,14 +70,14 @@ function handleRegister() {
|
||||
</h3>
|
||||
<div>
|
||||
<ElFormItem prop="account">
|
||||
<ElInput v-model="form.account" placeholder="用户名" tabindex="1">
|
||||
<ElInput v-model="form.account" size="large" placeholder="用户名" tabindex="1">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:user-3-fill" />
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="captcha">
|
||||
<ElInput v-model="form.captcha" placeholder="验证码" tabindex="2">
|
||||
<ElInput v-model="form.captcha" size="large" placeholder="验证码" tabindex="2">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ic:baseline-verified-user" />
|
||||
</template>
|
||||
@@ -87,14 +87,14 @@ function handleRegister() {
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="password">
|
||||
<ElInput v-model="form.password" type="password" placeholder="密码" tabindex="3" show-password>
|
||||
<ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="3" show-password>
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:lock-2-fill" />
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="checkPassword">
|
||||
<ElInput v-model="form.checkPassword" type="password" placeholder="确认密码" tabindex="4" show-password>
|
||||
<ElInput v-model="form.checkPassword" type="password" size="large" placeholder="确认密码" tabindex="4" show-password>
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:lock-2-fill" />
|
||||
</template>
|
||||
@@ -112,37 +112,3 @@ function handleRegister() {
|
||||
</div>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(input[type="password"]::-ms-reveal) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: inherit;
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,14 +56,14 @@ function handleReset() {
|
||||
</h3>
|
||||
<div>
|
||||
<ElFormItem prop="account">
|
||||
<ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
|
||||
<ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:user-3-fill" />
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="captcha">
|
||||
<ElInput v-model="form.captcha" placeholder="验证码" type="text" tabindex="2">
|
||||
<ElInput v-model="form.captcha" size="large" placeholder="验证码" type="text" tabindex="2">
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ic:baseline-verified-user" />
|
||||
</template>
|
||||
@@ -73,7 +73,7 @@ function handleReset() {
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="newPassword">
|
||||
<ElInput v-model="form.newPassword" type="password" placeholder="新密码" tabindex="3" show-password>
|
||||
<ElInput v-model="form.newPassword" type="password" size="large" placeholder="新密码" tabindex="3" show-password>
|
||||
<template #prefix>
|
||||
<SvgIcon name="i-ri:lock-2-fill" />
|
||||
</template>
|
||||
@@ -90,37 +90,3 @@ function handleReset() {
|
||||
</div>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(input[type="password"]::-ms-reveal) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: inherit;
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user