zhywpt-sp/components/common/FixedFooter.vue

<template>
  <view class="fixed-footer-box" :style="{height: height}">
		<view class="fixed-footer" :style="{zIndex: zIndex}">
			<slot></slot>
		</view>
  </view>
</template>

<script>
export default {
	name: 'FixedFooter',
	options: { 
		styleIsolation: 'shared' ,
	},
  props: {
	  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>