Lou
2023-11-08 12c6e1e7a2445bc55495c719852a902cf7196bc7
uni_modules/chenchuang-CCDropDownFilter/components/chenchuang-CCDropDownFilter/chenchuang-CCDropDownFilter.vue
@@ -1,13 +1,15 @@
<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>
                
@@ -148,10 +150,10 @@
    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 {
@@ -163,9 +165,11 @@
            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%;
@@ -177,21 +181,24 @@
                // 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;
@@ -210,9 +217,10 @@
            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;