style: section移动端

src/views/AwardPage/components/SelectionSection.vue

@@ -2,16 +2,13 @@
   <div
     class="selection-container container flex flex-col align-center"
     ref="selectionRef"
+    :class="{ mobile: isMobile }"
   >
     <div class="title">{{ $t('AwardsPage.selectionCriteria') }}</div>
     <!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
     <div class="sub-title">{{ $t('AwardsPage.evaluation') }}</div>
     <div class="criteria-list flex" ref="criteriaListRef">
-			<div
+      <div class="item flex flex-col align-center" v-for="item in criteriaList" :key="item.name">
-				class="item flex flex-col align-center"
-				v-for="item in criteriaList"
-				:key="item.name"
-			>
         <img :src="item.icon" class="icon" :style="item.style" />
         <div class="name">{{ $t(item.name) }}</div>
         <div class="desc">{{ $t(item.desc) }}</div>
@@ -21,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import criteria1 from '@/assets/images/award/criteria_1.png'
@@ -31,6 +28,7 @@ import criteria4 from '@/assets/images/award/criteria_4.png'
 
 const { t } = useI18n()
 
+const isMobile = inject('isMobile')
 const criteriaList = ref([
   {
     icon: criteria1,
@@ -64,8 +62,7 @@ const hasPlayedSelectionAnim = ref(false)
 let selectionObserver: IntersectionObserver | null = null
 
 const setupSelectionInitialState = () => {
-	const items =
+  const items = criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
-		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
   if (items.length) {
     gsap.set(items, {
       opacity: 0,
@@ -77,8 +74,7 @@ const setupSelectionInitialState = () => {
 
 const playSelectionAnimation = () => {
   if (hasPlayedSelectionAnim.value) return
-	const items =
+  const items = criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
-		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
   if (!items.length) return
 
   gsap.to(items, {
@@ -174,5 +170,44 @@ onBeforeUnmount(() => {
       }
     }
   }
+  &.mobile {
+    height: auto;
+    padding: 6rem 0 13rem;
+    background: url('@/assets/images/mobile_version_background/section_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .title {
+      font-size: 3.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .sub-title {
+      font-size: 2.4rem;
+      margin-bottom: 6rem;
+    }
+    .criteria-list {
+      // flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 6rem;
+      grid-row-gap: 7rem;
+      .item {
+        width: 21rem;
+        height: initial;
+        &:nth-of-type(3) {
+					width: 30rem;
+					height: 36.8rem;
+					padding: 3.2rem 0;
+        }
+        .icon {
+          width: 16rem;
+          height: 15.3rem;
+        }
+        .name {
+          font-size: 2.4rem;
+          margin: 0.8rem 0 1.2rem;
+        }
+      }
+    }
+  }
 }
 </style>