mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-11 11:56:51 +08:00
style(login): 优化登录页面样式和布局
- 调整了登录表单的样式，增加了标签和重新排版 -优化了输入框的样式，移除了不必要的背景和边框 - 添加了登录页面的底部提示信息 - 调整了登录表单在页面中的位置
This commit is contained in:
陈昱达
@@ -1,70 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<el-form
|
<div class="login-form" style="padding: 39px 26px;">
|
||||||
ref="loginForm"
|
<el-form
|
||||||
:model="loginForm"
|
ref="loginForm"
|
||||||
:rules="loginRules"
|
:model="loginForm"
|
||||||
class="login-form"
|
:rules="loginRules"
|
||||||
auto-complete="on"
|
auto-complete="on"
|
||||||
label-position="left"
|
>
|
||||||
>
|
<div class="title-container flex">
|
||||||
<div class="title-container flex">
|
<img :src="xing" alt="" />
|
||||||
<img :src="xing" alt="" />
|
<h3 class="title">欢迎登录</h3>
|
||||||
<h3 class="title">欢迎登录</h3>
|
</div>
|
||||||
|
|
||||||
|
<el-form-item prop="userName" class="login-input" label="账号ID">
|
||||||
|
<!-- <span class="svg-container">-->
|
||||||
|
<!-- <svg-icon icon-class="user" />-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<el-input
|
||||||
|
ref="userName"
|
||||||
|
v-model="loginForm.userName"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
name="userName"
|
||||||
|
type="text"
|
||||||
|
tabindex="1"
|
||||||
|
auto-complete="on"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="password" class="login-input">
|
||||||
|
<!-- <span class="svg-container">-->
|
||||||
|
<!-- <svg-icon icon-class="password" />-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<el-input
|
||||||
|
:key="passwordType"
|
||||||
|
ref="password"
|
||||||
|
v-model="loginForm.password"
|
||||||
|
:type="passwordType"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
name="password"
|
||||||
|
tabindex="2"
|
||||||
|
auto-complete="on"
|
||||||
|
@keyup.enter.native="handleLogin"
|
||||||
|
/>
|
||||||
|
<span class="show-pwd" @click="showPwd">
|
||||||
|
<i v-if="passwordType === 'password'" class="el-icon-view"></i>
|
||||||
|
<i
|
||||||
|
v-else
|
||||||
|
class="iconfont icon-yanjingxianshi"
|
||||||
|
style="font-size: 20px"
|
||||||
|
></i>
|
||||||
|
<!-- <svg-icon-->
|
||||||
|
<!-- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
|
||||||
|
<!-- />-->
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
:loading="loading"
|
||||||
|
type="primary"
|
||||||
|
style="width:100%;margin-top: 127px;margin-bottom: 20px;border-radius: 8px"
|
||||||
|
:style="buttonStyle"
|
||||||
|
@click.native.prevent="handleLogin"
|
||||||
|
>登录 <i class="iconfont icon-chuansuoyou"></i
|
||||||
|
></el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-form-item prop="userName">
|
<div class="tip">
|
||||||
<!-- <span class="svg-container">-->
|
<!-- <p>版权所有© 天津易商数科科技股份有限公司2025</p>-->
|
||||||
<!-- <svg-icon icon-class="user" />-->
|
<!-- <p>京公网安备 ICP许可证号：津ICP备14004859号-4</p>-->
|
||||||
<!-- </span>-->
|
</div>
|
||||||
<el-input
|
|
||||||
ref="userName"
|
|
||||||
v-model="loginForm.userName"
|
|
||||||
placeholder="请输入用户名"
|
|
||||||
name="userName"
|
|
||||||
type="text"
|
|
||||||
tabindex="1"
|
|
||||||
auto-complete="on"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item prop="password">
|
|
||||||
<!-- <span class="svg-container">-->
|
|
||||||
<!-- <svg-icon icon-class="password" />-->
|
|
||||||
<!-- </span>-->
|
|
||||||
<el-input
|
|
||||||
:key="passwordType"
|
|
||||||
ref="password"
|
|
||||||
v-model="loginForm.password"
|
|
||||||
:type="passwordType"
|
|
||||||
placeholder="请输入密码"
|
|
||||||
name="password"
|
|
||||||
tabindex="2"
|
|
||||||
auto-complete="on"
|
|
||||||
@keyup.enter.native="handleLogin"
|
|
||||||
/>
|
|
||||||
<span class="show-pwd" @click="showPwd">
|
|
||||||
<i v-if="passwordType === 'password'" class="el-icon-view"></i>
|
|
||||||
<i
|
|
||||||
v-else
|
|
||||||
class="iconfont icon-yanjingxianshi"
|
|
||||||
style="font-size: 20px"
|
|
||||||
></i>
|
|
||||||
<!-- <svg-icon-->
|
|
||||||
<!-- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
|
|
||||||
<!-- />-->
|
|
||||||
</span>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
:loading="loading"
|
|
||||||
type="primary"
|
|
||||||
style="width:100%;margin-top: 127px;margin-bottom: 20px;border-radius: 8px"
|
|
||||||
:style="buttonStyle"
|
|
||||||
@click.native.prevent="handleLogin"
|
|
||||||
>登录 <i class="iconfont icon-chuansuoyou"></i
|
|
||||||
></el-button>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -189,44 +195,65 @@ $cursor: #fff;
|
|||||||
.login-container {
|
.login-container {
|
||||||
background-image: url('../../../../src/assets/images/login.png');
|
background-image: url('../../../../src/assets/images/login.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
//background-size: 100% 100%;
|
background-position: center;
|
||||||
.el-input {
|
& .tip {
|
||||||
display: inline-block;
|
position: fixed;
|
||||||
height: 47px;
|
bottom: 20px;
|
||||||
width: 85%;
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #3f4c75;
|
||||||
|
line-height: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
.login-input {
|
||||||
background: transparent !important;
|
position: relative;
|
||||||
border: 0px;
|
border: 1px solid #eaecf5;
|
||||||
-webkit-appearance: none;
|
border-radius: 8px;
|
||||||
padding: 12px 5px 12px 15px;
|
|
||||||
color: #333;
|
|
||||||
height: 40px;
|
|
||||||
caret-color: #4f47f5;
|
|
||||||
|
|
||||||
&:focus {
|
& .el-form-item__label {
|
||||||
//border-color: #4f47f5 !important;
|
position: absolute;
|
||||||
border-color: #4f47f5;
|
top: -5px;
|
||||||
background-color: transparent;
|
font-size: 12px;
|
||||||
}
|
z-index: 2;
|
||||||
}
|
left: 0;
|
||||||
&:-webkit-autofill {
|
font-weight: normal;
|
||||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
background: #f5fbff;
|
||||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
margin: 0 5px 0 10px;
|
||||||
|
padding: 0 5px;
|
||||||
|
line-height: 1;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item {
|
& .el-input {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
& input {
|
||||||
background: rgba(0, 0, 0, 0.03);
|
// 清除 input 自动填充背景色
|
||||||
border-radius: 5px;
|
background-color: transparent;
|
||||||
color: #454545;
|
color: #000;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
&:focus-within {
|
&:-webkit-autofill {
|
||||||
border-color: #4f47f5 !important;
|
transition: background-color 5000s ease-in-out 0s;
|
||||||
border-width: 1px;
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid #4f47f5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 添加 :focus-within 伪类来改变 el-form-item__label 的颜色
|
||||||
|
&:focus-within .el-form-item__label {
|
||||||
|
color: #4f47f5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -241,16 +268,21 @@ $light_gray: #eee;
|
|||||||
background-color: #f0f4fa;
|
background-color: #f0f4fa;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.login-form {
|
& .login-form {
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
border: 2px solid #fff;
|
||||||
|
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 255, 255, 0.93) 0%,
|
||||||
|
rgba(235, 246, 255, 0.82) 100%
|
||||||
|
);
|
||||||
width: 427px;
|
width: 427px;
|
||||||
padding: 39px 26px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: fixed;
|
top: 15vh;
|
||||||
bottom: 23vh;
|
right: 25vh;
|
||||||
right: 14vw;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
@@ -295,58 +327,4 @@ $light_gray: #eee;
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input -internal-autofill-selected {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
/deep/ .el-form-item__content {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
/deep/ .el-form-item__inner {
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.el-input .el-input__inner {
|
|
||||||
background-color: transparent !important;
|
|
||||||
&:-webkit-autofill {
|
|
||||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-input .el-input__inner:hover,
|
|
||||||
.el-select .el-input__inner:hover,
|
|
||||||
.el-range-editor .el-input__inner:hover {
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.el-input .el-input__inner:hover,
|
|
||||||
.el-select .el-input__inner:hover,
|
|
||||||
.el-range-editor .el-input__inner:hover {
|
|
||||||
color: #4f47f5;
|
|
||||||
}
|
|
||||||
/deep/ .el-input__inner {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
// 在全局样式或组件样式中添加以下规则
|
|
||||||
.el-input input:-webkit-autofill,
|
|
||||||
.el-input input:-webkit-autofill:hover,
|
|
||||||
.el-input input:-webkit-autofill:focus {
|
|
||||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
transition: background-color 5000s ease-in-out 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果使用scoped样式需要穿透
|
|
||||||
::v-deep {
|
|
||||||
.el-input__inner {
|
|
||||||
&:-webkit-autofill {
|
|
||||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user