Files
aida_front/src/views/AwardPage/components/Success.vue
2026-01-26 13:26:46 +08:00

79 lines
1.8 KiB
Vue

<template>
<div class="success-container flex flex-col align-center">
<img
:src="info.icon"
alt=""
class="icon-img"
/>
<div class="title">{{ info.title }}</div>
<div class="desc">
{{ info.desc }}
<!-- <div>
Please review your submitted information in the AiDA in-platform message.
</div>
<div>
You may edit it if needed. Competition updates and results will be sent
via email.
</div> -->
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import successIcon from '@/assets/images/award/successful.png'
import expiredIcon from '@/assets/images/award/expired.png'
const props = defineProps({
isExpired: {
type: Boolean,
default: false
}
})
const info = computed(() => {
if (props.isExpired) {
return {
icon: expiredIcon,
title: 'Application Deadline Passed',
desc: 'The submission deadline for AIDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. '
}
} else {
return {
icon: successIcon,
title: 'Submission Successful',
desc: 'Please review your submitted information in the AiDA in-platform message.\nYou may edit it if needed. Competition updates and results will be sent via email.'
}
}
})
</script>
<style lang="less" scoped>
.success-container {
margin: 0 21.5rem;
padding: 10.6rem 27.3rem 0;
height: 50rem;
position: relative;
top: -16.8rem;
background-color: #fff;
border-radius: 0.8rem;
.icon-img {
width: 12rem;
height: 12rem;
}
.title {
font-family: 'PoppinsBold';
font-weight: 600;
font-size: 3rem;
color: #232323;
text-align: center;
margin: 2rem 0 4rem;
}
.desc {
color: #585858;
font-family: Arial;
font-weight: 400;
font-size: 2.4rem;
text-align: center;
}
}
</style>