Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/component/Events/eventsDetail.vue

@@ -1,108 +1,138 @@
 <template>
-    <div class="eventsDetail_page" :class="{active:isScroll}">
+	<div class="eventsDetail_page" :class="{ active: isScroll }">
-		<div class="eventsDetail_title ">
+		<div class="eventsDetail_title">
 			<div class="modal_title_text" @click="setBack">
 				<i class="fi fi-sr-left"></i>
-				<div class="eventsDetail_title_text">{{ $t('event.back') }}</div>
+				<div class="eventsDetail_title_text">{{ $t("event.back") }}</div>
 			</div>
 		</div>
 		<div class="eventsDetail_content">
 			<div class="eventsDetail_content_left">
-				<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
+				<fullScreenImg
+					:src="eventsDetail.imgUrl"
+					width="100%"
+					:center="true"
+				></fullScreenImg>
 			</div>
 			<div class="eventsDetail_content_right">
-				<div class="modal_title_text">
+				<div class="modal_title_text modal_title_text-header flex space-between">
 					<div>{{ eventsDetail.title }}</div>
+					<div class="detail-btn" v-if="eventsDetail.id === 3" @click="openDetail">
+						View Details
 					</div>
-				<div class="modal_title_text" v-for="item in eventsDetail.textList">
+				</div>
+				<div class="modal_title_text content" v-for="item in eventsDetail.textList">
 					<div class="eventsDetail_content_right_btn_box">
-						<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
+						<div
-							<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
+							class="eventsDetail_content_right_btn"
-							<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
+							v-for="(buttonItem, buttonIndex) in item?.button"
+							@click="openButton(buttonItem, buttonIndex)"
+						>
+							<div v-show="!loadingShow[buttonIndex]" class="started_btn">
+								{{ buttonItem.text }}
 							</div>
-					</div>
+							<div v-show="loadingShow[buttonIndex]" class="started_btn">
-					<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
+								<i class="fi fi-br-loading"></i>
 							</div>
 						</div>
 					</div>
+					<div
+						class="modal_title_text_intro"
+						v-for="introItem in item?.paragraph"
+						:class="{ active: introItem.display == 'flex' }"
+						v-detailText="introItem.text"
+					></div>
+				</div>
+			</div>
 		</div>
-	
 	</div>
 </template>
 <script lang="ts">
