konggang-city-miniprogram/components/footer-share/footer-share.vue

<template>
	<view class="footer-share-box display-around">
		<view class="display-flex-start items-center share-font" :style="{'border-right': isCollection ? '1px solid #d8d8d8' : 'none'}">
			<view style="margin-right:15rpx;font-size: 26rpx;">分享</view>
			<image src="../../static/share_icon.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
		</view> 
		<view class="display-flex-start items-center share-font" v-if='isCollection'>
			<view style="margin-right:15rpx;font-size: 26rpx;">收藏</view>
			<image src="../../static/collection.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"footer-share",
		props:{
			isCollection: {
			  type: Boolean,
			  default:false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
   .footer-share-box {
	   height: 50rpx;
	   position: fixed;
	   bottom: 0;
	   width: 100%;
	   border-radius: 10rpx;
	   box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
	   padding: 20rpx;
	   background: #fff;
   }
   .share-font {
	   width: 45%;
	   justify-content: center;
   }
</style>