事件

src/views/HomeView/Events.vue

@@ -8,7 +8,7 @@
 		</div>
         <div class="page_content" >
 			<div class="page_content_itemBox">
-				<div class="page_content_item" v-for="item in worksList" :key="item.id">
+				<div class="page_content_item" v-for="item in eventsList" :key="item.id"  v-fadeIn="isScroll">
 					<div class="page_content_item_img" @click="openEventsDetail(item)">
 						<img :src="item.imgUrl" alt="">
 					</div>
@@ -26,7 +26,6 @@
     </div>
 </template>
 <script lang="ts">
-import { LoadingOutlined } from "@ant-design/icons-vue";
 import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
@@ -34,7 +33,10 @@ import { Https } from "@/tool/https";
 import { useI18n } from "vue-i18n";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
 import { useStore } from "vuex";
+import {eventsList} from "@/assets/json/events.json";
 import { useRouter } from 'vue-router'
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 export default defineComponent({
     components: {
 		generalMenu,
@@ -64,24 +66,7 @@ export default defineComponent({
 				// 	value: 'myWorks'
 				// },
 			],
-			worksList: [
-				{
-					title:'Source Fashion 2024',
-					time:'14 Jul 2024',
-					id:1,
-					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
-				},{
-					title:'Source Fashion 2024 Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW',
-					time:'14 Jul 2024',
-					id:2,
-					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
-				},{
-					title:'Source Fashion 2024',
-					time:'14 Jul 2024',
-					id:3,
-					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
-				},
-			],
+			eventsList:eventsList,
 			getListDate:{
 				"getLikePortfolio": 0,
 				"getMyPortfolio": 0,
@@ -137,8 +122,8 @@ export default defineComponent({
 		}
 		let {t} = useI18n()
 		let openEventsDetail = (item:any)=>{
-			let path = router.currentRoute._value.path
-			router.push(`/Square/eventsDetail?id=${item.id}`)
+			let path = router.currentRoute._value.path.split('/')[1]
+			router.push(`/${path}/eventsDetail?id=${item.id}`)
 			// router.push(`${path}?id=${item.id}`)
 		}
 		onMounted (()=>{
@@ -167,6 +152,39 @@ export default defineComponent({
 			openEventsDetail,
         }
     },
+	directives:{
+		fadeIn:{
+			mounted (el,binding) {
+				let dom
+				if(binding.value){
+					dom = document.querySelector('.events_page')
+				}else{
+					dom = document.querySelector('.homeRecommend_content_body')
+				}
+				gsap.registerPlugin(ScrollTrigger);
+				let tl1 = gsap.timeline();
+				tl1.from(el,1, {y:'30px',opacity:0},)
+				ScrollTrigger.create({
+					trigger: el, // 触发器元素
+					start: "top 90%", // 滚动触发器的起始滚动位置
+					end: '100% 80%',   // 滚动触发器的结束滚动位置
+					// 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')
+					// 	}
+					// }
+				});
+			}
+		},
+	},
     async mounted(){
 	
     },
@@ -222,13 +240,18 @@ export default defineComponent({
 		background: #f7f8fa;
 		width: 100%;
 		flex: 1;
-		
+		@media (max-width: 768px) {
+			background: #fff;
+		}
 		.page_content_itemBox{
 			display: flex;
 			flex-wrap: wrap;
 			.page_content_item{
 				max-width: 25%;
 				padding: 2rem;
+				@media (max-width: 768px) {
+					max-width: 100%;
+				}
 				.page_content_item_img{
 					width: 100%;
 					aspect-ratio: 16 / 10;

src/views/HomeView/Works.vue

@@ -283,6 +283,9 @@ export default defineComponent({
 		min-height: 80%;
 		height: auto;
 		background: #f7f8fa;
+		@media (max-width: 768px) {
+			background: #fff;
+		}
 		.page_loading_box{
 			text-align: center;
 			height: 50px;