style: timeline布局修改
This commit is contained in:
@@ -1228,6 +1228,7 @@
|
||||
height: 4rem;
|
||||
box-sizing: border-box;
|
||||
border-left: 0.1rem solid #d5d5d5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,10 +5,14 @@
|
||||
>
|
||||
<div class="timeline-title">Competition Timeline</div>
|
||||
<div class="desc">Shaping the Future</div>
|
||||
<div class="timeline-point">
|
||||
<div class="labels-row flex align-center">
|
||||
<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"
|
||||
:key="'label-' + item.time"
|
||||
>
|
||||
@@ -21,31 +25,35 @@
|
||||
</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="grid-cell icon-cell"
|
||||
v-for="item in points"
|
||||
:key="'icon-' + item.time"
|
||||
>
|
||||
<img
|
||||
src="@/assets/images/award/point.png"
|
||||
class="point-icon"
|
||||
v-for="item in points"
|
||||
:key="'icon-' + item.time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Times row -->
|
||||
<div class="times-row flex align-center">
|
||||
</div>
|
||||
<!-- 时间行 -->
|
||||
<div class="grid-row times-row">
|
||||
<div
|
||||
class="item-time"
|
||||
class="grid-cell time-cell"
|
||||
v-for="item in points"
|
||||
:key="'time-' + item.time"
|
||||
>
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions row -->
|
||||
<div class="descs-row flex align-center">
|
||||
|
||||
<!-- 描述行 -->
|
||||
<div class="grid-row descs-row">
|
||||
<div
|
||||
class="item-desc flex justify-center"
|
||||
class="grid-cell desc-cell"
|
||||
v-for="item in points"
|
||||
:key="'desc-' + item.time"
|
||||
>
|
||||
@@ -63,6 +71,7 @@
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const timelineRef = ref<HTMLElement | null>(null)
|
||||
const hasAnimated = ref(false)
|
||||
|
||||
const points = ref([
|
||||
@@ -95,7 +104,7 @@
|
||||
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;
|
||||
// 主网格布局：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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user