筛选蒙层

<div class="listbox">
		<transition name="filter">
				<div class="filterbox" v-show="tkshow">
					<div class="content">
						<div class="title">
							币种
						</div>
						<div class="flexbox">
							<div>BTC</div>
							<div>ETH</div>
							<div>USDT</div>
							<div>YCW</div>
						</div>
					</div>
					<div class="btnbox flexbox">
						<div class="left btn">
							重置
						</div>
						<div class="right btn">
							确定
						</div>
					</div>
				</div>
			</transition>
			<transition name="fadet">
				<div style="" class="showad" v-show="tkshow"></div>
			</transition>
		</div>

.listbox {
			height: calc(100% - 2.56rem);
			box-sizing: border-box;
			position: relative;
			.filter-enter-active,.filter-leave-active {transition: .5s;}
			.filter-enter,.filter-leave-to {opacity: 0;transform: scale(.9);}
			.fadet-enter-active,.fadet-leave-active {transition: .2s;}
			.fadet-enter,.fadet-leave-to {opacity: 0;transform: scale(0.9);}
			//蒙层
			.showad {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: calc(100vh);
				background: rgba(0, 0, 0, 1);
				opacity: 0.4;
			}
			.filterbox {
				position: absolute;
				width: 100%;
				background-color: #FFFFFF;
				z-index: 3;
				top: 0;
				box-sizing: border-box;
				.content {
					padding: 0rem 0.853333rem;
					.title {
						color: #333;
						font-size: 0.746666rem;
						padding: 0.4rem 0.853333rem 0.6rem;
					}
					.flexbox {
						justify-content: space-between;
						padding-bottom: 1rem;
						div {
							background: #F8F8F8;
							width: 4.213333rem;
							height: 1.6rem;
							line-height: 1.6rem;
							text-align: center;
							color: #333;
							font-size: 0.693333rem;
						}
					}
				}
				.btnbox {
					border-top: 1px solid #EBEBEB;
					.btn {
						text-align: center;
						height: 2.4rem;
						width: 50%;
						line-height: 2.4rem;
						font-size: 0.853333rem;
					}
					.left {
						color: #999;
						background: #F8F8F8;
					}
					.right {
						color: #fff;
						background: #01A5F0;
					}
				}
			}
	}

export default {
		data() {
			return {
				tkshow: true, //订单筛选
				currency: 0, //订单币种
			}
		},
		methods: {
			tklick() { 
				this.tkshow = !this.tkshow;
			},
		},
}