aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
src/views/HomeRecommend.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="homeRecommend_max Guide_1_16_1">
<div class="homeRecommend_max" ref="homeRecommendMax">
<header class="homeRecommend_heade">
<div class="homeRecommend_right_content">
<div class="homeRecommend_user_content">
@@ -8,56 +8,59 @@
@click="turnToNewPage('https://www.aidlab.hk/en/')"
src="@/assets/images/loginPage/aida_logo.png"
/>
<div
class="login_footer_item_text"
@click="turnToWindow(
'https://code-create.com.hk/aida-terms-and-conditions/'
)"
>
Terms&Conditions
</div>
<div
class="login_footer_item_text"
@click="turnToWindow(
'https://code-create.com.hk/aida-subscription-agreement/'
)"
>
Privacy Policy
</div>
</div>
</div>
<div class="homeRecommend_right">
<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
<a class="gallery_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
<div class="gallery_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
<div class="gallery_btn white" v-if="systemUser.value != -1" @click="logout">log off</div>
</div>
<div class="homeRecommend_right" v-if="systemUser.value == -1">
<div class="started_btn" @click="setLogin">Login</div>
<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
<div class="gallery_btn" @click="setLogin">Login</div>
<div class="gallery_btn white" @click="setRegister">Sign up</div>
</div>
</header>
<signUp ref="signUp" @close="signUpClose"></signUp>
<div class="homeRecommend_content_body">
<div class="homeRecommend_content_body_recommend" id="aaaa">
<div class="content_body_recommend_left mdhidden">
<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
<img class="content_body_img4 content_body_img" src="/image/mainImg/img4.png" alt="">
<img class="content_body_img5 content_body_img" src="/image/mainImg/img5.png" alt="">
</div>
<div class="homeRecommend_content_body_recommend">
<img src="@/assets/images/homePage/home-bg.png">
<div class="content_body_recommend_center content_body_text">
<div class="content_body_recommend_center_title">
<h1>AiDA</h1>
<h3>bloom your creativity</h3>
</div>
<div class="content_body_recommend_center_btn">
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
<a class="gallery_btn white" style="border: none;" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
</div>
</div>
<div class="content_body_recommend_right mdhidden">
<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
<img class="content_body_img4 content_body_img" src="/image/mainImg/img9.png" alt="">
<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
</div>
</div>
<Works :isScroll="false"></Works>
</div>
<div class="homeRecommend_content_adminTop" @click="setAdminUp">
<i class="fi fi-rr-arrow-small-up"></i>
</div>
<registerModel ref="registerModel"></registerModel>
</div>
</template>
<script >
import { defineComponent, createVNode, ref , nextTick,computed, onMounted } from "vue";
import { defineComponent, reactive, ref , nextTick,computed, onMounted, toRefs } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -72,18 +75,22 @@ import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import registerModel from '@/component/Login/registerModel.vue'
import signUp from '@/component/mainPage/signUp/index.vue'
export default defineComponent({
components: {
VerificationCodeInput,
Habit,
Works,
registerModel,
signUp,
},
setup(){
const store = useStore();
const router = useRouter();
let registerModel = ref()
let data = reactive({
homeRecommendMax:null,
signUp:null
})
let isMoblie = ref(false)
let systemUser = computed(()=>{
return store.state.UserHabit.systemUser
@@ -92,12 +99,11 @@ export default defineComponent({
router.push("/login");
}
let setRegister = () =>{
// ler
if(window.innerWidth < 768){
registerModel.value.pageWidth = '100%'
}
registerModel.value.init()
// router.push("/register");
data.signUp.init()
data.homeRecommendMax.classList.add('openSignUp')
}
let signUpClose = ()=>{
data.homeRecommendMax.classList.remove('openSignUp')
}
let setAdminUp = ()=>{
let scrollDom = document.querySelector('.homeRecommend_content_body')
@@ -127,10 +133,12 @@ export default defineComponent({
}
})
return {
...toRefs(data),
systemUser,
setLogin,
registerModel,
setRegister,
signUpClose,
setAdminUp,
logout,
goHome,
@@ -148,33 +156,9 @@ export default defineComponent({
},
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},)
@@ -187,12 +171,29 @@ export default defineComponent({
animation:tl1,
scroller:dom,//设置指定元素为滚动依据
scrub:2,
});
//标题滚动背景就变为背景
let header = document.querySelectorAll('.homeRecommend_max .homeRecommend_heade')
let tl2 = gsap.timeline();
tl2.to(header,0.5, {'background-color':'#fff'},)
ScrollTrigger.create({
trigger: header, // 触发器元素
start: "0% 0%", // 滚动触发器的起始滚动位置
// markers: true, // 开启标注功能
// scrub: true,
animation:tl2,
scroller:dom,//设置指定元素为滚动依据
scrub:.5,
});
})
},
methods: {
turnToNewPage(url) {
window.open(url);
},
turnToWindow(url) {
window.open(url);
},
},
});
</script>
@@ -207,34 +208,54 @@ export default defineComponent({
.homeRecommend_content_body{
flex: 1;
}
&.openSignUp{
.homeRecommend_heade{
position: relative;
background: #fff !important;
.login_footer_item_text{
display: block;
}
}
.homeRecommend_content_body{
display: none;
}
.homeRecommend_content_adminTop{
display: none;
}
}
}
.homeRecommend_heade {
display: flex;
justify-content: space-between;
// padding: 0 30px;
padding: 0 9rem;
padding: 1rem 4rem;
width: 100%;
height: 7rem;
// height: 7rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.2);
// background: rgba(255, 255, 255, 0.2);
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
position: relative;
position: absolute;
align-items: center;
z-index: 1049;
z-index: 2;
@media (max-width: 768px) {
z-index: 1000;
}
background-color: #fff;
// background-color: #fff;
.homeRecommend_right{
width: 33%;
display: flex;
justify-content: flex-end;
align-items: center;
.started_btn2{
color: #000;
background: #fff;
border: 2px solid #39215b;
margin-left: 2rem;
.gallery_btn{
// color: #000;
// background: #fff;
// border: 2px solid #39215b;
// margin-left: 2rem;
width: 13rem;
text-align: center;
&.gallery_btn:nth-child(1){
margin-right: 3rem;
}
}
}
.homeRecommend_logo {
@@ -242,11 +263,15 @@ export default defineComponent({
height: 3.2rem;
margin-top: 0;
}
.login_footer_item_text{
margin-left: 5rem;
display: none;
}
.homeRecommend_right_content {
top: 0;
left: 0;
display: flex;
width: 33%;
width: 40%;
height: 100%;
align-items: center;
overflow: hidden;
@@ -293,138 +318,31 @@ export default defineComponent({
// justify-content: center;
position: relative;
border-bottom: 1px solid #ececec;
.content_body_recommend_left,
.content_body_recommend_right{
position: absolute;
top: 0;
img{
border-radius: 2rem;
position: absolute;
width: 20px;
object-fit: cover;
}
}
--margin:3rem;
.content_body_recommend_right{
right: 0;
.content_body_img1{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 10rem;
right: calc(20rem + var(--margin));
}
.content_body_img2{
width: 15rem;
height: 15rem;
object-fit: cover;
top: calc(30rem + var(--margin));
right: calc(20rem + var(--margin));
}
.content_body_img3{
top: 38rem;
width: 30rem;
height: 30rem;
object-fit: cover;
right: calc(-13rem + var(--margin));
}
.content_body_img4{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 51rem;
right: calc(20rem + var(--margin));
}
.content_body_img5{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 15rem;
right: 0;
}
}
.content_body_recommend_left{
left: 0;
.content_body_img1{
width: 15rem;
height: 15rem;
object-fit: cover;
top: 5rem;
left: calc(20rem + var(--margin));
}
.content_body_img2{
width: 25rem;
height: 25rem;
object-fit: cover;
top: calc(20rem + var(--margin));
left: calc(20rem + var(--margin));
}
.content_body_img3{
width: 20rem;
height: 20rem;
object-fit: cover;
top: calc(10rem + var(--margin));
// left: calc(0 + var(--margin));
}
.content_body_img4{
width: 30rem;
height: 30rem;
object-fit: cover;
top: 36rem;
left: calc(-13rem + var(--margin));
}
.content_body_img5{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 51rem;
left: calc(20rem + var(--margin));
}
.content_body_img6{
width: 20rem;
height: 20rem;
object-fit: cover;
top: 20rem;
left: calc(0 + var(--margin));
}
width: 100%;
img{
width: 100%;
}
.content_body_recommend_center{
padding: 20rem 0;
text-align: center;
width: 50%;
position: relative;
left: 50%;
transform: translateX(-50%);
z-index: 2;
opacity: 0;
@media (max-width: 768px) {
width: 80%;
}
position: absolute;
top: 40%;
left: 36rem;
transform: translateY(-50%);
.content_body_recommend_center_title{
h1,h3{
color: #fff;
}
h1{
font-size: 15rem;
margin-bottom: 0;
line-height: 1;
font-size: 13rem;
font-weight: 900;
margin: 7rem;
div{
color: #341e57;
}
}
h3{
line-height: 1;
margin: 7rem;
font-size: 5rem;
font-weight: 900;
font-size: 6rem;
}
}
.content_body_recommend_center_btn{
display: flex;
justify-content: center;
cursor: pointer;
a{
margin: 0 2rem;
a:nth-child(1){
margin-right: 3rem;
}
}
}