|
|
@@ -29,17 +29,18 @@
|
|
|
{{siftSort}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-show="pop_type" class="pop-box" :style="[{'top': pop_top + 'px'}]">
|
|
|
- <view class="pop-content" :class="pop_type?'pop-box-true':'pop-box-false'">
|
|
|
|
|
|
+ </view>
|
|
|
+ <view class="pop-box" :style="[{'top': pop_top + 'px'}]" :class="[{'pop-box-z':pop_type}]">
|
|
|
+ <view class="pop-content" :class="pop_type?'pop-box-true':'pop-box-false'">
|
|
|
+ <view class="">
|
|
|
+ 1111111111111111111000000000000000000000000000000000000000000000000000000000
|
|
|
</view>
|
|
|
- <view class="pop-mask" @click="pop_type = !pop_type"></view>
|
|
|
</view>
|
|
|
+ <view v-show="pop_type" class="pop-mask" @click="pop_type = !pop_type"></view>
|
|
|
</view>
|
|
|
-
|
|
|
<view class="p-12-24 box-border-box">
|
|
|
<view class="h-200" v-for="(item,index) in 10">
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -74,6 +75,7 @@
|
|
|
scroll_top: 0, //滚动条高度
|
|
|
pop_top: 0, // pop距头部距离
|
|
|
pop_type: false,
|
|
|
+ pop_type_two: false,
|
|
|
navListHeight: '', //头部模块高度
|
|
|
siftDistance: '附近', //距离筛选
|
|
|
siftSort: '距离优先', //排序筛选
|
|
|
@@ -188,40 +190,44 @@
|
|
|
<style scoped lang="scss">
|
|
|
.pop-box {
|
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
+ // height: 100vh;
|
|
|
+ height: 84rpx;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
overflow: hidden;
|
|
|
- transition: all .3s linear;
|
|
|
+ // z-index: -1;
|
|
|
+ // transition: all 0.3s ease-in-out;
|
|
|
}
|
|
|
-
|
|
|
+ // .pop-box-z {
|
|
|
+ // z-index: 2;
|
|
|
+ // transition: all 0.3s ease-in-out;
|
|
|
+ // }
|
|
|
.pop-box-true {
|
|
|
- height: 500rpx;
|
|
|
- transition: all .3s linear;
|
|
|
+ // display: block;
|
|
|
+ // transition: all .3s inherit;
|
|
|
/* 定义过渡效果 */
|
|
|
- // transform: translateY(-200px);
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
.pop-box-false {
|
|
|
- height: 0;
|
|
|
- transition: all .3s linear;
|
|
|
- /* 定义过渡效果 */
|
|
|
- // transform: translateY(0);
|
|
|
+ // display: none;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ transform: translateY(-100%);
|
|
|
}
|
|
|
|
|
|
.pop-content {
|
|
|
width: 100%;
|
|
|
- // height: 0;
|
|
|
+ height: 500rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
|
- position: relative;
|
|
|
+ position: absolute;
|
|
|
left: 0;
|
|
|
// top: var(--pop_top)px;
|
|
|
z-index: 10;
|
|
|
- transition: all .3s linear;
|
|
|
+ // transition: all .3s inherit;
|
|
|
/* 定义过渡效果 */
|
|
|
- // transform: translateY(0);
|
|
|
/* 初始平移状态 */
|
|
|
}
|
|
|
|
|
|
@@ -231,7 +237,7 @@
|
|
|
background: rgba(0, 0, 0, .5);
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
- top: 0;
|
|
|
+ // top: 0;
|
|
|
}
|
|
|
|
|
|
.siftClass {
|
