diff --git a/src/assets/images/award/arrow.png b/src/assets/images/award/arrow.png index 9c9622e..1ee7ae2 100644 Binary files a/src/assets/images/award/arrow.png and b/src/assets/images/award/arrow.png differ diff --git a/src/assets/images/award/copy.png b/src/assets/images/award/copy.png new file mode 100644 index 0000000..9f2541b Binary files /dev/null and b/src/assets/images/award/copy.png differ diff --git a/src/assets/images/award/mail.png b/src/assets/images/award/mail.png new file mode 100644 index 0000000..0a9989f Binary files /dev/null and b/src/assets/images/award/mail.png differ diff --git a/src/components/Message/Message.vue b/src/components/Message/Message.vue new file mode 100644 index 0000000..ef704ea --- /dev/null +++ b/src/components/Message/Message.vue @@ -0,0 +1,75 @@ + + + + + + diff --git a/src/components/Message/message.ts b/src/components/Message/message.ts new file mode 100644 index 0000000..cc04f85 --- /dev/null +++ b/src/components/Message/message.ts @@ -0,0 +1,61 @@ +// message.ts +import { createApp } from 'vue' +import type { App } from 'vue' +import { provide, inject } from 'vue' // 新增导入 +import type { InjectionKey } from 'vue' + +import Message from './Message.vue' + +interface MessageOptions { + message: string + type: 'success' | 'error' + duration?: number +} + +const messageInstances: any[] = [] // 存储多个消息实例，防止重叠 + +const showMessage = (options: MessageOptions) => { + const app = createApp(Message, { + ...options, + onClose: () => { + app.unmount() + const index = messageInstances.indexOf(app) + if (index > -1) messageInstances.splice(index, 1) + container.remove() + } + }) + + const container = document.createElement('div') + document.body.appendChild(container) + app.mount(container) + + messageInstances.push(app) +} + +// 定义 InjectionKey（TypeScript 类型安全） +const MessageKey: InjectionKey<{ + success: (message: string, duration?: number) => void + error: (message: string, duration?: number) => void +}> = Symbol('message') + +// 插件安装 +const messagePlugin = { + install(app: App) { + const message = { + success: (message: string, duration?: number) => + showMessage({ message, type: 'success', duration }), + error: (message: string, duration?: number) => + showMessage({ message, type: 'error', duration }) + } + app.provide(MessageKey, message) // 使用 provide 注入 + } +} + +// 新增：composable 函数，用于在组件中注入 +export const useMessage = () => { + const message = inject(MessageKey) + if (!message) throw new Error('useMessage must be used after messagePlugin is installed') + return message +} + +export default messagePlugin diff --git a/src/lang/en.ts b/src/lang/en.ts index 0f85017..531cc4b 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -1,6 +1,12 @@ export default { AwardsPage: { submitApplication: 'Submit your Application', + contactUs: 'Contact Us', + contactHeader: 'We\'re here to help', + contactDesc:'For questions on eligibility, competition rules,\n judging criteria, or any other enquiries,\n feel free to reach out via our official email.', + sendEmail: 'Send Email', + copyMail: 'Successfully copied to clipboard!', + sendEmailFailed: 'Failed to open email client, we have copied the email to your clipboard.', applicationDeadline: 'Application Deadline:15th July 2026', howToApply: 'How to Apply', stepByStep: 'Step by step', @@ -189,11 +195,12 @@ export default { video: `Video: Design process, 1080×1920 pixels (9:16 ratio), maximum 60 seconds` }, // PDF 上传 - uploadPdfTitle: 'How will you use AiDA in your design process?', + uploadPdfTitle: + 'Please submit a single PDF with your design topic, mood board, and AiDA concept statement.', clickToUploadPdf: 'Click to upload or drag and drop', pdfFileLimit: 'PDF file, max 20MB', // 视频上传 - uploadVideoTitle: 'How will you use AiDA in your design process?', + uploadVideoTitle: 'Please submit a video showcasing your creative process using AiDA.', clickToUploadVideo: 'Click to upload or drag and drop', videoFileLimit: 'Video file (MP4), 1080p, max 100MB', // 条款与条件 diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index 1d43c7c..6609466 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -1,6 +1,13 @@ export default { AwardsPage: { submitApplication: '提交申请', + contactUs: '联系我们', + contactHeader: '有关比赛，欢迎咨询', + contactDesc: + '无论是报名资格、参赛细则、评审标准，还是其他比赛相关问题，欢迎通过以下邮箱联络我们：', + sendEmail: '发送邮件', + copyMail:'已成功复制到剪贴板', + sendEmailFailed: '无法打开邮件客户端，我们已将邮箱地址复制到您的剪贴板。', applicationDeadline: '申请期限：2026年7月15日', howToApply: '申请方法', stepByStep: '步骤指南', @@ -62,7 +69,7 @@ export default { panelOfJudges: '终审评委团', expertise: '权威阵容', judgesHat: { - jae: 'Code‑Create 韩国分公司总监\nBesfxxk 创意总监', + jae: 'Code‑Create （韩国）分公司总监\nBesfxxk 创意总监', diego: 'OnTheList（香港）\n联合创始人兼首席执行官', gregory: 'Gabriela Hearst\n（意大利）高级设计师', vincenzo: '《南华早报》Style 杂志\n（香港）主编', @@ -178,13 +185,13 @@ export default { video: `视频：创作过程，分辨率1080×1920 像素\n（9:16 纵向比例），最长 60 秒` }, // PDF 上传 - uploadPdfTitle: '您在设计过程中如何使用 AiDA？', + uploadPdfTitle: '请提供一份包含设计主题、灵感情绪板及 AiDA 创作概念说明的单一 PDF 文件。', clickToUploadPdf: '点击选择或拖拽文件上传', pdfFileLimit: 'PDF 文件，不超过 20MB', // 视频上传 - uploadVideoTitle: '您在设计过程中如何使用 AiDA？', + uploadVideoTitle: '请提供一段屏幕录制视频，展示您使用 AiDA 的创作过程。', clickToUploadVideo: '点击选择或拖拽文件上传', - videoFileLimit: '视频文件（MP4, MOV），1080P，不超过100MB', + videoFileLimit: '视频文件（MP4），1080P，不超过100MB', // 条款与条件 termsAndConditions: '参赛条款', conditionFirst: '我确认所提交的作品均为原创，且由我本人独立创作。', diff --git a/src/main.ts b/src/main.ts index d248983..676df7e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,7 @@ import 'normalize.css' import './assets/css/style.css' import SvgIcon from "@/components/SvgIcon/index.vue"; import "virtual:svg-icons-register"; +import messagePlugin from './components/Message/message' import i18n from "./lang/index"; @@ -19,6 +20,7 @@ app.use(router) .use(store) .component("SvgIcon", SvgIcon) .use(i18n) +.use(messagePlugin) .mount('#app') diff --git a/src/views/AwardPage/components/SelectionSection.vue b/src/views/AwardPage/components/SelectionSection.vue index 5a1231b..38f8552 100644 --- a/src/views/AwardPage/components/SelectionSection.vue +++ b/src/views/AwardPage/components/SelectionSection.vue @@ -167,7 +167,7 @@ onBeforeUnmount(() => { .desc { font-family: 'Arial'; font-weight: 400; - font-size: 2.4rem; + font-size: 2rem; color: #e0e0e0; text-align: center; white-space: pre-line; diff --git a/src/views/AwardPage/container.vue b/src/views/AwardPage/container.vue index 4ae784f..1ae09c2 100644 --- a/src/views/AwardPage/container.vue +++ b/src/views/AwardPage/container.vue @@ -1,270 +1,459 @@ diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue index 5e1901e..36e4abd 100644 --- a/src/views/AwardPage/index.vue +++ b/src/views/AwardPage/index.vue @@ -39,7 +39,7 @@