Web_TracerMethodology/components/com-button/com-button.vue

<template>
	<view 
	  :class="{'com-button': true, 'default': defaultClass }" 
		:style="{width: btnWidth, height: btnHeight, borderRadius: btnRadius,background:background,marginBottom:btnMarginBottom}"
		 @click="btnClick">
		<text class="btn-text" :style="{fontSize: fSize}">{{ btnText }}</text>
	</view>
</template>

<script>
	export default {
		props:{
	
			width: { // 按钮宽度(直接写设计稿量取大小即可
				type: Number,
				default: () => {
					return  160 
				}
			},
			height: { // 按钮宽度(直接写设计稿量取大小即可
				type: Number,
				default: () => {
					return  64 
				}
			},
			btnText: {
				type: String,
				default: () => {
					return  '完成' 
				}
			},
			fontSize: {
				type: Number,
				default: () => {
					return  28 
				}
			},
			marginBottom:{
				type: Number,
				default: () => {
					return  0 
				}
			},
			type: {
				type: String,
				default: () => {
					return 'pramary' 
				}
			},
			background: {
				type: String,
				default: () => {
					return 'linear-gradient(90deg, #3377FF 0%, #4D97FF 100%)' 
				}
			}
		},
		computed: {
			btnWidth() {
				return this.width * 750 / 1200 + 'rpx';
			},
			btnHeight() {
				return this.height * 750 / 1200 + 'rpx';
			},
			btnRadius() {
				return this.height / 2 * 750 / 1200 + 'rpx';
			},	
			fSize() {
				return this.fontSize * 750 / 1200 + 'rpx';
			},
			btnMarginBottom() {
				return this.marginBottom * 750 / 1200 + 'rpx';
			},
			defaultClass() {
				return this.type === 'default' ? true : false
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			btnClick() {
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="less" scoped>
	.com-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 62.5rpx;
		height: 31.25rpx;
		background: linear-gradient(90deg, #3377FF 0%, #4D97FF 100%);
		border-radius: 37.5rpx;
		overflow: hidden;
		color: #FFFFFF;
		
		.btn-text {
			font-size: 10.93rpx;
		}
	}
	
	.default {
		background: #E6EAF2!important;
		color: #7A8599;
	}

</style>