+
+
@@ -144,7 +164,32 @@ export default defineComponent({
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},)
@@ -157,19 +202,7 @@ 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,
+
});
})
},
@@ -284,35 +317,181 @@ export default defineComponent({
&.homeRecommend_content_body::-webkit-scrollbar {
display: none;
}
+ // .homeRecommend_content_body_recommend{
+ // // display: flex;
+ // // justify-content: center;
+ // position: relative;
+ // border-bottom: 1px solid #ececec;
+ // width: 100%;
+ // img{
+ // width: 100%;
+ // }
+ // .content_body_recommend_center{
+ // 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;
+ // }
+ // h3{
+ // font-size: 6rem;
+ // }
+ // }
+
+ // }
+ // }
.homeRecommend_content_body_recommend{
// display: flex;
// justify-content: center;
position: relative;
border-bottom: 1px solid #ececec;
- width: 100%;
- img{
- width: 100%;
- }
- .content_body_recommend_center{
+
+ .content_body_recommend_left,
+ .content_body_recommend_right{
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;
- }
- h3{
- font-size: 6rem;
- }
+ 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: 25rem;
+ height: 55rem;
+ object-fit: cover;
+ // top: 10rem;
+ // right: calc(20rem + var(--margin));
+ right: 0;
+ top: 0;
+ top: 10rem;
+ }
+ .content_body_img2{
+ top: calc(42rem + var(--margin));
+ width: 15rem;
+ height: 30rem;
+ object-fit: cover;
+ right: calc(41rem + var(--margin));
+ }
+ .content_body_img3{
+ top: calc(37rem + var(--margin));
+ width: 15rem;
+ height: 30rem;
+ object-fit: cover;
+ right: calc(25rem + var(--margin));
+ }
+ .content_body_img4{
+ width: 30rem;
+ height: 25rem;
+ object-fit: cover;
+ top: calc(10rem + var(--margin));
+ right: calc(25rem + 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: 25rem;
+ height: 55rem;
+ object-fit: cover;
+ left: 0;
+ top: 10rem;
+ // top: 5rem;
+ // left: calc(20rem + var(--margin));
+ }
+ .content_body_img2{
+ width: 30rem;
+ height: 25rem;
+ object-fit: cover;
+ top: calc(10rem + var(--margin));
+ left: calc(25rem + var(--margin));
+ }
+ .content_body_img3{
+ width: 22rem;
+ height: 30rem;
+ object-fit: cover;
+ top: calc(35rem + var(--margin));
+ left: calc(27rem + var(--margin));
+ }
+ .content_body_img4{
+ width: 11rem;
+ height: 15rem;
+ object-fit: cover;
+ top: calc(50rem + var(--margin));
+ left: calc(42rem + 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));
+ }
+ }
+ .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%;
+ }
+ .content_body_recommend_center_title{
+ h1{
+ 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;
+ }
+ }
+ .content_body_recommend_center_btn{
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ a{
+ margin: 0 2rem;
+ }
+ }
+ }
}
}
.homeRecommend_content_adminTop{
diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue
index 54b01217..73f36c82 100644
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -213,6 +213,11 @@
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+ AiDA
+bloom your creativity
+
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+