<template>
  <view class="button-wrapper" hover-class="hover-button" hover-stay-time="50" :style="{
    backgroundColor: bgColor, color: color, borderColor: bdColor, fontSize: size +'rpx' }" @tap="emits('click')">
    <slot />
  </view>
</template>

<script setup>
const props = defineProps({
  bgColor: { type: String, default: '' },
  color: { type: String, default: '' },
  bdColor: { type: String, default: '' },
  size: { type: Number }
})
const emits = defineEmits(['click']) 
</script>

<style lang="scss" scoped>
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 90%;
  height: 110rpx;
  background-color: $v-primary;
  color: #fff;
  border-radius: 14rpx;
  font-size: 32rpx;
  border: 1rpx solid transparent;
  // background-color: transparent;
}

.hover-button {
  opacity: 0.5;
}
</style>
