From 5dd8840a0a275dc4bb0bdc9a906d45f7802f7935 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 19 Mar 2026 11:52:07 +0800
Subject: [PATCH] =?UTF-8?q?style:=20apply=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AwardPage/components/ApplySection.vue     | 128 +++++++++++++++++-
 1 file changed, 122 insertions(+), 6 deletions(-)

diff --git a/src/views/AwardPage/components/ApplySection.vue b/src/views/AwardPage/components/ApplySection.vue
index a3966ce..5a7f824 100644
--- a/src/views/AwardPage/components/ApplySection.vue
+++ b/src/views/AwardPage/components/ApplySection.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="apply-container flex flex-col" id="apply" ref="applyRef">
+  <div
+    class="apply-container flex flex-col"
+    id="apply"
+    ref="applyRef"
+    :class="{ mobile: isMobile }"
+  >
     <div class="title animation-element" ref="applyTitleRef">
       {{ $t('AwardsPage.howToApply') }}
     </div>
@@ -7,7 +12,7 @@
       {{ $t('AwardsPage.stepByStep') }}
     </div>
     <div class="requirments-list flex flex-col" ref="reqListRef">
-      <div class="top flex">
+      <div class="top flex" :class="{ 'flex-col': isMobile }">
         <div
           class="item-box animation-element"
           v-for="(item, index) in leftRequirment"
@@ -22,7 +27,7 @@
           <div class="item-header flex flex-center">
             <div class="item-title">{{ $t(item.type) }}</div>
           </div>
-          <div class="context-container flex flex-center">
+          <div class="context-container flex flex-center" :class="{ 'flex-col': isMobile }">
             <div class="context" v-for="el in item.desc">
               {{ $t(el) }}
             </div>
@@ -37,10 +42,10 @@
           </div>
         </div>
       </div>
-      <div class="bottom flex">
+      <div class="bottom flex" :class="{ 'flex-col': isMobile }">
         <div class="step-3 flex flex-col animation-element" ref="step3Ref">
           <div class="header">{{ $t('AwardsPage.step3Title') }}</div>
-          <div class="content flex">
+          <div class="content flex" :class="{ 'flex-col': isMobile }">
             <div class="content-left flex flex-col space-between">
               <div class="content-item">
                 <div class="item-header flex align-center">
@@ -62,7 +67,7 @@
                   </ul>
                 </div>
               </div>
-              <div class="content-item">
+              <div class="content-item" v-if="!isMobile">
                 <div class="item-header flex align-center">
                   <div class="point"></div>
                   <div>{{ $t('AwardsPage.fileName') }}</div>
@@ -103,6 +108,15 @@
                   </ul>
                 </div>
               </div>
+              <div class="content-item file" v-if="isMobile">
+                <div class="item-header flex align-center">
+                  <div class="point"></div>
+                  <div>{{ $t('AwardsPage.fileName') }}</div>
+                </div>
+                <div class="item-desc indent">
+                  {{ $t('AwardsPage.fileNameDesc') }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -519,5 +533,107 @@ ul {
       }
     }
   }
+  &.mobile {
+    // height: 204.9rem;
+    height: auto;
+    background: url('@/assets/images/mobile_version_background/apply_bg.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 6rem 6.6rem 0;
+    .title {
+      font-size: 3.2rem;
+      margin-bottom: 0.8rem;
+    }
+    .sub-title {
+      font-size: 2.4rem;
+      margin-bottom: 5.8rem;
+    }
+    .requirments-list {
+      row-gap: 3.8rem;
+      .top {
+        height: auto;
+        row-gap: 4rem;
+        .item-box {
+          width: 100%;
+          height: initial;
+          .item-header {
+            height: 6rem;
+            .item-title {
+              white-space: normal;
+              font-size: 2.4rem;
+            }
+          }
+          .context-container {
+            margin-top: 2rem;
+            .list {
+              width: 100%;
+              padding: 0 6rem 6.4rem;
+              font-size: 2rem;
+              margin-top: 2rem;
+              .list-items li::before {
+                border-radius: 50%;
+              }
+            }
+            .context {
+              white-space: normal;
+              padding: 0 6rem;
+              font-size: 2rem;
+              text-align: left;
+            }
+          }
+        }
+      }
+      .bottom {
+        height: fit-content;
+        .step-3 {
+          margin-bottom: 4rem;
+          .content {
+            row-gap: 4rem;
+            padding: 2rem 6rem 4rem;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+
+            .content-item {
+              height: auto;
+              &.file {
+                margin-top: 4rem;
+              }
+              .item-header {
+                font-size: 2.2rem;
+              }
+              .desc-wrapper {
+                margin-top: 2rem;
+                font-family: 'Instrument';
+                font-weight: 400;
+                font-size: 2rem;
+                row-gap: 2rem;
+                justify-content: flex-start;
+                .desc-lists li::before {
+                  width: 0.4rem;
+                  height: 0.4rem;
+                  flex: none;
+                  border-radius: 50%;
+                }
+              }
+            }
+          }
+        }
+        .step-4 {
+          width: 100%;
+          .content {
+            padding: 2rem 6rem 10rem;
+            .desc-wrapper {
+              font-size: 2rem;
+              .desc-lists li::before {
+                width: 0.4rem;
+                height: 0.4rem;
+                flex: none;
+                border-radius: 50%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>