refactor: Improve code formatting and structure in main.ts and Login.vue
- Standardized import statements in main.ts for better readability. - Enhanced the structure of the Vue component in Login.vue for improved clarity. - Updated event handling and state management in Login.vue. - Adjusted CSS styles for consistency and better organization.
This commit is contained in:
bighuixiang
@@ -1,55 +1,74 @@
|
||||
<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>
|
||||
<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 {
|
||||
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 { 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";
|
||||
@@ -57,149 +76,158 @@ 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 {
|
||||
}
|
||||
},
|
||||
})
|
||||
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>
|
||||
.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, 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: 0.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>
|
||||
|
||||
Reference in New Issue
Block a user