From d026c140cb1ed99abecfd4eeade8036ca2001b98 Mon Sep 17 00:00:00 2001
From: gongjinbao <gongjinbao@163.com>
Date: 星期三, 08 一月 2025 16:30:23 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer
---
src/view/Login.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 155 insertions(+), 5 deletions(-)
diff --git a/src/view/Login.vue b/src/view/Login.vue
index 40bb06b..725a2ca 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,23 +1,173 @@
<template>
<div class="content">
- 1
+ <div class="login_box">
+ <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
+ <div class="my--33 fs--28 lh--28 font-bold color1">客户登录</div>
+ <div class="flex a-center px--14 py--19 text_box">
+ <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
+ <el-input v-model="account" placeholder="请输入邮箱" />
+ </div>
+ <div class="flex a-center mt--16 px--14 py--19 text_box">
+ <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
+ <el-input show-password v-model="pwd" placeholder="请输入密码" />
+ </div>
+ <div class="flex a-center mt--16 pl--14 text_box">
+ <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
+ <el-input v-model="code" placeholder="请输入验证码" />
+ <div class="code pointer">{{ codeStr }}</div>
+ </div>
+ <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录</div>
+ </div>
</div>
</template>
<script>
+import { generateVerificationCode } from '@/utils/utils';
+import { login } from './login'
+import CryptoJS from 'crypto-js';
export default {
components: {},
props: {},
data() {
return {
+ account: 'c106@264ej217.com.cn',
+ pwd: '123456',
+ code: '',
+ codeStr: '',
};
},
- computed: {},
- watch: {},
- created() {},
+ created() {
+ this.codeStr = generateVerificationCode()
+ },
mounted() { },
- methods: {},
+ methods: {
+ loginFun() {
+ if (!this.account) {
+ this.$message({
+ message: '请输入邮箱',
+ type: 'warning'
+ });
+ return
+ }
+ const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ if (!emailPattern.test(this.account)) {
+ this.$message({
+ message: '请输入有效的邮箱地址',
+ type: 'warning'
+ });
+ return;
+ }
+ if (!this.pwd) {
+ this.$message({
+ message: '请输入密码',
+ type: 'warning'
+ });
+ return
+ }
+ if (!this.code) {
+ this.$message({
+ message: '请输入验证码',
+ type: 'warning'
+ });
+ return
+ }
+ if (!this.codeStr.match(new RegExp(this.code, "i"))) {
+ this.$message({
+ message: '验证码错误',
+ type: 'warning'
+ });
+ this.codeStr = generateVerificationCode()
+ return
+ }
+ login({
+ account: this.account,
+ pwd: CryptoJS.HmacMD5(this.pwd, 'password').toString(
+ CryptoJS.enc.Hex,
+ ),
+ type: 2
+ }).then((result) => {
+ localStorage.setItem('extra', result.data.extra);
+ localStorage.setItem('userInfo', JSON.stringify(result.data));
+ this.$store.commit('SET_USERINFO', result.data);
+ this.$router.push({ path: '/home' });
+ }).catch(() => {
+ this.code = ''
+ this.codeStr = generateVerificationCode()
+ });
+ }
+ },
};
</script>
<style scoped lang="less">
+.bgcolor1 {
+ background: #014099;
+ color: #FFFFFF;
+}
+
+.color1 {
+ color: #3B3F56;
+}
+
+.content {
+ position: relative;
+ background-image: url("../assets/img/loginBg.png");
+ background-size: 100% 100%;
+ height: 100%;
+ width: 100%;
+}
+
+.login_box {
+ position: absolute;
+ top: 50%;
+ right: 178px;
+ transform: translateY(-50%);
+ width: 535px;
+ height: 612px;
+ background: #FFFFFF;
+ border-radius: 11px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .text_box {
+ width: 352px;
+ background: #F9F9F9;
+ border-radius: 6px;
+ border: 1px solid #DFDFDF;
+
+ .code {
+ padding: 19px 0;
+ text-align: center;
+ flex-shrink: 0;
+ width: 80px;
+ height: 100%;
+ background: #014099;
+ border-radius: 6px;
+ font-weight: 400;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 16px;
+ }
+ }
+
+
+ ::v-deep .el-input {
+ .el-input__inner {
+ background-color: transparent;
+ border: unset;
+ padding: 0;
+ height: unset;
+ line-height: 16px;
+ }
+
+ .el-input__inner::placeholder {
+ font-size: 16px;
+ font-weight: 400;
+ }
+
+ .el-input__icon {
+ line-height: unset;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.7.1