diff --git a/src/assets/images/mobile_version_background/background3.png b/src/assets/images/mobile_version_background/judge_bg.png
similarity index 100%
rename from src/assets/images/mobile_version_background/background3.png
rename to src/assets/images/mobile_version_background/judge_bg.png
diff --git a/src/utils/flexible.js b/src/utils/flexible.js
index 8b29bed..f2c2c8c 100644
--- a/src/utils/flexible.js
+++ b/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)
diff --git a/src/utils/isMobile.ts b/src/utils/isMobile.ts
index 7b2998d..190d9d4 100644
--- a/src/utils/isMobile.ts
+++ b/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)
 
+  let resizeTimer: ReturnType<typeof setTimeout> | null = null
+
   const checkDevice = () => {
-    // 1. 现代 Client Hints API（Chrome/Edge 最准）
-    if (navigator.userAgentData?.mobile !== undefined) {
-      isMobile.value = navigator.userAgentData.mobile
-      return
+    // 使用防抖避免频繁触发
+    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
 
-    // 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 <= 1200 // 你可以改成 1024 等
 
-    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 1
-    const smallScreen = window.innerWidth <= 768 // 你可以改成 1024 等
+      const uaCheck = mobileRegex.test(ua)
+      isMobile.value = uaCheck || smallScreen
+    }, 100)
+  }
 
-    isMobile.value = mobileRegex.test(ua) || (hasTouch && smallScreen)
+  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 }
diff --git a/src/views/AwardPage/components/JudgesSection.vue b/src/views/AwardPage/components/JudgesSection.vue
index 55c814b..303e6f1 100644
--- a/src/views/AwardPage/components/JudgesSection.vue
+++ b/src/views/AwardPage/components/JudgesSection.vue
@@ -1,24 +1,24 @@
 <template>
-	<div class="judges-container flex flex-col align-center">
-		<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>
-		<div class="judgement-list" ref="judgementListRef">
-			<div
-				class="judgement-item flex flex-col align-center"
-				v-for="item in judgements"
-				:key="item.name"
-			>
-				<img :src="item.picture" class="picture" />
-				<div class="name">{{ $t(item.name) }}</div>
-				<div class="desc">{{ $t(item.desc) }}</div>
-			</div>
-		</div>
-	</div>
+  <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>
+    <div class="judgement-list" ref="judgementListRef">
+      <div
+        class="judgement-item flex flex-col align-center"
+        v-for="item in judgements"
+        :key="item.name"
+      >
+        <img :src="item.picture" class="picture" />
+        <div class="name">{{ $t(item.name) }}</div>
+        <div class="desc">{{ $t(item.desc) }}</div>
+      </div>
+    </div>
+  </div>
 </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,38 +29,38 @@ 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,
-		name: 'Jae Hyuk Lim',
-		desc: 'AwardsPage.judgesHat.jae'
-	},
-	{
-		picture: diego,
-		name: 'Diego Dultzin Lacoste',
-		desc: 'AwardsPage.judgesHat.diego'
-	},
-	{
-		picture: gregory,
-		name: 'Gregory de la Hogue Moran',
-		desc: 'AwardsPage.judgesHat.gregory'
-	},
-	{
-		picture: vincenzo,
-		name: 'Vincenzo La Torre',
-		desc: 'AwardsPage.judgesHat.vincenzo'
-	},
-	{
-		picture: tim,
-		name: 'Tim Lim',
-		desc: 'AwardsPage.judgesHat.tim'
-	},
-	{
-		picture: desmond,
-		name: 'Desmond Lim',
-		desc: 'AwardsPage.judgesHat.desmond'
-	}
+  {
+    picture: jae,
+    name: 'Jae Hyuk Lim',
+    desc: 'AwardsPage.judgesHat.jae'
+  },
+  {
+    picture: diego,
+    name: 'Diego Dultzin Lacoste',
+    desc: 'AwardsPage.judgesHat.diego'
+  },
+  {
+    picture: gregory,
+    name: 'Gregory de la Hogue Moran',
+    desc: 'AwardsPage.judgesHat.gregory'
+  },
+  {
+    picture: vincenzo,
+    name: 'Vincenzo La Torre',
+    desc: 'AwardsPage.judgesHat.vincenzo'
+  },
+  {
+    picture: tim,
+    name: 'Tim Lim',
+    desc: 'AwardsPage.judgesHat.tim'
+  },
+  {
+    picture: desmond,
+    name: 'Desmond Lim',
+    desc: 'AwardsPage.judgesHat.desmond'
+  }
 ]
 
 const judgesTitleRef = ref<HTMLElement | null>(null)
