848 lines
20 KiB
Vue
848 lines
20 KiB
Vue
<template>
|
||
<div class="form">
|
||
<div class="container " :class="{'sign-up-mode':isLogin}" >
|
||
<div class="form-warp">
|
||
<div class="relative form-flex">
|
||
<div
|
||
class="forms-sumit"
|
||
:class="{ 'register-left': isLogin, 'register-rigth': !isLogin }"
|
||
>
|
||
<h2>注册</h2>
|
||
<p class="register" @click="setState(false)">
|
||
我有账号，点击登录
|
||
</p>
|
||
<el-form
|
||
v-if="!isMssages"
|
||
ref="registerRuleFormRef"
|
||
:model="register"
|
||
:rules="registerRules"
|
||
label-width="0px"
|
||
>
|
||
<el-form-item
|
||
style="margin-bottom: 0px"
|
||
prop="email"
|
||
class="app-form-center"
|
||
>
|
||
<div class="form-left">
|
||
邮箱
|
||
</div>
|
||
<el-input
|
||
v-model="register.email"
|
||
size="large"
|
||
type="text"
|
||
maxlength="50"
|
||
placeholder="请输入您的邮箱"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 0px"
|
||
prop="password"
|
||
class="app-form-center"
|
||
>
|
||
<div class="form-left">
|
||
密码
|
||
</div>
|
||
<el-input
|
||
v-model="register.password"
|
||
placeholder="请输入您的密码"
|
||
type="password"
|
||
autocomplete="off"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 0px"
|
||
prop="entryPassword"
|
||
class="app-form-center"
|
||
>
|
||
<div class="form-left">
|
||
确认密码
|
||
</div>
|
||
<el-input
|
||
v-model="register.entryPassword"
|
||
placeholder="请输入二次确认密码"
|
||
type="password"
|
||
autocomplete="off"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label=""
|
||
style="margin-bottom: 0px"
|
||
class="app-form-center"
|
||
prop="verify"
|
||
>
|
||
<div class="form-left">
|
||
验证码
|
||
</div>
|
||
<div class="verify">
|
||
<div>
|
||
<el-input
|
||
v-model="register.verify"
|
||
placeholder="请输入您的验证码"
|
||
size="large"
|
||
autocomplete="off"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<img src="/api/get/imgCode" alt="">
|
||
</div>
|
||
<div>换一张</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="agreement">
|
||
<div class="">
|
||
<!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
|
||
<div>
|
||
<el-checkbox v-model="register.agreement" />
|
||
我已阅读并同意“铜壶协议和隐私条款”
|
||
</div>
|
||
<div class="submit-btn" @click="onRegister">
|
||
注册
|
||
</div>
|
||
<div class="form-left">
|
||
<SvgIcon name="vx" height="36px" width="36px" />
|
||
</div>
|
||
<div class="Short-flex">
|
||
<span @click="setMssages(true)">短信快捷登录</span>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<MessageLogin v-if="isMssages" @account="setMssages(false)" />
|
||
</div>
|
||
<div
|
||
class="Propaganda forms-sumit"
|
||
:class="{
|
||
'bor-left Propaganda-right': isLogin,
|
||
'bor-right': !isLogin,
|
||
}"
|
||
>
|
||
<h2 title="Woody Quality">
|
||
Woody Quality
|
||
</h2>
|
||
<p>一站式测试平台</p>
|
||
<div class="form-img-svg">
|
||
<img v-show="isLogin" :src="loginSvg" class="image" alt="" />
|
||
<img v-show="!isLogin" :src="registerSvg" class="image" alt="" />
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 登录 -->
|
||
<div
|
||
class="forms-sumit"
|
||
:class="{ 'login-right': isLogin, 'login-index': !isLogin }"
|
||
>
|
||
<h2>登录</h2>
|
||
<p class="register" @click="setState(true)">
|
||
您还没有账号？点击创建
|
||
</p>
|
||
<el-form
|
||
v-if="!isMssages"
|
||
ref="loginRuleFormRef"
|
||
:rules="loginRules"
|
||
:model="form"
|
||
label-width="0px"
|
||
>
|
||
<el-form-item style="margin-bottom: 0px" class="app-form-center">
|
||
<div class="form-left">
|
||
账号
|
||
</div>
|
||
<el-input
|
||
v-model="form.name"
|
||
size="large"
|
||
type="text"
|
||
maxlength="50"
|
||
placeholder="请输入您的邮箱"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item style="margin-bottom: 0px" class="app-form-center">
|
||
<div class="form-left">
|
||
密码
|
||
</div>
|
||
<el-input
|
||
v-model="form.password"
|
||
placeholder="请输入您的密码"
|
||
autocomplete="off"
|
||
type="password"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label=""
|
||
style="margin-bottom: 0px"
|
||
class="app-form-center"
|
||
>
|
||
<div class="form-left">
|
||
验证码
|
||
</div>
|
||
<div class="verify">
|
||
<div>
|
||
<el-input
|
||
v-model="form.verify"
|
||
placeholder="请输入您的验证码"
|
||
size="large"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<img src="/api/get/imgCode" alt="">
|
||
</div>
|
||
<div>看不清</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<div class="">
|
||
<div class="submit-btn" @click="onSubmit">
|
||
登录
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<div class="form-left">
|
||
<SvgIcon name="vx" height="36px" width="36px" />
|
||
</div>
|
||
<div class="Short-flex">
|
||
<span @click="setMssages(true)">短信快捷登录</span><span>忘记密码？</span>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<MessageLogin v-if="isMssages" @account="setMssages(false)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-banner">
|
||
<img :src="banner" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {
|
||
reactive,
|
||
defineComponent,
|
||
ref,
|
||
toRefs,
|
||
unref,
|
||
getCurrentInstance
|
||
} from 'vue'
|
||
import { registerUserApi, ImageCodeApi } from '@/api/user'
|
||
import type { ElForm } from 'element-plus'
|
||
import MessageLogin from './message-Login.vue'
|
||
import registerSvg from "@/assets/svg/register.svg";
|
||
import loginSvg from "@/assets/svg/log.svg";
|
||
import banner from "@/assets/images/banner.png";
|
||
import {login} from "@/api/user";
|
||
import router, {addRoutes} from "@/router";
|
||
import {RouteLocationRaw, useRoute} from "vue-router";
|
||
import {ElMessage} from "element-plus";
|
||
import store from "@/store";
|
||
// import verify from './verify.png'
|
||
export default defineComponent({
|
||
components: {
|
||
MessageLogin
|
||
},
|
||
setup() {
|
||
const route = useRoute();
|
||
const { proxy }: any = getCurrentInstance()
|
||
const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||
const loginRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||
const formSubmit: any = reactive({
|
||
form: {
|
||
name: 'julimeng',
|
||
password: '123456789',
|
||
verify: '',
|
||
imgVerify: null
|
||
},
|
||
register: {
|
||
email: '',
|
||
password: '',
|
||
entryPassword: '',
|
||
agreement: false,
|
||
verify: '',
|
||
imgVerify: null
|
||
}
|
||
})
|
||
// 注册验证
|
||
const registerRules = reactive({
|
||
email: [
|
||
// { required: true, message: '邮箱不能为空', trigger: 'blur' },
|
||
{
|
||
trigger: 'blur',
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
console.log(rule, value, callback)
|
||
|
||
if (!value) {
|
||
return callback(new Error('请填写您的email'))
|
||
}
|
||
callback()
|
||
}
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('请填写您的密码'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
entryPassword: [
|
||
{
|
||
// required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (value !== formSubmit.register.password) {
|
||
return callback(new Error('两次密码不一致'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
verify: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: '请填写验证码'
|
||
}
|
||
]
|
||
})
|
||
// 登录验证
|
||
const loginRules = reactive({
|
||
name: [
|
||
{ required: true, message: '用户名不能为空', trigger: 'blur' },
|
||
{
|
||
trigger: 'blur',
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
console.log(rule, value, callback)
|
||
|
||
if (!value) {
|
||
return callback(new Error('请填写您的用户名'))
|
||
}
|
||
callback()
|
||
}
|
||
}
|
||
],
|
||
password: [
|
||
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: string, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('请填写您的密码！'))
|
||
}
|
||
if(value.length<=6){
|
||
return callback(new Error('密码不符合规则！'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
// verify: [
|
||
// {
|
||
// required: true,
|
||
// trigger: 'blur',
|
||
// message: '请填写验证码'
|
||
// }
|
||
// ]
|
||
})
|
||
const isLogin: any = ref(true)
|
||
const isMssages: any = ref(false)
|
||
const setState = (state: Boolean) => {
|
||
isLogin.value = state
|
||
}
|
||
const setMssages = (state: Boolean) => {
|
||
isMssages.value = state
|
||
}
|
||
const onSubmit = () => {
|
||
const formWrap = unref<any>(loginRuleFormRef)
|
||
if (!formWrap) return
|
||
// 验证成功
|
||
formWrap.validate((valid: boolean) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
store
|
||
.dispatch("user/login", {
|
||
type: "user",
|
||
password: formSubmit.form.password,
|
||
name: formSubmit.form.name,
|
||
// code: formSubmit.register.code
|
||
})
|
||
.then(async () => {
|
||
ElMessage.success({
|
||
message: "登录成功",
|
||
type: "success",
|
||
showClose: true,
|
||
duration: 1000,
|
||
});
|
||
await addRoutes();
|
||
await router.push(
|
||
(route.query.redirect as RouteLocationRaw) || "/"
|
||
);
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
|
||
if (!formEl) return
|
||
formEl.validate((valid) => {
|
||
if (valid) {
|
||
console.log('submit!')
|
||
} else {
|
||
console.log('error submit!')
|
||
return false
|
||
}
|
||
})
|
||
}
|
||
const onRegister = () => {
|
||
if (!formSubmit.register.agreement) {
|
||
proxy.$message.error('请先勾选协议', 2000)
|
||
return
|
||
}
|
||
const formWrap = unref<any>(registerRuleFormRef)
|
||
if (!formWrap) return
|
||
// 验证成功
|
||
formWrap.validate((valid: boolean) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
registerUserApi({
|
||
password_1: formSubmit.register.password,
|
||
password_2: formSubmit.register.entryPassword,
|
||
email: formSubmit.register.email,
|
||
agree: formSubmit.register.agreement
|
||
}).then((res: any) => {
|
||
console.log(res)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
console.log(formSubmit.form.verify)
|
||
|
||
return {
|
||
onSubmit,
|
||
onRegister,
|
||
isLogin,
|
||
setState,
|
||
isMssages,
|
||
setMssages,
|
||
registerRuleFormRef,
|
||
loginRuleFormRef,
|
||
registerRules,
|
||
loginRules,
|
||
registerSvg,
|
||
loginSvg,
|
||
banner,
|
||
...toRefs(formSubmit)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.form {
|
||
// width: 460px;
|
||
&-left {
|
||
text-align: left;
|
||
width: 309px;
|
||
// margin: 10px 0;
|
||
}
|
||
}
|
||
.register {
|
||
text-align: left;
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
padding-left: 75px;
|
||
}
|
||
|
||
.app-form-center {
|
||
// margin-left: -100px;
|
||
}
|
||
.container {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
//width: 100%;
|
||
overflow: hidden;
|
||
margin: 0 20px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
}
|
||
.form-banner{
|
||
z-index: 9;
|
||
display: inline-block;
|
||
img{
|
||
width: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.container:before {
|
||
content: "";
|
||
position: absolute;
|
||
height: 2000px;
|
||
width: 2000px;
|
||
top: -10%;
|
||
right: 48%;
|
||
transform: translateY(-50%);
|
||
background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
|
||
transition: 1.8s ease-in-out;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
.sign-up-mode::before {
|
||
transform: translate(100%, -50%);
|
||
}
|
||
.forms-sumit {
|
||
width: 360px;
|
||
transition: transform 1s;
|
||
background: #fff;
|
||
}
|
||
.login-right {
|
||
// transition: all 1s;
|
||
transform: translate(-100%, 0%);
|
||
visibility: hidden;
|
||
}
|
||
.register-rigth {
|
||
visibility: hidden;
|
||
transform: translate(100%, 0%);
|
||
}
|
||
.register-left {
|
||
z-index: 9999;
|
||
transform: translate(0%, 0%);
|
||
// transition: all 1s;
|
||
}
|
||
.verify {
|
||
width: 100%;
|
||
// display: flex;
|
||
> div {
|
||
display: inline-block;
|
||
}
|
||
> div:first-child {
|
||
width: 150px;
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
vertical-align: middle;
|
||
border: 1px solid #333;
|
||
}
|
||
> div:nth-child(3) {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.bor-right {
|
||
border-right: 1px solid #adbae1;
|
||
}
|
||
.bor-left {
|
||
border-left: 1px solid #adbae1;
|
||
}
|
||
.login-index {
|
||
z-index: 99;
|
||
transform: translate(0%, 0%);
|
||
background: #fff;
|
||
}
|
||
.form-flex {
|
||
display: flex;
|
||
}
|
||
.Short-flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> span {
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
.Propaganda-right {
|
||
left: 50% !important;
|
||
}
|
||
.Propaganda {
|
||
width: 360px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
background: #fff;
|
||
z-index: 999999;
|
||
transition: all 1s;
|
||
}
|
||
.form-warp {
|
||
width: 720px;
|
||
//position: absolute;
|
||
z-index: 5;
|
||
padding: 20px;
|
||
//left: 10%;
|
||
//top: 50%;
|
||
//transform: translate(00%, -50%);
|
||
// display: grid;
|
||
box-shadow: -10px 10px 10px rgb(218 221 231 / 70%);
|
||
border-right: 0.5px solid #adbae1;
|
||
border-top: 0.5px solid #adbae1;
|
||
max-height: 600px;
|
||
background: #fff;
|
||
border-radius: 25px;
|
||
grid-template-columns: 1fr;
|
||
transition: 1s 0.7s ease-in-out;
|
||
display: flex;
|
||
}
|
||
.form-warp form {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
/* 将两个 form 布局在 grid 同一位置 */
|
||
grid-row: 1 / 2;
|
||
grid-column: 1 / 2;
|
||
transition: all 0.2s 0.7s;
|
||
opacity: 1;
|
||
z-index: 4;
|
||
}
|
||
.form-title {
|
||
color: #6266f5;
|
||
}
|
||
.form-warp .sign-up-form {
|
||
opacity: 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
.sign-up-mode .sign-in-form {
|
||
opacity: 0;
|
||
z-index: 3;
|
||
}
|
||
.sign-up-mode .sign-up-form {
|
||
opacity: 1;
|
||
z-index: 4;
|
||
}
|
||
input,
|
||
.submit-btn {
|
||
min-width: 50px;
|
||
width: 50px;
|
||
outline: none;
|
||
padding: 12px 30px;
|
||
line-height: 1;
|
||
font-size: 16px;
|
||
border-radius: 60px;
|
||
color: #333;
|
||
background-color: #6267f5;
|
||
border: none;
|
||
&:hover {
|
||
background-color: #999cf8;
|
||
}
|
||
}
|
||
input::placeholder {
|
||
color: #cccc;
|
||
}
|
||
.submit-btn {
|
||
margin: 0 auto;
|
||
background-color: #6266f5;
|
||
color: #fff;
|
||
text-align: center;
|
||
min-width: 150px;
|
||
font-size: initial;
|
||
font-weight: bold;
|
||
letter-spacing: 1.5px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
&:hover {
|
||
background-color: #999cf8;
|
||
}
|
||
}
|
||
|
||
.desc-warp {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.desc-warp-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
padding: 3rem 17% 2rem 12%;
|
||
z-index: 6;
|
||
}
|
||
/* 事件穿透 BEGIN */
|
||
.sign-in-desc {
|
||
pointer-events: none;
|
||
}
|
||
.sign-up-mode .sign-in-desc {
|
||
pointer-events: all;
|
||
}
|
||
.sign-up-mode .sign-up-desc {
|
||
pointer-events: none;
|
||
}
|
||
/* 事件穿透 END */
|
||
.content {
|
||
width: 100%;
|
||
transition: transform 0.9s ease-in-out;
|
||
transition-delay: 0.6s;
|
||
}
|
||
.sign-in-desc img,
|
||
.sign-in-desc .content {
|
||
transform: translateX(800px);
|
||
}
|
||
.sign-up-mode .sign-in-desc img,
|
||
.sign-up-mode .sign-in-desc .content {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.sign-up-mode .sign-up-desc img,
|
||
.sign-up-mode .sign-up-desc .content {
|
||
transform: translateX(-800px);
|
||
}
|
||
|
||
button {
|
||
outline: none;
|
||
padding: 6px 8px;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
border-radius: 30px;
|
||
border: 2px solid #fff;
|
||
background: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
button:active {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
img {
|
||
width: 100%;
|
||
display: block;
|
||
transition: transform 0.9s ease-in-out;
|
||
transition-delay: 0.5s;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media screen and (max-width: 870px) {
|
||
.container {
|
||
min-height: 800px;
|
||
height: 100vh;
|
||
}
|
||
.container::before {
|
||
width: 1500px;
|
||
height: 1500px;
|
||
transform: translateX(-50%);
|
||
left: 30%;
|
||
bottom: 68%;
|
||
right: initial;
|
||
top: initial;
|
||
transition: 2s ease-in-out;
|
||
}
|
||
.signin-signup {
|
||
width: 100%;
|
||
top: 95%;
|
||
transform: translate(-50%, -100%);
|
||
transition: 1s 0.8s ease-in-out;
|
||
}
|
||
.signin-signup,
|
||
.container.sign-up-mode .signin-signup {
|
||
left: 50%;
|
||
}
|
||
|
||
.sign-up-mode::before {
|
||
transform: translate(-50%, 100%);
|
||
bottom: 32%;
|
||
right: initial;
|
||
}
|
||
.form-warp {
|
||
// width: 100%;
|
||
top: 75%;
|
||
left: 50%;
|
||
transition: 1s 0.8s ease-in-out;
|
||
}
|
||
.sign-up-mode .left-panel .image,
|
||
.sign-up-mode .left-panel .content {
|
||
transform: translateY(-300px);
|
||
}
|
||
|
||
.sign-up-mode .right-panel .image,
|
||
.sign-up-mode .right-panel .content {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
.right-panel .image,
|
||
.right-panel .content {
|
||
transform: translateY(300px);
|
||
}
|
||
|
||
.sign-up-mode .signin-signup {
|
||
top: 5%;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.sign-up-mode .form-warp {
|
||
top: 25%;
|
||
left: 50%;
|
||
transform: translate(00%, 0);
|
||
}
|
||
img {
|
||
width: 200px;
|
||
transition: transform 0.9s ease-in-out;
|
||
transition-delay: 0.7s;
|
||
}
|
||
.desc-warp {
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 1fr 2fr 1fr;
|
||
}
|
||
.desc-warp-item {
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 2.5rem 8%;
|
||
grid-column: 1 / 2;
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 1630px){
|
||
.form-banner{
|
||
display: none;
|
||
}
|
||
}
|
||
/* 手机端*/
|
||
@media screen and (max-width: 1000px){
|
||
.Propaganda{
|
||
display: none;
|
||
}
|
||
.form-warp{
|
||
width: 360px;
|
||
}
|
||
.register-rigth{
|
||
display: none;
|
||
}
|
||
.login-index,.register-rigth{
|
||
transform: translate(0%, 0%) !important;
|
||
}
|
||
}
|
||
@media screen and (max-width: 570px) {
|
||
.container::before {
|
||
bottom: 72%;
|
||
left: 50%;
|
||
}
|
||
img {
|
||
display: none;
|
||
}
|
||
}
|
||
.form-img-svg{
|
||
padding: 0 15px;
|
||
margin-top: 90px;
|
||
img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|