zhywpt-sp/components/common/FixedFooter.vue

<template>
  <view
	class="fixed-footer-box"
	:style="{
		height: height,
	}">
		<view
			class="fixed-footer"
			:style="{
				zIndex: zIndex,
				position: fixed ? 'fixed' : 'static'
			}">
			<slot></slot>
		</view>
  </view>
</template>

<script>
export default {
	name: 'FixedFooter',
	options: { 
		styleIsolation: 'shared' ,
	},
	props: {
		fixed: {
			type: Boolean,
			default: true
		},
		zIndex: {
			type: [Number, String],
			default: 10
		},
		height: {
			type: [String, Number],
			default: '144rpx'
		}
	}
}
</script>

<style lang="scss" scoped>
.fixed-footer-box{
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}
.fixed-footer{
	position: fixed;
	padding: 24rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	z-index: 10;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	border-top: 1px solid #eee;
}
</style>