<script setup lang="ts">
import { safeBottom } from '@/utils/constants'

const props = withDefaults(
  defineProps<{
    title?: string
  }>(),
  {
    title: '提交',
  },
)
</script>

<template>
  <view class="sub-button" :style="safeBottom">
    <button class="button">{{ props.title }}</button>
  </view>
</template>

<style lang="scss">
.sub-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;

  .button {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #ff5f3c;
    color: white;
    border-radius: 50rpx;
    margin: 20rpx;
  }
}
</style>
