From ec4ba640307c0fb4e346cccbecc95cd24f313552 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 18 Mar 2026 10:22:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20slogan=E5=8C=BA=E5=9F=9F=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AwardPage/components/Slogan.vue | 400 ++++++++++++++--------
 1 file changed, 262 insertions(+), 138 deletions(-)

diff --git a/src/views/AwardPage/components/Slogan.vue b/src/views/AwardPage/components/Slogan.vue
index 7cbba90..8fa41b1 100644
--- a/src/views/AwardPage/components/Slogan.vue
+++ b/src/views/AwardPage/components/Slogan.vue
@@ -1,156 +1,280 @@
 <template>
-	<div
-		class="blocks-list flex"
-		ref="root"
-		:class="{ 'in-view': inView }"
-	>
-		<div
-			class="block-item flex flex-col flex-center"
-			v-for="(item, idx) in blocksList"
-			:key="item.number"
-			:style="{ '--delay': `${idx * 0.18}s` }"
-		>
-			<div class="number">{{ $t(item.number) }}</div>
-			<div class="label">{{ $t(item.label) }}</div>
-			<div class="line"></div>
-		</div>
-	</div>
+  <div class="blocks-list flex" ref="root" :class="{ 'in-view': inView }">
+    <div
+      class="block-item flex flex-col flex-center"
+      v-for="(item, idx) in blocksList"
+      :key="item.number"
+      :style="{ '--delay': `${idx * 0.18}s` }"
+    >
+      <div class="number">{{ $t(item.number) }}</div>
+      <div class="label">{{ $t(item.label) }}</div>
+      <div class="line"></div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, onMounted, onUnmounted } from 'vue'
-	import { useI18n } from 'vue-i18n'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-	const { t } = useI18n()
+const { t } = useI18n()
 
-	const blocksList = ref([
-		{
-			number: 'AwardsPage.totalCashPrizes',
-			label: 'AwardsPage.totalCashPrizesLabel'
-		},
-		{
-			number: 'AwardsPage.globalMediaExpose',
-			label: 'AwardsPage.globalMediaExposeLabel'
-		},
-		{
-			number: 'AwardsPage.networkingOpportunities',
-			label: 'AwardsPage.networkingOpportunitiesLabel'
-		},
-		{
-			number: 'AwardsPage.awardCeremonyHongKong',
-			label: 'AwardsPage.awardCeremonyLabel'
-		}
-	])
-	const root = ref<HTMLElement | null>(null)
-	const inView = ref(false)
-	let io: IntersectionObserver | null = null
+const blocksList = ref([
+  {
+    number: 'AwardsPage.totalCashPrizes',
+    label: 'AwardsPage.totalCashPrizesLabel'
+  },
+  {
+    number: 'AwardsPage.globalMediaExpose',
+    label: 'AwardsPage.globalMediaExposeLabel'
+  },
+  {
+    number: 'AwardsPage.networkingOpportunities',
+    label: 'AwardsPage.networkingOpportunitiesLabel'
+  },
+  {
+    number: 'AwardsPage.awardCeremonyHongKong',
+    label: 'AwardsPage.awardCeremonyLabel'
+  }
+])
+const root = ref<HTMLElement | null>(null)
+const inView = ref(false)
+let io: IntersectionObserver | null = null
 
-	onMounted(() => {
-		io = new IntersectionObserver(
-			entries => {
-				for (const entry of entries) {
-					if (entry.isIntersecting) {
-						// 延迟 0.5s 后触发动画并断开观察
-						setTimeout(() => {
-							inView.value = true
-						}, 500)
-						if (io) {
-							io.disconnect()
-						}
-					}
-				}
-			},
-			{ threshold: 0.05 }
-		)
-		if (root.value) {
-			io.observe(root.value)
-		}
-	})
+onMounted(() => {
+  io = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          // 延迟 0.5s 后触发动画并断开观察
+          setTimeout(() => {
+            inView.value = true
+          }, 500)
+          if (io) {
+            io.disconnect()
+          }
+        }
+      }
+    },
+    { threshold: 0.05 }
+  )
+  if (root.value) {
+    io.observe(root.value)
+  }
+})
 
-	onUnmounted(() => {
-		io?.disconnect()
-	})
+onUnmounted(() => {
+  io?.disconnect()
+})
 </script>
 
 <style lang="less" scoped>
