feat: banner移动端

src/views/AwardPage/index.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="award-page"
-		:class="{ 'is-zh': isZh }"
-	>
+  <div class="award-page" :class="{ 'is-zh': isZh }">
     <div class="banner">
       <video
         :src="bannerUrl"
@@ -14,16 +11,9 @@
         webkit-playsinline
         x5-playsinline
       ></video>
-			<div
-				class="submit-btn flex flex-center"
-				@click="handleSubmitApplication"
-			>
+      <div class="submit-btn flex flex-center" @click="handleSubmitApplication">
         <div>{{ $t('AwardsPage.submitApplication') }}</div>
-				<img
-					src="@/assets/images/award/arrow_right.png"
-					alt=""
-					class="arrow"
-				/>
+        <img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
         <div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
       </div>
     </div>
@@ -49,10 +39,12 @@
 import TimeLine from './components/TimeLine.vue'
 import Bloom from './components/Bloom.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()
 
@@ -65,7 +57,11 @@
 })
 
 const bannerUrl = computed(() => {
+  if (isMobile.value) {
+    return isZh.value ? bannerZhMobile : bannerMobile
+  } else {
     return isZh.value ? bannerZh : banner
+  }
 })
 
 const handleSubmitApplication = () => {
@@ -78,10 +74,6 @@
   height: 97rem;
 }
 
-	.logo {
-		width: 2.4rem;
-		height: 2.4rem;
-	}
 .banner {
   height: 100rem;
   // background: url('@/assets/images/award/banner.png') no-repeat;
@@ -144,4 +136,13 @@
     }
   }
 }
+@media screen and (max-width: 1200px) {
+  .banner {
+    height: 123.4rem;
+    .submit-btn {
+      bottom: 57rem;
+			left: 6.6rem;
+    }
+  }
+}
 </style>