shicai/pages/product/common/productBottom.vue

<template>
	<view class="page-bottom">
		<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn"><image src="/static/img/img23.png"></image></navigator>
		<view class="action-btn-group">
			<button type="primary" class=" action-btn no-border add-cart-btn" @click="buy(2)">加入购物车</button>
			<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
		</view>
	</view>
</template>

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

<style lang="scss">
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 120rpx;
	background-color: #ffffff;
	/* box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16rpx; */
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 96rpx;
		height: 80rpx;
		.iconfont {
			font-size: 40rpx;
			line-height: 48rpx;
			color: $font-color-light;
		}
		&.active,
		&.active .iconfont {
			color: $uni-color-primary;
		}
		.iconlikefill {
			font-size: 46rpx;
		}
		image {
			width: 56rpx;
			height: 58rpx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76rpx;
		border-radius: 100px;
		overflow: hidden;
		margin-left: 20rpx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28rpx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 270rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;
			&.buy-now-btn {
				background-color: #303e49;
			}
			&.add-cart-btn {
				background-color: $base-color;
			}
		}
	}
}
</style>