-	.blocks-list {
-		height: 31.4rem;
-		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
+.blocks-list {
+  height: 31.4rem;
+  background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
 
-		.block-item {
-			flex: 1;
-			height: 100%;
-			color: #fff;
-			position: relative;
-			text-align: center;
-			white-space: pre-line;
-			row-gap: 3rem;
-			/* text scale-in animations */
-			.number {
-				font-size: 3.6rem;
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-				transform: scale(0);
-				opacity: 0;
-				will-change: transform, opacity;
-			}
-			.label {
-				font-size: 2.4rem;
-				font-family: 'Arial';
-				font-weight: 400;
-				letter-spacing: 0.05em;
-				transform: scale(0);
-				opacity: 0;
-				will-change: transform, opacity;
-			}
-			/* vertical line grows top -> bottom */
-			.line {
-				position: absolute;
-				right: 0;
-				/* 固定 top 为最终高度的一半位置，这样 height 从 0 -> 27.4rem 时会从上向下增长 */
-				top: calc(50% - 13.7rem);
-				width: 0.1rem;
-				height: 0;
-				background-color: #8d8d8d;
-				will-change: height;
-			}
-		}
-	}
+  .block-item {
+    flex: 1;
+    height: 100%;
+    color: #fff;
+    position: relative;
+    text-align: center;
+    white-space: pre-line;
+    row-gap: 3rem;
+    /* text scale-in animations */
+    .number {
+      font-size: 3.6rem;
+      font-family: 'PoppinsBold';
+      font-weight: 600;
+      transform: scale(0);
+      opacity: 0;
+      will-change: transform, opacity;
+    }
+    .label {
+      font-size: 2.4rem;
+      font-family: 'Arial';
+      font-weight: 400;
+      letter-spacing: 0.05em;
+      transform: scale(0);
+      opacity: 0;
+      will-change: transform, opacity;
+    }
+    /* vertical line grows top -> bottom */
+    .line {
+      position: absolute;
+      right: 0;
+      /* 固定 top 为最终高度的一半位置，这样 height 从 0 -> 27.4rem 时会从上向下增长 */
+      top: calc(50% - 13.7rem);
+      width: 0.1rem;
+      height: 0;
+      background-color: #8d8d8d;
+      will-change: height;
+    }
+  }
+}
 
-	/* 当组件进入视口并且等待 0.5s 后，.in-view 会加入根节点，下面规则触发动画 */
-	.in-view .block-item .number {
-		animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
-		animation-delay: var(--delay);
-	}
+/* 当组件进入视口并且等待 0.5s 后，.in-view 会加入根节点，下面规则触发动画 */
+.in-view .block-item .number {
+  animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+  animation-delay: var(--delay);
+}
 
-	.in-view .block-item .label {
-		animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
-		animation-delay: calc(var(--delay) + 0.12s);
-	}
+.in-view .block-item .label {
+  animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+  animation-delay: calc(var(--delay) + 0.12s);
+}
 
-	.in-view .block-item .line {
-		animation: growLine 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
-		animation-delay: calc(var(--delay) + 0.18s);
-	}
+.in-view .block-item .line {
+  animation: growLine 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+  animation-delay: calc(var(--delay) + 0.18s);
+}
 
-	/* keyframes */
-	@keyframes scaleIn {
-		from {
-			transform: scale(0);
-			opacity: 0;
-		}
-		to {
-			transform: scale(1);
-			opacity: 1;
-		}
-	}
+/* keyframes */
+@keyframes scaleIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 
-	@keyframes growLine {
-		from {
-			height: 0;
-		}
-		to {
-			height: 27.4rem;
-		}
-	}
+@keyframes growLine {
+  from {
+    height: 0;
+  }
+  to {
+    height: 27.4rem;
+  }
+}
+
+/* 移动端 <= 1200px 四宫格布局 */
+@media (max-width: 1200px) {
+  .blocks-list {
+    height: auto;
+    flex-wrap: wrap;
+    padding: 2rem 1.5rem;
+    column-gap: 0;
+    row-gap: 0;
+
+    .block-item {
+      flex: none;
+      width: 50%;
+      height: 18rem;
+      padding: 2rem 1rem;
+      box-sizing: border-box;
+
+      .number {
+        font-size: 2.8rem;
+      }
+
+      .label {
+        font-size: 1.8rem;
+      }
+
+      .line {
+        display: none;
+      }
+      &:nth-child(1)::after,
+      &:nth-child(2)::after,
+      &:nth-child(3)::after {
+        content: '';
+        position: absolute;
+        background-color: #8d8d8d;
+      }
+      /* 第一行的两个item底部需要分隔线 */
+      &:nth-child(1)::after,
+      &:nth-child(2)::after {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 0.1rem;
+      }
+
+      /* 第一个item右侧需要分隔线 */
+      &:nth-child(1)::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        width: 0.1rem;
+        background-color: #8d8d8d;
+      }
+
+      &:nth-child(4)::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 0.1rem;
+        height: 100%;
+        background-color: #8d8d8d;
+        transform: translateX(-100%);
+      }
+    }
+  }
+  .in-view {
+    .block-item {
+      &:nth-child(1)::before {
+        transform-origin: bottom;
+        transform: scaleY(0);
+        animation: growUp 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: calc(var(--delay) + 0.5s);
+      }
+      &:nth-child(1)::after {
+        transform-origin: right;
+        transform: scaleX(0);
+        animation: growRight 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: calc(var(--delay) + 0.5s);
+      }
+      &:nth-child(2)::after {
+        transform-origin: left;
+        transform: scaleX(0);
+        animation: growLeft 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: calc(var(--delay) + 0.5s);
+      }
+      &:nth-child(4)::before {
+        transform: translateX(-100%) scaleY(0);
+        transform-origin: top;
+        animation: growDown 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: calc(var(--delay) + 0.5s);
+      }
+    }
+  }
+  @keyframes growUp {
+    0% {
+      transform: scaleY(0);
+    }
+    100% {
+      transform: scaleY(1);
+    }
+  }
+  @keyframes growDown {
+    0% {
+      transform: translateX(-100%) scaleY(0);
+    }
+    100% {
+      transform: translateX(-100%) scaleY(1);
+    }
+  }
+  @keyframes growLeft {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+  @keyframes growRight {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+}
 </style>