aida_front/src/views/Login.vue

<template>
	<div class="loginPage">
		<div class="left">
			<!-- :isScroll="!isMask" -->
			<Works  :autoscroll="true" :position="'login'"></Works>
			<div class="mask" v-show="isMask" @click="()=>isMask = !isMask">
				<div class="content">
					<div class="userNum">
						<div class="title">5 000 000 +</div>
						<div>HAPPY USERS</div>
					</div>
					<div class="info">Millions trust AI products every day</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="Text" v-show="!loginType">
				<div class="title">Join millions <br />using AI every day</div>
				<div class="info">Experience secure,spam-free support that empowers you to grow, create,and succeed with confidence</div>
			</div>
			<div class="loginBox">
				<div class="selectType" v-show="!loginType">
					<div class="text">
						Continue with one of these:
					</div>
					<div class="typeList">
						<div class="gallery_btn white" @click="setLoginType('personal')">personal</div>
						<div class="gallery_btn white" @click="setLoginType('school')">school</div>
						<div class="gallery_btn white" @click="setLoginType('enterprise')">enterprise</div>
					</div>
				</div>
				<div class="login" v-show="loginType">
					<div class="title">
						<i class="fi fi-br-angle-small-left" @click="()=>loginType = ''"></i>
						<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
						<span>Log on to AiDA 3.0</span>
					</div>
					<personal v-show="loginType == 'personal'"></personal>
					<school v-show="loginType == 'school'"></school>
					<enterprise v-show="loginType == 'enterprise'"></enterprise>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
const md5 = require("md5");
import Works from "@/views/HomeView/Works.vue";
import { message } from "ant-design-vue";
import { isEmail } from "@/tool/util";
import personal from "@/component/LoginPage/login/personal.vue";
import school from "@/component/LoginPage/login/school.vue";
import enterprise from "@/component/LoginPage/login/enterprise.vue";
export default defineComponent({
	components:{
		Works,personal,school,enterprise
	},
	props:{
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const loginData = reactive({
			loginType:'',
			isMask:true,
		})
		const dataDom = reactive({
		})
		const setLoginType = (str:any)=>{
			loginData.loginType = str
		}
		return{
			...toRefs(dataDom),
			...toRefs(loginData),
			setLoginType,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.loginPage{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		> .left,>.right{
			height: 100%;
		}
		> .left{
			width: 60%;
			background: #f7f8fa;
			position: relative;
			> .mask{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .8) 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				cursor: pointer;
				> .content{
					text-align: center;
					padding: 15rem;
					//黑色径向渐变
					background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
					.userNum{
						line-height: 1;
						margin-bottom: 3rem;
						> .title{
							font-size: 8rem;
							font-weight: 900;
						}
						> div{
							font-size: 3rem;
							font-weight: 500;
						}
					}	
					> .info{
						font-size: 4rem;
						font-weight: 500;
					}
				}
			}
		}
		> .right{
			display: flex;
			width: 40%;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			> .Text{
				width: 60rem;
				text-align: center;
				> .title{
					font-size: 4rem;
					font-weight: 900;
					line-height: 1.2;
					margin-bottom: 2rem;
				}
				> .info{
					font-size: 1.8rem;
					margin-bottom: 2rem;
					line-height: 1.2;
				}
				> .continue{
					> i{
						margin-left: 1rem;
					}
				}
			}
			> .loginBox{
				width: 60rem;
				> .selectType{
					width: 100%;
					text-align: center;
					> .text{
						font-size: 2.5rem;
						font-weight: 600;
					}	
					> .typeList{
						> div{
							margin: 0 auto;
							width: 33rem;
							margin-top: .8rem;
							border-radius: 1rem;
							border: 2px solid;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
				> .login{
					position: relative;
					> .title{
						font-size: 4rem;
						font-weight: 900;
						display: flex;
						align-items: center;
						> i{
							margin-right: 2rem;
							font-size: 3rem;
							display: flex;
							cursor: pointer;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>