|
@@ -1,8 +1,5 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="system-layer"
|
|
|
- :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }"
|
|
|
- >
|
|
|
+ <div class="system-layer" :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }">
|
|
|
<div class="l-content">
|
|
|
<div class="login-layer">
|
|
|
<div class="content">
|
|
@@ -30,72 +27,61 @@
|
|
|
<img class="code" src="/image/pic_camera@2x.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-form class="panel login" :model="form" @submit.stop>
|
|
|
- <h2>欢迎登录</h2>
|
|
|
- <el-form-item class="panel-form-item">
|
|
|
- <p class="err-info">{{ verification.phone }}</p>
|
|
|
- <el-input
|
|
|
- :maxlength="11"
|
|
|
- v-model.trim="form.phone"
|
|
|
- placeholder="手机号"
|
|
|
- @keydown.enter="submitClick"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item class="panel-form-item">
|
|
|
- <p class="err-info">{{ verification.psw }}</p>
|
|
|
- <el-input
|
|
|
- v-model="form.psw"
|
|
|
- :maxlength="16"
|
|
|
- placeholder="密码"
|
|
|
- :type="flag ? 'text' : 'password'"
|
|
|
- @keydown.enter="submitClick"
|
|
|
- >
|
|
|
- <template v-slot:suffix>
|
|
|
- <el-icon :size="20" @click="flag = !flag" class="icon-style">
|
|
|
- <View v-if="flag" />
|
|
|
- <Hide v-else />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="panel-form-item" style="user-select: none">
|
|
|
- <DragVerify
|
|
|
- ref="verify"
|
|
|
- :class="{ passing: isPassing2 }"
|
|
|
- :isPassing="isPassing2"
|
|
|
- @passcallback="isPassing2 = true"
|
|
|
- handlerIcon="el-icon-d-arrow-right"
|
|
|
- background="#D9D9D9"
|
|
|
- textColor="#333333"
|
|
|
- successIcon="el-icon-circle-check"
|
|
|
- :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
|
|
|
- successText="验证通过"
|
|
|
- :width="400"
|
|
|
- >
|
|
|
- <template v-slot:handlerIcon>
|
|
|
- <el-icon
|
|
|
- :size="20"
|
|
|
- style="
|
|
|
+ <!-- login right panel -->
|
|
|
+ <template v-if="!isShowRegister">
|
|
|
+ <el-form class="panel login" :model="form" @submit.stop>
|
|
|
+ <h2>欢迎登录</h2>
|
|
|
+ <el-form-item class="panel-form-item">
|
|
|
+ <p class="err-info">{{ verification.phone }}</p>
|
|
|
+ <el-input :maxlength="11" v-model.trim="form.phone" placeholder="手机号"
|
|
|
+ @keydown.enter="submitClick"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="panel-form-item">
|
|
|
+ <p class="err-info">{{ verification.psw }}</p>
|
|
|
+ <el-input v-model="form.psw" :maxlength="16" placeholder="密码" :type="flag ? 'text' : 'password'"
|
|
|
+ @keydown.enter="submitClick">
|
|
|
+ <template v-slot:suffix>
|
|
|
+ <el-icon :size="20" @click="flag = !flag" class="icon-style">
|
|
|
+ <View v-if="flag" />
|
|
|
+ <Hide v-else />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item class="panel-form-item" style="user-select: none">
|
|
|
+ <DragVerify ref="verify" :class="{ passing: isPassing2 }" :isPassing="isPassing2"
|
|
|
+ @passcallback="isPassing2 = true" handlerIcon="el-icon-d-arrow-right" background="#D9D9D9"
|
|
|
+ textColor="#333333" successIcon="el-icon-circle-check" :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
|
|
|
+ successText="验证通过" :width="400">
|
|
|
+ <template v-slot:handlerIcon>
|
|
|
+ <el-icon :size="20" style="
|
|
|
width: 20px;
|
|
|
display: inline-block;
|
|
|
line-height: 20px;
|
|
|
margin-top: 8px;
|
|
|
- "
|
|
|
- >
|
|
|
- <DArrowRight v-if="!isPassing2" />
|
|
|
- <SuccessFilled v-else />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </DragVerify>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item class="panel-form-item">
|
|
|
- <el-button type="primary" class="fill submit" @click="submitClick"
|
|
|
- >登录</el-button
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ ">
|
|
|
+ <DArrowRight v-if="!isPassing2" />
|
|
|
+ <SuccessFilled v-else />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </DragVerify>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item class="panel-form-item">
|
|
|
+ <el-button type="primary" class="fill submit" @click="submitClick">登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div class="register">
|
|
|
+ <span @click="handleForgetPassword"> 忘记密码</span> |
|
|
|
+ <span @click="handleRegister"> 单位注册</span>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <register></register>
|
|
|
+ </template>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -110,6 +96,7 @@ import { ElMessage } from "element-plus";
|
|
|
import { router } from "@/router";
|
|
|
import qrCode from "qrcode";
|
|
|
import DragVerify from "@/components/drag-verify.vue";
|
|
|
+import register from '@/view/register/register.vue'
|
|
|
|
|
|
const PHONE = {
|
|
|
REG: /^1(3|4|5|6|7|8|9)\d{9}$/,
|
|
@@ -120,6 +107,7 @@ const PHONE = {
|
|
|
const flag = ref(false);
|
|
|
const verify = ref<any>();
|
|
|
const isPassing2 = ref(false);
|
|
|
+const isShowRegister = ref(false);
|
|
|
// 表单
|
|
|
const form = reactive({
|
|
|
phone: import.meta.env.DEV ? "13800000001" : "",
|
|
@@ -187,6 +175,17 @@ const submitClick = async () => {
|
|
|
verify.value.reset();
|
|
|
isPassing2.value = false;
|
|
|
};
|
|
|
+
|
|
|
+// 忘记密码
|
|
|
+const handleForgetPassword = () => {
|
|
|
+
|
|
|
+}
|
|
|
+// 注册
|
|
|
+const handleRegister = () => {
|
|
|
+ isShowRegister.value = true
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -194,6 +193,7 @@ const submitClick = async () => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.content {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
@@ -204,6 +204,7 @@ const submitClick = async () => {
|
|
|
height: 100vh;
|
|
|
padding: 0 50px 0 50px;
|
|
|
}
|
|
|
+
|
|
|
.info {
|
|
|
color: #000;
|
|
|
flex: none;
|
|
@@ -218,10 +219,12 @@ const submitClick = async () => {
|
|
|
|
|
|
.top {
|
|
|
margin-top: 50px;
|
|
|
+
|
|
|
img {
|
|
|
width: 142px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.bottom {
|
|
|
height: 470px;
|
|
|
display: flex;
|
|
@@ -257,13 +260,16 @@ const submitClick = async () => {
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.e-code {
|
|
|
width: 128px;
|
|
|
margin-top: 13px;
|
|
|
position: relative;
|
|
|
- > img {
|
|
|
+
|
|
|
+ >img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.e-logo {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
@@ -274,6 +280,7 @@ const submitClick = async () => {
|
|
|
padding: 7px;
|
|
|
border-radius: 4px;
|
|
|
text-align: center;
|
|
|
+
|
|
|
img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
@@ -281,6 +288,7 @@ const submitClick = async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
p:last-child {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
@@ -291,15 +299,18 @@ const submitClick = async () => {
|
|
|
|
|
|
.center {
|
|
|
text-align: center;
|
|
|
+
|
|
|
h1 {
|
|
|
color: #781c0b;
|
|
|
font-size: 48px;
|
|
|
line-height: 3.7rem;
|
|
|
margin-bottom: 0.7rem;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
width: 100%;
|
|
|
margin-top: 40px;
|
|
|
+
|
|
|
img {
|
|
|
width: 320px;
|
|
|
}
|
|
@@ -312,14 +323,17 @@ const submitClick = async () => {
|
|
|
pointer-events: none;
|
|
|
height: 153px;
|
|
|
min-width: 1200px;
|
|
|
+
|
|
|
img {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.fill {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.login {
|
|
|
width: 400px;
|
|
|
// padding: 40px 40px 30px;
|
|
@@ -344,6 +358,7 @@ const submitClick = async () => {
|
|
|
.panel-form-item {
|
|
|
padding-left: 0;
|
|
|
padding-right: 0;
|
|
|
+
|
|
|
.icon-style {
|
|
|
margin-right: 14px;
|
|
|
font-size: 20px;
|
|
@@ -379,6 +394,7 @@ const submitClick = async () => {
|
|
|
background: no-repeat left bottom;
|
|
|
background-size: auto 100%;
|
|
|
}
|
|
|
+
|
|
|
.l-content {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
@@ -386,6 +402,17 @@ const submitClick = async () => {
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
+
|
|
|
+.register {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
@@ -406,10 +433,12 @@ const submitClick = async () => {
|
|
|
.login .code-form-item .el-input__inner {
|
|
|
flex: 1;
|
|
|
}
|
|
|
+
|
|
|
.login .code-form-item .el-input-group__append,
|
|
|
.login .code-form-item .el-input__inner {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+
|
|
|
input[type="password"]::-ms-reveal {
|
|
|
display: none;
|
|
|
}
|
|
@@ -488,6 +517,7 @@ input[type="password"]::-ms-reveal {
|
|
|
.panel-form-item .el-form-item__label {
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
+
|
|
|
.e-code img {
|
|
|
width: 100%;
|
|
|
}
|