style: 竞赛主页样式修改

src/views/AwardPage/components/Bloom.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="bloom container flex flex-col align-center">
+	<div class="bloom flex flex-col align-center">
 		<div
 			class="title"
 			ref="titleRef"
@@ -17,10 +17,34 @@
 			class="desc"
 			ref="textRef"
 		>
-			Where imagination meets innovation, creativity blooms. This theme celebrates
-			AI as a catalyst for fashion design, allowing your vision to flourish beyond
-			traditional boundaries. Let your ideas blossom into extraordinary designs that
-			merge human artistry with artificial intelligence.
+			<p class="section-1">
+				The
+				<span class="arial-bold">AiDA Global Design Award 2026</span>
+				is an
+				<span class="arial-bold">international design competition</span>
+				hosted by
+				<span class="arial-bold">Code‑Create</span>
+				, a globally leading
+				<br />
+				<span class="arial-bold">AI fashion solutions provider,</span>
+				celebrating the future of creativity powered by artificial intelligence.
+				<br />
+				Bringing together designers from around the world, AiDA empowers AI as a
+				creative partner—pushing fashion beyond
+				<br />
+				traditional boundaries and unlocking new possibilities where technology
+				amplifies human imagination.​
+			</p>
+			<p class="section-2">
+				Under the theme “
+				<span class="arial-bold">
+					Where Imagination Meets Innovation, Creativity Blooms,
+				</span>
+				” participants are invited to transform bold ideas
+				<br />
+				into extraordinary designs, seamlessly merging human artistry with
+				artificial intelligence to shape the next era of fashion.
+			</p>
 		</div>
 	</div>
 </template>
@@ -37,7 +61,9 @@
 	let bloomObserver: IntersectionObserver | null = null
 
 	const setupBloomInitialState = () => {
-		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		const titleEls = [titleRef.value, subtitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
 		if (titleEls.length) {
 			gsap.set(titleEls, {
 				opacity: 0,
@@ -58,7 +84,9 @@
 
 	const playBloomAnimation = () => {
 		if (hasPlayedBloomAnim.value) return
-		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		const titleEls = [titleRef.value, subtitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
 		const textEl = textRef.value
 		if (!titleEls.length || !textEl) return
 
@@ -81,7 +109,7 @@
 				duration: 0.3,
 				ease: 'power2.out'
 			},
-			'+=0.12'
+			'-=0.3'
 		)
 		tl.to(
 			textEl,
@@ -103,8 +131,8 @@
 			setupBloomInitialState()
 			if ('IntersectionObserver' in window) {
 				bloomObserver = new IntersectionObserver(
-					(entries) => {
-						entries.forEach((entry) => {
+					entries => {
+						entries.forEach(entry => {
 							if (entry.isIntersecting) {
 								playBloomAnimation()
 							}
@@ -125,11 +153,19 @@
 	onBeforeUnmount(() => {
 		bloomObserver?.disconnect()
 	})
-
 </script>
 
 <style scoped lang="less">
+	p {
+		margin: 0;
+		padding: 0;
+	}
+	.arial-bold {
+		font-family: 'ArialBold';
+		font-weight: 700;
+	}
 	.bloom {
+		height: 108rem;
 		padding-top: 12.8rem;
 		font-family: 'Poppins';
 		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
@@ -149,13 +185,16 @@
 		}
 		.desc {
 			font-family: 'Arial';
-			font-size: 2.8rem;
+			font-weight: 400;
+			font-size: 2.4rem;
 			color: #585858;
 			text-align: center;
 			padding: 0 21.5rem;
 			line-height: 4.5rem;
 			margin-bottom: 12.3rem;
+			.section-2{
+				margin-top: 4rem;
+			}
 		}
 	}
 </style>
-