yicangzongtai_app_240321/pages/task/components/task-bottom-btn.vue

<template>
	<view class="task-bottom-btn" :style="{'height': paddTop + bottomBoxH +'rpx'}">
		<view class="bottom-btn-box"
			:style="{'backgroundColor':pageBgc , 'height': paddTop + bottomBoxH +'rpx' , paddingTop:paddTop +'rpx' }">
			<view class="bottom-bgn-bg" :style="{'backgroundColor':bgColor, 'height': bottomBoxH +'rpx' ,  }">
				<view class="bottom-btn"  @click.stop="onClick()" :style="{'background': btnColor}">
					{{btnName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pageBgc: {
				type: String,
				default: 'transparent',
			},
			bgColor: {
				type: String,
				default: '#fff',
			},
			btnColor: {
				type: String,
				default: ''
			},
			paddTop: {
				type: Number,
				default: 0,
			},
			btnName: {
				type: String,
				default: '',
				required: true
			}
		},
		data() {
			return {
				bottomBoxH: 148
			}
		},
		methods: {
			onClick() {
				this.$emit('onClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-bottom-btn {
		width: 100%;

		.bottom-btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.bottom-bgn-bg {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
			}

			.bottom-btn {
				width: 690rpx;
				height: 80rpx;
				background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: Regular;
				text-align: center;
				color: #ffffff;
				line-height: 80rpx;
			}
		}

	}
</style>