<!--
 * @Author: ch
 * @Date: 2022-03-26 10:06:38
 * @LastEditors: ch
 * @LastEditTime: 2022-03-31 21:16:11
 * @Description: file content
-->
<template>
	<button :class="`btn btn__${type} btn__${size}${(disabed ? ' btn__disabed' : '')}`" @click="click"><slot></slot></button>
</template>
<script>
export default {
	props : {
		type : {
			type : String,
			default : 'line' //gradual 渐变色 solid 纯色 line轻线条 primaryLine
		},
		size : {
			type : String,
			default : 'normal' //normal 60 max 80
		},
		disabed:{
			type : Boolean,
			default : false
		}
	},
	methods:{
		click(){
			!this.disabed && this.$emit('click');
		}
	}
}
</script>
<style lang="scss" scoped>
.btn{
	display: inline-block;
	padding: 0 50rpx;
	border-radius: 50rpx;
	&__normal{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
	}
	&__max{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}
	&__gradual{
		background: linear-gradient(270deg, #FF7F39 0%, #FFA35B 100%);
		color: #fff;
	}
	&__solid{
		background: #FF875B;
		color: #fff;
	}
	&__line{
		background: none;
		color: #333;
		border: 1px solid rgb(192, 185, 185);
	}
	&__primaryLine{
		background: none;
		color: #FF875B;
		border: 1px solid #FF875B;
	}
	&__disabed{
		opacity: .8;
	}
}
</style>