@@ -70,165 +70,196 @@ const hasPlayedJudgementAnim = ref(false)
 let judgementObserver: IntersectionObserver | null = null
 
 const setupJudgementInitialState = () => {
-	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
-		Boolean
-	) as HTMLElement[]
-	if (titleEls.length) {
-		gsap.set(titleEls, {
-			opacity: 0,
-			scale: 0,
-			transformOrigin: '50% 50%'
-		})
-	}
-	const items =
-		judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
-	if (items?.length) {
-		gsap.set(items, {
-			opacity: 0,
-			clipPath: 'inset(0 0 100% 0)'
-		})
-	}
+  const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(Boolean) as HTMLElement[]
+  if (titleEls.length) {
+    gsap.set(titleEls, {
+      opacity: 0,
+      scale: 0,
+      transformOrigin: '50% 50%'
+    })
+  }
+  const items = judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
+  if (items?.length) {
+    gsap.set(items, {
+      opacity: 0,
+      clipPath: 'inset(0 0 100% 0)'
+    })
+  }
 }
 
 const playJudgementAnimation = () => {
-	if (hasPlayedJudgementAnim.value) return
-	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
-		Boolean
-	) as HTMLElement[]
-	const listEl = judgementListRef.value
-	if (!titleEls.length || !listEl) return
+  if (hasPlayedJudgementAnim.value) return
+  const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(Boolean) as HTMLElement[]
+  const listEl = judgementListRef.value
+  if (!titleEls.length || !listEl) return
 
-	const items = Array.from(
-		listEl.querySelectorAll<HTMLElement>('.judgement-item')
-	)
-	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+  const items = Array.from(listEl.querySelectorAll<HTMLElement>('.judgement-item'))
+  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
 
-	tl.to(titleEls, {
-		opacity: 1,
-		scale: 1,
-		duration: 0.4,
-		ease: 'back.out(1.6)',
-		stagger: 0.1
-	})
-	if (items.length) {
-		const firstRow = items.slice(0, 3)
-		const secondRow = items.slice(3)
+  tl.to(titleEls, {
+    opacity: 1,
+    scale: 1,
+    duration: 0.4,
+    ease: 'back.out(1.6)',
+    stagger: 0.1
+  })
+  if (items.length) {
+    const firstRow = items.slice(0, 3)
+    const secondRow = items.slice(3)
 
-		if (firstRow.length) {
-			tl.to(
-				firstRow,
-				{
-					opacity: 1,
-					clipPath: 'inset(0% 0% 0% 0%)',
-					duration: 0.45,
-					stagger: 0.05
-				},
-				'-=0.2'
-			)
-		}
+    if (firstRow.length) {
+      tl.to(
+        firstRow,
+        {
+          opacity: 1,
+          clipPath: 'inset(0% 0% 0% 0%)',
+          duration: 0.45,
+          stagger: 0.05
+        },
+        '-=0.2'
+      )
+    }
 
-		if (secondRow.length) {
-			tl.to(
-				secondRow,
-				{
-					opacity: 1,
-					clipPath: 'inset(0% 0% 0% 0%)',
-					duration: 0.45,
-					stagger: 0.05
-				},
-				'+=0.1'
-			)
-		}
-	}
+    if (secondRow.length) {
+      tl.to(
+        secondRow,
+        {
+          opacity: 1,
+          clipPath: 'inset(0% 0% 0% 0%)',
+          duration: 0.45,
+          stagger: 0.05
+        },
+        '+=0.1'
+      )
+    }
+  }
 
