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
2024-07-18 13:19:43 +08:00
parent 246128f132
commit 0e46da8978
10 changed files with 240 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/assets/json/events.json Normal file
View File

@@ -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!"
}
]
}
]
}
]
}

7
src/assets/style/style.css
View File

@@ -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;

7
src/assets/style/style.less
View File

@@ -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);

189
src/component/Events/eventsDetail.vue
View File

@@ -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>

2
src/component/WorksPage/Falls.vue
View File

@@ -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);

21
src/router/index.ts
View File

@@ -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'),
}
]

2
src/views/HomeMain.vue
View File

@@ -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')
},

2
src/views/HomeRecommend.vue
View File

@@ -90,7 +90,7 @@ export default defineComponent({
router:'/Square/works',
name:'GALLERY'
},{
routerName:['SquareEvents','eventsDetail'],
routerName:['SquareEvents','SquareEventsDetail'],
router:'/Square/events',
name:'EVENTS'
},

69
src/views/HomeView/Events.vue
View File

@@ -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;

3
src/views/HomeView/Works.vue
View File

@@ -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;