duck/pages/product/common/klonButtom.vue

<template>
	<view class="klon-buttom">
		<view class="klon-frame">
			<button type="primary" class="klon-buy" @click="buy(1)" v-if="goodsObjact.stock > 0">
				<view class="klon-buyText">立即购买</view>
			</button>
			<button type="primary" class="klon-no" v-if="goodsObjact.stock < 1">
				<view class="klon-buyText">已售罄</view>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goodsObjact: {
			type: Object,
			default: function () {
				return {
					
				}
			}
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		buy(data){
			this.$emit('buy',data)
		}
	}
};
</script>

<style lang="scss">
.klon-buttom {
	position: fixed;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 100rpx;
	padding: 10rpx 30rpx;
	background-color: #ffffff;
	.klon-frame {
		width: 100%;
		.klon-buy {
			border-radius: 100rpx;
			// background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
			background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
		}
		.klon-no {
			border-radius: 100rpx;
			background: #999999;
		}
		.klon-buyText {
			font-size: 34rpx;
			width: 100%;
		}
	}
}
</style>