eventDetail页面

src/directives/tween.ts

@@ -4,11 +4,12 @@ export default {
 	name: 'tween',
 	mounted(el: HTMLElement, binding: any) {
 		const params = binding.value
+		const duration = params.duration || 1
 		// if(!binding.value.isGsap)return
 		let dom = document.querySelector('body')
 		gsap.registerPlugin(ScrollTrigger);
 		let tl1 = gsap.timeline();
-		tl1.from(el,1, params,)
+		tl1.from(el,duration, params,)
 		ScrollTrigger.create({
 			trigger: el, // 触发器元素
 			start: "top 90%", // 滚动触发器的起始滚动位置

src/pages/events-detail/index.vue

@@ -5,6 +5,10 @@ import listZhCn from './list-zh-cn.js'
 import listZhTw from './list-zh-tw.js'
 import { LangType } from '../../lang'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import MyEvent from '@/tools/myEvents.js'
+
+const route = useRoute()
 const { locale } = useI18n()
 const allList = computed(() => {
 	if (locale.value === LangType.zhCn) {
@@ -15,12 +19,51 @@ const allList = computed(() => {
 	}
 	return listEn
 })
+const data = computed(() => {
+	return allList.value.find(item => item.id === Number(route.params.id))
+})
+
+const playVideo = (params)=>{
+	MyEvent.emit("playVideo",{
+		url: params.video,
+		poster: params.poster,
+	});
+}
 defineExpose({})
 </script>
 <template>
 	<div class="events">
 		<div class="placeholder"></div>
-		
+		<section class="detail">
+			<div class="content">
+				<div class="video" v-if="data?.coverVideo">
+					<img :src="data?.posterUrl || data?.coverUrl" alt="">
+					<span class="iconfont icon-bofang" @click="playVideo({video: data.coverVideo, poster: data.posterUrl || data.coverUrl})"></span>
+				</div>
+				<div class="img">
+					<img :src="data?.coverUrl" alt="">
+				</div>
+				<div class="title">
+					<h2>{{ data?.title }}</h2>
+				</div>
+				<div class="info">
+					<p v-for="item in data?.infoList">
+						{{ item }}
+					</p>
+				</div>
+				<div class="video" v-if="data?.videoUrl">
+					<img :src="data?.posterUrl || data?.coverUrl" alt="">
+					<span class="iconfont icon-bofang" @click="playVideo({video: data.videoUrl, poster: data.posterUrl || data.coverUrl})"></span>
+				</div>
+			</div>
+		</section>
+		<section class="img-group" v-if="data?.urlGroup?.length > 0">
+			<div class="content">
+				<div v-for="item in data?.urlGroup" :key="item" class="img-item">
+					<img v-tween="{ scale: .7, duration: .5 }" :src="item" alt="">
+				</div>
+			</div>
+		</section>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -32,5 +75,87 @@ defineExpose({})
 			top: 0;
 			background-color: #000;
 		}
+		> .detail{
+			margin-bottom: 40px;
+			> .content{
+				margin: 0 auto;
+				margin-top: 100px;
+				padding: 10px;
+				max-width: 740px;
+				> .img{
+					margin-bottom: 20px;
+					img{
+						width: 100%;
+					}
+				}
+				> .title {
+					margin-bottom: 20px;
+					> h2{
+						font-family: "Poppins", Sans-serif;
+						font-weight: 600;
+						color: #000000;
+						line-height: 1;
+						font-size: 24px;
+					}
+				}
+				> .info {
+					> p{
+						font-family: "Poppins", Sans-serif;
+						color: #333333;
+						line-height: 1.5;
+						font-size: 14px;
+						margin: 10px 0;
+					}
+				}
+				> .video{
+					position: relative;
+					width: 100%;
+					> img{
+						width: 100%;
+						height: 405px;
+						object-fit: cover;
+					}
+					> .icon-bofang{
+						font-size: 100px;
+						color: #fff;
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						animation: identifier 2s ease-in-out infinite;
+						// box-shadow: 0 0 10px #fff;
+						transition: .3s all;
+						cursor: pointer;
+						@keyframes identifier {
+							0% {
+								transform: translate(-50%,-50%) scale(1);
+								filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
+							}
+							50% {
+								transform: translate(-50%,-50%) scale(.95);
+								filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
+							}
+							100% {
+								transform: translate(-50%,-50%) scale(1);
+								filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
+							}
+						}
+					}
+				}
+			}
+		}
+		> .img-group{
+			> .content{
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				> .img-item{
+					img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+				}
+			}
+		}
 	}
 </style>

src/pages/events-detail/list-en.js

@@ -710,7 +710,7 @@ export default [
 			"<b>>Award Winners:</b\nGrand Prize: Nina Waszak\nRunners-up: Kock Man Yan, Yuzhi Lai",
 			"We believe AI-powered fashion will soon become part of daily life, driving efficiency and sustainability worldwide. At the intersection of fashion and technology, new breakthroughs will emerge — lighting the way forward and opening a new chapter in fashion.",
 		],
-		"videoUrl": "https://code-create.com.hk/wp-content/uploads/2025/03/0310-video-for-ceremony.mp4",
+		"videoUrl": "",
 		"urlGroup": [
 			"https://code-create.com.hk/wp-content/uploads/2025/03/2-scaled.jpg",
 			"https://code-create.com.hk/wp-content/uploads/2025/03/3-scaled.jpg",
@@ -879,7 +879,7 @@ export default [
 			"Fashion design instructors and students from SFT, DI, and Youth College were amazed by AiDA’s cutting-edge design functions and the endless creative possibilities. The 5-hour event flew by, everyone had a fantastic time!",
 			"Stay tuned for more exciting events！",
 		],
-		"videoUrl": "https://code-create.com.hk/wp-content/uploads/2024/11/AiDA-X-RCA-workshop-1.mov",
+		"videoUrl": "",
 		"urlGroup": [
 			"https://code-create.com.hk/wp-content/uploads/2024/11/1.jpg",
 			"https://code-create.com.hk/wp-content/uploads/2024/11/2-scaled.jpg",

src/pages/events/all-events.vue

@@ -6,16 +6,6 @@ const props = defineProps({
 		default: () => [],
 	},
 })
-const eventList = ref([
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
-		title:'Elevate Operation Efficiency',
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-600x750.gif',
-		title:'Elevate Operation Efficiency',
-	},
-])
 defineExpose({})
 </script>
 <template>

src/routes.ts

@@ -46,6 +46,10 @@ export const routes: RouteRecordRaw[] = [
 				name: 'events',
 				component: () => import('./pages/events/index.vue')
 			},
+			{	path: 'events/:id',
+				name: 'events-detail',
+				component: () => import('./pages/events-detail/index.vue')
+			},
 			{	path: 'user-stories',
 				name: 'user-stories',
 				component: () => import('./pages/user-stories/index.vue')