<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
;
},
},
}
