style: judge移动端

src/utils/flexible.js

@@ -32,7 +32,7 @@ let flexible = (designWidth, maxWidth, minWidth) => {
     } else {
       designWidth = 750
     }
-    console.log(width, designWidth)
+    // console.log(width, designWidth)
 
     // var rem = width * 10 / designWidth;
     var rem = Math.round((width * 10) / designWidth)

src/utils/isMobile.ts

@@ -1,34 +1,54 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
 
 export const useIsMobile = () => {
   const isMobile = ref(false)
 
-  const checkDevice = () => {
+  let resizeTimer: ReturnType<typeof setTimeout> | null = null
-    // 1. 现代 Client Hints API（Chrome/Edge 最准）
-    if (navigator.userAgentData?.mobile !== undefined) {
-      isMobile.value = navigator.userAgentData.mobile
-      return
-    }
 
+  const checkDevice = () => {
+    // 使用防抖避免频繁触发
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+    resizeTimer = setTimeout(() => {
+      // 1. 现代 Client Hints API（Chrome/Edge 最准）
+      // if (navigator.userAgentData?.mobile !== undefined) {
+      //   isMobile.value = navigator.userAgentData.mobile
+      //   console.log('使用 userAgentData:', isMobile.value)
+      // }
       // 2. 综合判断（兼容所有浏览器）
       const ua = navigator.userAgent.toLowerCase()
       const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i
 
       const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 1
-    const smallScreen = window.innerWidth <= 768 // 你可以改成 1024 等
+      const smallScreen = window.innerWidth <= 1200 // 你可以改成 1024 等
 
-    isMobile.value = mobileRegex.test(ua) || (hasTouch && smallScreen)
+      const uaCheck = mobileRegex.test(ua)
+      isMobile.value = uaCheck || smallScreen
+    }, 100)
+  }
+
+  const handleResize = () => {
+    checkDevice()
   }
 
   onMounted(() => {
     checkDevice()
-    window.addEventListener('resize', checkDevice)
+    window.addEventListener('resize', handleResize)
     window.addEventListener('orientationchange', checkDevice) // 手机旋转必备
   })
 
   onUnmounted(() => {
-    window.removeEventListener('resize', checkDevice)
+    window.removeEventListener('resize', handleResize)
     window.removeEventListener('orientationchange', checkDevice)
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+  })
+
+  // 处理 keep-alive 缓存的组件重新激活场景
+  onActivated(() => {
+    checkDevice()
   })
 
   return { isMobile }

src/views/AwardPage/components/JudgesSection.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="judges-container flex flex-col align-center">
+  <div class="judges-container flex flex-col align-center" :class="{ mobile: isMobile }">
     <div class="title" ref="judgesTitleRef">{{ $t('AwardsPage.panelOfJudges') }}</div>
     <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
     <div class="sub-title" ref="judgesSubTitleRef">{{ $t('AwardsPage.expertise') }}</div>
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
+import { onBeforeUnmount, onMounted, nextTick, ref, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import jae from '@/assets/images/award/jae.png'
@@ -29,7 +29,7 @@ import tim from '@/assets/images/award/tim.png'
 import desmond from '@/assets/images/award/desmond.png'
 
 const { t } = useI18n()
-
+const isMobile = inject<boolean>('isMobile')
 const judgements = [
   {
     picture: jae,
@@ -70,9 +70,7 @@ const hasPlayedJudgementAnim = ref(false)
 let judgementObserver: IntersectionObserver | null = null
 
 const setupJudgementInitialState = () => {
-	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+  const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(Boolean) as HTMLElement[]
-		Boolean
-	) as HTMLElement[]
   if (titleEls.length) {
     gsap.set(titleEls, {
       opacity: 0,
@@ -80,8 +78,7 @@ const setupJudgementInitialState = () => {
       transformOrigin: '50% 50%'
     })
   }
-	const items =
+  const items = judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
-		judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
   if (items?.length) {
     gsap.set(items, {
       opacity: 0,
@@ -92,15 +89,11 @@ const setupJudgementInitialState = () => {
 
 const playJudgementAnimation = () => {
   if (hasPlayedJudgementAnim.value) return
-	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+  const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(Boolean) as HTMLElement[]
-		Boolean
-	) as HTMLElement[]
   const listEl = judgementListRef.value
   if (!titleEls.length || !listEl) return
 
-	const items = Array.from(
+  const items = Array.from(listEl.querySelectorAll<HTMLElement>('.judgement-item'))
-		listEl.querySelectorAll<HTMLElement>('.judgement-item')
-	)
   const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
 
   tl.to(titleEls, {
@@ -203,7 +196,7 @@ onBeforeUnmount(() => {
     column-gap: 23.22rem;
     row-gap: 8rem;
     padding: 0 25rem 0 26.6rem;
-		div{
+    div {
       text-align: center;
     }
     .judgement-item {
@@ -230,5 +223,43 @@ onBeforeUnmount(() => {
       }
     }
   }
+  &.mobile {
+    height: 139.6rem;
+    background: url('@/assets/images/mobile_version_background/judge_bg.png') no-repeat;
+    background-size: 100% 100%;
+		padding-top: 6rem;
+    .title {
+      font-size: 3.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .sub-title {
+			font-family: 'PoppinsMedium';
+			font-weight: 500;
+      font-size: 2.4rem;
+      margin-bottom: 5.8rem;
+    }
+    .judgement-list {
+			padding: 0 8.6rem;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: 6.8rem;
+			row-gap: 6rem;
+      // row-gap: 4rem;
+      // padding: 0 1.6rem;
+      .judgement-item {
+        .picture {
+          width: 15.6rem;
+          height: 20rem;
+        }
+        .name {
+          font-size: 2.4rem;
+					margin: 1.2rem 0;
+        }
+        .desc {
+					font-family: 'Instrument';
+          font-size: 2rem;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/AwardPage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="award-page" :class="{ 'is-zh': isZh }">
-    <div class="banner">
+    <div class="banner"  :class="{ 'mobile': isMobile }">
       <video
         :src="bannerUrl"
         autoplay