Janie
2 years ago
2 changed files with 138 additions and 4 deletions
@ -0,0 +1,109 @@ |
|||||
|
<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> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'selectExhibitionBooth', |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
value: 0, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
value: { |
||||
|
handler: function () { |
||||
|
if (this.value) { |
||||
|
console.log(this.value); |
||||
|
this.$emit('booth-select', this.value); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
add() { |
||||
|
this.value += 1; |
||||
|
}, |
||||
|
reduce() { |
||||
|
if (this.value !== 0) { |
||||
|
this.value -= 1; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</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> |
||||
|
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue