From d4bcbc0a64dabef5e0f9e3754d32c172163391f7 Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Mon, 9 Mar 2026 17:25:28 +0800 Subject: [PATCH] feat: contact us --- src/assets/images/award/arrow.png | Bin 198 -> 224 bytes src/assets/images/award/copy.png | Bin 0 -> 269 bytes src/assets/images/award/mail.png | Bin 0 -> 248 bytes src/components/Message/Message.vue | 75 ++ src/components/Message/message.ts | 61 ++ src/lang/en.ts | 11 +- src/lang/zh-cn.ts | 15 +- src/main.ts | 2 + .../AwardPage/components/SelectionSection.vue | 2 +- src/views/AwardPage/container.vue | 701 +++++++++++------- src/views/AwardPage/index.vue | 6 +- 11 files changed, 609 insertions(+), 264 deletions(-) create mode 100644 src/assets/images/award/copy.png create mode 100644 src/assets/images/award/mail.png create mode 100644 src/components/Message/Message.vue create mode 100644 src/components/Message/message.ts diff --git a/src/assets/images/award/arrow.png b/src/assets/images/award/arrow.png index 9c9622e146fdd1982332d1d00e09cbf498f2f174..1ee7ae2abacea8cee4d5deda21df54a8388d6f2d 100644 GIT binary patch delta 33 pcmX@c_<(Ujm^fdFYeY$Kep*R+Vo@rCTV{H0;=GO1k|zci0|3$v4F>=K delta 9 QcmaFBc#LsE*u;VY02GV_00000 diff --git a/src/assets/images/award/copy.png b/src/assets/images/award/copy.png new file mode 100644 index 0000000000000000000000000000000000000000..9f2541b1f5b136e1833f3de725cc51c2ad973efb GIT binary patch literal 269 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(Kz7p4nlHmNblJdl&R0g-q^xVXG8>b}$WjZ`v z978G?-%bhSYETexao-*0D*kTw<)xZ4Tc$>@Q*B{xZhCQfuIqvgR>`SrzQ|AbEY3{KVvD=ab!qFYGSdAS|e}@UT7zFPV@RmdKI;Vst08ArOY5)KL literal 0 HcmV?d00001 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 @@