yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updata

Browse Source
This commit is contained in:
hrx 2026-04-24 11:22:01 +08:00
parent 8c9dcfcd54
commit c84cf055ef
1 changed files with 206 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

555
f/web-kboss/src/views/login/indexNew.vue
View File

@ -42,103 +42,83 @@
<!-- 登录容器 -->
<div class="login-container login-form-style">
<!-- 登录类型切换：账号登录/手机号登录 -->
<div class="login-type">
<span :class="{ activeType: loginType === '0' }" @click="changeLoginType('0')">账号登录</span>
<span :class="{ activeType: loginType === '1' }" @click="changeLoginType('1')">手机号登录</span>
</div>
<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-l" autocomplete="on"
label-position="left">
<!-- Element UI 标签页组件 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- 登录表单 -->
<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-l" autocomplete="on"
label-position="left">
<el-form-item prop="username"
style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
<div class="user-input">
<span class="svg-container icon-box">
<img src="../../assets/kyy/用户.svg" alt="">
</span>
<el-input id="uesr-name-id" ref="username" v-model="loginForm.username" placeholder="请输入账户"
name="username" type="text" class="userInput" />
</div>
</el-form-item>
<!-- 用户名/手机号输入框 -->
<el-form-item prop="username"
<el-tooltip v-model="capsTooltip" style="margin-bottom: 7px"
content="Caps lock is On" placement="right" manual>
<el-form-item prop="password" class="password-mobile"
style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
<div class="user-input">
<span class="svg-container icon-box">
<!-- 用户图标 -->
<img src="../../assets/kyy/用户.svg" alt="">
<span class="svg-container icon-box" style="padding: 2px;color: #9699a0;">
<img src="./svg/密码.svg" style="color: #6c7079" alt="">
</span>
<el-input id="passwordId" :key="passwordType" ref="password" v-model="loginForm.password"
:type="passwordType" placeholder="请输入密码" name="password" @keyup.native="checkCapslock"
@blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon style="margin-right: 10px;cursor: pointer"
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
<el-input id="uesr-name-id" ref="username" v-model="loginForm.username" placeholder="请输入用户名/手机号"
name="username" type="text" class="userInput" />
</div>
</el-form-item>
</el-tooltip>
<!-- 密码输入框（仅在账号登录模式下显示） -->
<el-tooltip v-if="loginType === '0'" v-model="capsTooltip" style="margin-bottom: 7px"
content="Caps lock is On" placement="right" manual>
<el-form-item prop="password" class="password-mobile"
style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
<div class="user-input">
<span class="svg-container icon-box" style="padding: 2px;color: #9699a0;">
<!-- 密码图标 -->
<img src="./svg/密码.svg" style="color: #6c7079" alt="">
</span>
<el-input id="passwordId" :key="passwordType" ref="password" v-model="loginForm.password"
:type="passwordType" placeholder="请输入密码" name="password" @keyup.native="checkCapslock"
@blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
<!-- 显示/隐藏密码按钮 -->
<span class="show-pwd" @click="showPwd">
<svg-icon style="margin-right: 10px;cursor: pointer"
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</div>
</el-form-item>
</el-tooltip>
<!-- 验证码输入框（仅在手机号登录模式下显示） -->
<div v-else style="display:flex;margin-top:20px;">
<el-form-item prop="" class="invitecode"
style="background-color: white; border: 1px solid #d9d9d9;">
<div class="user-input">
<span class="svg-container icon-box">
<!-- 验证码图标 -->
<img src="./svg/密码.svg" style="color: #6c7079;width: 19px;height: 17px;" alt="">
</span>
<el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode" type="text" />
</div>
</el-form-item>
<!-- 获取验证码按钮 - 添加防抖功能 -->
<span :disabled="isDisabled || isGettingCode" class="getCodeStyleNew"
style="height:40px;margin-left:10px" @click="debouncedGetCode">
{{ SendCode_text }}
<el-form-item prop="mobile"
style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
<div class="user-input">
<span class="svg-container icon-box">
<img src="../../assets/kyy/用户.svg" alt="">
</span>
<el-input v-model="loginForm.mobile" placeholder="请输入手机号" name="mobile" type="text"
class="userInput" />
</div>
</el-form-item>
<!-- 登录按钮 -->
<div style="display:flex;">
<el-button @keyup.enter.native="handleLogin('loginForm')" :loading="loading" type="primary"
style="width: 300px;margin-top: 30px;margin-bottom: 10px" class="login-btn"
@click.native.prevent="handleLogin('loginForm')">
立即登录
</el-button>
</div>
<div style="display:flex;margin-top:20px;">
<el-form-item prop="vcode" class="invitecode"
style="background-color: white; border: 1px solid #d9d9d9;">
<div class="user-input">
<span class="svg-container icon-box">
<img src="./svg/密码.svg" style="color: #6c7079;width: 19px;height: 17px;" alt="">
</span>
<el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode" type="text" />
</div>
</el-form-item>
<span :disabled="isDisabled || isGettingCode" class="getCodeStyleNew"
style="height:40px;margin-left:10px" @click="debouncedGetCode">
{{ SendCode_text }}
</span>
</div>
<!-- 微信登录按钮 -->
<!-- <div style="display:flex;margin-bottom: 30px">
<el-button style="width: 300px;margin-top: 10px;color: #1890ff" class="login-btn"
@click.native.prevent="wxBtn">
微信登录
</el-button>
</div> -->
<div style="display:flex;">
<el-button @keyup.enter.native="handleLogin('loginForm')" :loading="loading" type="primary"
style="width: 300px; display: flex; align-items: center; justify-content: center;" class="login-btn"
@click.native.prevent="handleLogin('loginForm')">
立即登录
</el-button>
</div>
<!-- 底部链接：忘记密码和注册 -->
<div class="two-btn">
<!-- <span type="text" class="forget-password" @click="resetPassword()">
忘记密码?
</span> -->
<i></i>
<span :loading="loading" type="primary" class="go-register"
style="width: 127px; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister"
@click="handleRegister">
没有账号？<span class="go-register-btn">去注册</span>
</span>
</div>
</el-form>
</el-tabs>
<div class="two-btn">
<i></i>
<span :loading="loading" type="primary" class="go-register"
style="width: 127px; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister"
@click="handleRegister">
没有账号？<span class="go-register-btn">去注册</span>
</span>
</div>
</el-form>
<!-- 重置密码对话框 -->
<el-dialog title="重置密码" :visible.sync="dialogVisible" width="25%" class="myDialog">
@ -261,8 +241,9 @@ export default {
// 登录表单数据
loginForm: {
username: "", // 用户名/手机号
username: "", // 账户
password: "", // 密码
mobile: "", // 手机号
vcode: "", // 验证码
codeid: "" // 验证码ID
},
@ -271,8 +252,12 @@ export default {
// 表单验证规则
rules: {
username: [{ required: true, message: "请输入用户名/手机号", trigger: "blur" }],
username: [{ required: true, message: "请输入账户", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
],
vcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
@ -1048,7 +1033,6 @@ $dark_gray: #889aa4;
width: 1400px;
justify-content: space-around;
align-items: center;
// align-items: center;
margin-top: -60px;
.left {
@ -1074,252 +1058,182 @@ $dark_gray: #889aa4;
}
}
::v-deep .el-input__inner {
padding: 0 !important;
border: 1px solid red;
}
/* 统一登录表单容器 */
.login-form {
padding-left: 52px;
padding-right: 49px;
//width: 481px;
//height: 521px;
padding: 40px 50px;
mix-blend-mode: normal;
background-color: white;
border-radius: 24px;
box-sizing: border-box;
}
.user-input {
display: flex;
justify-content: center;
flex-direction: row;
}
/* 登录标题统一间距 */
.login-text {
margin-top: 20px;
mix-blend-mode: normal;
color: rgba(0, 0, 0, 1);
display: block;
text-align: center;
margin-bottom: 30px;
font-family: PingFang SC;
font-size: 24px;
letter-spacing: 1.1px;
font-weight: 500;
color: #333;
}
.el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
background-color: #dfe4ed;
z-index: -999;
/* 统一输入框容器样式 */
.user-input {
display: flex;
align-items: center;
width: 100%;
height: 40px;
}
/* 统一图标容器 */
.icon-box {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 21px;
margin-top: 8px;
margin-left: 5px;
margin-right: 5px;
width: 24px;
height: 24px;
margin: 0 8px;
flex-shrink: 0;
}
.userInput .el-input__inner {
background-color: white;
/* 统一表单项目样式 + 边距 */
::v-deep .el-form-item {
margin-bottom: 24px !important; /* 给错误提示预留空间 */
}
.login-form-style {
background-color: transparent;
.el-input {
input {
border: 0px;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
caret-color: $cursor;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: $cursor !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
.el-input ::v-deep .el-input__inner {
/* 统一输入框外框 */
::v-deep .el-input,
::v-deep .el-input__inner {
width: 100%;
height: 40px;
line-height: 40px;
border: none;
background-color: white;
background: transparent;
padding: 0 10px !important;
box-sizing: border-box;
font-size: 14px;
}
&:-webkit-autofill {
background-color: white;
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: $cursor !important;
/* 统一表单输入框外层容器 */
.login-form-style {
.el-form-item {
border: 1px solid #d9d9d9;
background: #fff;
border-radius: 4px;
min-height: 40px;
overflow: visible;
position: relative;
}
/* 密码框提示样式 */
.el-tooltip {
display: block;
}
/* 验证码输入框宽度 */
.invitecode {
width: 180px !important;
}
}
.tip-word {
mix-blend-mode: normal;
color: rgba(65, 70, 79, 1);
font-family: PingFang SC;
::v-deep .el-form-item__error {
padding-top: 6px;
font-size: 12px;
margin-top: 10px;
line-height: 17px;
text-indent: 0.5em;
line-height: 1.4;
}
/* 自动填充背景色覆盖 */
::v-deep .el-input__inner:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #333 !important;
}
/* 密码显示隐藏按钮 */
.show-pwd {
display: flex;
align-items: center;
padding-right: 10px;
cursor: pointer;
}
/* 验证码按钮统一样式 */
.getCodeStyleNew {
width: 110px;
height: 40px;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
color: #41464f;
border: 1px solid #dde2e9;
background: #f6f8fa;
border-radius: 4px;
transition: all 0.2s;
&:hover {
cursor: pointer;
border-color: #4281ff;
background: #fafbfc;
}
}
/* 登录按钮统一间距 */
.login-btn {
height: 42px;
line-height: 42px;
font-size: 16px;
margin-top: 10px !important;
margin-bottom: 20px !important;
}
/* 底部按钮区域统一 */
.two-btn {
margin-top: 20px;
width: 300px;
display: flex;
justify-content: space-between;
}
.forget-password {
mix-blend-mode: normal;
color: rgba(65, 70, 79, 1);
font-family: PingFang SC;
font-size: 14px;
height: 100%;
padding-left: 7px;
justify-content: center;
margin-top: 0;
}
.go-register {
padding-right: 7px;
mix-blend-mode: normal;
text-align: center;
color: rgba(0, 0, 0, 1);
font-family: PingFang SC;
font-size: 14px;
letter-spacing: 0.7px;
}
.go-register:hover {
cursor: default;
}
.forget-password:hover {
color: blue;
cursor: pointer;
}
.login-btn {
mix-blend-mode: normal;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: PingFang SC;
font-size: 16px;
}
.main-content-box {
margin-top: -10px;
}
.login-container {
margin-top: 10px;
}
.login-container ::v-deep .el-tabs__nav-wrap::after {
height: 0;
}
.go-register-btn {
display: inline-block;
color: blue;
border-bottom: 2px solid blue !important;
cursor: pointer;
}
#uesr-name-id:-webkit-autofill {
background-color: white;
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: $cursor !important;
}
.rePassword {
background-color: white;
color: #333;
.go-register-btn {
color: #409eff;
border-bottom: 1px solid #409eff;
cursor: pointer;
margin-left: 4px;
}
}
/* 弹窗样式统一 */
.dialog-footer {
display: flex;
justify-content: flex-end;
align-items: center;
padding-bottom: 15px;
padding-top: 10px;
}
/* Logo 定位统一 */
.logo-top {
width: 200px !important;
height: 70px !important;
position: absolute;
top: 2%;
left: 2%;
top: 20px;
left: 20px;
}
.logo-top1 {
width: 260px !important;
height: 80px !important;
position: absolute;
top: 3%;
left: 3%;
}
::v-deep .el-tabs__nav-scroll {
height: 0px;
}
@media screen and(max-width: 760px) {
.login-form {
width: 90% !important;
position: absolute;
top: 13%;
right: 5%;
}
.go-register {
padding-right: 10px;
width: 174px;
}
}
.ad-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
width: 500px;
height: 500px;
border: 1px solid red;
z-index: 999999999999;
}
.showAdImg {
width: 100%;
height: 100%;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("./images/ad.jpg");
background-size: cover;
top: 20px;
left: 20px;
}
/* 底部信息 */
.message-footer {
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 50px;
@ -1328,94 +1242,37 @@ $dark_gray: #889aa4;
bottom: 0;
z-index: 10;
color: #000;
font-size: 12px;
item {
.item {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
margin-bottom: 5px;
}
span {
margin: 0 10px;
font-size: 12px;
}
}
.goPAge {
transition: all .3s ease-in-out;
cursor: pointer;
transition: color 0.3s;
&:hover {
cursor: pointer;
color: blue;
color: #409eff;
}
}
.login-type {
display: flex;
justify-content: flex-start;
align-items: center;
color: #41464f;
font-size: 16px;
margin: 25px 0 10px;
span {
position: relative;
padding-bottom: 3px;
display: inline-block;
margin-right: 20px;
&:hover {
cursor: pointer;
color: rgb(22, 100, 255);
}
&:before {
transition: all .2s ease-in-out;
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 2px;
background: rgb(22, 100, 255);
}
}
/* 隐藏不需要的下划线 */
::v-deep .el-tabs__nav-wrap::after {
display: none;
}
.activeType {
color: rgb(22, 100, 255);
&:before {
content: "";
position: absolute;
bottom: 0;
width: 100% !important;
height: 2px;
background: rgb(22, 100, 255);
transition: all .2s ease-in-out;
/* 响应式 */
@media screen and (max-width: 760px) {
.login-form {
width: 90% !important;
padding: 30px 20px;
}
}
.getCodeStyleNew {
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
color: #41464f;
border: 1px solid #dde2e9;
background: #f6f8fa;
box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
border-radius: 4px;
transition: all .1s linear;
&:hover {
transition: all .1s linear;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
color: #41464f;
border-color: rgb(66, 129, 255);
background: #fafbfc;
}
}
</style>
</style>