teambuy-front/pages_order/components/product/submit.vue

<template>
	<view class="submit">
		<!-- 联系客服 -->
		<!-- <view @click="$emit('service')" class="service-icon">
			<image src="@/pages_order/static/productDetail/service.png" mode="widthFix" class="service-icon-img">
			</image>
			<view class="title">
				客服
			</view>
		</view> -->

		<button open-type="share" class="service-icon">
			<uv-icon name="share-square" size="65rpx" color="black"></uv-icon>
			<view class="title">
				分享
			</view>
		</button>

		<button class="service-icon " @click="$emit('addCart')">
			<uv-icon name="shopping-cart" size="75rpx" color="black"></uv-icon>
			<view class="title">
				购物车
			</view>
		</button>

		<view class="submit-btn" @click="$emit('submit')">
			<!-- <view class="l"
			@click="$emit('addCart')">
				加入购物车
			</view> -->
			<view class="r">
				<!-- {{ submiitTitle }} -->立即下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "submit",
		props: {
			submiitTitle: {
				default: '立即购买',
				type: String,
			},
			detail: {
				default: {}
			},
		},
		data() {
			return {

			}
		},

		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		padding: 0rpx 0rpx 0rpx 20rpx;
		box-sizing: border-box;

		// 联系客服
		.service-icon {
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 0 0 0 40rpx;
			flex-shrink: 0;
			align-items: center;
			&::after{
				border: 0;
			}

			.service-icon-img {
				width: 45rpx;
				height: 45rpx;
			}

			.title {
				font-size: 26rpx;
				color: black;
				line-height: 40rpx;
			}
		}
		
		.give{
			background: rgba($uni-color, 0.1);
			padding: 6rpx 20rpx;
			border-radius: 15rpx;
			.title{
				color: $uni-color;
			}
		}

		.submit-btn {
			width: calc(100% - 400rpx);
			// height: 80rpx;
			height: 100%;
			color: #fff;
			// border-radius: 40rpx;
			font-size: 32rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border: 1rpx solid $uni-color;
			.l {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-color;
			}

			.r {
				background: $uni-color;
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>