style: prizes移动端

src/views/AwardPage/components/ApplySection.vue

@@ -136,11 +136,12 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 
 const { t } = useI18n()
+const isMobile = inject<boolean>('isMobile')
 
 const leftRequirment = ref([
   {

src/views/AwardPage/components/PrizesSection.vue

@@ -2,26 +2,18 @@
   <div
     class="prizes-container container flex align-center space-between"
     ref="prizesRef"
+    :class="{ mobile: isMobile, 'flex-col': isMobile }"
   >
     <div class="left flex flex-col flex-center">
-			<div
+      <div class="title" ref="prizesTitleRef">
-				class="title"
-				ref="prizesTitleRef"
-			>
         {{ $t('AwardsPage.awardPrizes') }}
       </div>
       <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-			<div
+      <div class="desc" ref="prizesSubTitleRef">
-				class="desc"
-				ref="prizesSubTitleRef"
-			>
         {{ $t('AwardsPage.recognition') }}
       </div>
     </div>
-		<div
+    <div class="right" ref="prizesRightRef">
-			class="right"
-			ref="prizesRightRef"
-		>
       <div
         class="prize-item flex flex-col flex-center"
         :class="{ smaller: item.smaller }"
@@ -33,10 +25,7 @@
         </div>
         <div class="prize-name">{{ $t(item.name) }}</div>
         <div class="prize-desc flex flex-col flex-center">
-					<div
+          <div class="desc-item" v-for="el in item.desc">
-						class="desc-item"
-						v-for="el in item.desc"
-					>
             {{ $t(el) }}
           </div>
         </div>
@@ -46,11 +35,12 @@
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 
 const { t } = useI18n()
+const isMobile = inject<boolean>('isMobile')
 
 const props = defineProps({
   isZh: {
@@ -63,29 +53,17 @@
   {
     money: 'AwardsPage.grandMoney',
     name: 'AwardsPage.grandAwards',
-			desc: [
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
   },
   {
     money: 'AwardsPage.goldMoney',
     name: 'AwardsPage.goldAwards',
-			desc: [
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
   },
   {
     money: 'AwardsPage.silverMoney',
     name: 'AwardsPage.silverAwards',
-			desc: [
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
   },
   {
     money: 'AwardsPage.awardCertification',
@@ -103,9 +81,7 @@
 let prizesObserver: IntersectionObserver | null = null
 
 const setupPrizesInitialState = () => {
-		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
-			Boolean
-		) as HTMLElement[]
   if (titleEls.length) {
     gsap.set(titleEls, {
       opacity: 0,
@@ -115,9 +91,9 @@
   }
   if (prizesRightRef.value) {
     gsap.set(prizesRightRef.value, {
-				'opacity': 0,
+      opacity: 0,
-				'y': 40,
+      y: 40,
-				'scale': 1.08,
+      scale: 1.08,
       '--prize-row-gap': '2rem',
       '--prize-col-gap': '2rem'
     })
@@ -126,9 +102,7 @@
 
 const playPrizesAnimation = () => {
   if (hasPlayedPrizesAnim.value) return
-		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
-			Boolean
-		) as HTMLElement[]
 
   const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
   if (titleEls.length) {
@@ -144,13 +118,13 @@
     tl.to(
       prizesRightRef.value,
       {
-					'opacity': 1,
+        opacity: 1,
-					'y': 0,
+        y: 0,
-					'scale': 1,
+        scale: 1,
         '--prize-row-gap': '4.2rem',
         '--prize-col-gap': '4.4rem',
-					'duration': 0.55,
+        duration: 0.55,
-					'ease': 'back.out(1.4)'
+        ease: 'back.out(1.4)'
       },
       titleEls.length ? '-=0.15' : 0
     )
@@ -165,8 +139,8 @@
     setupPrizesInitialState()
     if ('IntersectionObserver' in window) {
       prizesObserver = new IntersectionObserver(
-					entries => {
+        (entries) => {
-						entries.forEach(entry => {
+          entries.forEach((entry) => {
             if (entry.isIntersecting) {
               playPrizesAnimation()
             }
@@ -236,8 +210,7 @@
         background-size: 100% 100%;
       }
       &:nth-of-type(4) {
-					background: url('@/assets/images/award/certification_bg.png')
+        background: url('@/assets/images/award/certification_bg.png') no-repeat;
-						no-repeat;
         background-size: 100% 100%;
       }
       &.smaller {
@@ -272,5 +245,43 @@
       }
     }
   }
+  &.mobile {
+    height: 102.8rem;
+    padding: 6rem 6.6rem 0;
+    background: url('@/assets/images/mobile_version_background/prizes_bg.png') no-repeat;
+    background-size: 100% 100%;
+    justify-content: flex-start;
+    row-gap: 6rem;
+    .left {
+      row-gap: 0.8rem;
+      .title {
+        font-size: 3.2rem;
+      }
+      .desc {
+        font-size: 2.4rem;
+      }
+    }
+    .right {
+      .prize-item {
+        width: 29.2rem;
+        height: 27rem;
+        padding: 5rem 3rem;
+        row-gap: 1.8rem;
+        &,
+        &.smaller .prize-money {
+          font-size: 2.8rem;
+          line-height: 1;
+        }
+
+        .prize-name {
+          font-size: 2.4rem;
+        }
+        .prize-desc {
+          font-size: 2rem;
+          line-height: 2.6rem;
+        }
+      }
+    }
+  }
 }
 </style>