feat: award页面
This commit is contained in:
437
src/views/AwardPage/apply.vue
Normal file
437
src/views/AwardPage/apply.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<div class="apply-container">
|
||||
<div class="banner">
|
||||
<div class="slogan">BLOOM YOUR CREATIVITY • AiDA GLOBAL FASHION AWARD 2026</div>
|
||||
<div class="title">Application Form</div>
|
||||
<div class="form-header">
|
||||
<div class="form-title">Email Verification</div>
|
||||
<div class="desc">AiDA Users Only</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-container">
|
||||
<div class="form-content">
|
||||
<a-form
|
||||
name="form"
|
||||
ref="formRef"
|
||||
layout="vertical"
|
||||
:model="form"
|
||||
:rules="rulesRef"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="email-box full-row">
|
||||
<a-form-item name="email" required label="Email Address">
|
||||
<div class="email-wrapper flex align-center">
|
||||
<a-input v-model:value="form.email" />
|
||||
<div class="code-btn" @click="handleSendCode">Send Code</div>
|
||||
</div>
|
||||
<div class="tips">
|
||||
Please use the email address you registered with AiDA.
|
||||
</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<template v-for="item in formKeys" :key="item.key">
|
||||
<a-form-item
|
||||
v-if="item.key !== 'email'"
|
||||
:required="item.required"
|
||||
:label="item.label"
|
||||
:name="item.key"
|
||||
>
|
||||
<a-input v-model:value="form[item.key]" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="posi"
|
||||
:footer="null"
|
||||
:maskClosable="false"
|
||||
:closable="false"
|
||||
wrapClassName="code-modal"
|
||||
forceRender
|
||||
:keyboard="false"
|
||||
:style="{ top: '29.3rem' }"
|
||||
>
|
||||
<div class="verify-container flex flex-col align-center">
|
||||
<img src="@/assets/images/award/close.svg" class="close-icon" @click="handleCloseModal" />
|
||||
<div class="title">Check your email</div>
|
||||
<div class="desc">Enter the 6-digital code sent to</div>
|
||||
<div class="email">{{ form.email }}</div>
|
||||
<VerificationCodeInput
|
||||
ref="codeInputRef"
|
||||
@complete="onCodeComplete"
|
||||
@change="onCodeChange"
|
||||
/>
|
||||
<div class="verify-btn" @click="handleVerifyCode">Verify</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { debounce } from 'lodash-es'
|
||||
import type { Rule } from 'ant-design-vue/es/form'
|
||||
import { message } from 'ant-design-vue'
|
||||
import VerificationCodeInput from './components/VerificationCodeInput.vue'
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = ref({
|
||||
email: '123@qq.com',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
gender: '',
|
||||
occupation: '',
|
||||
age: '',
|
||||
counterOrRegion: '',
|
||||
phone: '',
|
||||
portfoilo: '',
|
||||
// code: '',
|
||||
title: '',
|
||||
description: '',
|
||||
pdfFile: null,
|
||||
videoFile: null
|
||||
})
|
||||
|
||||
// 验证码输入组件引用
|
||||
const codeInputRef = ref()
|
||||
|
||||
const isValidEmail = email => {
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
||||
return emailRegex.test(email)
|
||||
}
|
||||
const validEmail = (rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('Please input the email address')
|
||||
}
|
||||
if (!isValidEmail(value)) {
|
||||
return Promise.reject('Please input a valid email address')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
const validateNumber = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('Please fill in this section.')
|
||||
}
|
||||
if (!Number.isInteger(value)) {
|
||||
return Promise.reject('Please input digits')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const validatePhone = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('Please enter your phone number.')
|
||||
}
|
||||
const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/
|
||||
if (!phoneRegex.test(value)) {
|
||||
return Promise.reject('Please enter a valid phone number.')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const validateVerificationCode = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('Please enter the verification code.')
|
||||
}
|
||||
const codeRegex = /^\d{6}$/
|
||||
if (!codeRegex.test(value)) {
|
||||
return Promise.reject('Please enter a 6-digit verification code.')
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
const rulesRef = {
|
||||
email: [{ required: true, validator: validEmail }],
|
||||
firstName: [
|
||||
{ required: true, message: 'Please input your first name', trigger: 'blur' }
|
||||
],
|
||||
lastName: [{ required: true, message: 'Please input your last name', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const formKeys = ref([
|
||||
{
|
||||
label: 'First Name',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'firstName'
|
||||
},
|
||||
{
|
||||
label: 'Last Name',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'lastName'
|
||||
},
|
||||
{
|
||||
label: 'Gender',
|
||||
required: true,
|
||||
type: 'select',
|
||||
key: 'gender'
|
||||
},
|
||||
{
|
||||
label: 'Occupation',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'occupation'
|
||||
},
|
||||
{
|
||||
label: 'Age',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
label: 'Country/Region and City',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'counterOrRegion'
|
||||
},
|
||||
{
|
||||
label: 'Phone Number',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'phone'
|
||||
},
|
||||
{
|
||||
label: 'Email Address',
|
||||
required: true,
|
||||
type: 'button',
|
||||
key: 'email',
|
||||
tips: 'Please use the same email address you registered with AiDA.'
|
||||
},
|
||||
{
|
||||
label: 'Portfoilo Website/Instagram(Optional)',
|
||||
required: false,
|
||||
type: 'input',
|
||||
key: 'portfoilo'
|
||||
},
|
||||
{
|
||||
label: 'Email Verification Code',
|
||||
required: true,
|
||||
type: 'input',
|
||||
key: 'code',
|
||||
tips: 'Please enter a 6-digit numerical code.'
|
||||
}
|
||||
])
|
||||
|
||||
const posi = ref(true)
|
||||
const handleSendCode = debounce(async () => {
|
||||
try {
|
||||
await formRef.value.validateFields(['email'])
|
||||
// TODO: 发送验证码的逻辑
|
||||
message.success('Verification code sent successfully!')
|
||||
posi.value = true
|
||||
} catch (error) {
|
||||
// 校验失败时，错误消息会自动显示在表单项下方
|
||||
// console.log('Validation failed:', error)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
// 验证码输入事件处理
|
||||
const onCodeComplete = (code: string) => {
|
||||
console.log('Verification code completed:', code)
|
||||
// 可以在这里处理验证码完成逻辑
|
||||
}
|
||||
|
||||
const onCodeChange = (code: string) => {
|
||||
console.log('Verification code changed:', code)
|
||||
// 可以在这里处理验证码变化逻辑
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
posi.value = false
|
||||
codeInputRef.value?.reset()
|
||||
}
|
||||
|
||||
const handleVerifyCode = () => {
|
||||
const code = codeInputRef.value?.getCode() || ''
|
||||
if (code.length !== 6) {
|
||||
message.error('Please enter the complete 6-digit verification code')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 验证验证码的逻辑
|
||||
console.log('Verification code:', code)
|
||||
message.success('Verification successful!')
|
||||
|
||||
// 关闭模态框
|
||||
posi.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.full-row {
|
||||
width: 100%;
|
||||
}
|
||||
.banner {
|
||||
height: 54.8rem;
|
||||
background: url('@/assets/images/award/apply_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding: 12rem 21.4rem 0;
|
||||
position: relative;
|
||||
.slogan {
|
||||
color: #585858;
|
||||
font-family: 'ArialBold';
|
||||
font-weight: 700;
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.title {
|
||||
color: #c7342c;
|
||||
font-family: 'PoppinsMedium';
|
||||
font-weight: 500;
|
||||
font-size: 8rem;
|
||||
}
|
||||
.form-header {
|
||||
height: 16.8rem;
|
||||
width: calc(100% - 42.8rem);
|
||||
left: 21.4rem;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 0.8rem;
|
||||
border-top-right-radius: 0.8rem;
|
||||
text-align: left;
|
||||
padding: 6rem 6rem 0;
|
||||
.form-title {
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.desc {
|
||||
color: #b10000;
|
||||
// font-family: 'Instrument';
|
||||
font-family: revert-layer;
|
||||
font-weight: 500;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-container {
|
||||
padding: 0 21.4rem 12rem;
|
||||
background-color: #f5f5f5;
|
||||
.form-content {
|
||||
padding: 4rem 6rem 6rem;
|
||||
background-color: #fff;
|
||||
.ant-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 4rem;
|
||||
.ant-form-item {
|
||||
width: 66.5rem;
|
||||
|
||||
:deep(label) {
|
||||
// display: none;
|
||||
flex-direction: row-reverse;
|
||||
color: #232323;
|
||||
&,
|
||||
&::before {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
border: 0.2rem solid #d5d5d5;
|
||||
height: 6rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-box {
|
||||
:deep(.ant-input) {
|
||||
border: none !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.email-wrapper {
|
||||
border-radius: 0.8rem;
|
||||
border: 0.2rem solid #d5d5d5;
|
||||
}
|
||||
.code-btn {
|
||||
width: 13rem;
|
||||
height: 4rem;
|
||||
color: #585858;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-left: 0.1rem solid #d5d5d5;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-form-item-label) {
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
.verify-container {
|
||||
width: 60rem;
|
||||
height: 49.4rem;
|
||||
padding: 6rem 8.6rem;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
line-height: 5rem;
|
||||
}
|
||||
.desc {
|
||||
color: #585858;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 3.4rem;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
.email {
|
||||
font-family: 'ArialBold';
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
}
|
||||
.verify-btn{
|
||||
background-color: #232323;
|
||||
height: 4.2rem;
|
||||
border-radius: 8px;
|
||||
line-height: 4.2rem;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: 'ArialBold';
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.code-modal {
|
||||
.ant-modal-content .ant-modal-body {
|
||||
padding: 0;
|
||||
// width: 60rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
236
src/views/AwardPage/components/VerificationCodeInput.vue
Normal file
236
src/views/AwardPage/components/VerificationCodeInput.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="verification-code-input">
|
||||
<input
|
||||
v-for="(code, index) in verificationCode"
|
||||
:key="index"
|
||||
type="text"
|
||||
:value="verificationCode[index]"
|
||||
ref="inputRefs"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
:disabled="loading"
|
||||
@input="(e) => onCodeInput(e, index)"
|
||||
@paste="(e) => onCodePaste(e, index)"
|
||||
@keydown="(e) => onCodeKeydown(e, index)"
|
||||
@keypress="(e) => onCodeKeypress(e)"
|
||||
@focus="onCodeFocus"
|
||||
class="code-input"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
|
||||
interface Props {
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'complete', code: string): void
|
||||
(e: 'change', code: string): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 验证码输入相关
|
||||
const verificationCode = ref(['', '', '', '', '', ''])
|
||||
const inputRefs = ref<HTMLInputElement[]>([])
|
||||
|
||||
// 验证码输入相关方法
|
||||
const onCodeInput = (e: Event, index: number) => {
|
||||
const input = e.target as HTMLInputElement
|
||||
const val = input.value
|
||||
const cleanVal = String(val).replace(/\D/g, '')
|
||||
|
||||
// 检查是否已经输入了5位数字（不包括当前正在输入的第6位）
|
||||
const filledCount = verificationCode.value.filter(v => v !== '').length
|
||||
const isAlmostComplete = filledCount >= 5
|
||||
|
||||
// 如果已经输入了5位数字，检查当前输入是否会导致超过6位
|
||||
if (isAlmostComplete && cleanVal.length === 1 && verificationCode.value[index] === '') {
|
||||
// 如果当前输入框是空的，说明这是第6位输入，允许
|
||||
// 如果当前输入框有值，说明是替换，不允许
|
||||
// 这里我们允许输入，但会在设置后检查
|
||||
}
|
||||
|
||||
// 只处理单个字符输入，粘贴由 paste 事件处理
|
||||
if (cleanVal.length === 1) {
|
||||
verificationCode.value[index] = cleanVal
|
||||
|
||||
// 自动跳转到下一个输入框（只有在还没到第6个时）
|
||||
if (index < 5) {
|
||||
nextTick(() => {
|
||||
inputRefs.value[index + 1]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
// 发出变化事件
|
||||
const finalCode = verificationCode.value.join('')
|
||||
emit('change', finalCode)
|
||||
|
||||
// 如果完成了6位，发出完成事件
|
||||
if (finalCode.length === 6) {
|
||||
emit('complete', finalCode)
|
||||
}
|
||||
} else if (cleanVal.length === 0) {
|
||||
// 处理删除
|
||||
verificationCode.value[index] = ''
|
||||
emit('change', verificationCode.value.join(''))
|
||||
}
|
||||
// 如果是多个字符，可能是粘贴，由 paste 事件处理，这里不做处理
|
||||
}
|
||||
|
||||
const onCodePaste = (e: ClipboardEvent, index: number) => {
|
||||
e.preventDefault()
|
||||
|
||||
// 检查是否已经输入了6位数字
|
||||
const currentCode = verificationCode.value.join('')
|
||||
if (currentCode.length === 6) {
|
||||
return // 如果已经完成，不允许粘贴
|
||||
}
|
||||
|
||||
const pasteData = (e.clipboardData || (window as any).clipboardData).getData('text')
|
||||
const cleanData = pasteData.replace(/\D/g, '') // 只保留数字
|
||||
|
||||
if (cleanData.length === 0) return
|
||||
|
||||
console.log('Paste detected:', cleanData)
|
||||
|
||||
// 从当前输入框开始填充
|
||||
for (let i = 0; i < Math.min(cleanData.length, 6 - index); i++) {
|
||||
verificationCode.value[index + i] = cleanData[i]
|
||||
}
|
||||
|
||||
// 移动焦点到下一个空白输入框
|
||||
const nextEmptyIndex = verificationCode.value.findIndex((val, i) => i >= index && val === '')
|
||||
if (nextEmptyIndex !== -1) {
|
||||
nextTick(() => {
|
||||
inputRefs.value[nextEmptyIndex]?.focus()
|
||||
})
|
||||
} else {
|
||||
nextTick(() => {
|
||||
inputRefs.value[5]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
// 发出完成事件
|
||||
emit('complete', verificationCode.value.join(''))
|
||||
emit('change', verificationCode.value.join(''))
|
||||
}
|
||||
|
||||
const onCodeKeydown = (e: KeyboardEvent, index: number) => {
|
||||
// 处理删除键
|
||||
if (e.key === 'Backspace') {
|
||||
const input = e.target as HTMLInputElement
|
||||
const val = input.value
|
||||
|
||||
if (val === '') {
|
||||
// 当前输入框为空，删除上一个输入框的值
|
||||
if (index > 0) {
|
||||
verificationCode.value[index - 1] = ''
|
||||
nextTick(() => {
|
||||
inputRefs.value[index - 1]?.focus()
|
||||
})
|
||||
emit('change', verificationCode.value.join(''))
|
||||
}
|
||||
} else {
|
||||
// 当前输入框有值，清空当前输入框
|
||||
verificationCode.value[index] = ''
|
||||
emit('change', verificationCode.value.join(''))
|
||||
}
|
||||
}
|
||||
|
||||
// 阻止其他非数字字符（除了允许的控制键）
|
||||
else if (
|
||||
e.key &&
|
||||
!/[0-9]/.test(e.key) &&
|
||||
![
|
||||
'Backspace',
|
||||
'Delete',
|
||||
'Tab',
|
||||
'Enter',
|
||||
'ArrowLeft',
|
||||
'ArrowRight',
|
||||
'ArrowUp',
|
||||
'ArrowDown'
|
||||
].includes(e.key)
|
||||
) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
const onCodeKeypress = (e: KeyboardEvent) => {
|
||||
// 检查是否已经输入了6位数字
|
||||
const currentCode = verificationCode.value.join('')
|
||||
if (currentCode.length === 6) {
|
||||
e.preventDefault() // 如果已经完成，阻止任何按键输入
|
||||
return
|
||||
}
|
||||
|
||||
// 只允许输入数字0-9
|
||||
const char = String.fromCharCode(e.which || (e as any).keyCode)
|
||||
if (!/[0-9]/.test(char)) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
const onCodeFocus = () => {
|
||||
// 聚焦到第一个空白输入框
|
||||
const index = verificationCode.value.findIndex(item => item === '')
|
||||
const focusIndex = index === -1 ? 5 : index
|
||||
nextTick(() => {
|
||||
inputRefs.value[focusIndex]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
const reset = () => {
|
||||
verificationCode.value = ['', '', '', '', '', '']
|
||||
nextTick(() => {
|
||||
inputRefs.value[0]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
const getCode = () => {
|
||||
return verificationCode.value.join('')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reset,
|
||||
getCode,
|
||||
verificationCode
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.verification-code-input {
|
||||
display: flex;
|
||||
column-gap: 1.2rem;
|
||||
|
||||
.code-input {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 0.15rem solid #d5d5d5;
|
||||
border-radius: 0.8rem;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
line-height: 5rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: #232323;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/AwardPage/container.vue
Normal file
93
src/views/AwardPage/container.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="award-container">
|
||||
<div class="header flex align-center space-between">
|
||||
<div class="header-left">
|
||||
<img src="@/assets/images/award/code_create_logo.png" class="logo" />
|
||||
</div>
|
||||
<div class="header-right flex align-center">
|
||||
<div class="text">Submit your Application</div>
|
||||
<img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<RouterView />
|
||||
<div class="footer flex space-between align-center">
|
||||
<div class="social-list flex">
|
||||
<a href="https://xhslink.com/m/5Ony2FapizV" target="_blank">
|
||||
<img src="@/assets/images/award/xiaohongshu.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/code-create-limited" target="_blank">
|
||||
<img src="@/assets/images/award/linkdin.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://www.facebook.com/CodeCreateAI" target="_blank">
|
||||
<img src="@/assets/images/award/facebook.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
|
||||
<img src="@/assets/images/award/tiktok.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
|
||||
<img src="@/assets/images/award/weichat.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="copyright">© Code-Create 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.award-container {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
// 隐藏滚动条箭头，只显示滚动条本体
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.header {
|
||||
height: 8rem;
|
||||
background-color: #232323;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 8.6rem;
|
||||
.header-left {
|
||||
.logo {
|
||||
width: 13rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.header-right {
|
||||
column-gap: 1rem;
|
||||
.text {
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
.arrow {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 10rem;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 22rem;
|
||||
background-color: #232323;
|
||||
.social-list {
|
||||
column-gap: 2rem;
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: #fff;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,12 @@
|
||||
<template>
|
||||
<div class="award-page">
|
||||
<div class="header flex align-center space-between">
|
||||
<div class="header-left">
|
||||
<img src="@/assets/images/award/code_create_logo.png" class="logo" />
|
||||
</div>
|
||||
<div class="header-right flex align-center">
|
||||
<div class="text">Submit your Application</div>
|
||||
<img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
|
||||
<div class="banner">
|
||||
<div class="submit-btn flex flex-center" @click="handleSubmitApplication">
|
||||
<div>Submit your Application</div>
|
||||
<img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
|
||||
<div class="ddl">Application Deadline:15th March 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner"></div>
|
||||
<div class="blocks-list flex">
|
||||
<div
|
||||
class="block-item flex flex-col flex-center"
|
||||
@@ -27,7 +24,7 @@
|
||||
<div class="label">Possibilites</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bloom flex flex-col align-center">
|
||||
<div class="bloom container flex flex-col align-center">
|
||||
<div class="title">Bloom Your Creativity</div>
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="season">Theme of 2026</div>
|
||||
@@ -38,7 +35,7 @@
|
||||
artistry with artificial intelligence.
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-container">
|
||||
<div class="design-container container">
|
||||
<div class="design-title limit">Design Without Borders</div>
|
||||
<div class="limit">
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
@@ -50,17 +47,154 @@
|
||||
reimagine the future of design.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-container flex flex-col align-center">
|
||||
<!-- <img src="@/assets/images/award/timeline_line.png" class="timeline" /> -->
|
||||
<div class="timeline-container container flex flex-col align-center">
|
||||
<div class="timeline-title">Competition Timeline</div>
|
||||
<img src="@/assets/images/award/bloom_logo.png" alt="" class="logo" />
|
||||
<div class="desc">Shaping the Future</div>
|
||||
<div class="timeline-point">
|
||||
<img src="@/assets/images/award/timeline_line.png" class="line-bg" />
|
||||
<div class="labels-row flex align-center">
|
||||
<div
|
||||
class="item-label flex flex-col"
|
||||
v-for="item in points"
|
||||
:key="'label-' + item.time"
|
||||
>
|
||||
<div class="main-label">{{ item.label }}</div>
|
||||
<div class="sub-label" v-if="item.subLabel">{{ item.subLabel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Icons row -->
|
||||
<div class="icons-row flex align-center">
|
||||
<div class="timeline-line"></div>
|
||||
<img
|
||||
src="@/assets/images/award/point.png"
|
||||
class="point-icon"
|
||||
v-for="item in points"
|
||||
:key="'icon-' + item.time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Times row -->
|
||||
<div class="times-row flex align-center">
|
||||
<div class="item-time" v-for="item in points" :key="'time-' + item.time">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions row -->
|
||||
<div class="descs-row flex align-center">
|
||||
<div
|
||||
class="item-desc flex justify-center"
|
||||
v-for="item in points"
|
||||
:key="'desc-' + item.time"
|
||||
>
|
||||
<div class="txt">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prizes-container container flex align-center">
|
||||
<div class="left flex flex-col flex-center">
|
||||
<div class="title">Award & Prizes</div>
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="desc">Recongnition</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div
|
||||
class="prize-item flex flex-col flex-center"
|
||||
v-for="item in prizes"
|
||||
:key="item.name"
|
||||
>
|
||||
<div class="prize-money">{{ item.money }}</div>
|
||||
<div class="prize-name">{{ item.name }}</div>
|
||||
<div class="prize-desc flex flex-col flex-center">
|
||||
<div class="desc-item" v-for="el in item.desc">{{ el }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apply-container container flex flex-col">
|
||||
<div class="title">How to Apply</div>
|
||||
<div class="sub-title">Requirments</div>
|
||||
<div class="requirments-list flex">
|
||||
<div class="left flex flex-col space-between">
|
||||
<div class="item-box" v-for="item in leftRequirment" :key="item.type">
|
||||
<div class="item-header flex align-center">
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="item-title">{{ item.type }}</div>
|
||||
</div>
|
||||
<div class="context" v-for="el in item.desc">{{ el }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item-box">
|
||||
<div class="item-box">
|
||||
<div class="item-header flex align-center">
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="item-title">{{ rightRequirment.type }}</div>
|
||||
</div>
|
||||
<div class="context" v-for="el in rightRequirment.desc">{{ el }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-container container flex flex-col align-center">
|
||||
<div class="title">Selection Criteria</div>
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="sub-title">Evaluation</div>
|
||||
<div class="criteria-list flex">
|
||||
<div
|
||||
class="item flex flex-col align-center"
|
||||
v-for="item in criteriaList"
|
||||
:key="item.name"
|
||||
>
|
||||
<img :src="item.icon" class="icon" :style="item.style" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="judges-container flex flex-col align-center">
|
||||
<div class="title">Panel of Judges</div>
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="sub-title">Expertise</div>
|
||||
<div class="judgement-list">
|
||||
<div
|
||||
class="judgement-item flex flex-col align-center"
|
||||
v-for="item in judgements"
|
||||
:key="item.name"
|
||||
>
|
||||
<img :src="item.picture" class="picture" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import criteria1 from '@/assets/images/award/criteria_1.png'
|
||||
import criteria2 from '@/assets/images/award/criteria_2.png'
|
||||
import criteria3 from '@/assets/images/award/criteria_3.png'
|
||||
import criteria4 from '@/assets/images/award/criteria_4.png'
|
||||
|
||||
import jae from '@/assets/images/award/jae.png'
|
||||
import diego from '@/assets/images/award/diego.png'
|
||||
import gregory from '@/assets/images/award/gregory.png'
|
||||
import vincenzo from '@/assets/images/award/vincenzo.png'
|
||||
import tim from '@/assets/images/award/tim.png'
|
||||
import desmond from '@/assets/images/award/desmond.png'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleSubmitApplication = () => {
|
||||
router.push('/award/apply')
|
||||
}
|
||||
|
||||
const blocksList = ref([
|
||||
{
|
||||
@@ -76,62 +210,211 @@ const blocksList = ref([
|
||||
label: 'Winners'
|
||||
}
|
||||
])
|
||||
|
||||
const points = ref([
|
||||
{
|
||||
label: 'Select Top 20',
|
||||
time: 'May',
|
||||
desc: 'Submit your design concept, mood board, and initial sketch.'
|
||||
},
|
||||
{
|
||||
label: `Top 20`,
|
||||
subLabel: 'Collections Finalize',
|
||||
time: 'June',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: `Top 3`,
|
||||
subLabel: 'Finalists Select',
|
||||
time: 'August',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: 'Award Ceremony',
|
||||
time: 'November',
|
||||
desc: 'Winners revealed with media coverage and live showcase.'
|
||||
}
|
||||
])
|
||||
|
||||
const prizes = ref([
|
||||
{
|
||||
money: '$3000',
|
||||
name: 'First Runner-Up',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: '$2000',
|
||||
name: 'Second Runner-Up',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: '$5000',
|
||||
name: 'Grand Prize',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: 'Certification',
|
||||
name: 'Finalists',
|
||||
desc: ['Award Ceritificate', 'Global Media Exposure']
|
||||
}
|
||||
])
|
||||
|
||||
const leftRequirment = ref([
|
||||
{
|
||||
type: 'Video',
|
||||
desc: ['The process of doing design']
|
||||
},
|
||||
{
|
||||
type: 'Design',
|
||||
desc: [
|
||||
'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
|
||||
'Design sketch: Maximum 4 outfit design with proposed materials'
|
||||
]
|
||||
}
|
||||
])
|
||||
const rightRequirment = ref({
|
||||
type: 'Submission Format',
|
||||
desc: [
|
||||
'Naming as “AiDA global award 2026_applicantname”',
|
||||
'Mp4\n(1080x1920pixels/20mb within 1min)',
|
||||
'Single PDF file\n(within 15 pages, maximum 20mb)',
|
||||
'English or native language\nwith English translation'
|
||||
]
|
||||
})
|
||||
|
||||
const criteriaList = ref([
|
||||
{
|
||||
icon: criteria1,
|
||||
name: 'Originality',
|
||||
desc: 'Unique perspective and innovative approach to fashion design',
|
||||
style: { width: '13rem', height: '17rem' }
|
||||
},
|
||||
{
|
||||
icon: criteria2,
|
||||
name: 'Creativity',
|
||||
desc: 'Artistic vision and exceptional design excellence',
|
||||
style: { width: '16rem', height: '18rem' }
|
||||
},
|
||||
{
|
||||
icon: criteria3,
|
||||
name: 'AiDA Integration',
|
||||
desc: 'Effective application of AI design tools and functions',
|
||||
style: { width: '16rem', height: '18rem' }
|
||||
},
|
||||
{
|
||||
icon: criteria4,
|
||||
name: 'Execution',
|
||||
desc: 'Quality of presentation and technical craftsmanship',
|
||||
style: { width: '18.8rem', height: '18rem' }
|
||||
}
|
||||
])
|
||||
|
||||
const judgements = [
|
||||
{
|
||||
picture: jae,
|
||||
name: 'Jae Hyuk Lim',
|
||||
desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
|
||||
},
|
||||
{
|
||||
picture: diego,
|
||||
name: 'Diego Dultzin Lacoste',
|
||||
desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
|
||||
},
|
||||
{
|
||||
picture: gregory,
|
||||
name: 'Gregory de la Hogue Moran',
|
||||
desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
|
||||
},
|
||||
{
|
||||
picture: vincenzo,
|
||||
name: 'Vincenzo La Torre',
|
||||
desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
|
||||
},
|
||||
{
|
||||
picture: tim,
|
||||
name: 'Tim Lim',
|
||||
desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
|
||||
},
|
||||
{
|
||||
picture: desmond,
|
||||
name: 'Desmond Lim',
|
||||
desc: 'Cheif Editor of Vogue\n(Singapore)'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.award-page {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.header {
|
||||
height: 8rem;
|
||||
background-color: #232323;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 8.6rem;
|
||||
.header-left {
|
||||
.logo {
|
||||
width: 13rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.header-right {
|
||||
column-gap: 1rem;
|
||||
.text {
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
.arrow {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 97rem;
|
||||
}
|
||||
// .header {
|
||||
// height: 8rem;
|
||||
// background-color: #232323;
|
||||
// padding-left: 21.5rem;
|
||||
// padding-right: 8.6rem;
|
||||
// .header-left {
|
||||
// .logo {
|
||||
// width: 13rem;
|
||||
// height: 5rem;
|
||||
// }
|
||||
// }
|
||||
// .header-right {
|
||||
// column-gap: 1rem;
|
||||
// .text {
|
||||
// font-size: 1.6rem;
|
||||
// color: #fff;
|
||||
// }
|
||||
// .arrow {
|
||||
// width: 2.4rem;
|
||||
// height: 2.4rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.logo {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
.banner {
|
||||
height: 100rem;
|
||||
background-color: violet;
|
||||
height: 108rem;
|
||||
background: url('@/assets/images/award/banner.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.submit-btn {
|
||||
width: 41rem;
|
||||
height: 6.394rem;
|
||||
line-height: 6.394rem;
|
||||
text-align: center;
|
||||
border-radius: 3.2rem;
|
||||
box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
|
||||
inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
|
||||
inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.4rem;
|
||||
column-gap: 3.2rem;
|
||||
position: absolute;
|
||||
top: 23.88rem;
|
||||
left: 51rem;
|
||||
backdrop-filter: blur(5px);
|
||||
cursor: pointer;
|
||||
.arrow {
|
||||
width: 3.83rem;
|
||||
height: 3.83rem;
|
||||
}
|
||||
.ddl {
|
||||
position: absolute;
|
||||
bottom: -4rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
width: 41rem;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blocks-list {
|
||||
height: 31.4rem;
|
||||
@@ -163,7 +446,6 @@ const blocksList = ref([
|
||||
}
|
||||
}
|
||||
.bloom {
|
||||
height: 97rem;
|
||||
padding-top: 12.8rem;
|
||||
font-family: 'Poppins';
|
||||
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
||||
@@ -192,7 +474,6 @@ const blocksList = ref([
|
||||
}
|
||||
}
|
||||
.design-container {
|
||||
height: 97rem;
|
||||
background: url('@/assets/images/award/design_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-left: 21.5rem;
|
||||
@@ -229,15 +510,26 @@ const blocksList = ref([
|
||||
}
|
||||
}
|
||||
.timeline-container {
|
||||
height: 97rem;
|
||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
padding-top: 12.8rem;
|
||||
// .timeline {
|
||||
// width: 148.7rem;
|
||||
// height: 27.58rem;
|
||||
// }
|
||||
width: 100%;
|
||||
.line-bg {
|
||||
position: absolute;
|
||||
width: 148.7rem;
|
||||
height: 27.58rem;
|
||||
left: 24rem;
|
||||
bottom: 22.8rem;
|
||||
z-index: 0;
|
||||
}
|
||||
.timeline-title {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo {
|
||||
margin: 2.4rem 0 2.2rem 0;
|
||||
}
|
||||
@@ -247,5 +539,334 @@ const blocksList = ref([
|
||||
font-weight: 400;
|
||||
color: #b10000;
|
||||
}
|
||||
.timeline-point {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 12rem;
|
||||
padding: 0 21.2rem 0 22rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.labels-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 8rem;
|
||||
.item-label {
|
||||
flex: 1;
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
height: 6rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.point-icon {
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.timeline-line {
|
||||
width: calc(100% + 22rem + 21.2rem);
|
||||
left: -22rem;
|
||||
height: 0.15rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(199, 52, 44, 0) 0%,
|
||||
rgba(199, 52, 44, 0.719626) 25.96%,
|
||||
#c7342c 51.44%,
|
||||
rgba(199, 52, 44, 0.762376) 75.96%,
|
||||
rgba(199, 52, 44, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.times-row {
|
||||
margin-bottom: 6rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
.item-time {
|
||||
flex: 1;
|
||||
color: #b10000;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2.8rem;
|
||||
line-height: 4.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.descs-row {
|
||||
.item-desc {
|
||||
flex: 1;
|
||||
.txt {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
color: #585858;
|
||||
width: 31.2rem;
|
||||
height: 10.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prizes-container {
|
||||
background: url('@/assets/images/award/prizes_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 21.4rem 0 33.4rem;
|
||||
|
||||
.left {
|
||||
width: 36.2rem;
|
||||
row-gap: 2.3rem;
|
||||
margin-right: 27rem;
|
||||
.title {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
color: #f95750;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 35.5rem);
|
||||
grid-template-rows: repeat(2, 32.8rem);
|
||||
gap: 4.2rem;
|
||||
.prize-item {
|
||||
width: 35.5rem;
|
||||
height: 32.8rem;
|
||||
color: #fff;
|
||||
padding: 4.5rem 0 4.8rem 0;
|
||||
justify-content: space-between;
|
||||
background: url('@/assets/images/award/first_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:nth-of-type(2) {
|
||||
background: url('@/assets/images/award/second_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
background: url('@/assets/images/award/grand_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
background: url('@/assets/images/award/certification_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.prize-money {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: bold;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.prize-name {
|
||||
font-family: 'PoppinsMedium';
|
||||
font-weight: 500;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
.prize-desc {
|
||||
color: #e0e0e0;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
height: 8.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-container {
|
||||
flex: 1;
|
||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12.7rem 0 16.9rem;
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.sub-title {
|
||||
text-align: center;
|
||||
color: #b10000;
|
||||
font-size: 3rem;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
}
|
||||
.requirments-list {
|
||||
flex: 1;
|
||||
padding-left: 41.4rem;
|
||||
column-gap: 17.7rem;
|
||||
margin-top: 12rem;
|
||||
.left {
|
||||
color: #232323;
|
||||
height: 100%;
|
||||
}
|
||||
.item-box {
|
||||
.item-header {
|
||||
column-gap: 3.2rem;
|
||||
.item-title {
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
.context {
|
||||
margin-top: 4rem;
|
||||
width: 46.8rem;
|
||||
color: #585858;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
font-size: 2.4rem;
|
||||
padding-left: 5.6rem;
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selection-container {
|
||||
background: url('@/assets/images/award/selection_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 9.3rem;
|
||||
.title {
|
||||
color: #fff;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.logo {
|
||||
margin: 2.3rem 0 2.3rem;
|
||||
}
|
||||
.sub-title {
|
||||
color: #f95750;
|
||||
font-family: 'Popins';
|
||||
font-weight: 400;
|
||||
font-size: 3rem;
|
||||
margin-bottom: 11.8rem;
|
||||
}
|
||||
.criteria-list {
|
||||
column-gap: 6rem;
|
||||
.item {
|
||||
height: 44rem;
|
||||
width: 32.2rem;
|
||||
box-sizing: border-box;
|
||||
&:nth-of-type(3) {
|
||||
background: url('@/assets/images/award/criteria_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 18.8rem;
|
||||
height: 18rem;
|
||||
}
|
||||
.name {
|
||||
font-family: 'PoppinsMedium';
|
||||
font-weight: 500;
|
||||
font-size: 2.8rem;
|
||||
color: #fff;
|
||||
margin: 2rem 0 5rem;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2.4rem;
|
||||
color: #e0e0e0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.judges-container {
|
||||
height: 147.4rem;
|
||||
background: url('@/assets/images/award/judges_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 12.8rem;
|
||||
.title {
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.logo {
|
||||
margin: 2.4rem 0 2.2rem;
|
||||
}
|
||||
.sub-title {
|
||||
color: #b10000;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 3rem;
|
||||
margin-bottom: 12rem;
|
||||
}
|
||||
.judgement-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 23.22rem;
|
||||
row-gap: 8rem;
|
||||
padding: 0 25rem 0 26.6rem;
|
||||
.judgement-item {
|
||||
.picture {
|
||||
width: 20.2rem;
|
||||
height: 26rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
.name {
|
||||
margin: 3rem 0 2.4rem;
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
.desc {
|
||||
color: #585858;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
white-space: pre-line;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 10rem;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 22rem;
|
||||
background-color: #232323;
|
||||
.social-list {
|
||||
column-gap: 2rem;
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: #fff;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user