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

feat: 移动端适配

Browse Source
This commit is contained in:
zhangyahui
2026-03-27 10:54:14 +08:00
parent 60ebdb3d77
commit 14b951d3fb
21 changed files with 315 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/views/AwardPage/container.vue
View File

@@ -5,7 +5,7 @@
<div class="header-left">
<img src="@/assets/images/award/code_create_logo.png" class="logo" />
</div>
<div class="header-right flex align-center">
<div class="header-right flex align-center" v-if="!isMobile">
<div class="contact flex align-center" @click="handleContactClick">
<img src="@/assets/images/award/mail.png" class="contact-icon" />
<div class="text" v-if="!isMobile">{{ $t('AwardsPage.contactUs') }}</div>
@@ -34,11 +34,25 @@
<img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
</div>
</div>
<div v-else class="header-right mobile">
<img
v-show="!showDrawer"
src="@/assets/images/award/menu.png"
class="menu-icon"
@click="handleChangeDrawer"
/>
<img
v-show="showDrawer"
src="@/assets/images/award/close-menu.png"
class="menu-icon close"
@click="handleChangeDrawer"
/>
</div>
</div>
<div class="header-placeholder"></div>
</div>
<router-view />
<div class="footer flex space-between align-center">
<div class="footer flex space-between align-center" :class="{ mobile: isMobile || isTablet }">
<div class="social-list flex">
<a href="https://xhslink.com/m/5Ony2FapizV" target="_blank">
<img src="@/assets/images/award/xiaohongshu.svg" alt="" />
@@ -72,6 +86,7 @@
<div class="code-title" :class="{ 'flex space-between': isMobile }">
<span>{{ $t('AwardsPage.wechatTitle') }}</span>
<img
v-if="isMobile"
src="@/assets/images/award/close.svg"
class="close mobile"
@click="handleCloseQRcode"
@@ -113,8 +128,9 @@
<div class="mail-address">awards2026@code-createcom.hk</div>
<img src="@/assets/images/award/copy.png" class="copy-icon" @click="handleClickCopyEmail" />
</div>
<div class="send-btn" @click="handleContactUs">
{{ $t('AwardsPage.sendEmail') }}
<div class="send-btn flex flex-center" @click="handleContactUs">
<img v-if="isMobile" src="@/assets/images/award/mail.png" class="contact-icon" />
<span>{{ $t('AwardsPage.sendEmail') }}</span>
</div>
<div v-if="isMobile" class="send-btn copy" @click="handleClickCopyEmail">
{{ $t('AwardsPage.copyMailAddress') }}
@@ -122,6 +138,41 @@
</div>
<!-- <div class="contact-modal-mobile-wrapper"></div> -->
</div>
<div
class="drawer-mask"
:class="{ 'drawer-closing': drawerClosing }"
v-if="showDrawer || drawerClosing"
>
<div class="drawer-wrapper" @animationend="handleDrawerAnimationEnd">
<div class="drawer-item flex align-center space-between" @click="handleBtnClick">
<span class="text">{{ t('AwardsPage.submitApplication') }}</span>
<img src="@/assets/images/award/drawer-arrow.png" class="drawer-icon arrow" />
</div>
<div class="gap" />
<div class="drawer-item flex align-center space-between" @click="handleContactClick">
<span class="text">{{ $t('AwardsPage.contactUs') }}</span>
<img src="@/assets/images/award/drawer-mail.png" class="drawer-icon mail" />
</div>
<div class="gap" />
<div class="drawer-item language flex align-center">
<div
class="text"
:class="{ active: locale === 'CHINESE_SIMPLIFIED' }"
@click="handleChangeLanguage('CHINESE_SIMPLIFIED')"
>
中文
</div>
<span class="line">/</span>
<div
class="text"
:class="{ active: locale === 'ENGLISH' }"
@click="handleChangeLanguage('ENGLISH')"
>
EN
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -161,20 +212,11 @@ const handleCloseQRcode = () => {
type BtnType = 'index' | 'form'
const btnType = ref<BtnType>('index')
const btnText = computed(() => {
if (isMobile.value) {
if (btnType.value === 'index') {
return t('AwardsPage.submitMobile')
}
if (btnType.value === 'form') {
return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back'
}
} else {
if (btnType.value === 'index') {
return t('AwardsPage.submitApplication')
}
if (btnType.value === 'form') {
return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
}
if (btnType.value === 'index') {
return t('AwardsPage.submitApplication')
}
if (btnType.value === 'form') {
return t('AwardApply.backToIntroduction')
}
})
@@ -192,8 +234,28 @@ watch(
}
)
const showDrawer = ref(false)
const drawerClosing = ref(false)
const handleChangeDrawer = () => {
if (showDrawer.value) {
drawerClosing.value = true
} else {
drawerClosing.value = false
showDrawer.value = true
}
}
const handleDrawerAnimationEnd = () => {
if (drawerClosing.value) {
showDrawer.value = false
drawerClosing.value = false
}
}
const showContactModal = ref(false)
const handleContactClick = () => {
if (showDrawer.value) {
handleChangeDrawer()
}
showContactModal.value = true
}
const handleContactUs = () => {
@@ -357,6 +419,12 @@ const handleBtnClick = () => {
height: 2.4rem;
}
}
&.mobile {
.menu-icon {
width: 5rem;
height: 5rem;
}
}
}
}
}
@@ -379,6 +447,77 @@ const handleBtnClick = () => {
font-weight: 400;
font-size: 1.2rem;
}
&.mobile {
padding: 0 6.6rem;
img {
width: 4rem;
height: 4rem;
}
.copyright {
font-size: 2rem;
}
}
}
.drawer-mask {
position: fixed;
top: 8rem;
left: 0;
right: 0;
bottom: 0;
background-color: #00000033;
z-index: 8;
.drawer-wrapper {
padding: 7.8rem 6.6rem 8.2rem;
background-color: #fff;
font-family: 'PoppinsBold';
font-weight: 600;
font-size: 2.4rem;
border-bottom-left-radius: 2.4rem;
border-bottom-right-radius: 2.4rem;
animation: drawer-in 0.3s ease-in-out;
.drawer-item {
&.language {
column-gap: 0.8rem;
// padding: 0 1.25rem;
color: #c0c0c0;
.line {
user-select: none;
}
.text {
&.active {
color: #232323;
}
}
}
}
.gap {
border: 1px solid #d5d5d5;
margin: 3.2rem 0;
}
}
}
@keyframes drawer-in {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes drawer-out {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.drawer-closing {
background-color: transparent;
.drawer-wrapper {
animation: drawer-out 0.3s ease-in-out forwards;
}
}
.qrcode-mask {
position: fixed;
@@ -430,15 +569,15 @@ const handleBtnClick = () => {
border-top-right-radius: 2.4rem;
padding: 4.8rem 3.2rem 10rem;
}
.code-title{
.code-title {
width: 100%;
border-bottom: 1px solid #E0E0E0;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 1.6rem;
}
.qrcode{
.qrcode {
margin: 7.4rem 0 2rem;
}
.tips{
.tips {
font-size: 2rem;
}
}
@@ -521,7 +660,11 @@ const handleBtnClick = () => {
border-radius: 0;
border-top-left-radius: 2.4rem;
border-top-right-radius: 2.4rem;
display: flex;
flex-direction: column;
align-items: center;
.header {
width: 100%;
border-bottom: 1px solid #e0e0e0;
// height: 9.6rem;
padding-top: 4.8rem;
@@ -543,10 +686,22 @@ const handleBtnClick = () => {
margin-bottom: 2rem;
}
.desc {
width: 46rem;
font-size: 2.2rem;
line-height: 3rem;
margin-bottom: 11rem;
}
.send-btn {
width: 100%;
height: 8rem;
line-height: 8rem;
font-size: 2.4rem;
column-gap: 0.8rem;
.contact-icon{
width: 2.4rem;
// height: 1.8rem;
}
}
.send-btn.copy {
background-color: #f1f1f1;
color: #969696;
@@ -574,10 +729,10 @@ const handleBtnClick = () => {
}
}
}
.footer {
row-gap: 0.8rem;
flex-direction: column;
justify-content: center;
}
// .footer {
// row-gap: 0.8rem;
// flex-direction: column;
// justify-content: center;
// }
}
</style>