style: 评委

src/views/AwardPage/components/JudgesSection.vue

@@ -13,6 +13,7 @@
           <img :src="item.picture" class="picture" />
           <div class="name">{{ $t(item.name) }}</div>
           <div class="desc">{{ $t(item.desc) }}</div>
+          <div class="region arial-bold">{{ $t(item.region) }}</div>
         </template>
         <template v-else>
           <div class="picture tbd"></div>
@@ -28,10 +29,10 @@ import { onBeforeUnmount, onMounted, nextTick, ref, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import jae from '@/assets/images/award/jae.png'
-import diego from '@/assets/images/award/diego.png'
+import rosiexia from '@/assets/images/award/rosiexia.png'
 import gregory from '@/assets/images/award/gregory.png'
-import vincenzo from '@/assets/images/award/vincenzo.png'
-import tim from '@/assets/images/award/tim.png'
+import annie from '@/assets/images/award/anniewong.png'
+import xaven from '@/assets/images/award/xavenmak.png'
 import desmond from '@/assets/images/award/desmond.png'
 
 const { t } = useI18n()
@@ -41,35 +42,38 @@ const judgements = [
   {
     picture: jae,
     name: 'Jae Hyuk Lim',
-    desc: 'AwardsPage.judgesHat.jae'
+    desc: 'AwardsPage.judgesHat.jae',
+    region: 'AwardsPage.judgesHat.jaeCountry'
   },
   {
-    picture: diego,
-    name: 'Diego Dultzin Lacoste',
-    desc: 'AwardsPage.judgesHat.diego',
-    tbd: true
+    picture: rosiexia,
+    name: 'Rosie Xia',
+    desc: 'AwardsPage.judgesHat.rosie',
+    region: 'AwardsPage.judgesHat.rosieCountry'
   },
   {
     picture: gregory,
     name: 'Gregory de la Hogue Moran',
-    desc: 'AwardsPage.judgesHat.gregory'
+    desc: 'AwardsPage.judgesHat.gregory',
+    region: 'AwardsPage.judgesHat.gregoryCountry'
   },
   {
-    picture: vincenzo,
-    name: 'Vincenzo La Torre',
-    desc: 'AwardsPage.judgesHat.vincenzo',
-    tbd: true
+    picture: annie,
+    name: 'Annie Wong',
+    desc: 'AwardsPage.judgesHat.annie',
+    region: 'AwardsPage.judgesHat.annieCountry'
   },
   {
-    picture: tim,
-    name: 'Tim Lim',
-    desc: 'AwardsPage.judgesHat.tim',
-    tbd: true
+    picture: xaven,
+    name: 'Xaven Mak',
+    desc: 'AwardsPage.judgesHat.xaven',
+    region: 'AwardsPage.judgesHat.xavenCountry'
   },
   {
     picture: desmond,
     name: 'Desmond Lim',
-    desc: 'AwardsPage.judgesHat.desmond'
+    desc: 'AwardsPage.judgesHat.desmond',
+    region: 'AwardsPage.judgesHat.desmondCountry'
   }
 ]
 
@@ -203,14 +207,15 @@ onBeforeUnmount(() => {
   .judgement-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    column-gap: 23.22rem;
-    row-gap: 8rem;
+    column-gap: 19rem;
+    row-gap: 9.2rem;
     padding: 0 25rem 0 26.6rem;
     div {
       text-align: center;
     }
     .judgement-item {
       overflow: hidden;
+      line-height: 2.4rem;
       .picture {
         width: 20.2rem;
         height: 26rem;
@@ -225,6 +230,7 @@ onBeforeUnmount(() => {
         font-family: 'PoppinsBold';
         font-weight: 600;
         font-size: 2.4rem;
+        width: 90%;
       }
       .desc {
         color: #585858;
@@ -234,13 +240,19 @@ onBeforeUnmount(() => {
         white-space: pre-line;
         text-align: center;
       }
+      .region {
+        font-family: 'ArialBold';
+        font-weight: 700;
+        font-size: 2rem;
+      }
     }
   }
   &.mobile {
-    height: 139.6rem;
+    height: auto;
     background: url('@/assets/images/mobile_version_background/judge_bg.png') no-repeat;
     background-size: 100% 100%;
     padding-top: 6rem;
+    padding-bottom: 16.9rem;
     .title {
       font-size: 3.2rem;
       margin-bottom: 0.8rem;