aida_front/src/views/Login.vue

<template>
  <div class="loginPage">
    <div class="left">
		<div class="imgBox">
			<img src="@/assets/images/homePage/loginLeftImg.png" alt="">
		</div>
      <!-- <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">AI that millions trust, every single day</div>
        </div>
      </div> -->
    </div>
    <div class="right">
      <div class="Text" v-show="!loginType">
        <div class="title">
			<p style="font-weight: 700;">Welcome to AiDA</p>
			<p style="font-weight: 400;">Bloom Your Creativity</p>
		</div>
        <div class="info">
			AiDA, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs. 
        </div>
      </div>
      <div class="loginBox" :class="{'active':loginType}">
        <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')">
				Individual
            </div>
            <div class="gallery_btn" @click="setLoginType('school')">
				Academic
            </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";
import md5 from "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;
  font-family: 'Satoshi';
  background: #000;
  > .left,
  > .right {
    height: 100%;
  }
  > .left {
    width: 57%;
    // width: 55%;
    background: #f7f8fa;
    position: relative;
	background: #000;
	> .imgBox{
		background: #000;
		height: 100%;
		width: 100%;
		> img{
			width: 100%;
			height: 100%;
		}
	}
    > .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, 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: 45%;
	position: absolute;
	right: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	background: #d9d9d9;
	border-radius: 7rem 0 0 7rem;
	overflow: hidden;
    > .Text {
      width: 65rem;
      text-align: center;
      > .title {
        font-size: 6.4rem;
		font-weight: 900;
		line-height: 1.2;
		margin-bottom: 3.2rem;
		p{
			margin-bottom: 0;
		}
      }
      > .info {
        font-size: 2rem;
		// margin-bottom: 4rem;
		margin-bottom: 0rem;
		font-weight: 300;
		line-height: 1.2;
		letter-spacing:-.5px;
      }
      > .continue {
        > i {
          margin-left: 1rem;
        }
      }
    }
    > .loginBox {
      width: 44rem;
	  margin-top: 7rem;
	  &.active{
		width: 53rem;
	  }
      > .selectType {
        width: 100%;
        text-align: center;
        > .text {
          font-size: 3.2rem;
          font-weight: 500;
		  margin-bottom: 2rem;
        }
        > .typeList {
			> .gallery_btn{
				
			}
          > div {
            margin: 0 auto;
			width: 100%;
			background: transparent;
            border-radius: 9rem;
            border: 2px solid;
            display: flex;
            align-items: center;
            justify-content: center;
			margin-bottom: 2rem;
			color: #000;
			&:hover{
				background: #000;
				color: #fff;
			}
          }
        }
      }
      > .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>