feat: 移动端contact us弹窗

src/views/AwardPage/container.vue

@@ -70,26 +70,43 @@
       </div>
     </div>
   </div>
-  <div class="contact-modal flex flex-center" v-if="showContactModal">
+  <div
+    class="contact-modal flex flex-center"
+    v-if="showContactModal"
+    :class="{ mobile: isMobile, tablet: isTablet }"
+  >
     <div class="contact-modal-wrapper">
       <img
+        v-if="!isMobile"
         src="@/assets/images/award/close.svg"
         class="close-icon"
         @click="showContactModal = false"
       />
-      <div class="header">
-        {{ $t('AwardsPage.contactHeader') }}
+      <div class="header" :class="{ 'flex space-between': isMobile }">
+        <span>
+          {{ $t('AwardsPage.contactHeader') }}
+        </span>
+        <img
+          v-if="isMobile"
+          src="@/assets/images/award/close.svg"
+          class="close mobile"
+          @click="showContactModal = false"
+        />
       </div>
+      <div class="mobile-mail" v-if="isMobile">awards2026@code-createcom.hk</div>
       <div class="desc">
         {{ $t('AwardsPage.contactDesc') }}
       </div>
-      <div class="mail flex align-center space-between">
+      <div class="mail flex align-center space-between" v-if="!isMobile">
         <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>
+      <div v-if="isMobile" class="send-btn copy" @click="handleClickCopyEmail">
+        {{ $t('AwardsPage.copyMailAddress') }}
+      </div>
     </div>
     <!-- <div class="contact-modal-mobile-wrapper"></div> -->
   </div>
@@ -101,9 +118,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { getCookie, setCookie } from '@/utils/cookie'
 import { useMessage } from '@/components/Message/message'
-import { useIsMobile } from '@/utils/isMobile'
+import { useIsMobile, useIsTablet } from '@/utils/isMobile'
 
 const { isMobile } = useIsMobile()
+const { isTablet } = useIsTablet()
 const { success, error } = useMessage()
 
 const route = useRoute()
@@ -162,7 +180,7 @@ watch(
   }
 )
 
-const showContactModal = ref(false)
+const showContactModal = ref(true)
 const handleContactClick = () => {
   showContactModal.value = true
 }
@@ -399,6 +417,7 @@ const handleBtnClick = () => {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.45);
   z-index: 9;
+
   .contact-modal-wrapper {
     width: 60rem;
     height: 49.4rem;
@@ -459,6 +478,48 @@ const handleBtnClick = () => {
       cursor: pointer;
     }
   }
+  &.mobile {
+    align-items: flex-end;
+    .contact-modal-wrapper {
+      width: 100%;
+      height: auto;
+      padding: 0 3.2rem 3.2rem;
+      border-radius: 0;
+      border-top-left-radius: 2.4rem;
+      border-top-right-radius: 2.4rem;
+      .header {
+        border-bottom: 1px solid #e0e0e0;
+        // height: 9.6rem;
+        padding-top: 4.8rem;
+        padding-bottom: 1.6rem;
+        font-size: 2.4rem;
+        text-align: left;
+        margin-bottom: 9rem;
+        .close {
+          width: 3.2rem;
+          height: 3.2rem;
+        }
+      }
+      .mobile-mail {
+        text-align: center;
+        font-family: 'ArialBold';
+        font-weight: 700;
+        font-size: 2.8rem;
+        color: #232323;
+        margin-bottom: 2rem;
+      }
+      .desc {
+        font-size: 2.2rem;
+        line-height: 3rem;
+        margin-bottom: 11rem;
+      }
+      .send-btn.copy {
+        background-color: #f1f1f1;
+        color: #969696;
+        margin-top: 1.2rem;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1200px) {