feat: banner移动端
This commit is contained in:
BIN
src/assets/images/award/banner_mobile.mp4
Normal file
BIN
src/assets/images/award/banner_mobile.mp4
Normal file
Binary file not shown.
BIN
src/assets/images/award/banner_mobile_chinese.mp4
Normal file
BIN
src/assets/images/award/banner_mobile_chinese.mp4
Normal file
Binary file not shown.
@@ -1,147 +1,148 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="award-page" :class="{ 'is-zh': isZh }">
|
||||||
class="award-page"
|
<div class="banner">
|
||||||
:class="{ 'is-zh': isZh }"
|
<video
|
||||||
>
|
:src="bannerUrl"
|
||||||
<div class="banner">
|
autoplay
|
||||||
<video
|
muted
|
||||||
:src="bannerUrl"
|
loop
|
||||||
autoplay
|
class="banner-video"
|
||||||
muted
|
playsinline
|
||||||
loop
|
webkit-playsinline
|
||||||
class="banner-video"
|
x5-playsinline
|
||||||
playsinline
|
></video>
|
||||||
webkit-playsinline
|
<div class="submit-btn flex flex-center" @click="handleSubmitApplication">
|
||||||
x5-playsinline
|
<div>{{ $t('AwardsPage.submitApplication') }}</div>
|
||||||
></video>
|
<img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
|
||||||
<div
|
<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
|
||||||
class="submit-btn flex flex-center"
|
</div>
|
||||||
@click="handleSubmitApplication"
|
</div>
|
||||||
>
|
|
||||||
<div>{{ $t('AwardsPage.submitApplication') }}</div>
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/arrow_right.png"
|
|
||||||
alt=""
|
|
||||||
class="arrow"
|
|
||||||
/>
|
|
||||||
<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Slogan />
|
<Slogan />
|
||||||
<Bloom />
|
<Bloom />
|
||||||
<TimeLine />
|
<TimeLine />
|
||||||
<JudgesSection />
|
<JudgesSection />
|
||||||
<PrizesSection :is-zh="isZh" />
|
<PrizesSection :is-zh="isZh" />
|
||||||
<ApplySection />
|
<ApplySection />
|
||||||
<SelectionSection />
|
<SelectionSection />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed,onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import JudgesSection from './components/JudgesSection.vue'
|
import JudgesSection from './components/JudgesSection.vue'
|
||||||
import SelectionSection from './components/SelectionSection.vue'
|
import SelectionSection from './components/SelectionSection.vue'
|
||||||
import ApplySection from './components/ApplySection.vue'
|
import ApplySection from './components/ApplySection.vue'
|
||||||
import PrizesSection from './components/PrizesSection.vue'
|
import PrizesSection from './components/PrizesSection.vue'
|
||||||
import TimeLine from './components/TimeLine.vue'
|
import TimeLine from './components/TimeLine.vue'
|
||||||
import Bloom from './components/Bloom.vue'
|
import Bloom from './components/Bloom.vue'
|
||||||
import Slogan from './components/Slogan.vue'
|
import Slogan from './components/Slogan.vue'
|
||||||
|
import banner from '@/assets/images/award/banner.mp4'
|
||||||
|
import bannerMobile from '@/assets/images/award/banner_mobile.mp4'
|
||||||
|
import bannerZh from '@/assets/images/award/banner_chinese.mp4'
|
||||||
|
import bannerZhMobile from '@/assets/images/award/banner_mobile_chinese.mp4'
|
||||||
|
import { useIsMobile } from '@/utils/isMobile'
|
||||||
|
const { isMobile } = useIsMobile()
|
||||||
|
const router = useRouter()
|
||||||
|
const { locale } = useI18n()
|
||||||
|
|
||||||
import banner from '@/assets/images/award/banner.mp4'
|
onMounted(() => {
|
||||||
import bannerZh from '@/assets/images/award/banner_chinese.mp4'
|
router.replace('/')
|
||||||
|
})
|
||||||
|
|
||||||
const router = useRouter()
|
const isZh = computed(() => {
|
||||||
const { locale } = useI18n()
|
return locale.value === 'CHINESE_SIMPLIFIED'
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
const bannerUrl = computed(() => {
|
||||||
router.replace('/')
|
if (isMobile.value) {
|
||||||
})
|
return isZh.value ? bannerZhMobile : bannerMobile
|
||||||
|
} else {
|
||||||
|
return isZh.value ? bannerZh : banner
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const isZh = computed(() => {
|
const handleSubmitApplication = () => {
|
||||||
return locale.value === 'CHINESE_SIMPLIFIED'
|
router.push('/contestants')
|
||||||
})
|
}
|
||||||
|
|
||||||
const bannerUrl = computed(() => {
|
|
||||||
return isZh.value ? bannerZh : banner
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleSubmitApplication = () => {
|
|
||||||
router.push('/contestants')
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.container {
|
.container {
|
||||||
height: 97rem;
|
height: 97rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.banner {
|
||||||
width: 2.4rem;
|
height: 100rem;
|
||||||
height: 2.4rem;
|
// background: url('@/assets/images/award/banner.png') no-repeat;
|
||||||
}
|
// background-size: cover;
|
||||||
.banner {
|
position: relative;
|
||||||
height: 100rem;
|
.banner-video {
|
||||||
// background: url('@/assets/images/award/banner.png') no-repeat;
|
width: 100%;
|
||||||
// background-size: cover;
|
height: 100%;
|
||||||
position: relative;
|
object-fit: cover;
|
||||||
.banner-video {
|
}
|
||||||
width: 100%;
|
.submit-btn {
|
||||||
height: 100%;
|
width: 41rem;
|
||||||
object-fit: cover;
|
height: 6.394rem;
|
||||||
}
|
line-height: 6.394rem;
|
||||||
.submit-btn {
|
text-align: center;
|
||||||
width: 41rem;
|
border-radius: 3.2rem;
|
||||||
height: 6.394rem;
|
background-color: rgba(35, 35, 35, 0.7);
|
||||||
line-height: 6.394rem;
|
box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
|
||||||
text-align: center;
|
inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
|
||||||
border-radius: 3.2rem;
|
inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
|
||||||
background-color: rgba(35, 35, 35, 0.7);
|
color: #fff;
|
||||||
box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
|
font-family: 'PoppinsBold';
|
||||||
inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
|
font-weight: 600;
|
||||||
inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
|
font-size: 2.4rem;
|
||||||
color: #fff;
|
column-gap: 3.2rem;
|
||||||
font-family: 'PoppinsBold';
|
position: absolute;
|
||||||
font-weight: 600;
|
left: 42.1rem;
|
||||||
font-size: 2.4rem;
|
bottom: 15.7rem;
|
||||||
column-gap: 3.2rem;
|
backdrop-filter: blur(5px);
|
||||||
position: absolute;
|
cursor: pointer;
|
||||||
left: 42.1rem;
|
.arrow {
|
||||||
bottom: 15.7rem;
|
width: 3.83rem;
|
||||||
backdrop-filter: blur(5px);
|
height: 3.83rem;
|
||||||
cursor: pointer;
|
}
|
||||||
.arrow {
|
.ddl {
|
||||||
width: 3.83rem;
|
position: absolute;
|
||||||
height: 3.83rem;
|
bottom: -4rem;
|
||||||
}
|
left: 0;
|
||||||
.ddl {
|
text-align: center;
|
||||||
position: absolute;
|
width: 41rem;
|
||||||
bottom: -4rem;
|
font-family: 'ArialBold';
|
||||||
left: 0;
|
font-weight: 700;
|
||||||
text-align: center;
|
font-size: 2rem;
|
||||||
width: 41rem;
|
line-height: 2.2rem;
|
||||||
font-family: 'ArialBold';
|
color: #232323e5;
|
||||||
font-weight: 700;
|
}
|
||||||
font-size: 2rem;
|
}
|
||||||
line-height: 2.2rem;
|
}
|
||||||
color: #232323e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-zh {
|
.is-zh {
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
padding: 0 7.5rem;
|
padding: 0 7.5rem;
|
||||||
height: 7.8rem;
|
height: 7.8rem;
|
||||||
border-radius: 7.74rem;
|
border-radius: 7.74rem;
|
||||||
column-gap: 3.8rem;
|
column-gap: 3.8rem;
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
&,
|
&,
|
||||||
.ddl {
|
.ddl {
|
||||||
width: 35.4rem;
|
width: 35.4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.banner {
|
||||||
|
height: 123.4rem;
|
||||||
|
.submit-btn {
|
||||||
|
bottom: 57rem;
|
||||||
|
left: 6.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user