Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

src/component/Administrator/SE/allUser/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin_page">
+  <div class="admin_page all-user">
     <div class="admin_table_search">
       <div class="admin_state">
         <div class="admin_state_item">
@@ -16,10 +16,56 @@
             </template>
           </a-range-picker>
         </div>
+        <!-- <div class="admin_state_item">
+                    <span>Country or Region:</span>
+					<a-select
+                        v-model:value="country"
+						:allowClear="true"
+						show-search
+                        style="width: 230px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="allCountry"
+                    ></a-select>
+                </div> -->
+        <!-- <div class="admin_state_item">
+                    <span>Email:</span>
+                    <input
+                        v-model="email"
+                        placeholder="Please enter email"
+                        @keydown.enter="gettrialList"
+                        type="text"
+                        style="width: 230px"
+                    />
+                </div> -->
         <div class="admin_state_item">
           <span>{{ $t('admin.UserName') }}:</span>
-          <SelectUser v-model:value="ids" multiple valueKey="label" labelKey="email" />
+          <a-select
+            v-model:value="ids"
+            mode="multiple"
+            style="width: 230px"
+            :field-names="{ label: 'label', value: 'label' }"
+            :filter-option="filterOption"
+            :placeholder="$t('admin.selectUserName')"
+            max-tag-count="responsive"
+            :options="allUserList"
+            @keydown.enter="gettrialList"
+          ></a-select>
         </div>
+        <!-- <div class="admin_state_item">
+                    <span>User Type:</span>
+                    <a-select
+                        v-model:value="systemUser"
+                        size="large"
+                        style="width: 230px"
+                        optionFilterProp="label"
+                        :options="state"
+                        placeholder="Please select"
+                        allowClear
+                        show-search
+                    ></a-select>
+                </div> -->
       </div>
       <div class="admin_search">
         <div class="admin_search_item" @click="searchHistoryList">
@@ -70,31 +116,6 @@
       </div>
     </div>
     <div class="admin_table_content" ref="historyTable">
-      <div class="admin_state_list plan_list">
-        <div
-          v-for="plan in planFilterOptions"
-          :key="plan.id"
-          class="plan_item"
-          :class="{
-            active: subscriptionPlanId === plan.id,
-            disabled: plan.status === 'PENDING'
-          }"
-          @click="plan.status !== 'PENDING' && selectPlanFilter(plan.id)"
-        >
-          <a-tooltip v-if="plan.status === 'PENDING'">
-            <template #title>{{ $t('admin.PlanStart') }} {{ plan.startTime }}</template>
-            <span class="plan_name">{{ plan.name }}</span>
-            <MoreOutlined class="plan_more_icon" />
-          </a-tooltip>
-          <template v-else>
-            <span class="plan_name">{{ plan.name }}</span>
-            <MoreOutlined
-              class="plan_more_icon"
-              @click.stop="plan.status !== 'PENDING' && openPlanRenameModal(plan)"
-            />
-          </template>
-        </div>
-      </div>
       <a-table
         @resizeColumn="handleResizeColumn"
         :loading="tableLoading"
@@ -126,6 +147,12 @@
             <div class="operate_item" @click="deleteAagree(record)">
               {{ $t('admin.Delete') }}
             </div>
+            <!-- <div
+							class="operate_item"
+							@click="deleteGroup(record, index)"
+						>
+							Delete
+						</div> -->
           </div>
         </template>
       </a-table>
@@ -133,31 +160,7 @@
     <allUserPoerationsVue
       ref="allUserPoerationsVue"
       @searchHistoryList="searchHistoryList"
-      :plan-options="planFilterOptions"
     ></allUserPoerationsVue>
-    <div class="renamePlanModal" ref="renamePlanModal"></div>
-    <!-- 重命名订阅计划弹窗 -->
-    <a-modal
-      v-model:visible="renamePlanModalVisible"
-      :title="$t('admin.RenamePlan')"
-      @ok="confirmRenamePlan"
-      @cancel="cancelRenamePlan"
-      :ok-text="$t('admin.OK')"
-      :cancel-text="$t('admin.Cancel')"
-      :get-container="() => $refs.renamePlanModal"
-    >
-      <div class="rename-plan-form">
-        <div class="admin_state_item">
-          <span>{{ $t('admin.PlanName') }}:</span>
-          <a-input
-            v-model:value="renamePlanForm.planName"
-            :placeholder="$t('admin.InputPlanName')"
-            style="width: 250px"
-            @pressEnter="confirmRenamePlan"
-          />
-        </div>
-      </div>
-    </a-modal>
   </div>
 </template>
 <script lang="ts">
@@ -168,24 +171,20 @@ import {
   computed,
   reactive,
   toRefs,
-  unref,
+  onMounted
-  watch
 } from 'vue'
 import { formatTime } from '@/tool/util'
 import { useStore } from 'vuex'
 import { Https } from '@/tool/https'
