IHG/components/bottombtn/bottombtn.vue

<template>
	<view class="bottombtn" @click="goExDetail">
		<view class="btnitem" >
			<text>{{btnName}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		name:'bottombtn',
		props:['text'],
		data(){
			return{
				btnName:''
			}
		},
		created() {
			this.btnName=this.text
		},
		methods:{
			goExDetail(){
				this.$emit('goExDetail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bottombtn{
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);	
		border-radius: 12rpx;
		margin-left: 30rpx;
		position: fixed;
		bottom: 72rpx;
		@include flexlayout();
		.btnitem{
			@include flexlayout();
			text{
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>