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

style:页面动画

Browse Source
This commit is contained in:
zhangyahui
2026-01-20 16:41:37 +08:00
parent 695a91ac1c
commit 08b8a52d83
4 changed files with 366 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,95 +25,9 @@
<div class="line"></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 -->
<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>
<Bloom />
<TimeLine />
<JudgesSection />
<PrizesSection />
<ApplySection />
@@ -128,6 +42,8 @@
import SelectionSection from './components/SelectionSection.vue'
import ApplySection from './components/ApplySection.vue'
import PrizesSection from './components/PrizesSection.vue'
import TimeLine from './components/TimeLine.vue'
import Bloom from './components/Bloom.vue'
const router = useRouter()
@@ -153,31 +69,6 @@
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>
<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>