事件
This commit is contained in:
X1627315083
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user