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

更新首页

Browse Source
This commit is contained in:
X1627315083
2025-02-04 11:02:44 +08:00
parent dd981805db
commit 4ff9bc7f63
11 changed files with 224 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/image/mainImg/img1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 443 KiB

After

Width:  |  Height:  |  Size: 766 KiB

BIN
public/image/mainImg/img2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 432 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
public/image/mainImg/img3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
public/image/mainImg/img4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 376 KiB

After

Width:  |  Height:  |  Size: 218 KiB

BIN
public/image/mainImg/img5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 KiB

After

Width:  |  Height:  |  Size: 546 KiB

BIN
public/image/mainImg/img6.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
public/image/mainImg/img7.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 428 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/image/mainImg/img8.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 477 KiB

After

Width:  |  Height:  |  Size: 324 KiB

BIN
public/image/mainImg/img9.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 503 KiB

247
src/views/HomeRecommend.vue
View File

@@ -20,7 +20,7 @@
</div>
</header>
<div class="homeRecommend_content_body">
<div class="homeRecommend_content_body_recommend">
<!-- <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">
@@ -28,6 +28,26 @@
<h3>bloom your creativity</h3>
</div>
</div>
</div> -->
<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="">
</div>
<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>
<div class="content_body_recommend_right mdhidden">
<img class="content_body_img1 content_body_img" src="/image/mainImg/img5.png" alt="">
<img class="content_body_img2 content_body_img" src="/image/mainImg/img6.png" alt="">
<img class="content_body_img3 content_body_img" src="/image/mainImg/img7.png" alt="">
<img class="content_body_img4 content_body_img" src="/image/mainImg/img8.png" alt="">
</div>
</div>
<Works :isScroll="false"></Works>
</div>
@@ -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{

18
src/views/HomeView/library.vue
View File

@@ -213,6 +213,11 @@
<div class="no_data_block" v-show="!imgList.length && !isShowMark">
<img src="@/assets/images/homePage/null_img.png">
</div>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
<a-spin size="large" />
</div>
<!-- 蒙层 end-->
</div>
<div class="table_pagination" v-show="imgList.length">
@@ -427,6 +432,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
@@ -439,11 +445,7 @@
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
<a-spin size="large" />
</div>
<!-- 蒙层 end-->
<!-- <RobotAssist></RobotAssist> -->
</div>
@@ -1756,6 +1758,9 @@ export default defineComponent({
padding: 0 6rem;
// min-width: 1440px;
position: relative;
.mark_loading{
position: absolute;
}
.page_content {
position: relative;
@@ -1846,7 +1851,6 @@ export default defineComponent({
.library_body_right{
width: calc(100% - 23.5rem);
height: 100%;
.header_operate_item{
margin-right: 5rem;
color: #C2C2C2;
@@ -1932,7 +1936,6 @@ export default defineComponent({
height:calc(100% - 8rem);
padding: 0.1rem 0 0 0.3rem;
box-sizing: border-box;
.right_content_body{
width: 100%;
height: 100%;
@@ -2032,6 +2035,7 @@ export default defineComponent({
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
&.content_body_table::-webkit-scrollbar {
display: none;
}