.w-filter-order {
        .fz(12px);
    
        .u-label {
            .none;
        }
        .u-toggle {
            .pa;
            .rt(0);
            padding: 6px 10px;
            .pointer;
    
            .el-icon-arrow-up {
                .none;
            }
    
            &.on {
                .el-icon-arrow-down {
                    .none;
                }
                .el-icon-arrow-up {
                    .db;
                }
            }
        }
        .u-mode {
            .mr(15px);
            .pointer;
            i {
                .mr(2px);
            }
            &.on {
                color: @primary;
            }
            &:hover {
                color: @pink;
            }
        }
    }
    @media screen and (max-width: @ipad) {
        .w-filter-order {
            .pr;
            background-color: @bg-light;
            border: 1px solid #ddd;
            .r(4px);
            user-select: none;
            padding: 6px 0;
            padding-right:20px;
    
            &.on {
                .u-options {
                    .db;
                }
    
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
    
            .u-label {
                padding: 0 10px;
                .pointer;
                .db;
            }
            .u-options {
                .pa;
                .lt(-1px, 29px);
                padding: 5px 0;
                .w(100%);
                background-color: #fff;
                border: 1px solid #ddd;
                .z(2);
                .u-mode {
                    .db;
                    padding: 7px 10px;
                    .pr;
                    .ml(0);
                }
                .none;
            }
        }
    }
    @media screen and (max-width: @phone) {
        .w-filter-order {
            .none;
        }
    }