-	hasPlayedJudgementAnim.value = true
-	judgementObserver?.disconnect()
+  hasPlayedJudgementAnim.value = true
+  judgementObserver?.disconnect()
 }
 
 onMounted(() => {
-	nextTick(() => {
-		setupJudgementInitialState()
-		if ('IntersectionObserver' in window) {
-			judgementObserver = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							playJudgementAnimation()
-						}
-					})
-				},
-				{ threshold: 0.3 }
-			)
-			if (judgementListRef.value) {
-				judgementObserver.observe(judgementListRef.value)
-			}
-		} else {
-			// Fallback: play immediately if IntersectionObserver unsupported
-			playJudgementAnimation()
-		}
-	})
+  nextTick(() => {
+    setupJudgementInitialState()
+    if ('IntersectionObserver' in window) {
+      judgementObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              playJudgementAnimation()
+            }
+          })
+        },
+        { threshold: 0.3 }
+      )
+      if (judgementListRef.value) {
+        judgementObserver.observe(judgementListRef.value)
+      }
+    } else {
+      // Fallback: play immediately if IntersectionObserver unsupported
+      playJudgementAnimation()
+    }
+  })
 })
 
 onBeforeUnmount(() => {
-	judgementObserver?.disconnect()
+  judgementObserver?.disconnect()
 })
 </script>
 
 <style scoped lang="less">
 .judges-container {
-	height: 147.4rem;
-	background: url('@/assets/images/award/judges_bg.png') no-repeat;
-	background-size: 100% 100%;
-	padding-top: 12.8rem;
-	.title {
-		color: #232323;
-		font-family: 'PoppinsBold';
-		font-weight: 600;
-		font-size: 4rem;
-		margin-bottom: 2.4rem;
-	}
-	.logo {
-		margin: 2.4rem 0 2.2rem;
-	}
-	.sub-title {
-		color: #b10000;
-		font-family: 'Arial';
-		font-weight: 400;
-		font-size: 3rem;
-		margin-bottom: 12rem;
-	}
-	.judgement-list {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		column-gap: 23.22rem;
-		row-gap: 8rem;
-		padding: 0 25rem 0 26.6rem;
-		div{
-			text-align: center;
-		}
-		.judgement-item {
-			overflow: hidden;
-			.picture {
-				width: 20.2rem;
-				height: 26rem;
-				border-radius: 0.8rem;
-			}
-			.name {
-				margin: 3rem 0 2.4rem;
-				color: #232323;
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-				font-size: 2.4rem;
-			}
-			.desc {
-				color: #585858;
-				font-family: 'Arial';
-				font-weight: 400;
-				font-size: 2rem;
-				white-space: pre-line;
-				text-align: center;
-			}
-		}
-	}
+  height: 147.4rem;
+  background: url('@/assets/images/award/judges_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding-top: 12.8rem;
+  .title {
+    color: #232323;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+    margin-bottom: 2.4rem;
+  }
+  .logo {
+    margin: 2.4rem 0 2.2rem;
+  }
+  .sub-title {
+    color: #b10000;
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 3rem;
+    margin-bottom: 12rem;
+  }
+  .judgement-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 23.22rem;
+    row-gap: 8rem;
+    padding: 0 25rem 0 26.6rem;
+    div {
+      text-align: center;
+    }
+    .judgement-item {
+      overflow: hidden;
+      .picture {
+        width: 20.2rem;
+        height: 26rem;
+        border-radius: 0.8rem;
+      }
+      .name {
+        margin: 3rem 0 2.4rem;
+        color: #232323;
+        font-family: 'PoppinsBold';
+        font-weight: 600;
+        font-size: 2.4rem;
+      }
+      .desc {
+        color: #585858;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2rem;
+        white-space: pre-line;
+        text-align: center;
+      }
+    }
+  }
+  &.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>
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index 962c99b..ffe8cc2 100644
--- a/src/views/AwardPage/index.vue
+++ b/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