chore: award页面修改
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 930 KiB After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
@@ -24,16 +24,6 @@
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="block-item flex flex-col flex-center">
|
||||
<div class="number">
|
||||
<img
|
||||
src="@/assets/images/award/∞.png"
|
||||
alt=""
|
||||
class="infinity"
|
||||
/>
|
||||
</div>
|
||||
<div class="label">Possibilites</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bloom container flex flex-col align-center">
|
||||
<div class="title">Bloom Your Creativity</div>
|
||||
@@ -50,7 +40,7 @@
|
||||
intelligence.
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-container container">
|
||||
<!-- <div class="design-container container">
|
||||
<div class="design-title limit">Design Without Borders</div>
|
||||
<div class="limit">
|
||||
<img
|
||||
@@ -64,20 +54,16 @@
|
||||
York to Shanghai, we're seeking the next generation of fashion innovators
|
||||
who dare to reimagine the future of design.
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="timeline-container container flex flex-col align-center">
|
||||
<div class="timeline-title">Competition Timeline</div>
|
||||
<img
|
||||
<!-- <img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
alt=""
|
||||
class="logo"
|
||||
/>
|
||||
/> -->
|
||||
<div class="desc">Shaping the Future</div>
|
||||
<div class="timeline-point">
|
||||
<img
|
||||
src="@/assets/images/award/timeline_line.png"
|
||||
class="line-bg"
|
||||
/>
|
||||
<div class="labels-row flex align-center">
|
||||
<div
|
||||
class="item-label flex flex-col"
|
||||
@@ -128,13 +114,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="judges-container flex flex-col align-center">
|
||||
<div class="title">Panel of Judges</div>
|
||||
<img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
class="logo"
|
||||
/>
|
||||
<div class="sub-title">Expertise</div>
|
||||
<div class="judgement-list">
|
||||
<div
|
||||
class="judgement-item flex flex-col align-center"
|
||||
v-for="item in judgements"
|
||||
:key="item.name"
|
||||
>
|
||||
<img
|
||||
:src="item.picture"
|
||||
class="picture"
|
||||
/>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prizes-container container flex align-center">
|
||||
<div class="left flex flex-col flex-center">
|
||||
<div class="title">Award & Prizes</div>
|
||||
<img
|
||||
<!-- <img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
class="logo"
|
||||
/>
|
||||
/> -->
|
||||
<div class="desc">Recongnition</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
@@ -225,28 +233,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="judges-container flex flex-col align-center">
|
||||
<div class="title">Panel of Judges</div>
|
||||
<img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
class="logo"
|
||||
/>
|
||||
<div class="sub-title">Expertise</div>
|
||||
<div class="judgement-list">
|
||||
<div
|
||||
class="judgement-item flex flex-col align-center"
|
||||
v-for="item in judgements"
|
||||
:key="item.name"
|
||||
>
|
||||
<img
|
||||
:src="item.picture"
|
||||
class="picture"
|
||||
/>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -273,16 +259,20 @@
|
||||
|
||||
const blocksList = ref([
|
||||
{
|
||||
number: '100',
|
||||
label: 'Semi-finalists'
|
||||
number: 'NETWORKING\n OPPORTUNITIES',
|
||||
label: 'with international\nmedia and designers'
|
||||
},
|
||||
{
|
||||
number: '20',
|
||||
label: 'Finalists'
|
||||
number: 'INTERNATIONAL\nMEDIA EXPOSE',
|
||||
label: 'through\nleading outlets'
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
label: 'Winners'
|
||||
number: 'UP TO\nUS$9000',
|
||||
label: 'in total prize\npool awards'
|
||||
},
|
||||
{
|
||||
number: 'TRAVEL\NALLOWANCE',
|
||||
label: 'for finalists to attend\naward ceremony'
|
||||
}
|
||||
])
|
||||
|
||||
@@ -313,20 +303,20 @@
|
||||
|
||||
const prizes = ref([
|
||||
{
|
||||
money: '$3000',
|
||||
money: 'US$5000',
|
||||
name: 'Grand Prize',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: 'US$3000',
|
||||
name: 'First Runner-Up',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: '$2000',
|
||||
money: 'US$2000',
|
||||
name: 'Second Runner-Up',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: '$5000',
|
||||
name: 'Grand Prize',
|
||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||
},
|
||||
{
|
||||
money: 'Certification',
|
||||
name: 'Finalists',
|
||||
@@ -477,13 +467,18 @@
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
row-gap: 3rem;
|
||||
.number {
|
||||
font-size: 6rem;
|
||||
font-family: 'Poppins';
|
||||
font-size: 3.6rem;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
}
|
||||
.label {
|
||||
font-size: 2.8rem;
|
||||
font-size: 2.4rem;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.line {
|
||||
@@ -525,56 +520,49 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
// .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%;
|
||||
.line-bg {
|
||||
position: absolute;
|
||||
width: 148.7rem;
|
||||
height: 27.58rem;
|
||||
left: 24rem;
|
||||
bottom: 22.8rem;
|
||||
z-index: 0;
|
||||
}
|
||||
color: #fff;
|
||||
.timeline-title {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
@@ -589,7 +577,7 @@
|
||||
font-family: 'Arial';
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: #b10000;
|
||||
color: #f95750;
|
||||
}
|
||||
.timeline-point {
|
||||
flex: 1;
|
||||
@@ -605,7 +593,7 @@
|
||||
margin-bottom: 8rem;
|
||||
.item-label {
|
||||
flex: 1;
|
||||
color: #232323;
|
||||
color: #fff;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
@@ -652,7 +640,7 @@
|
||||
position: relative;
|
||||
.item-time {
|
||||
flex: 1;
|
||||
color: #b10000;
|
||||
color: #f95750;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2.8rem;
|
||||
@@ -669,7 +657,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
color: #585858;
|
||||
color: #e0e0e0;
|
||||
width: 31.2rem;
|
||||
height: 10.2rem;
|
||||
}
|
||||
@@ -750,7 +738,7 @@
|
||||
}
|
||||
.apply-container {
|
||||
flex: 1;
|
||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||
background: url('@/assets/images/award/apply_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12.7rem 0 16.9rem;
|
||||
.title {
|
||||
|
||||
Reference in New Issue
Block a user