+
+
+
-
-
@@ -21,31 +25,35 @@
+
+
-
-
-
- 
+ >
+
+
+ >
+
+
+
+
-
-
{{ item.time }}
+
+
+
@@ -63,12 +71,13 @@
import { gsap } from 'gsap'
const containerRef = ref(null)
+ const timelineRef = ref(null)
const hasAnimated = ref(false)
const points = ref([
{
label: 'Application',
- subLabel:'Deadline',
+ subLabel: 'Deadline',
time: 'Jul 15',
desc: 'Application deadline and\nentry review process\nbegins.'
},
@@ -86,16 +95,16 @@
},
{
label: 'Receiving Outfits',
- subLabel:'from Finallists',
+ subLabel: 'from Finallists',
time: 'October',
desc: 'AiDA receives physical\noutfits from all 20\nfinalists.'
},
{
label: 'Award',
- subLabel:'Ceremony',
+ subLabel: 'Ceremony',
time: 'Nov 12',
desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
- },
+ }
])
const playAnimation = () => {
@@ -120,7 +129,7 @@
},
{
clipPath: 'inset(0 0% 0 0)',
- duration: 1.6,
+ duration: 1.3,
ease: 'power1.out'
},
'start'
@@ -157,16 +166,14 @@
)
}
- // 行内文字（标签、时间、描述）与 start 同步开始
- const textItems = containerRef.value.querySelectorAll(
- '.item-label, .item-time, .item-desc .txt'
- )
+ // 行内文字（标签、时间、描述、图标）与 start 同步开始
+ const textItems = containerRef.value.querySelectorAll('.grid-cell')
if (textItems && textItems.length) {
tl.from(
textItems,
{
- autoAlpha: 0.5,
- duration: 0.6,
+ // autoAlpha: 0.5,
+ duration: 0.7,
stagger: 0.08,
ease: 'power2.out'
},
@@ -174,22 +181,6 @@
)
}
- // 所有文字与线条完成后，立即开始点图标动画（按顺序出现）
- const icons = containerRef.value.querySelectorAll('.point-icon')
- if (icons && icons.length) {
- // 与 'start' 标签同步开始：改为纯淡入动画（移除缩放）
- tl.from(
- icons,
- {
- autoAlpha: 0,
- duration: 2,
- stagger: 0.12,
- ease: 'power2.out'
- },
- 'start+=0.3'
- )
- }
-
hasAnimated.value = true
}
@@ -199,8 +190,8 @@
await nextTick()
if (!containerRef.value) return
observer = new IntersectionObserver(
- (entries) => {
- entries.forEach((entry) => {
+ entries => {
+ entries.forEach(entry => {
if (entry.isIntersecting) {
playAnimation()
}
@@ -224,7 +215,7 @@
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
background-size: 100% 100%;
position: relative;
- padding-top: 12.8rem;
+ padding: 12.8rem 0 15.9rem;
width: 100%;
color: #fff;
.timeline-title {
@@ -248,42 +239,45 @@
will-change: clip-path;
flex: 1;
width: 100%;
- margin-top: 12rem;
- padding: 0 21.2rem 0 22rem;
+ margin-top: 11rem;
+ padding: 0 13.8rem;
position: relative;
z-index: 2;
- .labels-row {
- position: relative;
- z-index: 2;
- margin-bottom: 8rem;
- .item-label {
- flex: 1;
- color: #fff;
- font-family: 'PoppinsBold';
- font-weight: 600;
- font-size: 2.8rem;
- text-align: center;
- white-space: pre-line;
- // height: 6rem;
- justify-content: center;
- }
+ // 主网格布局：5列
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-rows: auto auto auto auto;
+ grid-column-gap: 0;
+ grid-row-gap: 0;
+
+ // 所有 grid 子行的通用样式
+ .grid-row {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-column: 1 / -1;
}
+ .grid-cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ }
+
+ // 图标行
.icons-row {
- margin-bottom: 1.6rem;
+ align-items: center;
+ height: 6.4rem;
position: relative;
z-index: 2;
- .point-icon {
- width: 6.4rem;
- height: 6.4rem;
- display: block;
- margin: 0 auto;
- z-index: 2;
- }
+ margin-bottom: 1.6rem;
+
.timeline-line {
- width: calc(100% + 22rem + 21.2rem);
+ position: absolute;
+ top: 50%;
left: -22rem;
+ right: -21.2rem;
height: 0.15rem;
background: linear-gradient(
90deg,
@@ -293,40 +287,78 @@
rgba(199, 52, 44, 0.762376) 75.96%,
rgba(199, 52, 44, 0) 100%
);
- position: absolute;
- bottom: 50%;
transform: translateY(-50%);
z-index: 1;
+ pointer-events: none;
+ }
+
+ .icon-cell {
+ position: relative;
+ .point-icon {
+ width: 6.4rem;
+ height: 6.4rem;
+ display: block;
+ position: relative;
+ z-index: 2;
+ }
}
}
+ // 标签行
+ .labels-row {
+ margin-bottom: 8rem;
+ position: relative;
+ z-index: 2;
+ .label-cell {
+ flex-direction: column;
+ color: #fff;
+ font-family: 'PoppinsBold';
+ font-weight: 600;
+ font-size: 2.8rem;
+ white-space: pre-line;
+ justify-content: center;
+ min-height: 6rem;
+
+ // .sub-label {
+ // font-family: 'Arial';
+ // font-weight: 400;
+ // font-size: 1.4rem;
+ // color: rgba(255, 255, 255, 0.8);
+ // margin-top: 0.4rem;
+ // }
+ }
+ }
+
+ // 时间行
.times-row {
margin-bottom: 6rem;
z-index: 2;
position: relative;
- .item-time {
- flex: 1;
+ .time-cell {
color: #f95750;
font-family: 'Arial';
font-weight: 400;
font-size: 2.8rem;
line-height: 4.5rem;
- text-align: center;
}
}
+ // 描述行
.descs-row {
- .item-desc {
- flex: 1;
+ .desc-cell {
.txt {
font-family: 'Arial';
font-weight: 400;
font-size: 2rem;
text-align: center;
color: #e0e0e0;
- width: 31.2rem;
- height: 10.2rem;
+ width: 100%;
+ max-width: 31.2rem;
+ min-height: 10.2rem;
white-space: pre-line;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
}
}
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index d430e30b..92327a6a 100644
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -63,7 +63,7 @@
height: 2.4rem;
}
.banner {
- height: 108rem;
+ height: 100rem;
// background: url('@/assets/images/award/banner.png') no-repeat;
// background-size: cover;
position: relative;