aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: timeline布局修改

Browse Source
This commit is contained in:
zhangyahui
2026-02-02 15:48:50 +08:00
parent 8ec9b1bcea
commit 20145742c5
3 changed files with 115 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/AwardPage/apply.vue
View File

@@ -1228,6 +1228,7 @@
height: 4rem; height: 4rem;
box-sizing: border-box; box-sizing: border-box;
border-left: 0.1rem solid #d5d5d5; border-left: 0.1rem solid #d5d5d5;
pointer-events: none;
} }
} }

182
src/views/AwardPage/components/TimeLine.vue
View File

@@ -5,10 +5,14 @@
> >
<div class="timeline-title">Competition Timeline</div> <div class="timeline-title">Competition Timeline</div>
<div class="desc">Shaping the Future</div> <div class="desc">Shaping the Future</div>
<div class="timeline-point">
<div class="labels-row flex align-center">
<div <div
class="item-label flex flex-col" class="timeline-point"
ref="timelineRef"
>
<!-- 顶部标签行 -->
<div class="grid-row labels-row">
<div
class="grid-cell label-cell"
v-for="item in points" v-for="item in points"
:key="'label-' + item.time" :key="'label-' + item.time"
> >
@@ -21,31 +25,35 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Icons row --> <!-- 图标行 -->
<div class="icons-row flex align-center"> <div class="grid-row icons-row">
<div class="timeline-line"></div> <div class="timeline-line"></div>
<div
class="grid-cell icon-cell"
v-for="item in points"
:key="'icon-' + item.time"
>
<img <img
src="@/assets/images/award/point.png" src="@/assets/images/award/point.png"
class="point-icon" class="point-icon"
v-for="item in points"
:key="'icon-' + item.time"
/> />
</div> </div>
</div>
<!-- Times row --> <!-- 时间行 -->
<div class="times-row flex align-center"> <div class="grid-row times-row">
<div <div
class="item-time" class="grid-cell time-cell"
v-for="item in points" v-for="item in points"
:key="'time-' + item.time" :key="'time-' + item.time"
> >
{{ item.time }} {{ item.time }}
</div> </div>
</div> </div>
<!-- Descriptions row -->
<div class="descs-row flex align-center"> <!-- 描述行 -->
<div class="grid-row descs-row">
<div <div
class="item-desc flex justify-center" class="grid-cell desc-cell"
v-for="item in points" v-for="item in points"
:key="'desc-' + item.time" :key="'desc-' + item.time"
> >
@@ -63,6 +71,7 @@
import { gsap } from 'gsap' import { gsap } from 'gsap'
const containerRef = ref<HTMLElement | null>(null) const containerRef = ref<HTMLElement | null>(null)
const timelineRef = ref<HTMLElement | null>(null)
const hasAnimated = ref(false) const hasAnimated = ref(false)
const points = ref([ const points = ref([
@@ -95,7 +104,7 @@
subLabel: 'Ceremony', subLabel: 'Ceremony',
time: 'Nov 12', time: 'Nov 12',
desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.' desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
}, }
]) ])
const playAnimation = () => { const playAnimation = () => {
@@ -120,7 +129,7 @@
}, },
{ {
clipPath: 'inset(0 0% 0 0)', clipPath: 'inset(0 0% 0 0)',
duration: 1.6, duration: 1.3,
ease: 'power1.out' ease: 'power1.out'
}, },
'start' 'start'
@@ -157,16 +166,14 @@
) )
} }
// 行内文字（标签、时间、描述）与 start 同步开始 // 行内文字（标签、时间、描述、图标）与 start 同步开始
const textItems = containerRef.value.querySelectorAll( const textItems = containerRef.value.querySelectorAll('.grid-cell')
'.item-label, .item-time, .item-desc .txt'
)
if (textItems && textItems.length) { if (textItems && textItems.length) {
tl.from( tl.from(
textItems, textItems,
{ {
autoAlpha: 0.5, // autoAlpha: 0.5,
duration: 0.6, duration: 0.7,
stagger: 0.08, stagger: 0.08,
ease: 'power2.out' 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 hasAnimated.value = true
} }
@@ -199,8 +190,8 @@
await nextTick() await nextTick()
if (!containerRef.value) return if (!containerRef.value) return
observer = new IntersectionObserver( observer = new IntersectionObserver(
(entries) => { entries => {
entries.forEach((entry) => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
playAnimation() playAnimation()
} }
@@ -224,7 +215,7 @@
background: url('@/assets/images/award/timeline_bg.png') no-repeat; background: url('@/assets/images/award/timeline_bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
padding-top: 12.8rem; padding: 12.8rem 0 15.9rem;
width: 100%; width: 100%;
color: #fff; color: #fff;
.timeline-title { .timeline-title {
@@ -248,42 +239,45 @@
will-change: clip-path; will-change: clip-path;
flex: 1; flex: 1;
width: 100%; width: 100%;
margin-top: 12rem; margin-top: 11rem;
padding: 0 21.2rem 0 22rem; padding: 0 13.8rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
.labels-row { // 主网格布局：5列
position: relative; display: grid;
z-index: 2; grid-template-columns: repeat(5, 1fr);
margin-bottom: 8rem; grid-template-rows: auto auto auto auto;
.item-label { grid-column-gap: 0;
flex: 1; grid-row-gap: 0;
color: #fff;
font-family: 'PoppinsBold'; // 所有 grid 子行的通用样式
font-weight: 600; .grid-row {
font-size: 2.8rem; display: grid;
text-align: center; grid-template-columns: repeat(5, 1fr);
white-space: pre-line; grid-column: 1 / -1;
// height: 6rem; }
.grid-cell {
display: flex;
justify-content: center; justify-content: center;
} align-items: center;
text-align: center;
} }
// 图标行
.icons-row { .icons-row {
margin-bottom: 1.6rem; align-items: center;
height: 6.4rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
.point-icon { margin-bottom: 1.6rem;
width: 6.4rem;
height: 6.4rem;
display: block;
margin: 0 auto;
z-index: 2;
}
.timeline-line { .timeline-line {
width: calc(100% + 22rem + 21.2rem); position: absolute;
top: 50%;
left: -22rem; left: -22rem;
right: -21.2rem;
height: 0.15rem; height: 0.15rem;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@@ -293,40 +287,78 @@
rgba(199, 52, 44, 0.762376) 75.96%, rgba(199, 52, 44, 0.762376) 75.96%,
rgba(199, 52, 44, 0) 100% rgba(199, 52, 44, 0) 100%
); );
position: absolute;
bottom: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; 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 { .times-row {
margin-bottom: 6rem; margin-bottom: 6rem;
z-index: 2; z-index: 2;
position: relative; position: relative;
.item-time { .time-cell {
flex: 1;
color: #f95750; color: #f95750;
font-family: 'Arial'; font-family: 'Arial';
font-weight: 400; font-weight: 400;
font-size: 2.8rem; font-size: 2.8rem;
line-height: 4.5rem; line-height: 4.5rem;
text-align: center;
} }
} }
// 描述行
.descs-row { .descs-row {
.item-desc { .desc-cell {
flex: 1;
.txt { .txt {
font-family: 'Arial'; font-family: 'Arial';
font-weight: 400; font-weight: 400;
font-size: 2rem; font-size: 2rem;
text-align: center; text-align: center;
color: #e0e0e0; color: #e0e0e0;
width: 31.2rem; width: 100%;
height: 10.2rem; max-width: 31.2rem;
min-height: 10.2rem;
white-space: pre-line; white-space: pre-line;
display: flex;
align-items: center;
justify-content: center;
} }
} }
} }

2
src/views/AwardPage/index.vue
View File

@@ -63,7 +63,7 @@
height: 2.4rem; height: 2.4rem;
} }
.banner { .banner {
height: 108rem; height: 100rem;
// background: url('@/assets/images/award/banner.png') no-repeat; // background: url('@/assets/images/award/banner.png') no-repeat;
// background-size: cover; // background-size: cover;
position: relative; position: relative;