From 6294f18b4b3976ff385641a84683340476d39ca2 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 18 Mar 2026 14:25:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20prizes=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{background5.png => apply_bg.png}         | Bin
 .../{Background4.png => prizes_bg.png}        | Bin
 .../AwardPage/components/ApplySection.vue     |   3 +-
 .../AwardPage/components/PrizesSection.vue    | 527 +++++++++---------
 4 files changed, 271 insertions(+), 259 deletions(-)
 rename src/assets/images/mobile_version_background/{background5.png => apply_bg.png} (100%)
 rename src/assets/images/mobile_version_background/{Background4.png => prizes_bg.png} (100%)

diff --git a/src/assets/images/mobile_version_background/background5.png b/src/assets/images/mobile_version_background/apply_bg.png
similarity index 100%
rename from src/assets/images/mobile_version_background/background5.png
rename to src/assets/images/mobile_version_background/apply_bg.png
diff --git a/src/assets/images/mobile_version_background/Background4.png b/src/assets/images/mobile_version_background/prizes_bg.png
similarity index 100%
rename from src/assets/images/mobile_version_background/Background4.png
rename to src/assets/images/mobile_version_background/prizes_bg.png
diff --git a/src/views/AwardPage/components/ApplySection.vue b/src/views/AwardPage/components/ApplySection.vue
index 80751e3..a3966ce 100644
--- a/src/views/AwardPage/components/ApplySection.vue
+++ b/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([
   {
diff --git a/src/views/AwardPage/components/PrizesSection.vue b/src/views/AwardPage/components/PrizesSection.vue
index 986bc0c..17a936b 100644
--- a/src/views/AwardPage/components/PrizesSection.vue
+++ b/src/views/AwardPage/components/PrizesSection.vue
@@ -1,276 +1,287 @@
 <template>
-	<div
-		class="prizes-container container flex align-center space-between"
-		ref="prizesRef"
-	>
-		<div class="left flex flex-col flex-center">
-			<div
-				class="title"
-				ref="prizesTitleRef"
-			>
-				{{ $t('AwardsPage.awardPrizes') }}
-			</div>
-			<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-			<div
-				class="desc"
-				ref="prizesSubTitleRef"
-			>
-				{{ $t('AwardsPage.recognition') }}
-			</div>
-		</div>
-		<div
-			class="right"
-			ref="prizesRightRef"
-		>
-			<div
-				class="prize-item flex flex-col flex-center"
-				:class="{ smaller: item.smaller }"
-				v-for="item in prizes"
-				:key="item.name"
-			>
-				<div class="prize-money">
-					{{ $t(item.money) }}
-				</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"
-					>
-						{{ $t(el) }}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <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">
+        {{ $t('AwardsPage.awardPrizes') }}
+      </div>
+      <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+      <div class="desc" ref="prizesSubTitleRef">
+        {{ $t('AwardsPage.recognition') }}
+      </div>
+    </div>
+    <div class="right" ref="prizesRightRef">
+      <div
+        class="prize-item flex flex-col flex-center"
+        :class="{ smaller: item.smaller }"
+        v-for="item in prizes"
+        :key="item.name"
+      >
+        <div class="prize-money">
+          {{ $t(item.money) }}
+        </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">
+            {{ $t(el) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </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({
-		isZh: {
-			type: Boolean,
-			default: false
-		}
-	})
+const props = defineProps({
+  isZh: {
+    type: Boolean,
+    default: false
+  }
+})
 
-	const prizes = [
-		{
-			money: 'AwardsPage.grandMoney',
-			name: 'AwardsPage.grandAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
-		},
-		{
-			money: 'AwardsPage.goldMoney',
-			name: 'AwardsPage.goldAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
-		},
-		{
-			money: 'AwardsPage.silverMoney',
-			name: 'AwardsPage.silverAwards',
-			desc: [
-				'AwardsPage.cashAward',
-				'AwardsPage.awardCertificate',
-				'AwardsPage.globalMediaExposure'
-			]
-		},
-		{
-			money: 'AwardsPage.awardCertification',
-			name: 'AwardsPage.finalists',
-			desc: ['AwardsPage.TravelAllowance', 'AwardsPage.globalMediaExposure'],
-			smaller: !props.isZh
-		}
-	]
+const prizes = [
+  {
+    money: 'AwardsPage.grandMoney',
+    name: 'AwardsPage.grandAwards',
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
+  },
+  {
+    money: 'AwardsPage.goldMoney',
+    name: 'AwardsPage.goldAwards',
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
+  },
+  {
+    money: 'AwardsPage.silverMoney',
+    name: 'AwardsPage.silverAwards',
+    desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
+  },
+  {
+    money: 'AwardsPage.awardCertification',
+    name: 'AwardsPage.finalists',
+    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[]
-		if (titleEls.length) {
-			gsap.set(titleEls, {
-				opacity: 0,
-				scale: 0,
-				transformOrigin: '50% 50%'
-			})
-		}
-		if (prizesRightRef.value) {
-			gsap.set(prizesRightRef.value, {
-				'opacity': 0,
-				'y': 40,
-				'scale': 1.08,
-				'--prize-row-gap': '2rem',
-				'--prize-col-gap': '2rem'
-			})
-		}
-	}
+const setupPrizesInitialState = () => {
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
+  if (titleEls.length) {
+    gsap.set(titleEls, {
+      opacity: 0,
+      scale: 0,
+      transformOrigin: '50% 50%'
+    })
+  }
+  if (prizesRightRef.value) {
+    gsap.set(prizesRightRef.value, {
+      opacity: 0,
+      y: 40,
+      scale: 1.08,
+      '--prize-row-gap': '2rem',
+      '--prize-col-gap': '2rem'
+    })
+  }
+}
 
-	const playPrizesAnimation = () => {
-		if (hasPlayedPrizesAnim.value) return
-		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
-			Boolean
-		) as HTMLElement[]
+const playPrizesAnimation = () => {
+  if (hasPlayedPrizesAnim.value) return
+  const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
 
-		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
-		if (titleEls.length) {
-			tl.to(titleEls, {
-				opacity: 1,
-				scale: 1,
-				duration: 0.6,
-				ease: 'back.out(1.6)',
-				stagger: 0.1
-			})
-		}
-		if (prizesRightRef.value) {
-			tl.to(
-				prizesRightRef.value,
-				{
-					'opacity': 1,
-					'y': 0,
-					'scale': 1,
-					'--prize-row-gap': '4.2rem',
-					'--prize-col-gap': '4.4rem',
-					'duration': 0.55,
-					'ease': 'back.out(1.4)'
-				},
-				titleEls.length ? '-=0.15' : 0
-			)
-		}
+  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+  if (titleEls.length) {
+    tl.to(titleEls, {
+      opacity: 1,
+      scale: 1,
+      duration: 0.6,
+      ease: 'back.out(1.6)',
+      stagger: 0.1
+    })
+  }
+  if (prizesRightRef.value) {
+    tl.to(
+      prizesRightRef.value,
+      {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        '--prize-row-gap': '4.2rem',
+        '--prize-col-gap': '4.4rem',
+        duration: 0.55,
+        ease: 'back.out(1.4)'
+      },
+      titleEls.length ? '-=0.15' : 0
+    )
+  }
 
-		hasPlayedPrizesAnim.value = true
-		prizesObserver?.disconnect()
-	}
+  hasPlayedPrizesAnim.value = true
+  prizesObserver?.disconnect()
+}
 
-	onMounted(() => {
-		nextTick(() => {
-			setupPrizesInitialState()
-			if ('IntersectionObserver' in window) {
-				prizesObserver = new IntersectionObserver(
-					entries => {
-						entries.forEach(entry => {
-							if (entry.isIntersecting) {
-								playPrizesAnimation()
-							}
-						})
-					},
-					{ threshold: 0.25 }
-				)
-				if (prizesRef.value) prizesObserver.observe(prizesRef.value)
-			} else {
-				playPrizesAnimation()
-			}
-		})
-	})
+onMounted(() => {
+  nextTick(() => {
+    setupPrizesInitialState()
+    if ('IntersectionObserver' in window) {
+      prizesObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              playPrizesAnimation()
+            }
+          })
+        },
+        { threshold: 0.25 }
+      )
+      if (prizesRef.value) prizesObserver.observe(prizesRef.value)
+    } else {
+      playPrizesAnimation()
+    }
+  })
+})
 
