feat: 竞赛页面活动页
This commit is contained in:
BIN
public/image/events/award-poster-zh.gif
Normal file
BIN
public/image/events/award-poster-zh.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
@@ -25,7 +25,7 @@
|
||||
{
|
||||
"paragraph": [
|
||||
{
|
||||
"text": "Scan the QR code for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers from Hong Kong, China, Singapore, South Korea, and beyond, the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
|
||||
"text": "Click the “View Details” button for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers from Hong Kong, China, Singapore, South Korea, and beyond, the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -13,19 +13,19 @@
|
||||
{
|
||||
"id": 3,
|
||||
"title": "AiDA全球设计奖 2026",
|
||||
"imgUrl": "/image/events/award-poster.gif"
|
||||
"imgUrl": "/image/events/award-poster-zh.gif"
|
||||
}
|
||||
],
|
||||
"eventsItem": [
|
||||
{
|
||||
"id": 3,
|
||||
"title": "AiDA全球设计奖 2026",
|
||||
"imgUrl": "/image/events/award-poster.gif",
|
||||
"imgUrl": "/image/events/award-poster-zh.gif",
|
||||
"textList": [
|
||||
{
|
||||
"paragraph": [
|
||||
{
|
||||
"text": "秉承推动 AI 赋能创意设计的初衷，Code‑Create 举办了「AiDA 全球设计大奖 2026」，面向来自香港、中国、新加坡、韩国及全球的设计师，鼓励大家探索 AI 与时尚设计的无限可能，突破传统界限，释放科技与想象力的创新潜能。扫描二维码获取更多比赛信息，抓住成为 AI 时尚先锋的机会吧！"
|
||||
"text": "秉承推动 AI 赋能创意设计的初衷，Code‑Create 举办了「AiDA 全球设计大奖 2026」，面向来自香港、中国、新加坡、韩国及全球的设计师，鼓励大家探索 AI 与时尚设计的无限可能，突破传统界限，释放科技与想象力的创新潜能。点击“查看详情”按钮获取更多比赛信息，抓住成为 AI 时尚先锋的机会吧！"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1,142 +1,175 @@
|
||||
<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">
|
||||
{{ $t("event.detail") }}
|
||||
</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 { t, locale } = useI18n()
|
||||
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 = () => {
|
||||
let language = locale.value === "ENGLISH" ? "en" : "zh"
|
||||
let url = `https://aida-global-design-awards.com.hk/${language}`
|
||||
window.open(url, "_blank")
|
||||
|
||||
// router.push("/award/index")
|
||||
}
|
||||
onMounted(() => {
|
||||
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 +179,7 @@ export default defineComponent({
|
||||
min-height: auto;
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
.eventsDetail_title{
|
||||
.eventsDetail_title {
|
||||
display: flex;
|
||||
padding: 2rem 0rem;
|
||||
align-items: center;
|
||||
@@ -154,21 +187,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 +209,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 +280,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>
|
||||
|
||||
@@ -1532,7 +1532,8 @@ export default {
|
||||
LiquefactionTool: '液化工具'
|
||||
},
|
||||
event: {
|
||||
back: '返回'
|
||||
back: '返回',
|
||||
detail:'查看详情'
|
||||
},
|
||||
admin: {
|
||||
allUser: '所有用户',
|
||||
|
||||
3543
src/lang/en.ts
3543
src/lang/en.ts
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user