aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AiDA跳转竞赛页面

Browse Source
This commit is contained in:
zhangyahui
2026-02-05 10:33:42 +08:00
parent 69643dbc83
commit dc1ab330cf
1 changed files with 158 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,142 +1,171 @@
<template>
<div class="eventsDetail_page" :class="{active:isScroll}">
<div class="eventsDetail_title ">
<div class="eventsDetail_page" :class="{ active: isScroll }">
<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>
<div class="modal_title_text" v-for="item in eventsDetail.textList">
<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 v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
<div
class="eventsDetail_content_right_btn"
v-for="(buttonItem, buttonIndex) in item?.button"
@click="openButton(buttonItem, buttonIndex)"
>
<div v-show="!loadingShow[buttonIndex]" class="started_btn">
{{ buttonItem.text }}
</div>
<div v-show="loadingShow[buttonIndex]" class="started_btn">
<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
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>
</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 { LoadingOutlined } from "@ant-design/icons-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 { message, Upload, Modal } from "ant-design-vue";
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 eventData from "@/assets/json/events.json";
import eventDataCn from "@/assets/json/events_cn.json";
import { useStore } from "vuex";
import { Https } from "@/tool/https"
import { message, Upload, Modal } from "ant-design-vue"
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 eventData from "@/assets/json/events.json"
import eventDataCn from "@/assets/json/events_cn.json"
import { useStore } from "vuex"
export default defineComponent({
components: {
components: {
generalMenu,
fullScreenImg,
},
props:{
isScroll:{
type:Boolean,
default:true,
},
fullScreenImg
},
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,//如果数据为空就不加载
loadingShow:{},
})
let likeFile = (item:any,type:string) => {
props: {
isScroll: {
type: Boolean,
default: true
}
let setBack = ()=>{
router.go(-1);
},
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, //如果数据为空就不加载
loadingShow: {}
})
let likeFile = (item: any, type: string) => {}
let setBack = () => {
router.go(-1)
// router.push('/home/events')
}
let openButton = (data:any,index:number)=>{
if(filter.loadingShow[index]){
}
let openButton = (data: any, index: number) => {
if (filter.loadingShow[index]) {
return
}
filter.loadingShow[index] = true
Https.axiosGet(data.https).then(
(rv: any) => {
if(rv){
Https.axiosGet(data.https)
.then((rv: any) => {
if (rv) {
message.success(data.success)
filter.loadingShow[index] = false
}
}
).catch(res=>{
filter.loadingShow[index] = false
});
})
.catch((res) => {
filter.loadingShow[index] = false
})
}
onMounted (()=>{
const { t, locale } = useI18n();
const currentLocale = locale.value;
let eventLangData:any
if(currentLocale == 'ENGLISH'){
const openDetail = () => {
// window.open("https://aida-global-design-awards.com.hk", "_blank")
router.push("/award/index")
}
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)=>{
if(item.id == router.currentRoute.value.query.eventId){
filter.eventsDetail = item;
eventLangData.eventsItem.forEach((item: any) => {
if (item.id == router.currentRoute.value.query.eventId) {
filter.eventsDetail = item
}
})
})
return {
return {
...toRefs(filter),
likeFile,
setBack,
openButton,
}
},
directives:{
detailText:{
mounted (el,binding) {
openDetail
}
},
directives: {
detailText: {
mounted(el, binding) {
el.innerHTML = binding.value
}
}
},
async mounted(){
},
async mounted() {}
})
</script>
<style lang="less">
.eventsDetail_page {
min-height: 100%;
width: 100%;
width: 100%;
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{
.modal_title_text{
letter-spacing: .4rem;
.eventsDetail_content_right {
.modal_title_text {
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({
}
}
}
</style>
.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>