mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-09 19:06:49 +08:00
style(login): 优化登录页面样式和布局
- 调整了登录表单的样式，增加了标签和重新排版 -优化了输入框的样式，移除了不必要的背景和边框 - 添加了登录页面的底部提示信息 - 调整了登录表单在页面中的位置
This commit is contained in:
陈昱达
@@ -1,70 +1,76 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
auto-complete="on"
|
||||
label-position="left"
|
||||
>
|
||||
<div class="title-container flex">
|
||||
<img :src="xing" alt="" />
|
||||
<h3 class="title">欢迎登录</h3>
|
||||
<div class="login-form" style="padding: 39px 26px;">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
auto-complete="on"
|
||||
>
|
||||
<div class="title-container flex">
|
||||
<img :src="xing" alt="" />
|
||||
<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>
|
||||
|
||||
<el-form-item prop="userName">
|
||||
<!-- <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">
|
||||
<!-- <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 class="tip">
|
||||
<!-- <p>版权所有© 天津易商数科科技股份有限公司2025</p>-->
|
||||
<!-- <p>京公网安备 ICP许可证号：津ICP备14004859号-4</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -189,44 +195,65 @@ $cursor: #fff;
|
||||
.login-container {
|
||||
background-image: url('../../../../src/assets/images/login.png');
|
||||
background-size: cover;
|
||||
//background-size: 100% 100%;
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
background-position: center;
|
||||
& .tip {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
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 {
|
||||
background: transparent !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: #333;
|
||||
height: 40px;
|
||||
caret-color: #4f47f5;
|
||||
.login-input {
|
||||
position: relative;
|
||||
border: 1px solid #eaecf5;
|
||||
border-radius: 8px;
|
||||
|
||||
&:focus {
|
||||
//border-color: #4f47f5 !important;
|
||||
border-color: #4f47f5;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
& .el-form-item__label {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
font-weight: normal;
|
||||
background: #f5fbff;
|
||||
margin: 0 5px 0 10px;
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
&:before {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
& .el-input {
|
||||
& input {
|
||||
// 清除 input 自动填充背景色
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #4f47f5 !important;
|
||||
border-width: 1px;
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #4f47f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加 :focus-within 伪类来改变 el-form-item__label 的颜色
|
||||
&:focus-within .el-form-item__label {
|
||||
color: #4f47f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -241,16 +268,21 @@ $light_gray: #eee;
|
||||
background-color: #f0f4fa;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
& .login-form {
|
||||
border: 2px solid #fff;
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.93) 0%,
|
||||
rgba(235, 246, 255, 0.82) 100%
|
||||
);
|
||||
width: 427px;
|
||||
padding: 39px 26px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 23vh;
|
||||
right: 14vw;
|
||||
top: 15vh;
|
||||
right: 25vh;
|
||||
border-radius: 8px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.tips {
|
||||
@@ -295,58 +327,4 @@ $light_gray: #eee;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user