style:页面动画

src/views/AwardPage/components/Bloom.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="bloom container flex flex-col align-center">
+		<div
+			class="title"
+			ref="titleRef"
+		>
+			Bloom Your Creativity
+		</div>
+
+		<div
+			class="season"
+			ref="subtitleRef"
+		>
+			Theme of 2026
+		</div>
+		<div
+			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.
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+		import { ref, onMounted } from 'vue'
+		import gsap from 'gsap'
+
+		const titleRef = ref<HTMLElement | null>(null)
+		const subtitleRef = ref<HTMLElement | null>(null)
+		const textRef = ref<HTMLElement | null>(null)
+
+
+</script>
+
+<style scoped lang="less">
+	.bloom {
+		padding-top: 12.8rem;
+		font-family: 'Poppins';
+		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
+		background-size: 100% 100%;
+		.title {
+			font-size: 4rem;
+			color: #232323;
+			margin-bottom: 2.4rem;
+		}
+		.logo {
+			margin-bottom: 2.2rem;
+		}
+		.season {
+			font-size: 3rem;
+			color: #c7342c;
+			margin-bottom: 6.6rem;
+		}
+		.desc {
+			font-family: 'Arial';
+			font-size: 2.8rem;
+			color: #585858;
+			text-align: center;
+			padding: 0 21.5rem;
+			line-height: 4.5rem;
+			margin-bottom: 12.3rem;
+		}
+	}
+</style>