aida_front/src/component/Events/eventsDetail.vue

<template>
    <div class="eventsDetail_page">
		<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 class="eventsDetail_content_left">
				<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
			</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>
	
    </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";
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:{
			 type:Boolean,
			 default:true,
		 },
	},
    setup() {
		const router = useRouter();
        const store = useStore();
		let filter:any = reactive({
			eventsDetail: {
			},
			getListDate:{
				"getLikePortfolio": 0,
				"getMyPortfolio": 0,
				page:1,
				size:10,
			},
			isShowMark:false,
			isNoData:false,//如果数据为空就不加载
		})
		let systemUser = computed(()=>{
			return store.state.UserHabit.systemUser
		})
		let likeFile = (item:any,type:string) => {
		}
		let setBack = ()=>{
			router.go(-1);
		}
		onMounted (()=>{
			eventsItem.forEach((item:any)=>{
				if(item.id == router.currentRoute.value.query.id){
					filter.eventsDetail = item;
				}
			})
		})
        return {
			...toRefs(filter),
			systemUser,
			likeFile,
			setBack,
        }
    },
    async mounted(){
	
    },
})
</script>
<style lang="less">
.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 0rem;
		align-items: center;
		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 .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>