feat: banner移动端

src/views/AwardPage/index.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
+  <div class="award-page" :class="{ 'is-zh': isZh }">
-		class="award-page"
-		:class="{ 'is-zh': isZh }"
-	>
     <div class="banner">
       <video
         :src="bannerUrl"
@@ -14,16 +11,9 @@
         webkit-playsinline
         x5-playsinline
       ></video>
-			<div
+      <div class="submit-btn flex flex-center" @click="handleSubmitApplication">
-				class="submit-btn flex flex-center"
-				@click="handleSubmitApplication"
-			>
         <div>{{ $t('AwardsPage.submitApplication') }}</div>
-				<img
+        <img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
-					src="@/assets/images/award/arrow_right.png"
-					alt=""
-					class="arrow"
-				/>
         <div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
       </div>
     </div>
@@ -39,50 +29,52 @@
 </template>
 
 <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'
-
-	const router = useRouter()
-	const { locale } = useI18n()
-
-	onMounted(() => {
   router.replace('/')
-	})
+})
 
-	const isZh = computed(() => {
+const isZh = computed(() => {
   return locale.value === 'CHINESE_SIMPLIFIED'
-	})
+})
 
-	const bannerUrl = computed(() => {
+const bannerUrl = computed(() => {
+  if (isMobile.value) {
+    return isZh.value ? bannerZhMobile : bannerMobile
+  } else {
     return isZh.value ? bannerZh : banner
-	})
-
-	const handleSubmitApplication = () => {
-		router.push('/contestants')
   }
+})
+
+const handleSubmitApplication = () => {
+  router.push('/contestants')
+}
 </script>
 
 <style lang="less" scoped>
-	.container {
+.container {
   height: 97rem;
-	}
+}
 
-	.logo {
+.banner {
-		width: 2.4rem;
-		height: 2.4rem;
-	}
-	.banner {
   height: 100rem;
   // background: url('@/assets/images/award/banner.png') no-repeat;
   // background-size: cover;
@@ -129,9 +121,9 @@
       color: #232323e5;
     }
   }
-	}
+}
 
-	.is-zh {
+.is-zh {
   .submit-btn {
     padding: 0 7.5rem;
     height: 7.8rem;
@@ -143,5 +135,14 @@
       width: 35.4rem;
     }
   }
+}
+@media screen and (max-width: 1200px) {
+  .banner {
+    height: 123.4rem;
+    .submit-btn {
+      bottom: 57rem;
+			left: 6.6rem;
     }
+  }
+}
 </style>