uniapp底部筛选

<template>
	<view class="bottom">
		<view v-if="!issingle" class="bottomscreen" :style="{'margin-top': sysheight+'px'}">
			<view class="bottomscreen_left" @click="selectleft">{{content1}}<text class="iconfont icon-xiangxia"></text></view>
			<view class="bottomscreen_hr"></view>
			<view class="bottomscreen_right" @click="selectright">{{content2}}<text class="iconfont icon-xiangxia"></text></view>
		</view>
		<view v-else class="bottomscreen" :style="{'margin-top': sysheight+'px'}">
			<view class="bottomscreen_left" @click="selectleft">{{content1}}<text class="iconfont icon-xiangxia"></text></view>
			 
		</view>
	</view>
	 
</template>

<script>
	const  sysinfo =uni.getSystemInfoSync();
	export default {
		name: "bottomscreen",
		props:{
			content1:{
				type:String,
				default:"筛选分类"
			},
			content2:{
				type:String,
				default:"筛选日期"
			},
			issingle:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
                 sysheight:sysinfo.screenHeight-130
			};
		},
		methods:{
			selectleft(){
				this.$emit('selectleft');
			},
			selectright(){
				this.$emit('selectright');
			}
		}
	}
</script>

<style lang="scss">
	.bottom{
		 position: fixed; 
		  width: 100%; 
		  z-index: 999;
		  height: 0px;
 
		.bottomscreen {
				display: flex; 
				font-size: 13px;  
				letter-spacing: 1px; 
				box-shadow: $box-shadow;
				background-color: #F8F8F8;
				justify-content: space-evenly; 
				 height: 100px;
				line-height: 50px;		
				.bottomscreen_left { 
					 
					text {
						margin-left: 5px;
						vertical-align: middle;
					}
				}
		
				.bottomscreen_hr {
					width: 1px;
					height: 15px;
					margin-top: 18px;
					background-color: #3B3B3B;
				}
		
				.bottomscreen_right {
					text {
						margin-left: 5px;
						vertical-align: middle;
					}
				}
			}
		
	}
</style>