style: 样式修复

src/views/AwardPage/components/Bloom.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile, pad: isPad }">
+    <img
+      v-if="isMobile"
+      src="@/assets/images/mobile_version_background/ellipse.png"
+      class="top-bg"
+      alt=""
+    />
     <div class="title" ref="titleRef">
       {{ $t('AwardsPage.bloomYourCreativity') }}
     </div>
@@ -9,23 +15,23 @@
     </div>
     <div class="desc" ref="textRef">
       <p class="section-1">
-        {{ $t('AwardsPage.bloomText.desc1.regular1') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular1') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold1') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular2') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular2') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold2') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular3') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular3') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold3') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular4') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular4') }}</span>
         <span class="arial-bold">
           {{ $t('AwardsPage.bloomText.desc1.bold4') }}
         </span>
-        {{ $t('AwardsPage.bloomText.desc1.regular5') }}
+        <span>{{ $t('AwardsPage.bloomText.desc1.regular5') }}</span>
       </p>
       <!-- <p class="section-1 pad" v-show="isPad" v-html="padSection1"></p> -->
       <p class="section-2">
@@ -36,6 +42,12 @@
         {{ $t('AwardsPage.bloomText.desc2.regular2') }}
       </p>
     </div>
+    <img
+      v-if="isMobile"
+      src="@/assets/images/mobile_version_background/people.png"
+      class="people"
+      alt=""
+    />
   </div>
 </template>
 
@@ -190,15 +202,31 @@ p {
     line-height: 4.5rem;
     margin-bottom: 12.3rem;
     white-space: pre-line;
+    .section-1 {
+      font-size: 0;
+      span {
+        font-size: 2.4rem;
+      }
+    }
     .section-2 {
       margin-top: 4rem;
     }
   }
   &.mobile {
-    background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
+    background: #fff;
     background-size: 100% 100%;
-    height: 110vw;
+    height: auto;
     padding-top: 6rem;
+    position: relative;
+    .top-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      // left: 50%;
+      // transform: translateX(-50%);
+      width: 100%;
+      height: 37.5rem;
+    }
     .title {
       font-size: 3.2rem;
       margin-bottom: 0.8rem;
@@ -212,6 +240,11 @@ p {
       font-size: 2rem;
       line-height: 3rem;
       white-space: normal;
+      margin-bottom: 7rem;
+    }
+    .people {
+      margin: 0 6.6rem;
+      width: calc(100% - 13.2rem);
     }
   }
   &.pad {
@@ -222,9 +255,9 @@ p {
       font-family: 'ArialBold';
       font-weight: 700;
     }
-    .desc {
-      // font-size: 2.4rem;
-    }
+    // .desc {
+    //   // font-size: 2.4rem;
+    // }
   }
 }
 </style>