client-app/style/task/index.scss

.hc-task-page {
    .hc-task-nav-bar {
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        background: #554D84;
        padding-top: calc(var(--status-bar-height) + 10rpx);
        z-index: 8090;
    }
    .task-nav-bar {
        position: relative;
        display: flex;
        align-items: center;
        padding: .6rem .9rem;
        color: white;
        .segmented-bar {
            position: relative;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            flex: 1;
            .task-tab-item {
                background: #291D6C;
                padding: 10rpx 16rpx;
                transition: background .2s;
                &.task-cur {
                    background: white;
                    color: #564C84;
                }
                &:first-child {
                    border-top-left-radius: 50rpx;
                    border-bottom-left-radius: 50rpx;
                }
                &:last-child {
                    border-top-right-radius: 50rpx;
                    border-bottom-right-radius: 50rpx;
                }
            }
        }
        .more-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .icon {
                position: relative;
                top: 4rpx;
                font-size: 44rpx;
            }
            .more-bar-tooltip {
                --theme-bg-color: #4D4D4D !important;
            }
        }
    }
    :deep(.zb_tooltip__popper) {
        font-size: 26rpx;
        .more-bar-item {
            position: relative;
        }
        .more-bar-item + .more-bar-item {
            margin-top: 20rpx;
        }
    }
    .controls-bar-box {
        position: relative;
        z-index: 999;
        .controls-bar {
            position: relative;
            display: flex;
            align-items: center;
            background: white;
            font-size: 44rpx;
            padding: .4rem .9rem;
            .left, .right {
                position: relative;
                flex: 1;
                display: flex;
                align-items: center;
                color: #4095E5;
                .icon + .icon {
                    margin-left: 20rpx;
                }
                .icon.cur {
                    color: #554D84;
                }
            }
            .right {
                justify-content: flex-end;
            }
        }
        .controls-filter {
            position: relative;
            font-size: 26rpx;
            display: flex;
            align-items: center;
            padding: .4rem .9rem;
            border-top: 1px solid #f3f3f3;
            background: white;
            .search-form-date {
                position: relative;
                margin-right: 20rpx;
                flex: 1;
                :deep(.search-date-input) {
                    border: 2rpx solid #e5e5e5;
                    box-sizing: border-box;
                    border-radius: 8rpx;
                    padding: 0 20rpx;
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 60rpx;
                    div {
                        flex: 1;
                    }
                }
                .content {
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    .text {
                        flex: 1;
                    }
                }
            }
            .search-form-btn {
                margin-left: 20rpx;
            }
        }
    }
    :deep(.uni-card) {
        &.is-check {
            box-shadow: #EE5B20 0 0 6rpx 2rpx !important;
        }
        .item-icon-check {
            margin-right: 10rpx;
            display: flex;
            align-items: center;
        }
    }
    .hc-bottom-bar {
        height: var(--window-bottom);
        position: absolute;
        z-index: -1;
        bottom: 0;
        width: 100%;
    }
    .hc-bottom-btn-bar {
        position: relative;
        .show-check-tabbars {
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 22rpx;
            background: white;
            .check-bar {
                font-size: 24rpx;
                margin-right: 50rpx;
                .check-box {
                    position: relative;
                    display: flex;
                    align-items: center;
                    .text {
                        margin-right: 10rpx;
                    }
                }
                .text-box {
                    margin-top: 10rpx;
                }
            }
            .btn-bar {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex: 1;
                .check-btn {
                    padding: 0;
                    display: inline-block;
                    line-height: initial;
                    font-size: 24rpx;
                    height: 54rpx;
                    width: 144rpx;
                    border: 3rpx solid #EE5B20;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #EE5B20;
                    background-color: white;
                    border-radius: 100rpx;
                    &:after {
                        display: none;
                    }
                }
                .check-btn.cancel {
                    border-color: #4F4F4F;
                    color: #4F4F4F;
                }
            }
        }
    }
    .task-popup-content {
        position: relative;
        padding: 0 24rpx;
        .title {
            color: #8E8E93;
            font-size: 28rpx;
            margin-bottom: 38rpx;
            text-align: center;
        }
        .popup-btn::after {
            display: none;
        }
        .popup-argument-bar {
            position: relative;
            margin-bottom: 24rpx;
            .argument-input {
                border: 2rpx solid #cbcbcb;
                border-radius: 8rpx;
                line-height: initial;
                font-size: 26rpx;
                padding: 20rpx;
                width: 100%;
            }
        }
        .popup-btn-bar {
            position: relative;
            .c1 {
                background-color: #554D84;
            }
            .c2 {
                background-color: #EE5B20;
            }
            .c3 {
                background-color: #BFBFBF;
            }
            .c4 {
                background-color: #81B337;
            }
        }
        .popup-btn-bar + .popup-btn-bar {
            margin-top: 24rpx;
        }
    }
}