-	onBeforeUnmount(() => {
-		prizesObserver?.disconnect()
-	})
+onBeforeUnmount(() => {
+  prizesObserver?.disconnect()
+})
 </script>
 
 <style scoped lang="less">
-	.prizes-container {
-		background: url('@/assets/images/award/prizes_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding: 0 21.4rem 0 34.2rem;
-		box-sizing: border-box;
-		.left {
-			row-gap: 3.6rem;
-			.title {
-				text-align: center;
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-				font-size: 4rem;
-				color: #fff;
-			}
-			.desc {
-				text-align: center;
-				color: #f95750;
-				font-family: 'Poppins';
-				font-weight: 400;
-				font-size: 3rem;
-			}
-		}
-		.right {
-			// height: 45.4rem;
-			// padding: 4.6rem 6.1rem 4.6rem 0;
-			box-sizing: border-box;
-			display: grid;
-			grid-template-columns: repeat(2, 1fr);
-			grid-template-rows: repeat(2, 1fr);
-			row-gap: var(--prize-row-gap, 4.2rem);
-			column-gap: var(--prize-col-gap, 4.4rem);
-			// flex: 1;
-			.prize-item {
-				width: 35.5rem;
-				height: 32.8rem;
-				color: #fff;
-				padding: 4.5rem 0 4.8rem 0;
-				justify-content: space-between;
-				background: url('@/assets/images/award/first_bg.png') no-repeat;
-				background-size: 100% 100%;
-				&:nth-of-type(2) {
-					background: url('@/assets/images/award/second_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(3) {
-					background: url('@/assets/images/award/grand_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(4) {
-					background: url('@/assets/images/award/certification_bg.png')
-						no-repeat;
-					background-size: 100% 100%;
-				}
-				&.smaller {
-					.prize-money {
-						font-size: 3.6rem;
-						line-height: 3.8rem;
-					}
-				}
-				.prize-money {
-					font-family: 'PoppinsBold';
-					font-weight: bold;
-					font-size: 4rem;
-					white-space: pre-line;
-					text-align: center;
-					line-height: 7.6rem;
-					&.smaller {
-						font-size: 3.6rem;
-					}
-				}
-				.prize-name {
-					font-family: 'PoppinsMedium';
-					font-weight: 500;
-					font-size: 2.8rem;
-				}
-				.prize-desc {
-					color: #e0e0e0;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2rem;
-					line-height: 3rem;
-					height: 8.9rem;
-				}
-			}
-		}
-	}
+.prizes-container {
+  background: url('@/assets/images/award/prizes_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 0 21.4rem 0 34.2rem;
+  box-sizing: border-box;
+  .left {
+    row-gap: 3.6rem;
+    .title {
+      text-align: center;
+      font-family: 'PoppinsBold';
+      font-weight: 600;
+      font-size: 4rem;
+      color: #fff;
+    }
+    .desc {
+      text-align: center;
+      color: #f95750;
+      font-family: 'Poppins';
+      font-weight: 400;
+      font-size: 3rem;
+    }
+  }
+  .right {
+    // height: 45.4rem;
+    // padding: 4.6rem 6.1rem 4.6rem 0;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    row-gap: var(--prize-row-gap, 4.2rem);
+    column-gap: var(--prize-col-gap, 4.4rem);
+    // flex: 1;
+    .prize-item {
+      width: 35.5rem;
+      height: 32.8rem;
+      color: #fff;
+      padding: 4.5rem 0 4.8rem 0;
+      justify-content: space-between;
+      background: url('@/assets/images/award/first_bg.png') no-repeat;
+      background-size: 100% 100%;
+      &:nth-of-type(2) {
+        background: url('@/assets/images/award/second_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &:nth-of-type(3) {
+        background: url('@/assets/images/award/grand_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &:nth-of-type(4) {
+        background: url('@/assets/images/award/certification_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &.smaller {
+        .prize-money {
+          font-size: 3.6rem;
+          line-height: 3.8rem;
+        }
+      }
+      .prize-money {
+        font-family: 'PoppinsBold';
+        font-weight: bold;
+        font-size: 4rem;
+        white-space: pre-line;
+        text-align: center;
+        line-height: 7.6rem;
+        &.smaller {
+          font-size: 3.6rem;
+        }
+      }
+      .prize-name {
+        font-family: 'PoppinsMedium';
+        font-weight: 500;
+        font-size: 2.8rem;
+      }
+      .prize-desc {
+        color: #e0e0e0;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2rem;
+        line-height: 3rem;
+        height: 8.9rem;
+      }
+    }
+  }
+  &.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>