uniapp 底部跟随滚动效果底部安全距离 组件

uniapp yekong

uniapp 底部跟随滚动效果底部安全距离

		<div class="footer">
			<div class="payPrice">待支付:<div class="n1">¥</div>
				<div class="n2">78.6</div>
			</div>
			<div class="paybut">立即支付</div>
		</div>
		.footer {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.payPrice {
			font-family: SourceHanSansSCVF-Regular;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			font-weight: 400;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.n1 {
				font-family: PingFangSC-Medium;
				font-size: 24rpx;
				color: #EF4034;
				text-align: center;
				font-weight: 500;
				margin-right: 5rpx;
			}

			.n2 {
				font-family: PingFangSC-Medium;
				font-size: 36rpx;
				color: #EF4034;
				font-weight: 500;
			}
		}

		.paybut {
			width: 180rpx;
			height: 65rpx;
			background-image: linear-gradient(179deg, #F87464 1%, #EF4034 100%);
			border-radius: 9rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-family: PingFangSC-Medium;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
			margin-right: 30rpx;
			margin-left: 54rpx;
		}
	}

喜欢