<!-- 页面描述 -->
<template>
    <view :style="{ bottom: bottomSafeAreaHeight() }" class="jy-bottom-btn">
        <button class="bottom-btn" @click="emit('click')">
            <slot></slot>
        </button>
    </view>
    <!-- 幽灵盒子 -->
    <view class="jy-bottom-btn-ghost"></view>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { bottomSafeAreaHeight } from '@/components/public/Mixins.js'
const emit = defineEmits(['click'])
</script>
<style scoped lang="scss">
.jy-bottom-btn-ghost {
    height: 200rpx;
}

.jy-bottom-btn {
    // 定位
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    width: 100%;
}

.bottom-btn {
    background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
    font-size: 32rpx;
    color: #FFFFFF;
    width: 100%;
    margin: 20rpx;
}
</style>