aidlab/gloabl_award_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: judge移动端

Browse Source
This commit is contained in:
zhangyahui
2026-03-18 13:57:24 +08:00
parent 1b5d2bf762
commit 8efe7efa71
5 changed files with 255 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/mobile_version_background/background3.png → src/assets/images/mobile_version_background/judge_bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

2
src/utils/flexible.js
View File

@@ -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)

46
src/utils/isMobile.ts
View File

@@ -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 }

409
src/views/AwardPage/components/JudgesSection.vue
View File

@@ -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>

2
src/views/AwardPage/index.vue
View File

@@ -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