From 7e460156de73171f9660ce48f80703e79f8b478d Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期六, 14 六月 2025 11:48:26 +0800
Subject: [PATCH] 初始化提交
---
src/views/login/index.vue | 264 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 164 insertions(+), 100 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 238a78d..1dc390b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -4,65 +4,71 @@
<div class="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
- <div>
- |
- </div>
<div class="logo-title">
- 涓ぉ绉戞妧WMS绯荤粺
+ WMS绯荤粺
</div>
</div>
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-
- <div class="title-container">
- <div>
- <div class="title">绯荤粺鐧诲綍</div>
- <div class="scan-icon">灏忓浘鏍�</div>
+ <div class="logo-main">
+ <div class="main-img">
+ <img src="@/assets/images/loginbg.png" alt="">
+ </div>
+ <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> -->
+ <el-form ref="loginForm" :status-icon="true" :model="loginForm" class="login-form" auto-complete="on" label-position="left">
+ <div v-show="!showCode" class="title-container">
+ <div>
+ <div class="title">鐧诲綍</div>
+ <div class="scan-icon iconfont icon-saoyisao" />
+ </div>
</div>
- </div>
+ <el-form-item v-show="!showCode" size="size" prop="username">
+ <span class="svg-container">
+ <i class="el-icon-user" />
+ </span>
+ <el-input
+ ref="username"
+ v-model.number="loginForm.username"
+ size="mini"
+ placeholder="璐﹀彿"
+ name="username"
- <el-form-item prop="username">
- <span class="svg-container">
- <svg-icon icon-class="user" />
- </span>
- <el-input
- ref="username"
- v-model="loginForm.username"
- placeholder="Username"
- name="username"
- type="text"
- tabindex="1"
- auto-complete="on"
- />
- </el-form-item>
+ 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="Password"
- name="password"
- tabindex="2"
- auto-complete="on"
- @keyup.enter.native="handleLogin"
- />
- <span class="show-pwd" @click="showPwd">
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
+ <el-form-item v-show="!showCode" size="size" prop="password">
+ <span class="svg-container">
+ <i class="el-icon-lock" />
+ </span>
+ <el-input
+ :key="passwordType"
+ ref="password"
+ v-model="loginForm.password"
+ size="mini"
+ :type="passwordType"
+ placeholder="瀵嗙爜"
+ name="password"
+ show-password
+ tabindex="2"
+ auto-complete="on"
+ @keyup.enter.native="handleLogin"
+ />
+ <span class="show-pwd" @click="showPwd">
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ </span>
+ </el-form-item>
- <el-form-item>
- <el-checkbox v-model="checked">鑷姩鐧诲綍</el-checkbox>
- <el-checkbox v-model="checked">蹇樿瀵嗙爜</el-checkbox>
- </el-form-item>
- <div class="login">
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">鐧诲綍</el-button>
- </div>
- </el-form>
+ <el-form-item>
+ <div v-show="!showCode" class="login">
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">鐧诲綍</el-button>
+ </div>
+ </el-form-item>
+
+ <div v-show="showCode" class="code">
+ <img src="../../assets/images/code.png">
+ </div>
+ </el-form>
+ </div>
</div>
</template>
@@ -73,23 +79,28 @@
name: 'Login',
data() {
const validateUsername = (rule, value, callback) => {
- if (!validUsername(value)) {
- callback(new Error('璇疯緭鍏ユ纭殑璐﹀彿锛�'))
+ const reg = /^(?=.*\d).{6,11}$/
+ if (!reg.test(value)) {
+ callback(new Error('璐﹀彿鐢�6-10浣嶆暟瀛楃粍鎴愶紝璇疯緭鍏ユ纭殑璐﹀彿锛�'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
- if (value.length < 6) {
- callback(new Error('璇疯緭鍏�6浣嶅瘑鐮侊紒'))
+ // let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
+ // let reg = /^(?![0-9]+$)(?![A-Z]+$)(?![a-z]+$)[0-9A-Za-z]{6,12}$/
+
+ const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,12}$/
+ if (!reg.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鏄敱6-12浣嶅寘鍚ぇ灏忓啓瀛楁瘝锛屾暟瀛楃粍鍚�'))
} else {
callback()
}
}
return {
loginForm: {
- username: 'admin',
- password: '111111'
+ username: '',
+ password: ''
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -97,7 +108,8 @@
},
loading: false,
passwordType: 'password',
- redirect: undefined
+ redirect: undefined,
+ showCode: false
}
},
watch: {
@@ -109,6 +121,9 @@
}
},
methods: {
+ openCode() {
+ this.showCode = true
+ },
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
@@ -120,32 +135,35 @@
})
},
handleLogin() {
- this.$refs.loginForm.validate(valid => {
- if (valid) {
- this.loading = true
- this.$store.dispatch('user/login', this.loginForm).then(() => {
- this.$router.push({ path: this.redirect || '/' })
- this.loading = false
- }).catch(() => {
- this.loading = false
- })
- } else {
- console.log('error submit!!')
- return false
- }
+ console.log('寮�濮嬬櫥褰�')
+ // debugger
+ console.log(this)
+ this.loading = true
+ this.$store.dispatch('user/login', this.loginForm).then((res) => {
+ console.log(res)
+ this.$router.push({ path: this.redirect || '/' })
+ this.loading = false
+ }).catch(() => {
+ this.loading = false
})
}
}
}
</script>
-<style lang="scss">
-
+<style lang="scss" >
+#app .login-container .el-input input:-webkit-autofill {
+ box-shadow: none !important;
+}
/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
.login{
text-align: center;
+ .el-button{
+ background: #285E77 ;
+ border: 2px solid #8AA0AC;
+ }
}
$bg:#283443;
$light_gray:#fff;
@@ -161,7 +179,7 @@
.login-container {
.el-input {
display: inline-block;
- height: 47px;
+ height: 30px;
width: 85%;
input {
@@ -169,9 +187,9 @@
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
- padding: 12px 5px 12px 15px;
+ padding: 6px 2px 6px 7px;
color: $cursor;
- height: 47px;
+ height: 30px;
// caret-color: $cursor;
&:-webkit-autofill {
@@ -186,6 +204,10 @@
background: rgba(255, 255, 255);
border-radius: 5px;
color: #454545;
+ margin-bottom: 40px;
+ margin-right: 40px;
+ margin-left: 40px;
+ height: 40px;
&:nth-child(4){
// width: 100%;
// display: flex;
@@ -205,44 +227,81 @@
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
+::v-deep .el-form-item__content{
+ .svg-container{
+ text-align: center;
+ line-height: 32px;
+ }
+ // display: flex;
+}
.login-container {
+ position: relative;
min-height: 100%;
width: 100%;
- background: url("../../assets/images/loginbg.png");
+ background: #134666;
background-size: cover;
overflow: hidden;
.login-logo{
- position: absolute;
- width: 520px;
- left: 60%;
- top: 25%;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 0;
color: #fff;
- font-size: 30px;
+ font-size: 20px;
display: flex;
align-items: center;
- justify-content: space-between;
+ padding: 10px;
+ background: #0E3757;
.logo{
img{
- width: 150px;
- height: 50px;
+ width: 80px;
+ height: 30px;
}
}
+ .logo-title{
+ margin-left: 20px;
+ }
}
- .login-form {
+ .logo-main{
position: absolute;
- background: #fff;
- border-radius: 25px;
- width: 520px;
- height: 370px;
- padding: 40px;
- max-width: 100%;
+ left: 50%;
top: 50%;
- transform: translateY(-50%);
- left: 60%;
+ transform: translate(-50%,-50%);
+ width: 1000px;
+ height: 400px;
+ border-radius: 25px;
+ overflow:hidden;
+ display: flex;
+ // border: 2px solid red;
+ .main-img{
+ // width: 550px;
+ // height: 300px;
+ flex: 1;
+ height: 400px;
+ text-align: center;
+ background: #0D3155;
+ img{
+ width: 400px;
+ height: 400px;
+ }
+ }
+ .login-form {
+ background: #285E77;
+ width: 450px;
+ height: 400px;
+ padding: 30px;
overflow: hidden;
+ color: #fff;
+ .code{
+ text-align: center;
+ img{
+ width: 200px;
+ height: 200px;
+ }
+ }
+ }
}
-
.tips {
font-size: 14px;
color: #fff;
@@ -256,7 +315,7 @@
}
.svg-container {
- padding: 6px 5px 6px 15px;
+ padding: 3px 2px 3px 7px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
@@ -265,20 +324,25 @@
.title-container {
position: relative;
-
+ // height: 70px;
+ // line-height: 70px;
+ margin-bottom: 40px;
.title {
+ height: 30px;
+ line-height: 30px;
position: relative;
// position: absolute;
left: 50%;
transform: translate(-50%);
font-size: 20px;
- color: #454545;
- margin: 0px auto 24px auto;
+ color: #fff;
+ margin: 0px auto 0 auto;
display: inline-block;
// font-weight: bold;
}
.scan-icon{
float: right;
+ font-size: 30px;
}
}
--
Gitblit v1.9.3