diff --git a/src/assets/json/events.json b/src/assets/json/events.json
new file mode 100644
index 00000000..095d47cb
--- /dev/null
+++ b/src/assets/json/events.json
@@ -0,0 +1,74 @@
+{
+  "eventsList":  [
+      {
+        "id": 1,
+        "title": "Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW",
+        "time": "17 Jul 2024",
+        "imgUrl": "https://www.aidlab.hk/uploads/n_image2_1715056842.png"
+      },{
+        "id": 2,
+        "title": "Source Fashion 2024",
+        "time": "14 Jul 2024",
+        "imgUrl": "https://www.aidlab.hk/uploads/n_image2_1715053576.png"
+      }
+	],
+  "eventsItem":[
+	{
+		"id":1,
+		"title":"Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW",
+        "imgUrl": "https://www.aidlab.hk/uploads/n_image2_1715056842.png",
+		"textList":[
+			{
+				"paragraph":[
+					{
+						"text":"Stay tuned for the updates~"
+					}
+				]
+			}
+		]
+	},{
+		"id":2,
+		"title":"Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW",
+        "imgUrl": "https://www.aidlab.hk/uploads/n_image2_1715053576.png",
+		"textList":[
+			{
+				"paragraph":[
+					{
+						"text":"AiDLab will be showcasing at Source Fashion, the leading responsible sourcing show in Europe this July. It is an unmissable opportunity to connect with the UK fashion industry, international manufacturers, and suppliers. We will be highlighting our fashion and textile innovations and promoting AiDLab in the UK."
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"Join us to explore the future of fashion!"
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"Event: Source Fashion"
+					},{
+						"text":"Date: 14-16 July 2024"
+					},{
+						"text":"Time: 9:30am – 6:00pm (SUN & MON) ; 9:30-4:00pm (TUE)"
+					},{
+						"text":"Location: Olympia London"
+					},{
+						"text":"Stand no.: SF-G43"
+					},{
+						"text":"Website: ",
+						"link":"https://www.source-fashion.com/",
+						"residue":""
+					}
+				]
+			},{
+				"paragraph":[
+					{
+						"text":"Stay tuned for updates!"
+					}
+				]
+			}
+		]
+	}
+  ]
+}
\ No newline at end of file
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 3fe58973..1f3726f5 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -1216,6 +1216,13 @@ li {
   font-weight: 400;
   color: rgba(0, 0, 0, 0.45);
 }
