feat: 平板端适配

src/views/AwardPage/components/Bloom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile }">
+  <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile, pad: isPad }">
     <div class="title" ref="titleRef">
       {{ $t('AwardsPage.bloomYourCreativity') }}
     </div>
@@ -27,6 +27,7 @@
         </span>
         {{ $t('AwardsPage.bloomText.desc1.regular5') }}
       </p>
+      <!-- <p class="section-1 pad" v-show="isPad" v-html="padSection1"></p> -->
       <p class="section-2">
         {{ $t('AwardsPage.bloomText.desc2.regular1') }}
         <span class="arial-bold">
@@ -45,11 +46,16 @@ import { gsap } from 'gsap'
 
 const { t } = useI18n()
 const isMobile = inject<boolean>('isMobile')
+const isPad = inject<boolean>('isPad')
 
 const titleRef = ref<HTMLElement | null>(null)
 const subtitleRef = ref<HTMLElement | null>(null)
 const textRef = ref<HTMLElement | null>(null)
 
+// const padSection1 = computed(() => {
+//   return t('AwardsPage.bloomDesc1')
+// })
+
 const hasPlayedBloomAnim = ref(false)
 let bloomObserver: IntersectionObserver | null = null
 
@@ -149,8 +155,8 @@ p {
   margin: 0;
   padding: 0;
 }
-.arial-bold {
-  font-family: 'ArialBold';
+:deep(.arial-bold) {
+  font-family: 'ArialBold', Arial, sans-serif;
   font-weight: 700;
 }
 .bloom {
@@ -191,7 +197,6 @@ p {
   &.mobile {
     background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
     background-size: 100% 100%;
-    // height: 83.1rem;
     height: 110vw;
     padding-top: 6rem;
     .title {
@@ -203,11 +208,22 @@ p {
       margin-bottom: 6.2rem;
     }
     .desc {
-      // padding: 0 6.5rem 0 6.7rem;
       padding: 0 8.5vw;
       font-size: 2rem;
       line-height: 3rem;
     }
   }
+  &.pad {
+    height: 84.6vw;
+    background: url('@/assets/images/pad_version/bloom_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .arial-bold {
+      font-family: 'ArialBold';
+      font-weight: 700;
+    }
+    .desc {
+      // font-size: 2.4rem;
+    }
+  }
 }
 </style>