fix

src/views/Login.vue

@@ -0,0 +1,158 @@
+<template>
+	<div class="loginPage">
+		<div class="left">
+			<Works :isScroll="true" :position="'login'"></Works>
+		</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" @click="setLoginType('personal')">personal</div>
+						<div class="gallery_btn" @click="setLoginType('school')">school</div>
+						<div class="gallery_btn" @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:'',
+		})
+		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;
+		}
+		> .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>