+.modal_title_text .modal_title_text_intro a {
+  color: #000;
+  font-weight: 900;
+}
+.modal_title_text .modal_title_text_intro a:hover {
+  text-decoration: underline;
+}
 .modal_title_text .modal_title_text_assistant {
   font-size: var(--aida-fsize1-6);
   font-weight: 400;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index ec60d4e7..cf181ea0 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -1353,6 +1353,13 @@ input:focus{
 		font-size: var(--aida-fsize1-4);
 		font-weight: 400;
 		color: rgba(0,0,0,.45);
+		a{
+			color: #000;
+			font-weight: 900;
+			&:hover{
+				text-decoration: underline;
+			}
+		}
 	}
 	.modal_title_text_assistant{
 		font-size: var(--aida-fsize1-6);
diff --git a/src/component/Events/eventsDetail.vue b/src/component/Events/eventsDetail.vue
index c931b451..4f9dcc40 100644
--- a/src/component/Events/eventsDetail.vue
+++ b/src/component/Events/eventsDetail.vue
@@ -1,35 +1,43 @@
 <template>
     <div class="eventsDetail_page">
-		<div class="eventsDetail_title modal_title_text" @click="setBack">
-			<i class="fi fi-sr-left"></i>
-			<div class="">Back</div>
+		<div class="eventsDetail_title ">
+			<div class="modal_title_text" @click="setBack">
+				<i class="fi fi-sr-left"></i>
+				<div class="eventsDetail_title_text">Back</div>
+			</div>
 		</div>
 		<div class="eventsDetail_content">
-
-		</div>
-		<!-- <div class="modal_title_text modal_search">
-			<div v-show="isScroll || systemUser.value>-1" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
-				{{ item.name }}
+			<div class="eventsDetail_content_left">
+				<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
 			</div>
-			<div v-show="!isScroll && systemUser.value == -1" class="modal_title_text_assistant active">All</div>
-		</div>
-        <div class="page_content" >
-			<div class="page_content_itemBox">
-				<div class="page_content_item" v-for="item in worksList" :key="item.id" @click="setWorksDetail(item)">
-					<div class="page_content_item_img">
-						<img :src="item.imgUrl" alt="">
-					</div>
-					<div class="page_content_item_time">{{ item.time }}</div>
-					<div class="page_content_item_title">{{ item.title }}</div>
+			<div class="eventsDetail_content_right">
+				<div class="modal_title_text">
+					<div>{{ eventsDetail.title }}</div>
 				</div>
+				<div class="modal_title_text" v-for="item in eventsDetail.textList">
+					<div class="modal_title_text_intro" v-for="introItem in item.paragraph">
+						{{ introItem.text }}
+						<a v-if="introItem.link" :href="introItem.link">{{ introItem.link }}</a>
+						{{ introItem?.residue }}
+					</div>
+				</div>
+				<!-- <div class="modal_title_text">
+					<div class="modal_title_text_intro">Join us to explore the future of fashion!</div>
+				</div>
+				<div class="modal_title_text">
+					<div class="modal_title_text_intro">Event: Source Fashion</div>
+					<div class="modal_title_text_intro">Date: 14-16 July 2024</div>
+					<div class="modal_title_text_intro">Time: 9:30am – 6:00pm (SUN & MON) ; 9:30-4:00pm (TUE)</div>
+					<div class="modal_title_text_intro">Location: Olympia London</div>
+					<div class="modal_title_text_intro">Stand no.: SF-G43</div>
+					<div class="modal_title_text_intro">Website: <a target="_blank" href="https://www.source-fashion.com/">https://www.source-fashion.com/</a></div>
+				</div>
+				<div class="modal_title_text">
+					<div class="modal_title_text_intro">Stay tuned for updates!</div>
+				</div> -->
 			</div>
-			<div class="page_loading_box" v-show="!isNoData">
-				<span class="page_loading" v-show="!isShowMark"></span>
-				<span v-show="isShowMark">
-					<a-spin size="large" />
-				</span>
-			</div>
-		</div> -->
+		</div>
+	
     </div>
 </template>
 <script lang="ts">
@@ -38,13 +46,16 @@ import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,compu
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import { Https } from "@/tool/https";
+import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
 import { useRouter } from 'vue-router';
 import { useI18n } from "vue-i18n";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
+import {eventsItem} from "@/assets/json/events.json";
 import { useStore } from "vuex";
 export default defineComponent({
     components: {
 		generalMenu,
+		fullScreenImg,
     },
 	props:{
 		isScroll:{
@@ -53,43 +64,11 @@ export default defineComponent({
 		 },
 	},
     setup() {
-		// console.log(this.$route.params.id);
 		const router = useRouter();
         const store = useStore();
 		let filter:any = reactive({
-			worksSelect: 'all',
-			worksType: [
-				{
-					name: useI18n().t('works.all'),
-					value: 'all'
-				},
-				// {
-				// 	name: useI18n().t('works.FavoriteWorks'),
-				// 	value: 'favoriteWorks'
-				// },
-				// {
-				// 	name: useI18n().t('works.MyWorks'),
-				// 	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:1,
-					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
-				},{
-					title:'Source Fashion 2024',
-					time:'14 Jul 2024',
-					id:1,
-					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
-				},
-			],
+			eventsDetail: {
+			},
 			getListDate:{
 				"getLikePortfolio": 0,
 				"getMyPortfolio": 0,
@@ -102,50 +81,21 @@ export default defineComponent({
 		let systemUser = computed(()=>{
 			return store.state.UserHabit.systemUser
 		})
-		let selectMenu:any = ref({
-			label:'全部',
-			value:'all',
-		})
-		let setWorksSelect = (val:any) => {
-			// filter.worksSelect = val.value
-			// filter.getListDate.getLikePortfolio = 0
-			// filter.getListDate.getMyPortfolio = 0
-			// if(val.value == 'all'){
-			// }else if(val.value == 'favoriteWorks'){
-			// 	filter.getListDate.getLikePortfolio = 1
-			// }else if(val.value == 'myWorks'){
-			// 	filter.getListDate.getMyPortfolio = 1
-			// }
-			// filter.getListDate.page = 0
-			filter.isShowMark = false
-			filter.isNoData = false
-			// getPorfolio()
-		}
 		let likeFile = (item:any,type:string) => {
 		}
 		let setBack = ()=>{
 			router.go(-1);
 		}
 		onMounted (()=>{
-			// filter.isShowMark = false
-			// filter.isNoData = false
-			// getPorfolio()
-			// let worksPage:any = document.querySelector('.eventsDetail_page')
-			// let imgParent:any = document.querySelector('.eventsDetail_page .page_loading')
-			// new IntersectionObserver(
-			// 	(entries, observer) => {
-			// 		// 如果不是相交，则直接返回
-			// 		if (!entries[0].intersectionRatio) return;
-			// 		filter.getListDate.page += 1
-			// 		getPorfolio()
-			// 	},
-			// ).observe(imgParent);
+			eventsItem.forEach((item:any)=>{
+				if(item.id == router.currentRoute.value.query.id){
+					filter.eventsDetail = item;
+				}
+			})
 		})
         return {
 			...toRefs(filter),
 			systemUser,
-			selectMenu,
-			setWorksSelect,
 			likeFile,
 			setBack,
         }
@@ -159,19 +109,66 @@ export default defineComponent({
 .eventsDetail_page {
 	min-height: 100%;
     width: 100%;
+	padding: 0 9rem;
+	padding-top: 5rem;
+	@media (max-width: 768px) {
+		padding-top: 0;
+		min-height: auto;
+		padding-bottom: 10rem;
+	}
 	.eventsDetail_title{
 		display: flex;
-		padding: 2rem 4rem;
+		padding: 2rem 0rem;
 		align-items: center;
-		cursor: pointer;
+		border-bottom: 1px solid #f0f0f0;
+		position: sticky;
+		top: 0;
+		.modal_title_text{
+			cursor: pointer;
+			display: flex;
+			margin-bottom: 0;
+		}
 		i{
 			display: flex;
 			align-items: center;
 			margin-right: 1rem;
 		}
 	}
-	.eventsDetail_title:hover div{
+	.eventsDetail_title:hover .eventsDetail_title_text{
 		text-decoration: underline;
 	}
+	.eventsDetail_content{
+		display: flex;
+		justify-content: space-between;
+		margin-top: 8rem;
+		@media (max-width: 768px) {
+			flex-direction: column;
+		}
+		.eventsDetail_content_left,.eventsDetail_content_right{
+			width: 50%;
+			@media (max-width: 768px) {
+				width: 100%;
+			}
+		}
+		.eventsDetail_content_left{
+			width: 40%;
+			@media (max-width: 768px) {
+				width: 100%;
+			}
+			.eventsDetail_content_left_img{
+				width: 100%;
+				cursor: zoom-in;
+			}
+		}
+		.eventsDetail_content_right{
+			.modal_title_text{
+				letter-spacing: .4rem;
+				font-weight: 600;
+			}
+			.modal_title_text:last-child{
+				border-bottom: 3px solid;
+			}
+		}
+	}
 }
 </style>
\ No newline at end of file
diff --git a/src/component/WorksPage/Falls.vue b/src/component/WorksPage/Falls.vue
index daf9b6fe..c529d6a4 100644
--- a/src/component/WorksPage/Falls.vue
+++ b/src/component/WorksPage/Falls.vue
@@ -237,7 +237,7 @@ export default defineComponent({
 				var remain = t_width - width * num_x;
 				var gap_x = remain / (num_x + 1);
 				this.gap_x = gap_x;
-				this.gap_y = gap_x > 30 ? 30 : gap_x;
+				this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
 				this.num_x = num_x;
 				var poss = [];
 				for (var i = 0; i < num_x; i++) poss.push(0);
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f1ea9cf..37389753 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,7 +64,11 @@ const routes: Array<RouteRecordRaw> = [
 				path:'events',
 				name:'events',
 				component: _import_custom('HomeView/Events.vue'),
-			},
+			},{
+				path:'eventsDetail',
+				name:'eventsDetail',
+				component: _import_component('Events/eventsDetail.vue'),
+			}
 		]
 	},
 	{
@@ -85,21 +89,10 @@ const routes: Array<RouteRecordRaw> = [
 				path:'events',
 				name:'SquareEvents',
 				component: _import_custom('HomeView/Events.vue'),
-				// children:[
-				// 	{
-				// 		path: "",
-				// 		name:'eventsDetail',
-				// 		redirect: "/Square/events/eventsDetail"
-				// 	},
-				// 	{
-				// 		path:'eventsDetail',
-				// 		name:'eventsDetail',
-				// 		component: _import_component('Events/eventsDetail.vue'),
-				// 	}
-				// ]
+				
 			},{
 				path:'eventsDetail',
-				name:'eventsDetail',
+				name:'SquareEventsDetail',
 				component: _import_component('Events/eventsDetail.vue'),
 			}
 		]
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index a76d865e..188336f3 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -173,7 +173,7 @@ export default defineComponent({
 				router:'/home/works',
 				name:t('Header.WORKS')
 			},{
-				routerName:['events'],
+				routerName:['events','eventsDetail'],
 				router:'/home/events',
 				name:t('Header.EVENTS')
 			},
diff --git a/src/views/HomeRecommend.vue b/src/views/HomeRecommend.vue
index a5db93bc..519b6b43 100644
--- a/src/views/HomeRecommend.vue
+++ b/src/views/HomeRecommend.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 				router:'/Square/works',
 				name:'GALLERY'
 			},{
-				routerName:['SquareEvents','eventsDetail'],
+				routerName:['SquareEvents','SquareEventsDetail'],
 				router:'/Square/events',
 				name:'EVENTS'
 			},
diff --git a/src/views/HomeView/Events.vue b/src/views/HomeView/Events.vue
index ed32269b..09c524f6 100644
--- a/src/views/HomeView/Events.vue
+++ b/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;
diff --git a/src/views/HomeView/Works.vue b/src/views/HomeView/Works.vue
index 7481e9dd..a0f8c25f 100644
--- a/src/views/HomeView/Works.vue
+++ b/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;