Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
李志鹏
@@ -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,
|
||||
watch
|
||||
onMounted
|
||||
} 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 { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
|
||||
import { Modal, message } from 'ant-design-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: '',
|
||||
subscriptionPlanId: ''
|
||||
userName: ''
|
||||
})
|
||||
|
||||
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.subscriptionPlanId = '')
|
||||
(filterData.userName = '')
|
||||
}
|
||||
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,
|
||||
subscriptionPlanId: filterData.subscriptionPlanId
|
||||
userName: filterData.ids
|
||||
}
|
||||
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,
|
||||
planFilterOptions,
|
||||
selectPlanFilter,
|
||||
openPlanRenameModal,
|
||||
renamePlanModalVisible,
|
||||
renamePlanForm,
|
||||
confirmRenamePlan,
|
||||
cancelRenamePlan,
|
||||
fetchSubscribePlanList
|
||||
deleteAagree
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -649,21 +557,10 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateTableHeight()
|
||||
window.addEventListener('resize', this.updateTableHeight)
|
||||
let historyTable: any = this.$refs.historyTable
|
||||
this.historyTableHeight = historyTable.clientHeight - 200
|
||||
},
|
||||
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 {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
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;
|
||||
.all-user {
|
||||
.admin_table_content {
|
||||
:deep(.ant-table-wrapper) {
|
||||
overflow: hidden ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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=>{
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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([
|
||||
{
|
||||
|
||||
@@ -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(!state.selectDetail.newDetail){
|
||||
state.selectDetail.newDetail = {}
|
||||
if(!select)return
|
||||
if(!select.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] = []
|
||||
const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
|
||||
if(!select.newDetail[str])select.newDetail[str] = []
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
209
src/views/AwardPage/components/ApplySection.vue
Normal file
209
src/views/AwardPage/components/ApplySection.vue
Normal file
@@ -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>
|
||||
227
src/views/AwardPage/components/JudgesSection.vue
Normal file
227
src/views/AwardPage/components/JudgesSection.vue
Normal file
@@ -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>
|
||||
234
src/views/AwardPage/components/PrizesSection.vue
Normal file
234
src/views/AwardPage/components/PrizesSection.vue
Normal file
@@ -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>
|
||||
173
src/views/AwardPage/components/SelectionSection.vue
Normal file
173
src/views/AwardPage/components/SelectionSection.vue
Normal file
@@ -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>
|
||||
@@ -114,142 +114,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="judges-container flex flex-col align-center">
|
||||
<div class="title">Panel of Judges</div>
|
||||
<img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
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>
|
||||
<JudgesSection />
|
||||
<PrizesSection />
|
||||
<ApplySection />
|
||||
<SelectionSection />
|
||||
</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 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'
|
||||
|
||||
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'
|
||||
import JudgesSection from './components/JudgesSection.vue'
|
||||
import SelectionSection from './components/SelectionSection.vue'
|
||||
import ApplySection from './components/ApplySection.vue'
|
||||
import PrizesSection from './components/PrizesSection.vue'
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user