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

style: apply移动端

Browse Source
This commit is contained in:
zhangyahui
2026-03-19 11:52:07 +08:00
parent 6294f18b4b
commit 5dd8840a0a
1 changed files with 122 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/AwardPage/components/ApplySection.vue
View File

@@ -1,5 +1,10 @@
<template>
<div class="apply-container flex flex-col" id="apply" ref="applyRef">
<div
class="apply-container flex flex-col"
id="apply"
ref="applyRef"
:class="{ mobile: isMobile }"
>
<div class="title animation-element" ref="applyTitleRef">
{{ $t('AwardsPage.howToApply') }}
</div>
@@ -7,7 +12,7 @@
{{ $t('AwardsPage.stepByStep') }}
</div>
<div class="requirments-list flex flex-col" ref="reqListRef">
<div class="top flex">
<div class="top flex" :class="{ 'flex-col': isMobile }">
<div
class="item-box animation-element"
v-for="(item, index) in leftRequirment"
@@ -22,7 +27,7 @@
<div class="item-header flex flex-center">
<div class="item-title">{{ $t(item.type) }}</div>
</div>
<div class="context-container flex flex-center">
<div class="context-container flex flex-center" :class="{ 'flex-col': isMobile }">
<div class="context" v-for="el in item.desc">
{{ $t(el) }}
</div>
@@ -37,10 +42,10 @@
</div>
</div>
</div>
<div class="bottom flex">
<div class="bottom flex" :class="{ 'flex-col': isMobile }">
<div class="step-3 flex flex-col animation-element" ref="step3Ref">
<div class="header">{{ $t('AwardsPage.step3Title') }}</div>
<div class="content flex">
<div class="content flex" :class="{ 'flex-col': isMobile }">
<div class="content-left flex flex-col space-between">
<div class="content-item">
<div class="item-header flex align-center">
@@ -62,7 +67,7 @@
</ul>
</div>
</div>
<div class="content-item">
<div class="content-item" v-if="!isMobile">
<div class="item-header flex align-center">
<div class="point"></div>
<div>{{ $t('AwardsPage.fileName') }}</div>
@@ -103,6 +108,15 @@
</ul>
</div>
</div>
<div class="content-item file" v-if="isMobile">
<div class="item-header flex align-center">
<div class="point"></div>
<div>{{ $t('AwardsPage.fileName') }}</div>
</div>
<div class="item-desc indent">
{{ $t('AwardsPage.fileNameDesc') }}
</div>
</div>
</div>
</div>
</div>
@@ -519,5 +533,107 @@ ul {
}
}
}
&.mobile {
// height: 204.9rem;
height: auto;
background: url('@/assets/images/mobile_version_background/apply_bg.png') no-repeat;
background-size: 100% 100%;
padding: 6rem 6.6rem 0;
.title {
font-size: 3.2rem;
margin-bottom: 0.8rem;
}
.sub-title {
font-size: 2.4rem;
margin-bottom: 5.8rem;
}
.requirments-list {
row-gap: 3.8rem;
.top {
height: auto;
row-gap: 4rem;
.item-box {
width: 100%;
height: initial;
.item-header {
height: 6rem;
.item-title {
white-space: normal;
font-size: 2.4rem;
}
}
.context-container {
margin-top: 2rem;
.list {
width: 100%;
padding: 0 6rem 6.4rem;
font-size: 2rem;
margin-top: 2rem;
.list-items li::before {
border-radius: 50%;
}
}
.context {
white-space: normal;
padding: 0 6rem;
font-size: 2rem;
text-align: left;
}
}
}
}
.bottom {
height: fit-content;
.step-3 {
margin-bottom: 4rem;
.content {
row-gap: 4rem;
padding: 2rem 6rem 4rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
.content-item {
height: auto;
&.file {
margin-top: 4rem;
}
.item-header {
font-size: 2.2rem;
}
.desc-wrapper {
margin-top: 2rem;
font-family: 'Instrument';
font-weight: 400;
font-size: 2rem;
row-gap: 2rem;
justify-content: flex-start;
.desc-lists li::before {
width: 0.4rem;
height: 0.4rem;
flex: none;
border-radius: 50%;
}
}
}
}
}
.step-4 {
width: 100%;
.content {
padding: 2rem 6rem 10rem;
.desc-wrapper {
font-size: 2rem;
.desc-lists li::before {
width: 0.4rem;
height: 0.4rem;
flex: none;
border-radius: 50%;
}
}
}
}
}
}
}
}
</style>