eventDetail页面
This commit is contained in:
X1627315083@163.com
@@ -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%", // 滚动触发器的起始滚动位置
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user