| | |
| | | <template> |
| | | <view class="filter-wrapper" :style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }" @touchmove.stop.prevent="discard"> |
| | | <view class="filter-wrapper" :style="{ height: height + 'rpx','border-top':border?'1rpx solid #f2f2f2':'none' }" @touchmove.stop.prevent="discard"> |
| | | <view class="inner-wrapper"> |
| | | <view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view> |
| | | <view class="navs"> |
| | | <view class="c-flex-align" :class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (navData.length-1), actNav: index === actNav }" v-for="(item, index) in navData" :key="index" @click="navClick(index)"> |
| | | <!-- v-if改v-show --> |
| | | <view v-for="(child, childx) in item" :key="childx" v-show="child.select">{{ child.name }}</view> |
| | | <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image> |
| | | <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image> |
| | | <view v-for="(child, childx) in item" :key="childx" v-show="child.select" style="margin-right:16rpx;">{{ child.name }}</view> |
| | | <!-- <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image> |
| | | <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image>--> |
| | | <u-icon name="arrow-up-fill" color="#017BFC" v-if="index === actNav" size="14" ></u-icon> |
| | | <u-icon name="arrow-down-fill" color="#666666" size="14" v-else></u-icon> |
| | | </view> |
| | | |
| | | |
| | |
| | | flex-direction: column; |
| | | } |
| | | .filter-wrapper { |
| | | position: fixed; |
| | | left: 0; |
| | | // position: fixed; |
| | | // left: 0; |
| | | width: 100%; |
| | | z-index: 999; |
| | | // z-index: 999; |
| | | .inner-wrapper { |
| | | // position: relative; |
| | | .navs { |
| | |
| | | justify-content: space-between; |
| | | background-color: #fff; |
| | | // border-bottom: 2rpx solid #f5f6f9; |
| | | color: #8b9aae; |
| | | // color: #8b9aae; |
| | | color:#666; |
| | | z-index: 999; |
| | | box-sizing: border-box; |
| | | font-size:28rpx; |
| | | & > view { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | // justify-content: flex-end; |
| | | } |
| | | .actNav { |
| | | color: #4d7df9; |
| | | // color: #4d7df9; |
| | | color:#017BFC; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | .mask { |
| | | z-index: 666; |
| | | position: fixed; |
| | | top: calc(var(--status-bar-height) + 44px); |
| | | // top: calc(var(--status-bar-height) + 44px); |
| | | top:0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background-color: rgba(0, 0, 0, 0); |
| | | transition: background-color 0.15s linear; |
| | | z-index: 100; |
| | | &.show { |
| | | background-color: rgba(0, 0, 0, 0.01); |
| | | background-color: rgba(0, 0, 0, 0.3); |
| | | } |
| | | &.hide { |
| | | display: none; |
| | |
| | | display: none; |
| | | .item-opt { |
| | | height: 80rpx; |
| | | padding: 0 40rpx; |
| | | color: #8b9aae; |
| | | border-bottom: 2rpx solid #f5f6f9; |
| | | padding: 0 30rpx; |
| | | // color: #8b9aae; |
| | | color:#666; |
| | | border-bottom: 2rpx solid #F5F5F5; |
| | | } |
| | | .actOpt { |
| | | color: #4d7df9; |