-import { LoadingOutlined } from "@ant-design/icons-vue";
+import { LoadingOutlined } from "@ant-design/icons-vue"
-import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
+import {
+	defineComponent,
+	h,
+	toRefs,
+	ref,
+	reactive,
+	onMounted,
+	nextTick,
+	provide,
+	computed
+} from "vue"
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { Https } from "@/tool/https";
+import { Https } from "@/tool/https"
-import { message, Upload, Modal } from "ant-design-vue";
+import { message, Upload, Modal } from "ant-design-vue"
-import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
+import fullScreenImg from "@/component/HomePage/fullScreenImg.vue"
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router"
-import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n"
-import generalMenu from "@/component/HomePage/generalMenu.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue"
-import eventData from "@/assets/json/events.json";
+import eventData from "@/assets/json/events.json"
-import eventDataCn from "@/assets/json/events_cn.json";
+import eventDataCn from "@/assets/json/events_cn.json"
-import { useStore } from "vuex";
+import { useStore } from "vuex"
 export default defineComponent({
 	components: {
 		generalMenu,
-		fullScreenImg,
+		fullScreenImg
-    },
-	props:{
-		isScroll:{
-			 type:Boolean,
-			 default:true,
 	},
+	props: {
+		isScroll: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup() {
-		const router = useRouter();
+		const router = useRouter()
-        const store = useStore();
+		const store = useStore()
-		let filter:any = reactive({
+		let filter: any = reactive({
-			eventsDetail: {
+			eventsDetail: {},
+			getListDate: {
+				getLikePortfolio: 0,
+				getMyPortfolio: 0,
+				page: 1,
+				size: 10
 			},
-			getListDate:{
+			isShowMark: false,
-				"getLikePortfolio": 0,
+			isNoData: false, //如果数据为空就不加载
-				"getMyPortfolio": 0,
+			loadingShow: {}
-				page:1,
-				size:10,
-			},
-			isShowMark:false,
-			isNoData:false,//如果数据为空就不加载
-			loadingShow:{},
 		})
-		let likeFile = (item:any,type:string) => {
+		let likeFile = (item: any, type: string) => {}
-		}
+		let setBack = () => {
-		let setBack = ()=>{
+			router.go(-1)
-			router.go(-1);
 			// router.push('/home/events')
 		}
-		let openButton = (data:any,index:number)=>{
+		let openButton = (data: any, index: number) => {
-			if(filter.loadingShow[index]){
+			if (filter.loadingShow[index]) {
 				return
 			}
 			filter.loadingShow[index] = true
-			Https.axiosGet(data.https).then(
+			Https.axiosGet(data.https)
-                (rv: any) => {
+				.then((rv: any) => {
-					if(rv){
+					if (rv) {
 						message.success(data.success)
 						filter.loadingShow[index] = false
 					}
-                }
+				})
-            ).catch(res=>{
+				.catch((res) => {
 					filter.loadingShow[index] = false
-            });
+				})
 		}
-		onMounted (()=>{
+		const openDetail = () => {
-			const { t, locale } = useI18n();
+			// window.open("https://aida-global-design-awards.com.hk", "_blank")
-			const currentLocale = locale.value;
+			router.push("/award/index")
-			let eventLangData:any
+		}
-			if(currentLocale == 'ENGLISH'){
+		onMounted(() => {
+			const { t, locale } = useI18n()
+			const currentLocale = locale.value
+			let eventLangData: any
+			if (currentLocale == "ENGLISH") {
 				eventLangData = eventData
-			}else{
+			} else {
 				eventLangData = eventDataCn
 			}
-			eventLangData.eventsItem.forEach((item:any)=>{
+			eventLangData.eventsItem.forEach((item: any) => {
-				if(item.id == router.currentRoute.value.query.eventId){
+				if (item.id == router.currentRoute.value.query.eventId) {
-					filter.eventsDetail = item;
+					filter.eventsDetail = item
 				}
 			})
 		})
@@ -111,18 +141,17 @@ export default defineComponent({
 			likeFile,
 			setBack,
 			openButton,
+			openDetail
 		}
 	},
-	directives:{
+	directives: {
-		detailText:{
+		detailText: {
-			mounted (el,binding) {
+			mounted(el, binding) {
 				el.innerHTML = binding.value
 			}
 		}
 	},
-    async mounted(){
+	async mounted() {}
-	
-    },
 })
 </script>
 <style lang="less">
@@ -132,11 +161,11 @@ export default defineComponent({
 	padding: 0 6rem;
 	padding-top: 5rem;
 
-	&.active{
+	&.active {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		.eventsDetail_content{
+		.eventsDetail_content {
 			overflow-y: auto;
 			width: 100%;
 		}
@@ -146,7 +175,7 @@ export default defineComponent({
 		min-height: auto;
 		padding-bottom: 10rem;
 	}
-	.eventsDetail_title{
+	.eventsDetail_title {
 		display: flex;
 		padding: 2rem 0rem;
 		align-items: center;
@@ -154,21 +183,21 @@ export default defineComponent({
 		top: 0;
 		z-index: 222;
 		background: #fff;
-		.modal_title_text{
+		.modal_title_text {
 			cursor: pointer;
 			display: flex;
 			margin-bottom: 0;
 		}
-		.modal_title_text:hover .eventsDetail_title_text{
+		.modal_title_text:hover .eventsDetail_title_text {
 			text-decoration: underline;
 		}
-		i{
+		i {
 			display: flex;
 			align-items: center;
 			margin-right: 1rem;
 		}
 	}
-	.eventsDetail_content{
+	.eventsDetail_content {
 		border-top: 1px solid #f0f0f0;
 		display: flex;
 		justify-content: space-between;
@@ -176,59 +205,69 @@ export default defineComponent({
 		@media (max-width: 768px) {
 			flex-direction: column;
 		}
-		.eventsDetail_content_left,.eventsDetail_content_right{
+		.eventsDetail_content_left,
+		.eventsDetail_content_right {
 			width: 50%;
 			@media (max-width: 768px) {
 				width: 100%;
 			}
 		}
-		.eventsDetail_content_left{
+		.eventsDetail_content_left {
 			width: 40%;
 			max-height: 60rem;
 			@media (max-width: 768px) {
 				width: 100%;
 			}
-			.ant-image{
+			.ant-image {
 				// height: auto;
 				height: 100%;
 			}
-			.eventsDetail_content_left_img{
+			.eventsDetail_content_left_img {
 				width: 100%;
 				cursor: zoom-in;
 			}
 		}
-		.eventsDetail_content_right{
+		.eventsDetail_content_right {
-			.modal_title_text{
+			.modal_title_text {
-				letter-spacing: .4rem;
+				letter-spacing: 0.4rem;
 				font-weight: 600;
-				.modal_title_text_intro{
+				&-header {
+					display: flex;
+					flex-wrap: wrap;
+					align-items: flex-end;
+					justify-content: space-between;
+					gap: 1rem;
+					> div:first-child {
+						flex: 1;
+						min-width: 0;
+					}
+				}
+				.modal_title_text_intro {
 					display: block;
-					&.active{
+					&.active {
 						display: flex;
 						justify-content: space-between;
 					}
-					li{
+					li {
 						width: 48%;
-						
 					}
-					em{
+					em {
 						// font-family: auto;
 					}
-					a{
+					a {
 						display: inline;
 					}
 				}
-				.eventsDetail_content_right_btn_box{
+				.eventsDetail_content_right_btn_box {
 					display: flex;
 					justify-content: space-evenly;
-					.eventsDetail_content_right_btn{
+					.eventsDetail_content_right_btn {
 					}
 				}
-				
 			}
-			.modal_title_text:last-child{
+			.modal_title_text:last-child {
 			}
-			.modal_title_text:last-child::after{
+			.modal_title_text:last-child::after {
 				content: "";
 				display: block;
 				border-top: 3px solid;
@@ -237,4 +276,17 @@ export default defineComponent({
 		}
 	}
 }
+.detail-btn {
+	// width: 11rem;
+	padding: 0 1.4rem;
+	height: 4rem;
+	line-height: 4rem;
+	text-align: center;
+	color: #fff;
+	border-radius: 2rem;
+	background-color: #000;
+	font-size: 1.4rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
 </style>