From 4989bb71563b66bff8531fbf65c4fc0d48a5105c Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 19 Mar 2026 13:38:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20section=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{Background6.png => section_bg.png}       | Bin
 .../AwardPage/components/SelectionSection.vue | 311 ++++++++++--------
 2 files changed, 173 insertions(+), 138 deletions(-)
 rename src/assets/images/mobile_version_background/{Background6.png => section_bg.png} (100%)

diff --git a/src/assets/images/mobile_version_background/Background6.png b/src/assets/images/mobile_version_background/section_bg.png
similarity index 100%
rename from src/assets/images/mobile_version_background/Background6.png
rename to src/assets/images/mobile_version_background/section_bg.png
diff --git a/src/views/AwardPage/components/SelectionSection.vue b/src/views/AwardPage/components/SelectionSection.vue
index 38f8552..c8e4ad0 100644
--- a/src/views/AwardPage/components/SelectionSection.vue
+++ b/src/views/AwardPage/components/SelectionSection.vue
@@ -1,27 +1,24 @@
 <template>
-	<div
-		class="selection-container container flex flex-col align-center"
-		ref="selectionRef"
-	>
-		<div class="title">{{ $t('AwardsPage.selectionCriteria') }}</div>
-		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-		<div class="sub-title">{{ $t('AwardsPage.evaluation') }}</div>
-		<div class="criteria-list flex" ref="criteriaListRef">
-			<div
-				class="item flex flex-col align-center"
-				v-for="item in criteriaList"
-				:key="item.name"
-			>
-				<img :src="item.icon" class="icon" :style="item.style" />
-				<div class="name">{{ $t(item.name) }}</div>
-				<div class="desc">{{ $t(item.desc) }}</div>
-			</div>
-		</div>
-	</div>
+  <div
+    class="selection-container container flex flex-col align-center"
+    ref="selectionRef"
+    :class="{ mobile: isMobile }"
+  >
+    <div class="title">{{ $t('AwardsPage.selectionCriteria') }}</div>
+    <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+    <div class="sub-title">{{ $t('AwardsPage.evaluation') }}</div>
+    <div class="criteria-list flex" ref="criteriaListRef">
+      <div class="item flex flex-col align-center" v-for="item in criteriaList" :key="item.name">
+        <img :src="item.icon" class="icon" :style="item.style" />
+        <div class="name">{{ $t(item.name) }}</div>
+        <div class="desc">{{ $t(item.desc) }}</div>
+      </div>
+    </div>
+  </div>
 </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'
 import criteria1 from '@/assets/images/award/criteria_1.png'
@@ -31,31 +28,32 @@ import criteria4 from '@/assets/images/award/criteria_4.png'
 
 const { t } = useI18n()
 
+const isMobile = inject('isMobile')
 const criteriaList = ref([
-	{
-		icon: criteria1,
-		name: 'AwardsPage.originality',
-		desc: 'AwardsPage.originalityDesc',
-		style: { width: '13rem', height: '17rem' }
-	},
-	{
-		icon: criteria2,
-		name: 'AwardsPage.creativity',
-		desc: 'AwardsPage.creativityDesc',
-		style: { width: '16rem', height: '18rem' }
-	},
-	{
-		icon: criteria3,
-		name: 'AwardsPage.aidaIntegration',
-		desc: 'AwardsPage.aidaIntegrationDesc',
-		style: { width: '16rem', height: '18rem' }
-	},
-	{
-		icon: criteria4,
-		name: 'AwardsPage.execution',
-		desc: 'AwardsPage.executionDesc',
-		style: { width: '18.8rem', height: '18rem' }
-	}
+  {
+    icon: criteria1,
+    name: 'AwardsPage.originality',
+    desc: 'AwardsPage.originalityDesc',
+    style: { width: '13rem', height: '17rem' }
+  },
+  {
+    icon: criteria2,
+    name: 'AwardsPage.creativity',
+    desc: 'AwardsPage.creativityDesc',
+    style: { width: '16rem', height: '18rem' }
+  },
+  {
+    icon: criteria3,
+    name: 'AwardsPage.aidaIntegration',
+    desc: 'AwardsPage.aidaIntegrationDesc',
+    style: { width: '16rem', height: '18rem' }
+  },
+  {
+    icon: criteria4,
+    name: 'AwardsPage.execution',
+    desc: 'AwardsPage.executionDesc',
+    style: { width: '18.8rem', height: '18rem' }
+  }
 ])
 
 const selectionRef = ref<HTMLElement | null>(null)
