274 lines
6.7 KiB
Vue
274 lines
6.7 KiB
Vue
<template>
|
|
<div class="homeRecommend_max">
|
|
<div class="left">
|
|
<div class="comment">
|
|
<div class="item">
|
|
123123123123123123123123123123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item right">
|
|
1231231231231231231231231231231231233123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item">
|
|
1231231231231231231231231231231231233123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item right">
|
|
123123123123123123123123123123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item">
|
|
1231231231231231231231231231231231233123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item right">
|
|
123123123123123123123123123123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item">
|
|
1231231231231231231231231231231231233123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
<div class="item right">
|
|
123123123123123123123123123123123123
|
|
<div>2312321</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="">
|
|
<div class="title">
|
|
Log in to AiDA
|
|
</div>
|
|
<div class="info">
|
|
Join the conversation! Sign in to connect seamlessly on WhatsApp and unlock the full potential of the web application.
|
|
</div>
|
|
<div class="continue gallery_btn gallery_btn_radius" @click="setLogin" style="min-width: 33rem;">
|
|
Continue
|
|
<i class="fi fi-rr-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script >
|
|
import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue";
|
|
import { isEmail } from "@/tool/util";
|
|
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
|
|
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
|
import Habit from "@/component/Detail/habit.vue";
|
|
import { Https } from "@/tool/https";
|
|
import { Modal, message } from "ant-design-vue";
|
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
|
import { useStore } from "vuex";
|
|
import { setLang } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useRouter } from 'vue-router';
|
|
import { gsap, TweenMax } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
export default defineComponent({
|
|
components: {
|
|
VerificationCodeInput,
|
|
Habit,
|
|
},
|
|
setup(){
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
let registerModel = ref()
|
|
let data = reactive({
|
|
})
|
|
let userDetail = computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
let setLogin = ()=>{
|
|
router.push("/login");
|
|
}
|
|
let logout = ()=>{
|
|
let userInfo = store.state.UserHabit.userDetail;
|
|
let data = {
|
|
userId: userInfo?.userId,
|
|
};
|
|
store.commit('createDetail')
|
|
store.commit('createProbject')
|
|
if(!data.userId) return
|
|
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
|
clonAllCookie();
|
|
});
|
|
}
|
|
let goHome = ()=>{
|
|
router.push('/home');
|
|
}
|
|
let time
|
|
let updataIsMoblie = ()=>{
|
|
clearTimeout(time)
|
|
time = setTimeout(()=>{
|
|
|
|
},500)
|
|
|
|
}
|
|
const setRegister = ()=>{
|
|
router.push('/register');
|
|
}
|
|
onMounted(()=>{
|
|
window.addEventListener('resize',updataIsMoblie)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', updataIsMoblie);
|
|
});
|
|
return {
|
|
...toRefs(data),
|
|
userDetail,
|
|
setLogin,
|
|
registerModel,
|
|
logout,
|
|
goHome,
|
|
setRegister,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
watch: {
|
|
// credits.value(newVal,oldVal){
|
|
// console.log(String(newVal).length);
|
|
// }
|
|
},
|
|
mounted() {
|
|
nextTick().then(()=>{
|
|
|
|
let dom = document.querySelector('.homeRecommend_content_body')
|
|
let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
|
|
let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
|
|
for (let index = 0; index < codeTween.length; index++) {
|
|
gsap.from(codeTween[index],.5, {scale:.6 },);
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
let tl1 = gsap.timeline();
|
|
tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
|
|
ScrollTrigger.create({
|
|
trigger: codeTween[index], // 触发器元素
|
|
start: "top 0%", // 滚动触发器的起始滚动位置
|
|
end: '200% 20%', // 滚动触发器的结束滚动位置
|
|
// markers: true, // 开启标注功能
|
|
scrub: true,
|
|
animation:tl1,
|
|
scroller:dom,//设置指定元素为滚动依据
|
|
scrub:2,
|
|
// onUpdate:(v)=>{
|
|
// if(v.progress < 0.1){
|
|
// v.trigger?.classList.remove('active')
|
|
// }else{
|
|
// v.trigger?.classList.add('active')
|
|
// // v.trigger?.classList.add('active')
|
|
// }
|
|
// }
|
|
});
|
|
}
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
let tl1 = gsap.timeline();
|
|
tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
|
|
ScrollTrigger.create({
|
|
trigger: codeTweenText, // 触发器元素
|
|
start: "top 0%", // 滚动触发器的起始滚动位置
|
|
end: '200% 20%', // 滚动触发器的结束滚动位置
|
|
// markers: true, // 开启标注功能
|
|
scrub: true,
|
|
animation:tl1,
|
|
scroller:dom,//设置指定元素为滚动依据
|
|
scrub:2,
|
|
|
|
});
|
|
})
|
|
},
|
|
methods: {
|
|
turnToNewPage(url) {
|
|
window.open(url);
|
|
},
|
|
turnToWindow(url) {
|
|
window.open(url);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.homeRecommend_max{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
> .left,> .right{
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
> .left{
|
|
width: 60%;
|
|
background: #232323;
|
|
> .comment{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> .item{
|
|
padding: 2rem;
|
|
border-radius: 4rem;
|
|
font-size: 2rem;
|
|
background: #fff;
|
|
text-align: center;
|
|
width: auto;
|
|
position: relative;
|
|
margin: 1rem 0;
|
|
font-weight: 600;
|
|
&:nth-child(1){left: -10rem;}
|
|
&:nth-child(2){left: 15rem;}
|
|
&:nth-child(3){left: -15rem;}
|
|
&:nth-child(4){left: 10rem;}
|
|
> div{
|
|
position: absolute;
|
|
padding: 1.5rem;
|
|
border-radius: 4rem;
|
|
left: 1rem;
|
|
top: 0;
|
|
transform: translateY(-60%);
|
|
background: rgba(175, 175, 175,.6);
|
|
backdrop-filter: blur(13px);
|
|
-webkit-backdrop-filter: blur(13px);
|
|
}
|
|
&.right{
|
|
> div{
|
|
left: auto;
|
|
right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .right{
|
|
width: 40%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> div{
|
|
width: 60rem;
|
|
> .title{
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
margin-bottom: 2rem;
|
|
}
|
|
> .info{
|
|
font-size: 2rem;
|
|
margin-bottom: 4rem;
|
|
line-height: 1.2;
|
|
}
|
|
> .continue{
|
|
> i{
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|