style: 样式修复

src/views/AwardPage/components/Bloom.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile, pad: isPad }">
+    <img
+      v-if="isMobile"
+      src="@/assets/images/mobile_version_background/ellipse.png"
+      class="top-bg"
+      alt=""
+    />
     <div class="title" ref="titleRef">
       {{ $t('AwardsPage.bloomYourCreativity') }}
     </div>
@@ -9,23 +15,23 @@
     </div>
     <div class="desc" ref="textRef">
       <p class="section-1">
-        {{ $t('AwardsPage.bloomText.desc1.regular1') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular1') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold1') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular2') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular2') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold2') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular3') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular3') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold3') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular4') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular4') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold4') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular5') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular5') }}</span>
       </p>
       <!-- <p class="section-1 pad" v-show="isPad" v-html="padSection1"></p> -->
       <p class="section-2">
@@ -36,6 +42,12 @@
         {{ $t('AwardsPage.bloomText.desc2.regular2') }}
       </p>
     </div>
+    <img
+      v-if="isMobile"
+      src="@/assets/images/mobile_version_background/people.png"
+      class="people"
+      alt=""
+    />
   </div>
 </template>
 
@@ -190,15 +202,31 @@ p {
     line-height: 4.5rem;
     margin-bottom: 12.3rem;
     white-space: pre-line;
+    .section-1 {
+      font-size: 0;
+      span {
+        font-size: 2.4rem;
+      }
+    }
     .section-2 {
       margin-top: 4rem;
     }
   }
   &.mobile {
-    background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
+    background: #fff;
     background-size: 100% 100%;
-    height: 110vw;
+    height: auto;
     padding-top: 6rem;
+    position: relative;
+    .top-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      // left: 50%;
+      // transform: translateX(-50%);
+      width: 100%;
+      height: 37.5rem;
+    }
     .title {
       font-size: 3.2rem;
       margin-bottom: 0.8rem;
@@ -212,6 +240,11 @@ p {
       font-size: 2rem;
       line-height: 3rem;
       white-space: normal;
+      margin-bottom: 7rem;
+    }
+    .people {
+      margin: 0 6.6rem;
+      width: calc(100% - 13.2rem);
     }
   }
   &.pad {
@@ -222,9 +255,9 @@ p {
       font-family: 'ArialBold';
       font-weight: 700;
     }
-    .desc {
-      // font-size: 2.4rem;
-    }
+    // .desc {
+    //   // font-size: 2.4rem;
+    // }
   }
 }
 </style>

src/views/AwardPage/components/SelectionSection.vue

@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
   }
   .sub-title {
     color: #f95750;
-    font-family: 'PopinsMedium';
+    font-family: 'PoppinsMedium';
     font-weight: 400;
     font-size: 3rem;
     margin-bottom: 11.8rem;

src/views/AwardPage/components/TimeLine.vue

@@ -21,8 +21,8 @@
         <div class="vertical-content">
           <div class="vertical-time">{{ $t(item.time) }}</div>
           <div class="vertical-label">
-            {{ $t(item.label)
-            }}<template v-if="item.subLabel">
+            {{ $t(item.label) }}
+            <template v-if="item.subLabel">
               {{ $t(item.subLabel) }}
             </template>
           </div>

src/views/AwardPage/container.vue

@@ -34,12 +34,12 @@
             <img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
           </div>
         </div>
-        <div v-else class="header-right mobile">
+        <div v-else class="header-right mobile" @click="handleChangeDrawer">
           <img
+            style="width: 5rem; height: 5rem"
             v-show="!showDrawer"
             src="@/assets/images/award/menu.png"
             class="menu-icon"
-            @click="handleChangeDrawer"
           />
           <img
             v-show="showDrawer"
@@ -52,7 +52,11 @@
       <div class="header-placeholder"></div>
     </div>
     <router-view />
-    <div class="footer flex space-between align-center" :class="{ mobile: isMobile || isTablet }">
+    <div
+      class="footer flex space-between align-center"
+      :class="{ mobile: isMobile || isTablet }"
+      :style="mobileStyle"
+    >
       <div class="social-list flex">
         <a href="https://xhslink.com/m/5Ony2FapizV" target="_blank">
           <img src="@/assets/images/award/xiaohongshu.svg" alt="" />
@@ -145,7 +149,7 @@
   >
     <div class="drawer-wrapper" @animationend="handleDrawerAnimationEnd">
       <div class="drawer-item flex align-center space-between" @click="handleBtnClick">
-        <span class="text">{{ t('AwardsPage.submitApplication') }}</span>
+        <span class="text">{{ btnText }}</span>
         <img src="@/assets/images/award/drawer-arrow.png" class="drawer-icon arrow" />
       </div>
       <div class="gap" />
@@ -191,6 +195,16 @@ const route = useRoute()
 const router = useRouter()
 const { locale, t } = useI18n()
 
+const mobileStyle = computed(() => {
+  if (isMobile) {
+    return {
+      padding: '0 6.6rem'
+    }
+  } else {
+    return {}
+  }
+})
+
 onMounted(() => {
   // 初始化语言设置
   const loginLanguage = localStorage.getItem('loginLanguage')
@@ -361,6 +375,7 @@ const handleBtnClick = () => {
 <style lang="less" scoped>
 .award-container {
   height: 100%;
+  overflow-x: hidden;
 }
 .header-wrapper {
   .header-placeholder {
@@ -697,7 +712,7 @@ const handleBtnClick = () => {
         line-height: 8rem;
         font-size: 2.4rem;
         column-gap: 0.8rem;
-        .contact-icon{
+        .contact-icon {
           width: 2.4rem;
           // height: 1.8rem;
         }

src/views/AwardPage/contestants.vue

@@ -1839,6 +1839,9 @@ onUnmounted(() => {
 </style>
 <style lang="less">
 .code-modal {
+  .ant-modal{
+    width: fit-content !important;
+  }
   .ant-modal-content {
     padding: 0;
     &,

src/views/AwardPage/index.vue

@@ -41,11 +41,11 @@ import TimeLine from './components/TimeLine.vue'
 import Bloom from './components/Bloom.vue'
 import Slogan from './components/Slogan.vue'
 import banner from '@/assets/images/award/banner.mp4'
-import bannerMobile from '@/assets/images/award/banner_mobile.mp4'
 import bannerZh from '@/assets/images/award/banner_chinese.mp4'
-import bannerZhMobile from '@/assets/images/award/banner_mobile_chinese.mp4'
 import bannerPad from '@/assets/images/pad_version/banner_pad.mp4'
 import bannerPadZh from '@/assets/images/pad_version/banner_pad_chinese.mp4'
+import bannerMobile from '@/assets/images/mobile_version_background/banner_mobile.mp4'
+import bannerZhMobile from '@/assets/images/mobile_version_background/banner_mobile_zh.mp4'
 import { useIsMobile, useIsTablet } from '@/utils/isMobile'
 const { isMobile } = useIsMobile()
 const { isTablet } = useIsTablet()
@@ -99,6 +99,7 @@ const handleSubmitApplication = () => {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
   }
   .submit-btn {
     width: 41rem;
@@ -155,7 +156,6 @@ const handleSubmitApplication = () => {
 
 .banner.mobile {
   height: 123.4rem;
-
   .submit-btn {
     top: 52%;
     left: 8%;