You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.1 KiB
133 lines
3.1 KiB
<template>
|
|
<div class="group">
|
|
<div class="tw-text-[16px] tw-text-[#9c9c9c] tw-mb-[20px]">
|
|
大大會提供每實收攤位(贈攤不計列)單件 7 噸內，至多 3 件免費服務，請詳實填寫逾期申請或現場追加，恕不受理。
|
|
</div>
|
|
<div class="tw-grid tw-grid-cols-[199px_auto] tw-gap-[15px]">
|
|
<div class="tw-text-[16px] tw-text-black">
|
|
實收攤位數 <span class="tw-text-[12px]">(9平方米/攤位)</span><span class="tw-text-[#ef5a5a]">*</span>：
|
|
</div>
|
|
<div class="tw-flex tw-justify-between tw-items-center tw-max-w-[165px]">
|
|
<!-- <div class="t12 tw-mr-[35px] tw-text-neutrals-900 tw-hidden md:tw-block md:t16 md:tw-font-normal">
|
|
${{ price.toLocaleString() }} {{ currency }}
|
|
</div> -->
|
|
<button :class="[
|
|
'custom-button button-reduce tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-mr-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-mr-[42px]',
|
|
value == 0 ? 'tw-bg-neutrals-200' : 'tw-bg-primary-default',
|
|
]" @click="reduce()">
|
|
reduce
|
|
</button>
|
|
<div class="tw-min-w-[24px] tw-text-center md:t18 md:tw-font-normal">
|
|
{{ value }}
|
|
</div>
|
|
<button :class="[
|
|
'custom-button button-add tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-ml-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-text-medium md:tw-ml-[42px]',
|
|
]" @click="add()">
|
|
add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="validation.length == false" style="font-size: 16px; color: #ef5a5a; margin-top: 10px; margin-left: 90px;">{{ $t("Required.") }}</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'selectExhibitionBooth',
|
|
components: {
|
|
|
|
},
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
value: 0,
|
|
validation:{
|
|
length: true
|
|
},
|
|
errors: null,
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler: function () {
|
|
|
|
this.$emit('booth-select', this.value);
|
|
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.value += 1;
|
|
},
|
|
reduce() {
|
|
if (this.value !== 0) {
|
|
this.value -= 1;
|
|
}
|
|
},
|
|
validators() {
|
|
if(this.value == 0) {
|
|
|
|
this.validation.length = false;
|
|
|
|
} else{
|
|
|
|
this.validation.length = true;
|
|
|
|
}
|
|
this.errors = Object.entries(this.validation).filter(
|
|
(e) => e[1] == false
|
|
);
|
|
if (this.errors.length > 0) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.custom-button {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px;
|
|
}
|
|
|
|
.button {
|
|
&-reduce {
|
|
background-image: url("~/assets/svg/reduce.svg");
|
|
background-color: #e5e5e5;
|
|
}
|
|
|
|
&-add {
|
|
background-image: url("~/assets/svg/add.svg");
|
|
background-color: #f48800;
|
|
}
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s reverse;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|