aluminium-trading-uniapp-240925/components/bottom/bottomBtn.vue

<template>
	<view @click="$emit('confirm')" :style="{ 
      position: 'fixed', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      width: '100vw', 
      bottom: bottom  
    }">
		<button :style="{
			     color: color,
			     backgroundColor: backgroundColor,
			     fontSize: fontSize,
			     width: width,
			     height: height,
			     borderRadius: borderRadius
			   }">
			{{ text }}
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			color: {
				default: '#000000' // 设置默认颜色值
			},
			backgroundColor: {
				default: '#FFFFFF' // 设置默认背景颜色
			},
			fontSize: {
				default: '36rpx' // 设置默认字体大小
			},
			text: {
				default: '按钮' // 设置默认文本内容
			},
			width: {
				default: '150rpx' // 设置默认宽度
			},
			height: {
				default: '60rpx' // 设置默认高度
			},
			borderRadius: {
				default: '40rpx' // 设置默认高度
			},
			bottom: {
				default: '40rpx' // 设置默认距离底部高度
			},

		},

		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	// .container {
	// 	position: fixed;
	// 	display: flex;
	// 	justify-content: center;
	// 	/* 水平居中 */
	// 	align-items: center;
	// 	/* 垂直居中 */
	// 	width: 100%;
	// 	/* 使容器宽度覆盖整个屏幕 */
	// }

	button {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>