feat: 移动端弹窗
This commit is contained in:
@@ -61,10 +61,22 @@
|
||||
</div>
|
||||
<div class="copyright">© Code-Create 2026</div>
|
||||
</div>
|
||||
<div class="qrcode-mask flex flex-center" v-if="showQRcode">
|
||||
<div class="qrcode-mask flex flex-center" v-if="showQRcode" :class="{ mobile: isMobile }">
|
||||
<div class="code-wrapper flex flex-col align-center">
|
||||
<img src="@/assets/images/award/close.svg" class="close-icon" @click="handleCloseQRcode" />
|
||||
<div class="code-title">{{ $t('AwardsPage.wechatTitle') }}</div>
|
||||
<img
|
||||
v-if="!isMobile"
|
||||
src="@/assets/images/award/close.svg"
|
||||
class="close-icon"
|
||||
@click="handleCloseQRcode"
|
||||
/>
|
||||
<div class="code-title" :class="{ 'flex space-between': isMobile }">
|
||||
<span>{{ $t('AwardsPage.wechatTitle') }}</span>
|
||||
<img
|
||||
src="@/assets/images/award/close.svg"
|
||||
class="close mobile"
|
||||
@click="handleCloseQRcode"
|
||||
/>
|
||||
</div>
|
||||
<img src="@/assets/images/award/qrcode.jpg" class="qrcode" />
|
||||
<div class="tips">{{ $t('AwardsPage.wechatDesc') }}</div>
|
||||
</div>
|
||||
@@ -180,7 +192,7 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
const showContactModal = ref(true)
|
||||
const showContactModal = ref(false)
|
||||
const handleContactClick = () => {
|
||||
showContactModal.value = true
|
||||
}
|
||||
@@ -408,6 +420,28 @@ const handleBtnClick = () => {
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
&.mobile {
|
||||
align-items: flex-end;
|
||||
.code-wrapper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 2.4rem;
|
||||
border-top-right-radius: 2.4rem;
|
||||
padding: 4.8rem 3.2rem 10rem;
|
||||
}
|
||||
.code-title{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
padding-bottom: 1.6rem;
|
||||
}
|
||||
.qrcode{
|
||||
margin: 7.4rem 0 2rem;
|
||||
}
|
||||
.tips{
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-modal {
|
||||
position: fixed;
|
||||
|
||||
@@ -1676,6 +1676,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
line-height:initial;
|
||||
.ant-checkbox-inner {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
Reference in New Issue
Block a user