布局修改 部分bug修复
This commit is contained in:
X1627315083
@@ -2,24 +2,20 @@
|
||||
<div class="loginPage">
|
||||
<div class="left">
|
||||
<div class="imgBox">
|
||||
<img src="@/assets/images/homePage/loginLeftImg.png" alt="">
|
||||
<video src="@/assets/images/homePage/login_banner.mp4" autoplay muted loop playsinline webkit-playsinline x5-playsinline></video>
|
||||
</div>
|
||||
<div class="fixed">Designed with AiDA</div>
|
||||
<div class="mask" v-show="loginType">
|
||||
<!-- <div class="bg"></div> -->
|
||||
<img src="@/assets/images/homePage/maskIcon.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">
|
||||
<i class="fi fi-br-angle-left" @click="toBack" v-show="!loginType"></i>
|
||||
<div class="Text" v-show="!loginType">
|
||||
<img src="@/assets/images/homePage/aidaIcon.png" alt="">
|
||||
<div class="title">
|
||||
<p style="font-weight: 700;">Welcome to AiDA</p>
|
||||
<p style="font-weight: 400;">Bloom Your Creativity</p>
|
||||
<p>Welcome to <span>AiDA</span></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.
|
||||
@@ -42,16 +38,15 @@
|
||||
</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-br-angle-left" @click="loginBack"></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 class="info" v-show="!loginType">Please fill your information below</div>
|
||||
<personal ref="personal" v-if="loginType == 'personal'"></personal>
|
||||
<school ref="school" v-if="loginType == 'school'"></school>
|
||||
<enterprise ref="enterprise" v-if="loginType == 'enterprise'"></enterprise>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,6 +72,7 @@ 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 { useRoute,useRouter } from 'vue-router';
|
||||
import school from "@/component/LoginPage/login/school.vue";
|
||||
import enterprise from "@/component/LoginPage/login/enterprise.vue";
|
||||
export default defineComponent({
|
||||
@@ -90,18 +86,35 @@ export default defineComponent({
|
||||
emits: [],
|
||||
setup(props, { emit }) {
|
||||
const store = useStore();
|
||||
const router = useRouter()
|
||||
const loginData = reactive({
|
||||
loginType: "",
|
||||
isMask: true,
|
||||
});
|
||||
const dataDom = reactive({});
|
||||
const dataDom = reactive({
|
||||
personal: null as any,
|
||||
school: null as any,
|
||||
enterprise: null as any,
|
||||
}) as any;
|
||||
const setLoginType = (str: any) => {
|
||||
loginData.loginType = str;
|
||||
};
|
||||
const loginBack = ()=>{
|
||||
if(dataDom?.[loginData.loginType].emailStap == 2){
|
||||
dataDom[loginData.loginType].emailLastStepFun()
|
||||
}else{
|
||||
loginData.loginType = ''
|
||||
}
|
||||
}
|
||||
const toBack = ()=>{
|
||||
router.push('/Square')
|
||||
}
|
||||
return {
|
||||
...toRefs(dataDom),
|
||||
...toRefs(loginData),
|
||||
setLoginType,
|
||||
loginBack,
|
||||
toBack,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
@@ -115,101 +128,103 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-family: 'Satoshi';
|
||||
background: #000;
|
||||
> .left,
|
||||
> .right {
|
||||
height: 100%;
|
||||
}
|
||||
> .left {
|
||||
width: 57%;
|
||||
width: 41%;
|
||||
// width: 55%;
|
||||
background: #f7f8fa;
|
||||
position: relative;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
> .mask{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, rgba(49, 49, 49, 0.3) -4.74%, rgba(0, 0, 0, 0.55) 103.32%);
|
||||
|
||||
}
|
||||
> .fixed{
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
> .imgBox{
|
||||
background: #000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
> img{
|
||||
position: relative;
|
||||
|
||||
> video{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
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 {
|
||||
flex: 1;
|
||||
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;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
> i{
|
||||
position: absolute;
|
||||
margin-right: 2.8rem;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
width: 4.6rem;
|
||||
height: 4.6rem;
|
||||
border-radius: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid #D8DADC;
|
||||
left: 4rem;
|
||||
top: 4rem;
|
||||
}
|
||||
> .Text {
|
||||
width: 65rem;
|
||||
width: 63rem;
|
||||
text-align: center;
|
||||
> img{
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .title {
|
||||
font-size: 6.4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 3.2rem;
|
||||
margin-bottom: 2.4rem;
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
font-family: 'pingfang_regular';
|
||||
> span{
|
||||
font-weight: 500;
|
||||
font-family: 'pingfang_medium';
|
||||
}
|
||||
}
|
||||
}
|
||||
> .info {
|
||||
font-size: 2rem;
|
||||
font-size: 2.4rem;
|
||||
// margin-bottom: 4rem;
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 7rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
letter-spacing:-.5px;
|
||||
font-family: 'satoshi_light';
|
||||
}
|
||||
> .continue {
|
||||
> i {
|
||||
@@ -218,18 +233,18 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .loginBox {
|
||||
width: 44rem;
|
||||
margin-top: 7rem;
|
||||
width: 36.9rem;
|
||||
// margin-top: 7rem;
|
||||
&.active{
|
||||
width: 53rem;
|
||||
width: 63rem;
|
||||
}
|
||||
> .selectType {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
> .text {
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .typeList {
|
||||
> .gallery_btn{
|
||||
@@ -240,11 +255,13 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border-radius: 9rem;
|
||||
border: 2px solid;
|
||||
border: 1.3px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2.4rem;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
&:hover{
|
||||
background: #000;
|
||||
@@ -256,18 +273,32 @@ export default defineComponent({
|
||||
> .login {
|
||||
position: relative;
|
||||
> .title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.2rem;
|
||||
> i {
|
||||
margin-right: 2rem;
|
||||
font-size: 3rem;
|
||||
margin-right: 2.8rem;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
width: 4.6rem;
|
||||
height: 4.6rem;
|
||||
border-radius: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid #D8DADC;
|
||||
}
|
||||
|
||||
}
|
||||
> .info{
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
text-align: left;
|
||||
color: #667085;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user