style:页面动画
This commit is contained in:
68
src/views/AwardPage/components/Bloom.vue
Normal file
68
src/views/AwardPage/components/Bloom.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bloom container flex flex-col align-center">
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
ref="titleRef"
|
||||||
|
>
|
||||||
|
Bloom Your Creativity
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="season"
|
||||||
|
ref="subtitleRef"
|
||||||
|
>
|
||||||
|
Theme of 2026
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="desc"
|
||||||
|
ref="textRef"
|
||||||
|
>
|
||||||
|
Where imagination meets innovation, creativity blooms. This theme celebrates
|
||||||
|
AI as a catalyst for fashion design, allowing your vision to flourish beyond
|
||||||
|
traditional boundaries. Let your ideas blossom into extraordinary designs that
|
||||||
|
merge human artistry with artificial intelligence.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import gsap from 'gsap'
|
||||||
|
|
||||||
|
const titleRef = ref<HTMLElement | null>(null)
|
||||||
|
const subtitleRef = ref<HTMLElement | null>(null)
|
||||||
|
const textRef = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.bloom {
|
||||||
|
padding-top: 12.8rem;
|
||||||
|
font-family: 'Poppins';
|
||||||
|
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.title {
|
||||||
|
font-size: 4rem;
|
||||||
|
color: #232323;
|
||||||
|
margin-bottom: 2.4rem;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
margin-bottom: 2.2rem;
|
||||||
|
}
|
||||||
|
.season {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: #c7342c;
|
||||||
|
margin-bottom: 6.6rem;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-size: 2.8rem;
|
||||||
|
color: #585858;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 21.5rem;
|
||||||
|
line-height: 4.5rem;
|
||||||
|
margin-bottom: 12.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -89,9 +89,11 @@
|
|||||||
}
|
}
|
||||||
if (prizesRightRef.value) {
|
if (prizesRightRef.value) {
|
||||||
gsap.set(prizesRightRef.value, {
|
gsap.set(prizesRightRef.value, {
|
||||||
opacity: 0,
|
'opacity': 0,
|
||||||
y: 40,
|
'y': 40,
|
||||||
scale: 1.08
|
'scale': 1.08,
|
||||||
|
'--prize-row-gap': '2rem',
|
||||||
|
'--prize-col-gap': '2rem'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -116,11 +118,13 @@
|
|||||||
tl.to(
|
tl.to(
|
||||||
prizesRightRef.value,
|
prizesRightRef.value,
|
||||||
{
|
{
|
||||||
opacity: 1,
|
'opacity': 1,
|
||||||
y: 0,
|
'y': 0,
|
||||||
scale: 1,
|
'scale': 1,
|
||||||
duration: 0.55,
|
'--prize-row-gap': '4.2rem',
|
||||||
ease: 'back.out(1.4)'
|
'--prize-col-gap': '4.4rem',
|
||||||
|
'duration': 0.55,
|
||||||
|
'ease': 'back.out(1.4)'
|
||||||
},
|
},
|
||||||
titleEls.length ? '-=0.15' : 0
|
titleEls.length ? '-=0.15' : 0
|
||||||
)
|
)
|
||||||
@@ -186,8 +190,8 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
||||||
row-gap: 4.2rem;
|
row-gap: var(--prize-row-gap, 4.2rem);
|
||||||
column-gap: 4.4rem;
|
column-gap: var(--prize-col-gap, 4.4rem);
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
.prize-item {
|
.prize-item {
|
||||||
width: 35.5rem;
|
width: 35.5rem;
|
||||||
|
|||||||
280
src/views/AwardPage/components/TimeLine.vue
Normal file
280
src/views/AwardPage/components/TimeLine.vue
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="containerRef"
|
||||||
|
class="timeline-container container flex flex-col align-center"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
v-for="item in points"
|
||||||
|
:key="'label-' + item.time"
|
||||||
|
>
|
||||||
|
<div class="main-label">{{ item.label }}</div>
|
||||||
|
<div
|
||||||
|
class="sub-label"
|
||||||
|
v-if="item.subLabel"
|
||||||
|
>
|
||||||
|
{{ item.subLabel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Icons row -->
|
||||||
|
<div class="icons-row flex align-center">
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
<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
|
||||||
|
class="item-time"
|
||||||
|
v-for="item in points"
|
||||||
|
:key="'time-' + item.time"
|
||||||
|
>
|
||||||
|
{{ item.time }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Descriptions row -->
|
||||||
|
<div class="descs-row flex align-center">
|
||||||
|
<div
|
||||||
|
class="item-desc flex justify-center"
|
||||||
|
v-for="item in points"
|
||||||
|
:key="'desc-' + item.time"
|
||||||
|
>
|
||||||
|
<div class="txt">
|
||||||
|
{{ item.desc }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
|
||||||
|
const containerRef = ref<HTMLElement | null>(null)
|
||||||
|
const hasAnimated = ref(false)
|
||||||
|
|
||||||
|
const points = ref([
|
||||||
|
{
|
||||||
|
label: 'Select Top 20',
|
||||||
|
time: 'May',
|
||||||
|
desc: 'Submit your design concept, mood board, and initial sketch.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: `Top 20`,
|
||||||
|
subLabel: 'Collections Finalize',
|
||||||
|
time: 'June',
|
||||||
|
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: `Top 3`,
|
||||||
|
subLabel: 'Finalists Select',
|
||||||
|
time: 'August',
|
||||||
|
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Award Ceremony',
|
||||||
|
time: 'November',
|
||||||
|
desc: 'Winners revealed with media coverage and live showcase.'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const playAnimation = () => {
|
||||||
|
if (!containerRef.value || hasAnimated.value) return
|
||||||
|
const title = containerRef.value.querySelector('.timeline-title')
|
||||||
|
const subtitle = containerRef.value.querySelector('.desc')
|
||||||
|
const line = containerRef.value.querySelector('.timeline-line')
|
||||||
|
const timeline = containerRef.value.querySelector('.timeline-point')
|
||||||
|
|
||||||
|
const tl = gsap.timeline()
|
||||||
|
if (title && subtitle) {
|
||||||
|
tl.from([title, subtitle], {
|
||||||
|
scaleX: 0,
|
||||||
|
autoAlpha: 0,
|
||||||
|
transformOrigin: '50% 50%',
|
||||||
|
duration: 0.6,
|
||||||
|
stagger: 0.1,
|
||||||
|
ease: 'power2.out'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (timeline) {
|
||||||
|
tl.fromTo(
|
||||||
|
timeline,
|
||||||
|
{
|
||||||
|
clipPath: 'inset(0 100% 0 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
clipPath: 'inset(0 0% 0 0)',
|
||||||
|
duration: 1.6,
|
||||||
|
ease: 'power1.out'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (line) {
|
||||||
|
tl.from(
|
||||||
|
line,
|
||||||
|
{
|
||||||
|
scaleX: 0,
|
||||||
|
transformOrigin: '0% 50%',
|
||||||
|
duration: 1.3,
|
||||||
|
ease: 'power1.out'
|
||||||
|
},
|
||||||
|
'-=1.1'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
hasAnimated.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
let observer: IntersectionObserver | null = null
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await nextTick()
|
||||||
|
if (!containerRef.value) return
|
||||||
|
observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
playAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ threshold: 0.3 }
|
||||||
|
)
|
||||||
|
observer.observe(containerRef.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (observer && containerRef.value) {
|
||||||
|
observer.unobserve(containerRef.value)
|
||||||
|
}
|
||||||
|
observer = null
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.timeline-container {
|
||||||
|
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 12.8rem;
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
.timeline-title {
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
margin: 2.4rem 0 2.2rem 0;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #f95750;
|
||||||
|
}
|
||||||
|
.timeline-point {
|
||||||
|
overflow: hidden;
|
||||||
|
will-change: clip-path;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12rem;
|
||||||
|
padding: 0 21.2rem 0 22rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-row {
|
||||||
|
margin-bottom: 1.6rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
.point-icon {
|
||||||
|
width: 6.4rem;
|
||||||
|
height: 6.4rem;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.timeline-line {
|
||||||
|
width: calc(100% + 22rem + 21.2rem);
|
||||||
|
left: -22rem;
|
||||||
|
height: 0.15rem;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(199, 52, 44, 0) 0%,
|
||||||
|
rgba(199, 52, 44, 0.719626) 25.96%,
|
||||||
|
#c7342c 51.44%,
|
||||||
|
rgba(199, 52, 44, 0.762376) 75.96%,
|
||||||
|
rgba(199, 52, 44, 0) 100%
|
||||||
|
);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.times-row {
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
.item-time {
|
||||||
|
flex: 1;
|
||||||
|
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;
|
||||||
|
.txt {
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #e0e0e0;
|
||||||
|
width: 31.2rem;
|
||||||
|
height: 10.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -25,95 +25,9 @@
|
|||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bloom container flex flex-col align-center">
|
|
||||||
<div class="title">Bloom Your Creativity</div>
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
<div class="season">Theme of 2026</div>
|
|
||||||
<div class="desc">
|
|
||||||
Where imagination meets innovation, creativity blooms. This theme
|
|
||||||
celebrates AI as a catalyst for fashion design, allowing your vision to
|
|
||||||
flourish beyond traditional boundaries. Let your ideas blossom into
|
|
||||||
extraordinary designs that merge human artistry with artificial
|
|
||||||
intelligence.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="design-container container">
|
|
||||||
<div class="design-title limit">Design Without Borders</div>
|
|
||||||
<div class="limit">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="global limit">Global Opportunity</div>
|
|
||||||
<div class="desc">
|
|
||||||
Open to visionary designers across the globe. From Seoul to Singapore, New
|
|
||||||
York to Shanghai, we're seeking the next generation of fashion innovators
|
|
||||||
who dare to reimagine the future of design.
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="timeline-container container flex flex-col align-center">
|
|
||||||
<div class="timeline-title">Competition Timeline</div>
|
|
||||||
<!-- <img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
alt=""
|
|
||||||
class="logo"
|
|
||||||
/> -->
|
|
||||||
<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"
|
|
||||||
v-for="item in points"
|
|
||||||
:key="'label-' + item.time"
|
|
||||||
>
|
|
||||||
<div class="main-label">{{ item.label }}</div>
|
|
||||||
<div
|
|
||||||
class="sub-label"
|
|
||||||
v-if="item.subLabel"
|
|
||||||
>
|
|
||||||
{{ item.subLabel }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Icons row -->
|
|
||||||
<div class="icons-row flex align-center">
|
|
||||||
<div class="timeline-line"></div>
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/point.png"
|
|
||||||
class="point-icon"
|
|
||||||
v-for="item in points"
|
|
||||||
:key="'icon-' + item.time"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Times row -->
|
<Bloom />
|
||||||
<div class="times-row flex align-center">
|
<TimeLine />
|
||||||
<div
|
|
||||||
class="item-time"
|
|
||||||
v-for="item in points"
|
|
||||||
:key="'time-' + item.time"
|
|
||||||
>
|
|
||||||
{{ item.time }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Descriptions row -->
|
|
||||||
<div class="descs-row flex align-center">
|
|
||||||
<div
|
|
||||||
class="item-desc flex justify-center"
|
|
||||||
v-for="item in points"
|
|
||||||
:key="'desc-' + item.time"
|
|
||||||
>
|
|
||||||
<div class="txt">
|
|
||||||
{{ item.desc }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<JudgesSection />
|
<JudgesSection />
|
||||||
<PrizesSection />
|
<PrizesSection />
|
||||||
<ApplySection />
|
<ApplySection />
|
||||||
@@ -128,6 +42,8 @@
|
|||||||
import SelectionSection from './components/SelectionSection.vue'
|
import SelectionSection from './components/SelectionSection.vue'
|
||||||
import ApplySection from './components/ApplySection.vue'
|
import ApplySection from './components/ApplySection.vue'
|
||||||
import PrizesSection from './components/PrizesSection.vue'
|
import PrizesSection from './components/PrizesSection.vue'
|
||||||
|
import TimeLine from './components/TimeLine.vue'
|
||||||
|
import Bloom from './components/Bloom.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@@ -153,31 +69,6 @@
|
|||||||
label: 'for finalists to attend\naward ceremony'
|
label: 'for finalists to attend\naward ceremony'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
const points = ref([
|
|
||||||
{
|
|
||||||
label: 'Select Top 20',
|
|
||||||
time: 'May',
|
|
||||||
desc: 'Submit your design concept, mood board, and initial sketch.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `Top 20`,
|
|
||||||
subLabel: 'Collections Finalize',
|
|
||||||
time: 'June',
|
|
||||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `Top 3`,
|
|
||||||
subLabel: 'Finalists Select',
|
|
||||||
time: 'August',
|
|
||||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Award Ceremony',
|
|
||||||
time: 'November',
|
|
||||||
desc: 'Winners revealed with media coverage and live showcase.'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -264,197 +155,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bloom {
|
|
||||||
padding-top: 12.8rem;
|
|
||||||
font-family: 'Poppins';
|
|
||||||
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.title {
|
|
||||||
font-size: 4rem;
|
|
||||||
color: #232323;
|
|
||||||
margin-bottom: 2.4rem;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
margin-bottom: 2.2rem;
|
|
||||||
}
|
|
||||||
.season {
|
|
||||||
font-size: 3rem;
|
|
||||||
color: #c7342c;
|
|
||||||
margin-bottom: 6.6rem;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-size: 2.8rem;
|
|
||||||
color: #585858;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 21.5rem;
|
|
||||||
line-height: 4.5rem;
|
|
||||||
margin-bottom: 12.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .design-container {
|
|
||||||
// background: url('@/assets/images/award/design_bg.png') no-repeat;
|
|
||||||
// background-size: 100% 100%;
|
|
||||||
// padding-left: 21.5rem;
|
|
||||||
// padding-top: 16rem;
|
|
||||||
// .limit {
|
|
||||||
// width: 48.4rem;
|
|
||||||
// text-align: center;
|
|
||||||
// }
|
|
||||||
// .design-title {
|
|
||||||
// color: #fff;
|
|
||||||
// font-size: 4rem;
|
|
||||||
// font-weight: 600;
|
|
||||||
// font-family: 'Poppins';
|
|
||||||
// font-style: SemiBold;
|
|
||||||
// vertical-align: middle;
|
|
||||||
// text-transform: capitalize;
|
|
||||||
// }
|
|
||||||
// .logo {
|
|
||||||
// margin-top: 2.4rem;
|
|
||||||
// margin-bottom: 2.1rem;
|
|
||||||
// }
|
|
||||||
// .global {
|
|
||||||
// font-family: 'Poppins';
|
|
||||||
// font-size: 3rem;
|
|
||||||
// color: #f95750;
|
|
||||||
// margin-bottom: 19.8rem;
|
|
||||||
// }
|
|
||||||
// .desc {
|
|
||||||
// font-family: 'Arial';
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 2.8rem;
|
|
||||||
// color: #e0e0e0;
|
|
||||||
// width: 54rem;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
.timeline-container {
|
|
||||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 12.8rem;
|
|
||||||
width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
.timeline-title {
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
margin: 2.4rem 0 2.2rem 0;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #f95750;
|
|
||||||
}
|
|
||||||
.timeline-point {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 12rem;
|
|
||||||
padding: 0 21.2rem 0 22rem;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-row {
|
|
||||||
margin-bottom: 1.6rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
.point-icon {
|
|
||||||
width: 6.4rem;
|
|
||||||
height: 6.4rem;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.timeline-line {
|
|
||||||
width: calc(100% + 22rem + 21.2rem);
|
|
||||||
left: -22rem;
|
|
||||||
height: 0.15rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(199, 52, 44, 0) 0%,
|
|
||||||
rgba(199, 52, 44, 0.719626) 25.96%,
|
|
||||||
#c7342c 51.44%,
|
|
||||||
rgba(199, 52, 44, 0.762376) 75.96%,
|
|
||||||
rgba(199, 52, 44, 0) 100%
|
|
||||||
);
|
|
||||||
position: absolute;
|
|
||||||
bottom: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.times-row {
|
|
||||||
margin-bottom: 6rem;
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
.item-time {
|
|
||||||
flex: 1;
|
|
||||||
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;
|
|
||||||
.txt {
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #e0e0e0;
|
|
||||||
width: 31.2rem;
|
|
||||||
height: 10.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
height: 10rem;
|
|
||||||
padding-left: 21.5rem;
|
|
||||||
padding-right: 22rem;
|
|
||||||
background-color: #232323;
|
|
||||||
.social-list {
|
|
||||||
column-gap: 2rem;
|
|
||||||
img {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.copyright {
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user