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

src/component/Events/eventsDetail.vue

@@ -3,76 +3,102 @@
 		<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,
+			default: true
-		 },
+		}
 	},
 	setup() {
-		const router = useRouter();
+		const router = useRouter()
-        const store = useStore();
+		const store = useStore()
 		let filter: any = reactive({
-			eventsDetail: {
+			eventsDetail: {},
-			},
 			getListDate: {
-				"getLikePortfolio": 0,
+				getLikePortfolio: 0,
-				"getMyPortfolio": 0,
+				getMyPortfolio: 0,
 				page: 1,
-				size:10,
+				size: 10
 			},
 			isShowMark: false,
 			isNoData: false, //如果数据为空就不加载
-			loadingShow:{},
+			loadingShow: {}
 		})
-		let likeFile = (item:any,type:string) => {
+		let likeFile = (item: any, type: string) => {}
-		}
 		let setBack = () => {
-			router.go(-1);
+			router.go(-1)
 			// router.push('/home/events')
 		}
 		let openButton = (data: any, index: number) => {
@@ -80,29 +106,33 @@ export default defineComponent({
 				return
 			}
 			filter.loadingShow[index] = true
-			Https.axiosGet(data.https).then(
+			Https.axiosGet(data.https)
-                (rv: any) => {
+				.then((rv: any) => {
 					if (rv) {
 						message.success(data.success)
 						filter.loadingShow[index] = false
 					}
-                }
+				})
-            ).catch(res=>{
+				.catch((res) => {
 					filter.loadingShow[index] = false
-            });
+				})
+		}
+		const openDetail = () => {
+			// window.open("https://aida-global-design-awards.com.hk", "_blank")
+			router.push("/award/index")
 		}
 		onMounted(() => {
-			const { t, locale } = useI18n();
+			const { t, locale } = useI18n()
-			const currentLocale = locale.value;
+			const currentLocale = locale.value
 			let eventLangData: any
-			if(currentLocale == 'ENGLISH'){
+			if (currentLocale == "ENGLISH") {
 				eventLangData = eventData
 			} else {
 				eventLangData = eventDataCn
 			}
 			eventLangData.eventsItem.forEach((item: any) => {
 				if (item.id == router.currentRoute.value.query.eventId) {
-					filter.eventsDetail = item;
+					filter.eventsDetail = item
 				}
 			})
 		})
@@ -111,6 +141,7 @@ export default defineComponent({
 			likeFile,
 			setBack,
 			openButton,
+			openDetail
 		}
 	},
 	directives: {
@@ -120,9 +151,7 @@ export default defineComponent({
 			}
 		}
 	},
-    async mounted(){
+	async mounted() {}
-	
-    },
 })
 </script>
 <style lang="less">
@@ -176,7 +205,8 @@ 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%;
@@ -199,8 +229,19 @@ export default defineComponent({
 		}
 		.eventsDetail_content_right {
 			.modal_title_text {
-				letter-spacing: .4rem;
+				letter-spacing: 0.4rem;
 				font-weight: 600;
+				&-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 {
@@ -209,7 +250,6 @@ export default defineComponent({
 					}
 					li {
 						width: 48%;
-						
 					}
 					em {
 						// font-family: auto;
@@ -224,7 +264,6 @@ export default defineComponent({
 					.eventsDetail_content_right_btn {
 					}
 				}
-				
 			}
 			.modal_title_text:last-child {
 			}
@@ -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>