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
-				class="title"
-				ref="prizesTitleRef"
-			>
+      <div class="title" ref="prizesTitleRef">
         {{ $t('AwardsPage.awardPrizes') }}
       </div>
       <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-			<div
-				class="desc"
-				ref="prizesSubTitleRef"
-			>
+      <div class="desc" ref="prizesSubTitleRef">
         {{ $t('AwardsPage.recognition') }}
       </div>
     </div>
-		<div
-			class="right"
-			ref="prizesRightRef"
-		>
+    <div 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
-						class="desc-item"
-						v-for="el in item.desc"
-					>
+          <div class="desc-item" v-for="el in item.desc">
             {{ $t(el) }}
           </div>
         </div>
@@ -46,46 +35,35 @@
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-	import { useI18n } from 'vue-i18n'
-	import { gsap } from 'gsap'
+import { nextTick, onBeforeUnmount, onMounted, ref, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { gsap } from 'gsap'
 
-	const { t } = useI18n()
+const { t } = useI18n()
+const isMobile = inject<boolean>('isMobile')
 
-	const props = defineProps({
+const props = defineProps({
   isZh: {
     type: Boolean,
     default: false
   }
-	})
+})
 
-	const prizes = [
+const prizes = [
   {
     money: 'AwardsPage.grandMoney',
     name: 'AwardsPage.grandAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
   },
   {
     money: 'AwardsPage.goldMoney',
     name: 'AwardsPage.goldAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
   },
   {
     money: 'AwardsPage.silverMoney',
     name: 'AwardsPage.silverAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
   },
   {
     money: 'AwardsPage.awardCertification',
@@ -93,19 +71,17 @@
     desc: ['AwardsPage.TravelAllowance', 'AwardsPage.globalMediaExposure'],
     smaller: !props.isZh
   }
-	]
+]
 
-	const prizesRef = ref<HTMLElement | null>(null)
-	const prizesTitleRef = ref<HTMLElement | null>(null)
-	const prizesSubTitleRef = ref<HTMLElement | null>(null)
-	const prizesRightRef = ref<HTMLElement | null>(null)
-	const hasPlayedPrizesAnim = ref(false)
-	let prizesObserver: IntersectionObserver | null = null
+const prizesRef = ref<HTMLElement | null>(null)
+const prizesTitleRef = ref<HTMLElement | null>(null)
+const prizesSubTitleRef = ref<HTMLElement | null>(null)
+const prizesRightRef = ref<HTMLElement | null>(null)
+const hasPlayedPrizesAnim = ref(false)
+let prizesObserver: IntersectionObserver | null = null
 
-	const setupPrizesInitialState = () => {
-		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
+const setupPrizesInitialState = () => {
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
   if (titleEls.length) {
     gsap.set(titleEls, {
       opacity: 0,
@@ -115,20 +91,18 @@
   }
   if (prizesRightRef.value) {
     gsap.set(prizesRightRef.value, {
-				'opacity': 0,
-				'y': 40,
-				'scale': 1.08,
+      opacity: 0,
+      y: 40,
+      scale: 1.08,
       '--prize-row-gap': '2rem',
       '--prize-col-gap': '2rem'
     })
   }
-	}
+}
 
-	const playPrizesAnimation = () => {
+const playPrizesAnimation = () => {
   if (hasPlayedPrizesAnim.value) return
-		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
 
   const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
   if (titleEls.length) {
@@ -144,13 +118,13 @@
     tl.to(
       prizesRightRef.value,
       {
-					'opacity': 1,
-					'y': 0,
-					'scale': 1,
+        opacity: 1,
+        y: 0,
+        scale: 1,
         '--prize-row-gap': '4.2rem',
         '--prize-col-gap': '4.4rem',
-					'duration': 0.55,
-					'ease': 'back.out(1.4)'
+        duration: 0.55,
+        ease: 'back.out(1.4)'
       },
       titleEls.length ? '-=0.15' : 0
     )
@@ -158,15 +132,15 @@
 
   hasPlayedPrizesAnim.value = true
   prizesObserver?.disconnect()
-	}
+}
 
-	onMounted(() => {
+onMounted(() => {
   nextTick(() => {
     setupPrizesInitialState()
     if ('IntersectionObserver' in window) {
       prizesObserver = new IntersectionObserver(
-					entries => {
-						entries.forEach(entry => {
+        (entries) => {
+          entries.forEach((entry) => {
             if (entry.isIntersecting) {
               playPrizesAnimation()
             }
@@ -179,15 +153,15 @@
       playPrizesAnimation()
     }
   })
-	})
+})
 
-	onBeforeUnmount(() => {
+onBeforeUnmount(() => {
   prizesObserver?.disconnect()
-	})
+})
 </script>
 
 <style scoped lang="less">
-	.prizes-container {
+.prizes-container {
   background: url('@/assets/images/award/prizes_bg.png') no-repeat;
   background-size: 100% 100%;
   padding: 0 21.4rem 0 34.2rem;
@@ -236,8 +210,7 @@
         background-size: 100% 100%;
       }
       &:nth-of-type(4) {
-					background: url('@/assets/images/award/certification_bg.png')
-						no-repeat;
+        background: url('@/assets/images/award/certification_bg.png') 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>