From 5d745c2c8854d2c1e94e5ee9004d5219681f6d7c Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期五, 29 十二月 2023 11:02:50 +0800
Subject: [PATCH] 增加图片验证码和登录日志
---
admin-web/src/views/login/index.vue | 127 +++++++++++++++++++++++++++---------------
1 files changed, 81 insertions(+), 46 deletions(-)
diff --git a/admin-web/src/views/login/index.vue b/admin-web/src/views/login/index.vue
index f0a9ca2..bbec4a5 100644
--- a/admin-web/src/views/login/index.vue
+++ b/admin-web/src/views/login/index.vue
@@ -52,24 +52,20 @@
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/></span>
</el-form-item>
-<!-- <el-form-item prop="code" class="captcha" v-if="loginForm.verifyType==='code' && captchaEnabled">-->
-<!-- <div class="captcha">-->
-<!-- <el-input-->
-<!-- v-model.trim="loginForm.code"-->
-<!-- style="width: 218px"-->
-<!-- prefix-icon="el-icon-message"-->
-<!-- placeholder="楠岃瘉鐮�"-->
-<!-- type="text"-->
-<!-- tabindex="3"-->
-<!-- autocomplete="off"-->
-<!-- />-->
-<!-- <div class="imgs" @click="getCode()">-->
-<!-- <!– <img :src="captchatImg" />–>-->
-<!-- <img :src="codeUrl"/>-->
-<!-- <span v-show="showCaptchatImg">宸插け鏁�</span>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </el-form-item>-->
+ <el-form-item prop="code" class="captcha" v-if="loginForm.verifyType==='code' && captchaEnabled">
+ <el-input
+ v-model.trim="loginForm.code"
+ style="width: 218px"
+ placeholder="楠岃瘉鐮�"
+ type="text"
+ tabindex="3"
+ autocomplete="off"
+ />
+ <div class="imgs" @click="getCode()">
+ <img :src="codeUrl"/>
+ <span v-show="showCaptchatImg">宸插け鏁�</span>
+ </div>
+ </el-form-item>
<el-button
id="loginBtn"
:loading="loading"
@@ -127,18 +123,13 @@
},
},
loginForm: {
- account: 'jmy123456', // admin
- password: 'Adu_8097',
+ account: '', // admin
+ password: '',
// key: '',
uuid: '',
code: '',
loginType: 'user_pass', // 鐢ㄦ埛鍚嶃�佸瘑鐮佹柟寮忕櫥褰�
verifyType: 'code' // 'code': 楠岃瘉鐮� 'slide':婊戝潡 'jigsaw':鎷煎浘
- // captcha: {
- // captchaVerification: '',
- // secretKey: '',
- // token: '',
- // },
},
loginRules: {
account: [{required: true, trigger: 'blur', message: '璇疯緭鍏ョ敤鎴峰悕'}], // validator: validateUsername
@@ -154,7 +145,7 @@
disabled: false,
isWeixin: this.$wechat.isWeixin(),
// 楠岃瘉鐮佸紑鍏�
- captchaEnabled: true
+ captchaEnabled: false
};
},
components: {},
@@ -272,7 +263,7 @@
if (this.loginForm.verifyType === 'code') {
getCodeImg().then(data => {
this.captchaEnabled = data.captchaEnabled === undefined ? true : data.captchaEnabled;
- console.log("captchaEnabled = " + this.captchaEnabled);
+
if (this.captchaEnabled) {
this.codeUrl = "data:image/jpeg;base64," + data.img;
}
@@ -328,16 +319,20 @@
color: $cursor;
}
}
+
.flex-1 {
flex: 1;
}
+
.min-1200 {
min-width: 1200px;
}
+
/* reset element-ui css */
.login-container {
- padding:50px;
+ padding: 50px;
line-height: 54px;
+
.el-form-item__content {
display: flex;
flex: 1;
@@ -347,18 +342,20 @@
background-color: #F1F3F5;
border-radius: 4px;
}
+
.el-input {
flex: 1;
margin-left: 6px;
position: relative;
background-color: #F1F3F5;
top: 3px;
+
input {
border: none;
padding: 0;
font-size: 16px;
line-height: 54px;
- background: #F1F3F5;
+ // background: #F1F3F5;
color: #333333;
}
}
@@ -366,9 +363,34 @@
</style>
<style lang="scss" scoped>
+.captcha {
+ display: flex;
+ align-items: flex-start;
+}
+
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
+.imgs {
+ position: relative;
+ height: 36px;
+ cursor: pointer;
+
+ img {
+ height: 100%;
+ }
+
+ span {
+ width: 84px;
+ line-height: 36px;
+ display: inline-block;
+ background: rgba(0, 0, 0, 0.4);
+ position: absolute;
+ left: 0;
+ color: #fff;
+ }
+}
+
.login-container {
height: 100%;
width: 100%;
@@ -377,45 +399,53 @@
background-size: cover;
position: relative;
}
-.school-logo{
+
+.school-logo {
position: absolute;
- top:30px;
+ top: 30px;
left: 40px;
}
-.form-main{
+
+.form-main {
background-color: #FFFFFF;
overflow: hidden;
border-radius: 8px;
}
->>>.el-button{
+
+> > > .el-button {
font-size: 16px;
}
-.logo-name{
- width: 336px;
- height: 51px;
+
+.logo-name {
margin-bottom: 30px;
}
-.logo-lf{
- width:100%;
+
+.logo-lf {
+ width: 100%;
}
-.login-box{
- padding:100px;
- .title{
+
+.login-box {
+ padding: 100px;
+
+ .title {
font-size: 22px;
font-weight: bold;
}
- .f-lable{
+
+ .f-lable {
line-height: 20px;
margin-bottom: 10px;
font-size: 14px;
color: #333333;
}
}
+
.w1050 {
width: 1050px;
margin: 0 auto;
overflow: hidden;
}
+
.login-btn {
width: 100%;
height: 45px;
@@ -424,11 +454,13 @@
color: #FFFFFF;
background-color: #0d997c;
}
+
.logo-txt {
position: absolute;
top: 5%;
left: 2%;
}
+
.txtBox {
color: #fff;
opacity: 0.7;
@@ -441,24 +473,27 @@
line-height: 30px;
width: 610px;
}
-.show-pwd{
+
+.show-pwd {
position: relative;
- top:5px;
+ top: 5px;
right: 5px;
cursor: pointer;
}
+
.td-outer-wrapper {
width: 1200px !important;
margin: 0 auto !important;
}
+
@media screen and(max-width: 1400px) {
.w1050 {
width: 850px;
margin: 0 auto;
overflow: hidden;
}
- .login-box{
- padding:40px;
+ .login-box {
+ padding: 40px;
}
}
</style>
--
Gitblit v1.9.1