From 6a08f2cede9e1ad428319fdbbe64259b19be5a24 Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Thu, 19 Mar 2026 15:15:38 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 15 +++++++++ src/assets/css/style.css | 1 - src/assets/css/style.less | 1 - src/lang/en.ts | 4 +-- src/lang/zh-cn.ts | 2 +- .../AwardPage/components/ApplySection.vue | 6 ++-- src/views/AwardPage/components/Bloom.vue | 6 ++-- .../AwardPage/components/SelectionSection.vue | 2 +- src/views/AwardPage/components/TimeLine.vue | 17 +++++----- src/views/AwardPage/container.vue | 19 ++---------- src/views/AwardPage/index.vue | 31 +++++++++++++------ 11 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/App.vue b/src/App.vue index b4942e5..81a4a67 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,4 +10,19 @@ import RouteCache from '@/components/RouteCache.vue' #app { font-size: 1.6rem; } +html, +body { + &::-webkit-scrollbar { + width: 0; + display: none; + } + &::-webkit-scrollbar-thumb { + display: none; + } + &::-webkit-scrollbar-track { + display: none; + } + scrollbar-width: none; + -ms-overflow-style: none; +} diff --git a/src/assets/css/style.css b/src/assets/css/style.css index aad8a85..47e8c86 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -18,7 +18,6 @@ body, #app { width: 100%; height: 100%; - overflow: hidden; } @keyframes loading { 0% { diff --git a/src/assets/css/style.less b/src/assets/css/style.less index 5d4851c..1b73e6e 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -20,7 +20,6 @@ body, #app { width: 100%; height: 100%; - overflow: hidden; } @keyframes loading { diff --git a/src/lang/en.ts b/src/lang/en.ts index 3392750..da1743d 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -8,7 +8,7 @@ export default { 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', + applicationDeadline: 'Application Deadline:\n15th July 2026', howToApply: 'How to Apply', stepByStep: 'Step by step', step1Title: 'Step 1. Become an\nAiDA Subscriber​', @@ -145,7 +145,7 @@ export default { '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.', deadlinePassed: 'Application Deadline Passed', deadlinePassedDesc: - 'The submission deadline for AiDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications.', + 'The submission deadline for AiDA Global Design Award 2026 has ended.\nWe are no longer accepting new applications.', uploadInProgress: 'Upload in progress…', uploadSuccess: 'Uploaded Successfully', uploadFailed: 'Upload failed', diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index 08f50d5..135b7ba 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -9,7 +9,7 @@ export default { sendEmail: '发送邮件', copyMail:'已成功复制到剪贴板', sendEmailFailed: '无法打开邮件客户端，我们已将邮箱地址复制到您的剪贴板。', - applicationDeadline: '申请期限：2026年7月15日', + applicationDeadline: '申请期限：\n2026年7月15日', howToApply: '申请方法', stepByStep: '步骤指南', step1Title: '1. 成为 AiDA 订阅用户', diff --git a/src/views/AwardPage/components/ApplySection.vue b/src/views/AwardPage/components/ApplySection.vue index 5a7f824..e42c5fa 100644 --- a/src/views/AwardPage/components/ApplySection.vue +++ b/src/views/AwardPage/components/ApplySection.vue @@ -569,8 +569,10 @@ ul { padding: 0 6rem 6.4rem; font-size: 2rem; margin-top: 2rem; - .list-items li::before { - border-radius: 50%; + .list-items { + li::before { + border-radius: 50%; + } } } .context { diff --git a/src/views/AwardPage/components/Bloom.vue b/src/views/AwardPage/components/Bloom.vue index 2f6526b..8080a5e 100644 --- a/src/views/AwardPage/components/Bloom.vue +++ b/src/views/AwardPage/components/Bloom.vue @@ -191,7 +191,8 @@ p { &.mobile { background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat; background-size: 100% 100%; - height: 83.1rem; + // height: 83.1rem; + height: 110vw; padding-top: 6rem; .title { font-size: 3.2rem; @@ -202,7 +203,8 @@ p { margin-bottom: 6.2rem; } .desc { - padding: 0 6.5rem 0 6.7rem; + // padding: 0 6.5rem 0 6.7rem; + padding: 0 8.5vw; font-size: 2rem; line-height: 3rem; } diff --git a/src/views/AwardPage/components/SelectionSection.vue b/src/views/AwardPage/components/SelectionSection.vue index c8e4ad0..18d7589 100644 --- a/src/views/AwardPage/components/SelectionSection.vue +++ b/src/views/AwardPage/components/SelectionSection.vue @@ -191,7 +191,7 @@ onBeforeUnmount(() => { grid-column-gap: 6rem; grid-row-gap: 7rem; .item { - width: 21rem; + width: initial; height: initial; &:nth-of-type(3) { width: 30rem; diff --git a/src/views/AwardPage/components/TimeLine.vue b/src/views/AwardPage/components/TimeLine.vue index dcdebb0..076a6de 100644 --- a/src/views/AwardPage/components/TimeLine.vue +++ b/src/views/AwardPage/components/TimeLine.vue @@ -2,14 +2,14 @@
{{ $t('AwardsPage.competitionTimeline') }}
{{ $t('AwardsPage.shapingTheFuture') }}
@@ -73,8 +73,7 @@ const { t } = useI18n() const isMobile = inject('isMobile') const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1201) -const showVertical = computed(() => !!isMobile || windowWidth.value <= 1200) -const isMobileOrNarrow = computed(() => showVertical.value) +const isMobileOrNarrow = computed(() => isMobile.value) const updateWindowWidth = () => { windowWidth.value = window.innerWidth @@ -123,7 +122,7 @@ const playAnimation = () => { const subtitle = containerRef.value.querySelector('.desc') const timeline = containerRef.value.querySelector('.timeline-point') const line = containerRef.value.querySelector( - showVertical.value ? '.vertical-line' : '.timeline-line' + isMobile.value ? '.vertical-line' : '.timeline-line' ) const tl = gsap.timeline() @@ -131,7 +130,7 @@ const playAnimation = () => { // 整体 timeline 的裁剪展开（仅横向使用） // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画 - if (timeline && !showVertical.value) { + if (timeline && !isMobile.value) { tl.fromTo( timeline, { @@ -149,7 +148,7 @@ const playAnimation = () => { // 线条动画：横向 scaleX，纵向 scaleY // 纵向时线条与 item 动画同步进行 if (line) { - if (showVertical.value) { + if (isMobile.value) { tl.from( line, { @@ -192,11 +191,11 @@ const playAnimation = () => { // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item // 纵向时，每个 item 从上方落下 + 渐显 - const textItems = showVertical.value + const textItems = isMobile.value ? containerRef.value.querySelectorAll('.vertical-item') : containerRef.value.querySelectorAll('.grid-cell') if (textItems && textItems.length) { - if (showVertical.value) { + if (isMobile.value) { // 纵向：每个 item 从上方落下 + 渐显 tl.from( textItems, diff --git a/src/views/AwardPage/container.vue b/src/views/AwardPage/container.vue index a90b6cd..73f5574 100644 --- a/src/views/AwardPage/container.vue +++ b/src/views/AwardPage/container.vue @@ -91,6 +91,7 @@ {{ $t('AwardsPage.sendEmail') }}
+ @@ -261,20 +262,6 @@ const handleBtnClick = () => {