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

product

Browse Source
This commit is contained in:
X1627315083
2024-06-01 10:02:21 +08:00
parent 89ee910ce9
commit ff9e2f510b
21 changed files with 2046 additions and 1798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
src/views/HomeRecommend.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<div class="homeRecommend_max Guide_1_16_1">
<header class="homeRecommend_heade">
<div class="homeRecommend_right_content">
<div class="homeRecommend_user_content">
<img
class="homeRecommend_logo"
@click="turnToNewPage('https://www.aidlab.hk/en/')"
src="@/assets/images/loginPage/aida_logo.png"
/>
</div>
</div>
<div class="homeRecommend_right">
<div class="started_btn" @click="setLogin">登录</div>
<div class="started_btn started_btn2">注册</div>
</div>
</header>
<div class="homeRecommend_content_body">
<div class="homeRecommend_content_body_recommend" id="aaaa">
<div class="content_body_recommend_left">
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
</div>
<div class="content_body_recommend_center content_body_text">
<div class="content_body_recommend_center_title">
<h1>全球<div>最佳创作者</div>齐聚AIDA</h1>
</div>
<div class="content_body_recommend_center_btn">
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">立即购买</a>
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">立即试用</a>
</div>
</div>
<div class="content_body_recommend_right">
<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" 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>
</div>
</template>
<script >
import { defineComponent, createVNode, ref , nextTick } 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 Works from "@/views/HomeView/Works.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,
Works,
},
setup(){
const store = useStore();
const router = useRouter();
let setLogin = ()=>{
router.push("/login");
}
let setAdminUp = ()=>{
let scrollDom = document.querySelector('.homeRecommend_content_body')
scrollDom.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动到顶部
});
}
return {
setLogin,
setAdminUp,
}
},
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: {
},
});
</script>
<style lang="less" scoped>
.homeRecommend_max{
position: relative;
display: flex;
height: 100%;
flex-direction: column;
.homeRecommend_content_body{
flex: 1;
}
}
.homeRecommend_heade {
display: flex;
justify-content: space-between;
// padding: 0 30px;
padding: 0 9rem;
width: 100%;
height: 7rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.2);
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
position: relative;
align-items: center;
z-index: 1049;
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;
}
}
.homeRecommend_logo {
width: 14.4rem;
height: 3.2rem;
margin-top: 0;
}
.homeRecommend_right_content {
top: 0;
left: 0;
display: flex;
width: 33%;
height: 100%;
align-items: center;
overflow: hidden;
.homeRecommend_user_content {
display: flex;
align-items: center;
position: relative;
height: 3.7rem;
&.marLeft2{
margin-left: 2rem;
}
.username {
font-size: 1.8rem;
color: #1a1a1a;
margin: 0 0.8rem;
font-weight: 900;
span{
margin: .7rem;
}
}
.icon-xiala {
font-size: 1.4rem;
cursor: pointer;
transition: .3s all;
}
.icon_rotate {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
}
}
}
.homeRecommend_content_body{
overflow-y: auto;
overflow-x: hidden;
&.homeRecommend_content_body::-webkit-scrollbar {
display: none;
}
.homeRecommend_content_body_recommend{
// display: flex;
// 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;
top: 10rem;
right: calc(20rem + var(--margin));
}
.content_body_img2{
width: 15rem;
top: calc(30rem + var(--margin));
right: calc(20rem + var(--margin));
}
.content_body_img3{
top: 38rem;
width: 30rem;
right: calc(-13rem + var(--margin));
}
.content_body_img4{
width: 20rem;
top: 51rem;
right: calc(20rem + var(--margin));
}
.content_body_img5{
width: 20rem;
top: 15rem;
right: 0;
}
}
.content_body_recommend_left{
left: 0;
.content_body_img1{
width: 15rem;
top: 5rem;
left: calc(20rem + var(--margin));
}
.content_body_img2{
width: 25rem;
top: calc(20rem + var(--margin));
left: calc(20rem + var(--margin));
}
.content_body_img3{
width: 20rem;
top: calc(10rem + var(--margin));
left: calc(0 + var(--margin));
}
.content_body_img4{
width: 30rem;
top: 36rem;
left: calc(-13rem + var(--margin));
}
.content_body_img5{
width: 20rem;
top: 51rem;
left: calc(20rem + var(--margin));
}
.content_body_img6{
width: 20rem;
top: 20rem;
left: calc(0 + var(--margin));
}
}
.content_body_recommend_center{
padding: 20rem 0;
text-align: center;
width: 50%;
position: relative;
left: 50%;
transform: translateX(-50%);
z-index: 2;
opacity: 0;
.content_body_recommend_center_title{
h1{
line-height: 1;
font-size: 13rem;
font-weight: 600;
div{
color: #341e57;
}
}
}
.content_body_recommend_center_btn{
display: flex;
justify-content: center;
cursor: pointer;
a{
margin: 0 2rem;
}
}
}
}
}
.homeRecommend_content_adminTop{
position: fixed;
bottom: 5rem;
right: 5rem;
width: 7rem;
height: 7rem;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
background: #fff;
z-index: 999;
i{
display: flex;
font-size: 3rem;
transition: all .3s;
}
&.homeRecommend_content_adminTop:hover{
i{
transform: scale(1.2);
}
}
}
</style>