-import { Modal, message, Input } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
-import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import allUserPoerationsVue from './addAllUser.vue'
 import { useI18n } from 'vue-i18n'
 import SelectUser from '@/component/common/SelectUser.vue'
 export default defineComponent({
-  components: { allUserPoerationsVue, MoreOutlined, SelectUser },
+  components: { allUserPoerationsVue },
   setup() {
     const store: any = useStore()
-    const currentOrganizationId = computed(
-      () => store.state.UserHabit.userDetail.organizationId
-    )
     const selectedRowKeys = ref([]) as any
     const onSelectChange = (changableRowKeys: string[]) => {
       selectedRowKeys.value = changableRowKeys
@@ -193,6 +192,9 @@ export default defineComponent({
     let filter: any = reactive({
       dataList: [],
       tableLoading: false,
+      allUserList: computed(() => {
+        return store.state.adminPage.allUserList
+      }),
       allCountry: [],
       rowSelection: computed(() => {
         return {
@@ -201,7 +203,6 @@ export default defineComponent({
         }
       })
     })
-
     const { t } = useI18n()
 
     let filterData: any = reactive({
@@ -217,16 +218,10 @@ export default defineComponent({
       systemUser: '',
       order: '', //'Ascending  升序 Descending 降序'
       orderBy: '',
-      userName: '',
+      userName: ''
-      subscriptionPlanId: ''
     })
 
     let renameData: any = ref({}) //修改名字选中的数据
-    const renamePlanModalVisible = ref(false)
-    const renamePlanForm = reactive({
-      planId: null as number | null,
-      planName: ''
-    })
     const columns: any = computed(() => {
       return [
         {
@@ -253,6 +248,13 @@ export default defineComponent({
           key: 'userName',
           width: 150,
           ellipsis: true
+          // customRender: (record: any) => {
+          //     let time = formatTime(
+          //         record.text / 1000,
+          //         "YYYY-MM-DD hh:mm:ss"
+          //     );
+          //     return time;
+          // },
         },
         {
           title: t('admin.language'),
@@ -276,6 +278,10 @@ export default defineComponent({
         {
           title: t('admin.Credits'),
           align: 'center',
+          // width: 150,
+          // minWidth: 100,
+          // maxWidth: 200,
+          // resizable: true,
           dataIndex: 'credits',
           key: 'credits',
           width: 100,
@@ -303,6 +309,7 @@ export default defineComponent({
           width: 120,
           align: 'center',
           fixed: 'right',
+          // slots:{customRender:'action'}
           Operations: true
         }
       ]
@@ -347,8 +354,7 @@ export default defineComponent({
         (filterData.order = ''), //'Ascending  升序 Descending 降序'
         (filterData.orderBy = ''), //'Ascending  升序 Descending 降序'
         (filterData.systemUser = ''),
-        (filterData.userName = ''),
+        (filterData.userName = '')
-        (filterData.subscriptionPlanId = '')
     }
     let setHistoryListData = () => {
       let startDate: any = filterData.rangePickerValue?.[0]
@@ -371,17 +377,18 @@ export default defineComponent({
         order: filterData.order,
         orderBy: filterData.orderBy,
         // userName: filterData.userName,
-        userName: filterData.ids,
+        userName: filterData.ids
-        subscriptionPlanId: filterData.subscriptionPlanId
       }
       return data
     }
     //获取列表
-    const gettrialList = () => {
+    let gettrialList = () => {
       filter.tableLoading = true
       let data = setHistoryListData()
       Https.axiosPost(Https.httpUrls.subAccountList, data).then((rv: any) => {
         if (rv) {
+          console.log(rv)
+          // this.dataList = rv
           filter.dataList = rv.content
           filterData.total = rv.total
           filter.tableLoading = false
@@ -410,70 +417,6 @@ export default defineComponent({
       // 使用 option.label 进行搜索
       return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
-    // 订阅计划筛选（按钮点击）
-    const selectPlanFilter = async (planId: string) => {
-      filterData.subscriptionPlanId = planId
-      // 切换管理员订阅计划
-      Https.axiosGet(Https.httpUrls.switchSubscribePlan, {
-        params: {
-          targetSubscriptionPlanId: planId,
-          adminAccId: store.state.UserHabit.userDetail.id
-        }
-      }).then((res: any) => {
-        console.log(res)
-      })
-      searchHistoryList()
-    }
-    const planFilterOptions = ref([])
-    const fetchSubscribePlanList = () => {
-      const orgId = currentOrganizationId.value
-      if (!orgId) return
-      Https.axiosPost(Https.httpUrls.searchSubscribeByOrg, {
-        organizationId: orgId,
-        status: ['ACTIVE', 'PENDING']
-      }).then(res => {
-        res.forEach(plan => {
-          plan.startTime = formatTime(plan.currentPeriodStart, 'YYYY-MM-DD hh:mm:ss')
-        })
-        // 将与当前用户 subscriptionPlanId 相同的订阅计划放到第一个
-        const userSubscriptionPlanId = store.state.UserHabit.userDetail.subscriptionPlanId
-        if (userSubscriptionPlanId && Array.isArray(res)) {
-          const sortedList = [...res].sort((a: any, b: any) => {
-            const isAUserPlan = a.id == userSubscriptionPlanId
-            const isBUserPlan = b.id == userSubscriptionPlanId
-            if (isAUserPlan && !isBUserPlan) return -1
-            if (!isAUserPlan && isBUserPlan) return 1
-            return 0
-          })
-          planFilterOptions.value = sortedList
-        } else {
-          planFilterOptions.value = res
-        }
-        console.log(planFilterOptions.value)
-      })
-    }
-    // 监听组织ID，获取到值后再拉取订阅计划
-    watch(
-      () => currentOrganizationId.value,
-      orgId => {
-        if (orgId) {
-          fetchSubscribePlanList()
-          const userSubscriptionPlanId =
-            store.state.UserHabit.userDetail.subscriptionPlanId
-          if (userSubscriptionPlanId) {
-            selectPlanFilter(userSubscriptionPlanId)
-          }
-        }
-      },
-      { immediate: true }
-    )
-    // 打开重命名弹窗（基于当前点击的计划）
-    const openPlanRenameModal = plan => {
-      renamePlanForm.planId = plan.id
-      renamePlanForm.planName = plan?.name || ''
-      renamePlanModalVisible.value = true
-      console.log(renamePlanForm)
-    }
     let addhHistoryList = () => {
       allUserPoerationsVue.value.init({ value: 'Add', label: t('admin.add') }, '')
     }
@@ -578,33 +521,6 @@ export default defineComponent({
         gettrialList()
       })
     }
-
-    // 确认重命名
-    const confirmRenamePlan = () => {
-      if (!renamePlanForm.planName || !renamePlanForm.planName.trim()) {
-        message.warning(t('admin.PlanNameRequired'))
-        return
-      }
-
-      Https.axiosPost(Https.httpUrls.updateSubscribePlan, {
-        id: renamePlanForm.planId,
-        name: renamePlanForm.planName.trim()
-      })
-        .then((rv: any) => {
-          message.success(t('admin.RenamePlanSuccess'))
-          renamePlanModalVisible.value = false
-          fetchSubscribePlanList()
-        })
-        .catch((error: any) => {
-          message.error(error.message || t('admin.RenamePlanFailed'))
-        })
-    }
-    // 取消重命名
-    const cancelRenamePlan = () => {
-      renamePlanModalVisible.value = false
-      renamePlanForm.planId = null
-      renamePlanForm.planName = ''
-    }
     onMounted(() => {
       let allCountry: any = sessionStorage.getItem('allCountry')
       if (allCountry) {
@@ -629,15 +545,7 @@ export default defineComponent({
       ExportAccountData,
       uploadTemplate,
       deleteList,
-      deleteAagree,
+      deleteAagree
-      planFilterOptions,
-      selectPlanFilter,
-      openPlanRenameModal,
-      renamePlanModalVisible,
-      renamePlanForm,
-      confirmRenamePlan,
-      cancelRenamePlan,
-      fetchSubscribePlanList
     }
   },
   data() {
@@ -649,21 +557,10 @@ export default defineComponent({
     }
   },
   mounted() {
-    this.updateTableHeight()
+    let historyTable: any = this.$refs.historyTable
-    window.addEventListener('resize', this.updateTableHeight)
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.updateTableHeight)
-  },
-  methods: {
-    updateTableHeight() {
-      const historyTable: any = this.$refs.historyTable
-      if (historyTable) {
-        // 为底部分页器预留固定空间，使表格部分高度固定且分页器始终可见
     this.historyTableHeight = historyTable.clientHeight - 200
-      }
+  },
-    }
+  methods: {}
-  }
 })
 </script>
 <style lang="less" scoped>
@@ -693,76 +590,10 @@ export default defineComponent({
     font-size: 1.6rem;
   }
 }
-.plan_list {
+.all-user {
-  margin-top: 1rem;
+  .admin_table_content {
-  display: flex;
+    :deep(.ant-table-wrapper) {
-  // flex-wrap: wrap;
+      overflow: hidden ;
-  padding-left: 2.8rem;
-  column-gap: 0.6rem;
-  margin-bottom: 2rem;
-  .plan_item {
-    height: 4rem;
-    width: auto;
-    min-width: 10rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // font-size: 1.8rem;
-
-    font-weight: 600;
-    border-radius: 1.3rem;
-    color: #fff;
-    cursor: pointer;
-    border: 1.8px solid #000;
-    background-color: #000;
-    padding: 0 1rem 0 2rem;
-
-    &:hover {
-      color: #000;
-      background-color: #fff;
-    }
-
-    &.active {
-      background: #ffffff;
-      color: #000000;
-    }
-
-    &.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background-color: #d9d9d9;
-      border-color: #d9d9d9;
-      color: #999;
-
-      &:hover {
-        background-color: #d9d9d9;
-        color: #999;
-      }
-    }
-  }
-
-  .plan_item {
-    column-gap: 0.6rem;
-  }
-
-  .plan_more_icon {
-    font-size: 1.6rem;
-    cursor: pointer;
-  }
-}
-.subscription-plan-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rename-plan-form {
-  padding: 2rem 0;
-  .admin_state_item {
-    display: flex;
-    align-items: center;
-    > span {
-      width: 10rem;
-      margin-right: 1rem;
     }
   }
 }

src/component/Detail/DesignDetail.vue

@@ -101,7 +101,7 @@
 						</div>
 					</div>
 					<div class="contentRight canvas" v-if="selectDetail && selectDetail.id && currentDetailType" :class="{'active': isEditPattern.value}">
-						<canvasBox ref="canvasBox" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
+						<canvasBox ref="canvasBox" v-model:loadingShow="loadingShow" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -261,7 +261,7 @@ export default defineComponent({
 						}
 
 
-						detailData.loadingShow = false
+						// detailData.loadingShow = false
 						resolve(rv)
 					}
 				).catch(rv=>{

src/component/Detail/canvas/index.vue

@@ -85,6 +85,7 @@ export default defineComponent({
 			default:()=>{}
 		},
 	},
+	emits:['update:loadingShow'],
     setup(props,{emit}) {
         const store = useStore();
         const {t} = useI18n();
@@ -345,6 +346,7 @@ export default defineComponent({
 				detailData.changeSketchUpdateFrontBack = null
 			}
 			setUndivideLayer()
+			emit('update:loadingShow',false)
 		}
 		const setUndivideLayer = async ()=>{
 			await new Promise<void>(async (resolve, reject) => {

src/component/Detail/detailRight/editPrintElement.vue

@@ -53,6 +53,7 @@
 			</a-slider> -->
 			<a-popover
 				trigger="click"
+				placement="topRight"
 				destroyTooltipOnHide
 				:title="t('Canvas.repeatSetting')"
 			>
@@ -110,7 +111,7 @@
 						</ul> -->
 					</div>
 					<div class="designOpenrtion_pingpu" v-else>
-						<pingpu :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
+						<pingpu :key="selectDetail?.id" :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
 					</div>
 				</div>
 			</div>
@@ -207,7 +208,6 @@ export default defineComponent({
 			elList:[] as any,
 			selectIndex:0,
 		})
-		watch
 		const setOveralSingle = async ()=>{
 
 			await setItemPosition()
@@ -263,7 +263,7 @@ export default defineComponent({
 			setItemPosition()
 			store.commit('DesignDetail/setCurrentPrintElement',null)
 		}
-		const previewDetailPrintData = ()=>{
+		const previewDetailPrintData = (id:any = editPrintElementData.selectDetail?.id)=>{
 			let data:any = []
 			let index = 1
 			let setData = (item:any,index:number)=>{
@@ -310,7 +310,8 @@ export default defineComponent({
 			})
 			let value = {
 				data,
-				str:props.type
+				str:props.type,
+				id:id,
 			}
 			store.commit('DesignDetail/setNewDetail',value)
 		}
@@ -453,9 +454,10 @@ export default defineComponent({
 				addPrintELement(newVal)
 			}
 		})
-		watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
+		watch(()=>((editPrintElementData.selectDetail?.id)),(newVal,oldVal)=>{
 			if(!newVal)return
-			editPrintElementData.isSketchLoad = false,
+			if(oldVal)previewDetailPrintData(oldVal)
+			editPrintElementData.isSketchLoad = false
 			editPrintElementData.printStyleList[props.type] = {
 				single:[],
 				overall:[],
@@ -921,7 +923,6 @@ export default defineComponent({
 		}
 		const inputFillScale = (scale:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
-			console.log(arr,scale,editPrintElementData.imgDomIndex)
 			arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
 			editPrintElementDom.pingpuRef.updataList([
 				{

src/store/Detail/designDetail.ts

@@ -125,28 +125,32 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			// 	if(item.id == state.selectDetail.id){
 			// 	}
 			// });
+			let select = state.selectDetail
+			if(value.id){
+				select = state.designDetail.clothes.find((item:any) => item.id == value.id)
+			}
 			let {data} = value
 			let str = value.str || state.currentDetailType
-			if(!state.selectDetail)return
+			if(!select)return
-			if(!state.selectDetail.newDetail){
+			if(!select.newDetail){
-				state.selectDetail.newDetail = {}
+				select.newDetail = {}
 			}
 			if(str == 'sketch'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'color'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'print'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'element'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'models'){
 				// if(!state.designDetail.newModel)state.designDetail.newModel={}
 				state.designDetail.newModel = JSON.parse(JSON.stringify(data))
 			}else{
-				if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
+				if(!select.newDetail[str])select.newDetail[str] = []
-				const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
+				const foundObjects = select.newDetail[str].filter((item:any) => item.id === data.id);
 				if(foundObjects.length == 0){
-					state.selectDetail.newDetail[str].push(data)
+					select.newDetail[str].push(data)
 				}
 			}
 		},

src/views/AwardPage/apply.vue

@@ -312,7 +312,7 @@
 	import type { Rule } from 'ant-design-vue/es/form'
 	import { message } from 'ant-design-vue'
 	import type { UploadChangeParam } from 'ant-design-vue'
-	import VerifycationCodeInput from './components/verificationCodeInput.vue'
+	import VerifycationCodeInput from './components/VerificationCodeInput.vue'
 	import { Https } from '@/tool/https'
 	import UploadStatus from './components/UploadStatus.vue'
 

src/views/AwardPage/components/ApplySection.vue

@@ -0,0 +1,209 @@
+<template>
+	<div class="apply-container container flex flex-col" ref="applyRef">
+		<div class="title" ref="applyTitleRef">How to Apply</div>
+		<div class="sub-title" ref="applySubTitleRef">Requirments</div>
+		<div class="requirments-list flex" ref="reqListRef">
+			<div class="left flex flex-col space-between">
+				<div class="item-box" v-for="item in leftRequirment" :key="item.type">
+					<div class="item-header flex align-center">
+						<img src="@/assets/images/award/bloom_logo.png" class="logo" />
+						<div class="item-title">{{ item.type }}</div>
+					</div>
+					<div class="context" v-for="el in item.desc">
+						{{ el }}
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<div class="item-box">
+					<div class="item-box">
+						<div class="item-header flex align-center">
+							<img src="@/assets/images/award/bloom_logo.png" class="logo" />
+							<div class="item-title">{{ rightRequirment.type }}</div>
+						</div>
+						<div class="context" v-for="el in rightRequirment.desc">
+							{{ el }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { gsap } from 'gsap'
+
+const leftRequirment = ref([
+	{
+		type: 'Video',
+		desc: ['The process of doing design']
+	},
+	{
+		type: 'Design',
+		desc: [
+			'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
+			'Design sketch: Maximum 4 outfit design with proposed materials'
+		]
+	}
+])
+
+const rightRequirment = ref({
+	type: 'Submission Format',
+	desc: [
+		'Naming as “AiDA global award 2026_applicantname”',
+		'Mp4\n(1080x1920pixels/20mb within 1min)',
+		'Single PDF file\n(within 15 pages, maximum 20mb)',
+		'English or native language\nwith English translation'
+	]
+})
+
+const applyRef = ref<HTMLElement | null>(null)
+const applyTitleRef = ref<HTMLElement | null>(null)
+const applySubTitleRef = ref<HTMLElement | null>(null)
+const reqListRef = ref<HTMLElement | null>(null)
+const hasPlayedApplyAnim = ref(false)
+let applyObserver: IntersectionObserver | null = null
+
+const setupApplyInitialState = () => {
+	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	if (titleEls.length) {
+		gsap.set(titleEls, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
+	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
+	gsap.set([headers, contexts], { opacity: 0 })
+}
+
+const playApplyAnimation = () => {
+	if (hasPlayedApplyAnim.value) return
+	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
+	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
+	if (!titleEls.length) return
+
+	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+	tl.to(titleEls, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.6,
+		ease: 'back.out(1.6)',
+		stagger: 0.1
+	})
+	if (headers?.length) {
+		tl.to(
+			headers,
+			{
+				opacity: 1,
+				duration: 0.4,
+				stagger: 0.1
+			},
+			'-=0.1'
+		)
+	}
+	if (contexts?.length) {
+		tl.to(
+			contexts,
+			{
+				opacity: 1,
+				duration: 0.4,
+				stagger: 0.05
+			},
+			'-=0.05'
+		)
+	}
+
+	hasPlayedApplyAnim.value = true
+	applyObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupApplyInitialState()
+		if ('IntersectionObserver' in window) {
+			applyObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playApplyAnimation()
+						}
+					})
+				},
+				{ threshold: 0.25 }
+			)
+			if (applyRef.value) applyObserver.observe(applyRef.value)
+		} else {
+			playApplyAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	applyObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.apply-container {
+	flex: 1;
+	background: url('@/assets/images/award/apply_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding: 12.7rem 0 16.9rem;
+	.title {
+		text-align: center;
+		color: #232323;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+		margin-bottom: 3rem;
+	}
+	.sub-title {
+		text-align: center;
+		color: #b10000;
+		font-size: 3rem;
+		font-family: 'Arial';
+		font-weight: 400;
+	}
+	.requirments-list {
+		flex: 1;
+		padding-left: 41.4rem;
+		column-gap: 17.7rem;
+		margin-top: 12rem;
+		.left {
+			color: #232323;
+			height: 100%;
+		}
+		.item-box {
+			.item-header {
+				column-gap: 3.2rem;
+				.item-title {
+					color: #232323;
+					font-family: 'PoppinsBold';
+					font-weight: 600;
+					font-size: 2.8rem;
+				}
+			}
+			.context {
+				margin-top: 4rem;
+				width: 46.8rem;
+				color: #585858;
+				font-family: 'Arial';
+				font-weight: 400;
+				line-height: 3rem;
+				font-size: 2.4rem;
+				padding-left: 5.6rem;
+				white-space: pre-line;
+			}
+		}
+	}
+}
+</style>

src/views/AwardPage/components/JudgesSection.vue

@@ -0,0 +1,227 @@
+<template>
+	<div class="judges-container flex flex-col align-center">
+		<div class="title" ref="judgesTitleRef">Panel of Judges</div>
+		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+		<div class="sub-title" ref="judgesSubTitleRef">Expertise</div>
+		<div class="judgement-list" ref="judgementListRef">
+			<div
+				class="judgement-item flex flex-col align-center"
+				v-for="item in judgements"
+				:key="item.name"
+			>
+				<img :src="item.picture" class="picture" />
+				<div class="name">{{ item.name }}</div>
+				<div class="desc">{{ item.desc }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
+import { gsap } from 'gsap'
+import jae from '@/assets/images/award/jae.png'
+import diego from '@/assets/images/award/diego.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 desmond from '@/assets/images/award/desmond.png'
+
+const judgements = [
+	{
+		picture: jae,
+		name: 'Jae Hyuk Lim',
+		desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
+	},
+	{
+		picture: diego,
+		name: 'Diego Dultzin Lacoste',
+		desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
+	},
+	{
+		picture: gregory,
+		name: 'Gregory de la Hogue Moran',
+		desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
+	},
+	{
+		picture: vincenzo,
+		name: 'Vincenzo La Torre',
+		desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
+	},
+	{
+		picture: tim,
+		name: 'Tim Lim',
+		desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
+	},
+	{
+		picture: desmond,
+		name: 'Desmond Lim',
+		desc: 'Cheif Editor of Vogue\n(Singapore)'
+	}
+]
+
+const judgesTitleRef = ref<HTMLElement | null>(null)
+const judgesSubTitleRef = ref<HTMLElement | null>(null)
+const judgementListRef = ref<HTMLElement | null>(null)
+const hasPlayedJudgementAnim = ref(false)
+let judgementObserver: IntersectionObserver | null = null
+
+const setupJudgementInitialState = () => {
+	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	if (titleEls.length) {
+		gsap.set(titleEls, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+	const items =
+		judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
+	if (items?.length) {
+		gsap.set(items, {
+			opacity: 0,
+			clipPath: 'inset(0 0 100% 0)'
+		})
+	}
+}
+
+const playJudgementAnimation = () => {
+	if (hasPlayedJudgementAnim.value) return
+	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	const listEl = judgementListRef.value
+	if (!titleEls.length || !listEl) return
+
+	const items = Array.from(
+		listEl.querySelectorAll<HTMLElement>('.judgement-item')
+	)
+	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+	tl.to(titleEls, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.4,
+		ease: 'back.out(1.6)',
+		stagger: 0.1
+	})
+	if (items.length) {
+		const firstRow = items.slice(0, 3)
+		const secondRow = items.slice(3)
+
+		if (firstRow.length) {
+			tl.to(
+				firstRow,
+				{
+					opacity: 1,
+					clipPath: 'inset(0% 0% 0% 0%)',
+					duration: 0.45,
+					stagger: 0.05
+				},
+				'-=0.2'
+			)
+		}
+
+		if (secondRow.length) {
+			tl.to(
+				secondRow,
+				{
+					opacity: 1,
+					clipPath: 'inset(0% 0% 0% 0%)',
+					duration: 0.45,
+					stagger: 0.05
+				},
+				'+=0.1'
+			)
+		}
+	}
+
+	hasPlayedJudgementAnim.value = true
+	judgementObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupJudgementInitialState()
+		if ('IntersectionObserver' in window) {
+			judgementObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playJudgementAnimation()
+						}
+					})
+				},
+				{ threshold: 0.3 }
+			)
+			if (judgementListRef.value) {
+				judgementObserver.observe(judgementListRef.value)
+			}
+		} else {
+			// Fallback: play immediately if IntersectionObserver unsupported
+			playJudgementAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	judgementObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.judges-container {
+	height: 147.4rem;
+	background: url('@/assets/images/award/judges_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding-top: 12.8rem;
+	.title {
+		color: #232323;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+	}
+	.logo {
+		margin: 2.4rem 0 2.2rem;
+	}
+	.sub-title {
+		color: #b10000;
+		font-family: 'Arial';
+		font-weight: 400;
+		font-size: 3rem;
+		margin-bottom: 12rem;
+	}
+	.judgement-list {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		column-gap: 23.22rem;
+		row-gap: 8rem;
+		padding: 0 25rem 0 26.6rem;
+		.judgement-item {
+			overflow: hidden;
+			.picture {
+				width: 20.2rem;
+				height: 26rem;
+				border-radius: 0.8rem;
+			}
+			.name {
+				margin: 3rem 0 2.4rem;
+				color: #232323;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				font-size: 2.4rem;
+			}
+			.desc {
+				color: #585858;
+				font-family: 'Arial';
+				font-weight: 400;
+				font-size: 2rem;
+				white-space: pre-line;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>

src/views/AwardPage/components/PrizesSection.vue

@@ -0,0 +1,234 @@
+<template>
+	<div
+		class="prizes-container container flex align-center space-between"
+		ref="prizesRef"
+	>
+		<div class="left flex flex-col flex-center">
+			<div
+				class="title"
+				ref="prizesTitleRef"
+			>
+				Award & Prizes
+			</div>
+			<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+			<div
+				class="desc"
+				ref="prizesSubTitleRef"
+			>
+				Recongnition
+			</div>
+		</div>
+		<div
+			class="right"
+			ref="prizesRightRef"
+		>
+			<div
+				class="prize-item flex flex-col flex-center"
+				v-for="item in prizes"
+				:key="item.name"
+			>
+				<div class="prize-money">{{ item.money }}</div>
+				<div class="prize-name">{{ item.name }}</div>
+				<div class="prize-desc flex flex-col flex-center">
+					<div
+						class="desc-item"
+						v-for="el in item.desc"
+					>
+						{{ el }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { gsap } from 'gsap'
+
+	const prizes = [
+		{
+			money: 'US$5000',
+			name: 'Grand Prize',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'US$3000',
+			name: 'First Runner-Up',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'US$2000',
+			name: 'Second Runner-Up',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'Certification',
+			name: 'Finalists',
+			desc: ['Award Ceritificate', 'Global Media Exposure']
+		}
+	]
+
+	const prizesRef = ref<HTMLElement | null>(null)
+	const prizesTitleRef = ref<HTMLElement | null>(null)
+	const prizesSubTitleRef = ref<HTMLElement | null>(null)
+	const prizesRightRef = ref<HTMLElement | null>(null)
+	const hasPlayedPrizesAnim = ref(false)
+	let prizesObserver: IntersectionObserver | null = null
+
+	const setupPrizesInitialState = () => {
+		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				scale: 0,
+				transformOrigin: '50% 50%'
+			})
+		}
+		if (prizesRightRef.value) {
+			gsap.set(prizesRightRef.value, {
+				opacity: 0,
+				y: 40,
+				scale: 1.08
+			})
+		}
+	}
+
+	const playPrizesAnimation = () => {
+		if (hasPlayedPrizesAnim.value) return
+		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+
+		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+		if (titleEls.length) {
+			tl.to(titleEls, {
+				opacity: 1,
+				scale: 1,
+				duration: 0.6,
+				ease: 'back.out(1.6)',
+				stagger: 0.1
+			})
+		}
+		if (prizesRightRef.value) {
+			tl.to(
+				prizesRightRef.value,
+				{
+					opacity: 1,
+					y: 0,
+					scale: 1,
+					duration: 0.55,
+					ease: 'back.out(1.4)'
+				},
+				titleEls.length ? '-=0.15' : 0
+			)
+		}
+
+		hasPlayedPrizesAnim.value = true
+		prizesObserver?.disconnect()
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			setupPrizesInitialState()
+			if ('IntersectionObserver' in window) {
+				prizesObserver = new IntersectionObserver(
+					entries => {
+						entries.forEach(entry => {
+							if (entry.isIntersecting) {
+								playPrizesAnimation()
+							}
+						})
+					},
+					{ threshold: 0.25 }
+				)
+				if (prizesRef.value) prizesObserver.observe(prizesRef.value)
+			} else {
+				playPrizesAnimation()
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		prizesObserver?.disconnect()
+	})
+</script>
+
+<style scoped lang="less">
+	.prizes-container {
+		background: url('@/assets/images/award/prizes_bg.png') no-repeat;
+		background-size: 100% 100%;
+		padding: 0 21.4rem 0 34.2rem;
+		box-sizing: border-box;
+		.left {
+			row-gap: 3.6rem;
+			.title {
+				text-align: center;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				font-size: 4rem;
+				color: #fff;
+			}
+			.desc {
+				text-align: center;
+				color: #f95750;
+				font-family: 'Poppins';
+				font-weight: 400;
+				font-size: 3rem;
+			}
+		}
+		.right {
+			// height: 45.4rem;
+			// padding: 4.6rem 6.1rem 4.6rem 0;
+			box-sizing: border-box;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			grid-template-rows: repeat(2, 1fr);
+			row-gap: 4.2rem;
+			column-gap: 4.4rem;
+			// flex: 1;
+			.prize-item {
+				width: 35.5rem;
+				height: 32.8rem;
+				color: #fff;
+				padding: 4.5rem 0 4.8rem 0;
+				justify-content: space-between;
+				background: url('@/assets/images/award/first_bg.png') no-repeat;
+				background-size: 100% 100%;
+				&:nth-of-type(2) {
+					background: url('@/assets/images/award/second_bg.png') no-repeat;
+					background-size: 100% 100%;
+				}
+				&:nth-of-type(3) {
+					background: url('@/assets/images/award/grand_bg.png') no-repeat;
+					background-size: 100% 100%;
+				}
+				&:nth-of-type(4) {
+					background: url('@/assets/images/award/certification_bg.png')
+						no-repeat;
+					background-size: 100% 100%;
+				}
+				.prize-money {
+					font-family: 'PoppinsBold';
+					font-weight: bold;
+					font-size: 4rem;
+				}
+				.prize-name {
+					font-family: 'PoppinsMedium';
+					font-weight: 500;
+					font-size: 2.8rem;
+				}
+				.prize-desc {
+					color: #e0e0e0;
+					font-family: 'Arial';
+					font-weight: 400;
+					font-size: 2rem;
+					line-height: 3rem;
+					height: 8.9rem;
+				}
+			}
+		}
+	}
+</style>

src/views/AwardPage/components/SelectionSection.vue

@@ -0,0 +1,173 @@
+<template>
+	<div
+		class="selection-container container flex flex-col align-center"
+		ref="selectionRef"
+	>
+		<div class="title">Selection Criteria</div>
+		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+		<div class="sub-title">Evaluation</div>
+		<div class="criteria-list flex" ref="criteriaListRef">
+			<div
+				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">{{ item.name }}</div>
+				<div class="desc">{{ item.desc }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { gsap } from 'gsap'
+import criteria1 from '@/assets/images/award/criteria_1.png'
+import criteria2 from '@/assets/images/award/criteria_2.png'
+import criteria3 from '@/assets/images/award/criteria_3.png'
+import criteria4 from '@/assets/images/award/criteria_4.png'
+
+const criteriaList = ref([
+	{
+		icon: criteria1,
+		name: 'Originality',
+		desc: 'Unique perspective and innovative approach to fashion design',
+		style: { width: '13rem', height: '17rem' }
+	},
+	{
+		icon: criteria2,
+		name: 'Creativity',
+		desc: 'Artistic vision and exceptional design excellence',
+		style: { width: '16rem', height: '18rem' }
+	},
+	{
+		icon: criteria3,
+		name: 'AiDA Integration',
+		desc: 'Effective application of AI design tools and functions',
+		style: { width: '16rem', height: '18rem' }
+	},
+	{
+		icon: criteria4,
+		name: 'Execution',
+		desc: 'Quality of presentation and technical craftsmanship',
+		style: { width: '18.8rem', height: '18rem' }
+	}
+])
+
+const selectionRef = ref<HTMLElement | null>(null)
+const criteriaListRef = ref<HTMLElement | null>(null)
+const hasPlayedSelectionAnim = ref(false)
+let selectionObserver: IntersectionObserver | null = null
+
+const setupSelectionInitialState = () => {
+	const items =
+		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+	if (items.length) {
+		gsap.set(items, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+}
+
+const playSelectionAnimation = () => {
+	if (hasPlayedSelectionAnim.value) return
+	const items =
+		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+	if (!items.length) return
+
+	gsap.to(items, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.6,
+		ease: 'back.out(1.6)',
+		stagger: 0.3
+	})
+
+	hasPlayedSelectionAnim.value = true
+	selectionObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupSelectionInitialState()
+		if ('IntersectionObserver' in window) {
+			selectionObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playSelectionAnimation()
+						}
+					})
+				},
+				{ threshold: 0.25 }
+			)
+			if (selectionRef.value) {
+				selectionObserver.observe(selectionRef.value)
+			}
+		} else {
+			playSelectionAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	selectionObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.selection-container {
+	background: url('@/assets/images/award/selection_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding-top: 9.3rem;
+	.title {
+		color: #fff;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+	}
+	.logo {
+		margin: 2.3rem 0 2.3rem;
+	}
+	.sub-title {
+		color: #f95750;
+		font-family: 'Popins';
+		font-weight: 400;
+		font-size: 3rem;
+		margin-bottom: 11.8rem;
+	}
+	.criteria-list {
+		column-gap: 6rem;
+		.item {
+			height: 44rem;
+			width: 32.2rem;
+			box-sizing: border-box;
+			&:nth-of-type(3) {
+				background: url('@/assets/images/award/criteria_bg.png') no-repeat;
+				background-size: 100% 100%;
+			}
+			.icon {
+				width: 18.8rem;
+				height: 18rem;
+			}
+			.name {
+				font-family: 'PoppinsMedium';
+				font-weight: 500;
+				font-size: 2.8rem;
+				color: #fff;
+				margin: 2rem 0 5rem;
+			}
+			.desc {
+				font-family: 'Arial';
+				font-weight: 400;
+				font-size: 2.4rem;
+				color: #e0e0e0;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>

src/views/AwardPage/index.vue

@@ -114,142 +114,20 @@
 				</div>
 			</div>
 		</div>
-		<div class="judges-container flex flex-col align-center">
+		<JudgesSection />
-			<div class="title">Panel of Judges</div>
+		<PrizesSection />
-			<img
+		<ApplySection />
-				src="@/assets/images/award/bloom_logo.png"
+		<SelectionSection />
-				class="logo"
-			/>
-			<div class="sub-title">Expertise</div>
-			<div class="judgement-list">
-				<div
-					class="judgement-item flex flex-col align-center"
-					v-for="item in judgements"
-					:key="item.name"
-				>
-					<img
-						:src="item.picture"
-						class="picture"
-					/>
-					<div class="name">{{ item.name }}</div>
-					<div class="desc">{{ item.desc }}</div>
-				</div>
-			</div>
-		</div>
-		<div class="prizes-container container flex align-center">
-			<div class="left flex flex-col flex-center">
-				<div class="title">Award & Prizes</div>
-				<!-- <img
-					src="@/assets/images/award/bloom_logo.png"
-					class="logo"
-				/> -->
-				<div class="desc">Recongnition</div>
-			</div>
-			<div class="right">
-				<div
-					class="prize-item flex flex-col flex-center"
-					v-for="item in prizes"
-					:key="item.name"
-				>
-					<div class="prize-money">{{ item.money }}</div>
-					<div class="prize-name">{{ item.name }}</div>
-					<div class="prize-desc flex flex-col flex-center">
-						<div
-							class="desc-item"
-							v-for="el in item.desc"
-						>
-							{{ el }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="apply-container container flex flex-col">
-			<div class="title">How to Apply</div>
-			<div class="sub-title">Requirments</div>
-			<div class="requirments-list flex">
-				<div class="left flex flex-col space-between">
-					<div
-						class="item-box"
-						v-for="item in leftRequirment"
-						:key="item.type"
-					>
-						<div class="item-header flex align-center">
-							<img
-								src="@/assets/images/award/bloom_logo.png"
-								class="logo"
-							/>
-							<div class="item-title">{{ item.type }}</div>
-						</div>
-						<div
-							class="context"
-							v-for="el in item.desc"
-						>
-							{{ el }}
-						</div>
-					</div>
-				</div>
-				<div class="right">
-					<div class="item-box">
-						<div class="item-box">
-							<div class="item-header flex align-center">
-								<img
-									src="@/assets/images/award/bloom_logo.png"
-									class="logo"
-								/>
-								<div class="item-title">{{ rightRequirment.type }}</div>
-							</div>
-							<div
-								class="context"
-								v-for="el in rightRequirment.desc"
-							>
-								{{ el }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="selection-container container flex flex-col align-center">
-			<div class="title">Selection Criteria</div>
-			<img
-				src="@/assets/images/award/bloom_logo.png"
-				class="logo"
-			/>
-			<div class="sub-title">Evaluation</div>
-			<div class="criteria-list flex">
-				<div
-					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">{{ item.name }}</div>
-					<div class="desc">{{ item.desc }}</div>
-				</div>
-			</div>
-		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import { useRouter } from 'vue-router'
-	import criteria1 from '@/assets/images/award/criteria_1.png'
+	import JudgesSection from './components/JudgesSection.vue'
-	import criteria2 from '@/assets/images/award/criteria_2.png'
+	import SelectionSection from './components/SelectionSection.vue'
-	import criteria3 from '@/assets/images/award/criteria_3.png'
+	import ApplySection from './components/ApplySection.vue'
-	import criteria4 from '@/assets/images/award/criteria_4.png'
+	import PrizesSection from './components/PrizesSection.vue'
-
-	import jae from '@/assets/images/award/jae.png'
-	import diego from '@/assets/images/award/diego.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 desmond from '@/assets/images/award/desmond.png'
 
 	const router = useRouter()
 
@@ -300,112 +178,6 @@
 			desc: 'Winners revealed with media coverage and live showcase.'
 		}
 	])
-
-	const prizes = ref([
-		{
-			money: 'US$5000',
-			name: 'Grand Prize',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'US$3000',
-			name: 'First Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'US$2000',
-			name: 'Second Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'Certification',
-			name: 'Finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure']
-		}
-	])
-
-	const leftRequirment = ref([
-		{
-			type: 'Video',
-			desc: ['The process of doing design']
-		},
-		{
-			type: 'Design',
-			desc: [
-				'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
-				'Design sketch: Maximum 4 outfit design with proposed materials'
-			]
-		}
-	])
-	const rightRequirment = ref({
-		type: 'Submission Format',
-		desc: [
-			'Naming as “AiDA global award 2026_applicantname”',
-			'Mp4\n(1080x1920pixels/20mb within 1min)',
-			'Single PDF file\n(within 15 pages, maximum 20mb)',
-			'English or native language\nwith English translation'
-		]
-	})
-
-	const criteriaList = ref([
-		{
-			icon: criteria1,
-			name: 'Originality',
-			desc: 'Unique perspective and innovative approach to fashion design',
-			style: { width: '13rem', height: '17rem' }
-		},
-		{
-			icon: criteria2,
-			name: 'Creativity',
-			desc: 'Artistic vision and exceptional design excellence',
-			style: { width: '16rem', height: '18rem' }
-		},
-		{
-			icon: criteria3,
-			name: 'AiDA Integration',
-			desc: 'Effective application of AI design tools and functions',
-			style: { width: '16rem', height: '18rem' }
-		},
-		{
-			icon: criteria4,
-			name: 'Execution',
-			desc: 'Quality of presentation and technical craftsmanship',
-			style: { width: '18.8rem', height: '18rem' }
-		}
-	])
-
-	const judgements = [
-		{
-			picture: jae,
-			name: 'Jae Hyuk Lim',
-			desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
-		},
-		{
-			picture: diego,
-			name: 'Diego Dultzin Lacoste',
-			desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
-		},
-		{
-			picture: gregory,
-			name: 'Gregory de la Hogue Moran',
-			desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
-		},
-		{
-			picture: vincenzo,
-			name: 'Vincenzo La Torre',
-			desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
-		},
-		{
-			picture: tim,
-			name: 'Tim Lim',
-			desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
-		},
-		{
-			picture: desmond,
-			name: 'Desmond Lim',
-			desc: 'Cheif Editor of Vogue\n(Singapore)'
-		}
-	]
 </script>
 
 <style lang="less" scoped>
@@ -665,232 +437,7 @@
 			}
 		}
 	}
-	.prizes-container {
-		background: url('@/assets/images/award/prizes_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding: 0 21.4rem 0 33.4rem;
 
-		.left {
-			width: 36.2rem;
-			row-gap: 2.3rem;
-			margin-right: 27rem;
-			.title {
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-				font-size: 4rem;
-				text-align: center;
-				color: #fff;
-			}
-			.desc {
-				font-family: 'Poppins';
-				font-weight: 400;
-				font-size: 3rem;
-				text-align: center;
-				color: #f95750;
-			}
-		}
-		.right {
-			display: grid;
-			grid-template-columns: repeat(2, 35.5rem);
-			grid-template-rows: repeat(2, 32.8rem);
-			gap: 4.2rem;
-			.prize-item {
-				width: 35.5rem;
-				height: 32.8rem;
-				color: #fff;
-				padding: 4.5rem 0 4.8rem 0;
-				justify-content: space-between;
-				background: url('@/assets/images/award/first_bg.png') no-repeat;
-				background-size: 100% 100%;
-				&:nth-of-type(2) {
-					background: url('@/assets/images/award/second_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(3) {
-					background: url('@/assets/images/award/grand_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(4) {
-					background: url('@/assets/images/award/certification_bg.png')
-						no-repeat;
-					background-size: 100% 100%;
-				}
-				.prize-money {
-					font-family: 'PoppinsBold';
-					font-weight: bold;
-					font-size: 4rem;
-				}
-				.prize-name {
-					font-family: 'PoppinsMedium';
-					font-weight: 500;
-					font-size: 2.8rem;
-				}
-				.prize-desc {
-					color: #e0e0e0;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2rem;
-					line-height: 3rem;
-					height: 8.9rem;
-				}
-			}
-		}
-	}
-	.apply-container {
-		flex: 1;
-		background: url('@/assets/images/award/apply_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding: 12.7rem 0 16.9rem;
-		.title {
-			text-align: center;
-			color: #232323;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-			margin-bottom: 3rem;
-		}
-		.sub-title {
-			text-align: center;
-			color: #b10000;
-			font-size: 3rem;
-			font-family: 'Arial';
-			font-weight: 400;
-		}
-		.requirments-list {
-			flex: 1;
-			padding-left: 41.4rem;
-			column-gap: 17.7rem;
-			margin-top: 12rem;
-			.left {
-				color: #232323;
-				height: 100%;
-			}
-			.item-box {
-				.item-header {
-					column-gap: 3.2rem;
-					.item-title {
-						color: #232323;
-						font-family: 'PoppinsBold';
-						font-weight: 600;
-						font-size: 2.8rem;
-					}
-				}
-				.context {
-					margin-top: 4rem;
-					width: 46.8rem;
-					color: #585858;
-					font-family: 'Arial';
-					font-weight: 400;
-					line-height: 3rem;
-					font-size: 2.4rem;
-					padding-left: 5.6rem;
-					white-space: pre-line;
-				}
-			}
-		}
-	}
-	.selection-container {
-		background: url('@/assets/images/award/selection_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding-top: 9.3rem;
-		.title {
-			color: #fff;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-		}
-		.logo {
-			margin: 2.3rem 0 2.3rem;
-		}
-		.sub-title {
-			color: #f95750;
-			font-family: 'Popins';
-			font-weight: 400;
-			font-size: 3rem;
-			margin-bottom: 11.8rem;
-		}
-		.criteria-list {
-			column-gap: 6rem;
-			.item {
-				height: 44rem;
-				width: 32.2rem;
-				box-sizing: border-box;
-				&:nth-of-type(3) {
-					background: url('@/assets/images/award/criteria_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				.icon {
-					width: 18.8rem;
-					height: 18rem;
-				}
-				.name {
-					font-family: 'PoppinsMedium';
-					font-weight: 500;
-					font-size: 2.8rem;
-					color: #fff;
-					margin: 2rem 0 5rem;
-				}
-				.desc {
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2.4rem;
-					color: #e0e0e0;
-					text-align: center;
-				}
-			}
-		}
-	}
-	.judges-container {
-		height: 147.4rem;
-		background: url('@/assets/images/award/judges_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding-top: 12.8rem;
-		.title {
-			color: #232323;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-		}
-		.logo {
-			margin: 2.4rem 0 2.2rem;
-		}
-		.sub-title {
-			color: #b10000;
-			font-family: 'Arial';
-			font-weight: 400;
-			font-size: 3rem;
-			margin-bottom: 12rem;
-		}
-		.judgement-list {
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			column-gap: 23.22rem;
-			row-gap: 8rem;
-			padding: 0 25rem 0 26.6rem;
-			.judgement-item {
-				.picture {
-					width: 20.2rem;
-					height: 26rem;
-					border-radius: 0.8rem;
-				}
-				.name {
-					margin: 3rem 0 2.4rem;
-					color: #232323;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.4rem;
-				}
-				.desc {
-					color: #585858;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2rem;
-					white-space: pre-line;
-					text-align: center;
-				}
-			}
-		}
-	}
 	.footer {
 		height: 10rem;
 		padding-left: 21.5rem;