@@ -64,115 +62,152 @@ const hasPlayedSelectionAnim = ref(false)
 let selectionObserver: IntersectionObserver | null = null
 
 const setupSelectionInitialState = () => {
-	const items =
-		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
-	if (items.length) {
-		gsap.set(items, {
-			opacity: 0,
-			scale: 0,
-			transformOrigin: '50% 50%'
-		})
-	}
+  const items = criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+  if (items.length) {
+    gsap.set(items, {
+      opacity: 0,
+      scale: 0,
+      transformOrigin: '50% 50%'
+    })
+  }
 }
 
 const playSelectionAnimation = () => {
-	if (hasPlayedSelectionAnim.value) return
-	const items =
-		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
-	if (!items.length) return
+  if (hasPlayedSelectionAnim.value) return
+  const items = criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+  if (!items.length) return
 
-	gsap.to(items, {
-		opacity: 1,
-		scale: 1,
-		duration: 0.6,
-		ease: 'back.out(1.6)',
-		stagger: 0.3
-	})
+  gsap.to(items, {
+    opacity: 1,
+    scale: 1,
+    duration: 0.6,
+    ease: 'back.out(1.6)',
+    stagger: 0.3
+  })
 
-	hasPlayedSelectionAnim.value = true
-	selectionObserver?.disconnect()
+  hasPlayedSelectionAnim.value = true
+  selectionObserver?.disconnect()
 }
 
 onMounted(() => {
-	nextTick(() => {
-		setupSelectionInitialState()
-		if ('IntersectionObserver' in window) {
-			selectionObserver = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							playSelectionAnimation()
-						}
-					})
-				},
-				{ threshold: 0.25 }
-			)
-			if (selectionRef.value) {
-				selectionObserver.observe(selectionRef.value)
-			}
-		} else {
-			playSelectionAnimation()
-		}
-	})
+  nextTick(() => {
+    setupSelectionInitialState()
+    if ('IntersectionObserver' in window) {
+      selectionObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              playSelectionAnimation()
+            }
+          })
+        },
+        { threshold: 0.25 }
+      )
+      if (selectionRef.value) {
+        selectionObserver.observe(selectionRef.value)
+      }
+    } else {
+      playSelectionAnimation()
+    }
+  })
 })
 
 onBeforeUnmount(() => {
-	selectionObserver?.disconnect()
+  selectionObserver?.disconnect()
 })
 </script>
 
 <style scoped lang="less">
 .selection-container {
-	background: url('@/assets/images/award/selection_bg.png') no-repeat;
-	background-size: 100% 100%;
-	padding-top: 9.3rem;
-	.title {
-		color: #fff;
-		font-family: 'PoppinsBold';
-		font-weight: 600;
-		font-size: 4rem;
-		margin-bottom: 2.4rem;
-	}
-	.logo {
-		margin: 2.3rem 0 2.3rem;
-	}
-	.sub-title {
-		color: #f95750;
-		font-family: 'Popins';
-		font-weight: 400;
-		font-size: 3rem;
-		margin-bottom: 11.8rem;
-	}
-	.criteria-list {
-		column-gap: 6rem;
-		.item {
-			height: 44rem;
-			width: 32.2rem;
-			box-sizing: border-box;
-			&:nth-of-type(3) {
-				background: url('@/assets/images/award/criteria_bg.png') no-repeat;
-				background-size: 100% 100%;
-			}
-			.icon {
-				width: 18.8rem;
-				height: 18rem;
-			}
-			.name {
-				font-family: 'PoppinsMedium';
-				font-weight: 500;
-				font-size: 2.8rem;
-				color: #fff;
-				margin: 2rem 0 5rem;
-			}
-			.desc {
-				font-family: 'Arial';
-				font-weight: 400;
-				font-size: 2rem;
-				color: #e0e0e0;
-				text-align: center;
-				white-space: pre-line;
-			}
-		}
-	}
+  background: url('@/assets/images/award/selection_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding-top: 9.3rem;
+  .title {
+    color: #fff;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+    margin-bottom: 2.4rem;
+  }
+  .logo {
+    margin: 2.3rem 0 2.3rem;
+  }
+  .sub-title {
+    color: #f95750;
+    font-family: 'Popins';
+    font-weight: 400;
+    font-size: 3rem;
+    margin-bottom: 11.8rem;
+  }
+  .criteria-list {
+    column-gap: 6rem;
+    .item {
+      height: 44rem;
+      width: 32.2rem;
+      box-sizing: border-box;
+      &:nth-of-type(3) {
+        background: url('@/assets/images/award/criteria_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      .icon {
+        width: 18.8rem;
+        height: 18rem;
+      }
+      .name {
+        font-family: 'PoppinsMedium';
+        font-weight: 500;
+        font-size: 2.8rem;
+        color: #fff;
+        margin: 2rem 0 5rem;
+      }
+      .desc {
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2rem;
+        color: #e0e0e0;
+        text-align: center;
+        white-space: pre-line;
+      }
+    }
+  }
+  &.mobile {
+    height: auto;
+    padding: 6rem 0 13rem;
+    background: url('@/assets/images/mobile_version_background/section_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .title {
+      font-size: 3.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .sub-title {
+      font-size: 2.4rem;
+      margin-bottom: 6rem;
+    }
+    .criteria-list {
+      // flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 6rem;
+      grid-row-gap: 7rem;
+      .item {
+        width: 21rem;
+        height: initial;
+        &:nth-of-type(3) {
+					width: 30rem;
+					height: 36.8rem;
+					padding: 3.2rem 0;
+        }
+        .icon {
+          width: 16rem;
+          height: 15.3rem;
+        }
+        .name {
+          font-size: 2.4rem;
+          margin: 0.8rem 0 1.2rem;
+        }
+      }
+    }
+  }
 }
 </style>