Web_TracerMethodology/components/tm-button/tm-button.vue

<template>
	<view
    :class="['tm-button-container', type === 'pramary' ? 'pramary' : '']"
     @click="btnClick" >
		<text class="btn-text">{{ btnText }}</text>
	</view>
</template>

<script>
	export default {
    props: {
      //按钮类型 default：蓝色背景按钮；pramary：线条按钮
      type: {
        type: String,
        default: 'default'
      },
      btnText: {
        type: String,
        default: '确定'
      }
    },
		methods: {
			btnClick() {
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="less">
	.tm-button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 312.5rpx;
		height: 62.5rpx;
		background: #3377FF;
		border-radius: 37.5rpx;
		border: 1.25rpx solid #3377FF;

		.btn-text {
			font-size: 22.5rpx;
			letter-spacing: 2.5rpx;
			color: #fff;
		}
	}

	.tm-button-container.pramary {
		background-color: #FFFFFF;

		 .btn-text {
		 	color: #3377FF;
		 }
	}

</style>