@charset "UTF-8";
@import "./lj-style-variable.less";

/*L1_PDA CSS Style ___________________start*/
.middle_center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.shadow_border {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}
.word_one_line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sign-code {
    // margin: auto 5px auto auto;
    margin: 2px 5px 2px auto;
    border: 1px solid @colorPass;
    color: @colorPass;
    border-radius: 10px;
    padding: 0 5px;
    line-height: 22px;
    height: 22px;
    // font-weight: bold;

    &.time {
        border-color: @colorNormal;
        color: @colorNormal;
    }
    &.code {
        border-color: @colorOrange;
        color: @colorOrange;
    }
    &.outrep {
        border-color: @vuxPrimaryActive;
        color: @vuxPrimaryActive;
    }
    &.no_outtype {
        border-color: @homeModuleContentLabelColor;
        color: @homeModuleContentLabelColor;
    }
}

// 销售出仓扫码，重置
.muti-order-section {
    > .van-cell {
        padding: 5px 10px;
        > .van-icon {
            margin: auto 0;
            margin-left: 5px;
        }
    }
    .van-collapse-item__content {
        padding: 5px 10px;
    }
}
// 订单或条码状态
.state-box {
    position: relative;
    display: table-cell;
    .save-state, .salelock-state {
        position: absolute;
        top: 0;
        right: -24px;
        bottom: 0;
        margin: auto;
        z-index: 1;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        text-align: center;
        line-height: 20px;

        .iconfont {
            position: relative;
            font-size: 14px;
            color: #fff;
        }
    }
    .save-state {
        background: linear-gradient(to right, @colorNormal, @museSuccess);
    }
    .salelock-state {
        background: linear-gradient(to right, @colorSharpTextRed, @colorRed);
    }
}
// 处理van-cell左侧条码内容超出
.lj-cell-left {
    .van-cell__title {
        flex: 1;
        padding-right: 5px;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__value {
        flex: none;
        flex-shrink: 0;
        max-width: 80%;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.lj-cell-right {
    .van-cell__title {
        flex: none;
        flex-shrink: 0;
        max-width: 80%;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__value {
        flex: 1;
        padding-left: 5px;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .van-cell__label {
        color: rgba(60, 60, 67, 0.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
// pda扫描按钮
.handle-scan-btn {
    display: flex;
    color: @colorPass;
}
// pda头部右侧菜单栏
.inware_header-right {
    position: relative;
    .header-clear_btn {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        font-size: 12px;
    }
}
// pda通用组件lj-selorder
.select-order {
    .barcode-item-value {
        .item-default {
            .middle_center();
            height: 100%;
            flex-direction: column;
            align-items: flex-end!important;

            .storage-tag {
                margin-bottom: 2px;
            }
            .item-code {
                .sign-code();
            }
        }
    }
}

// pda多单扫描通用样式
.onware_info-wrapper {
    position: relative;
    min-height: 100%;
    overflow: auto;

    .select-control-main {
        margin: 10px;

        .search-input-box {
            .shadow_border();
            position: relative;
            display: flex;
            align-items: stretch;
            display: -webkit-flex;
            
            .search-input {
                flex: 1;
                margin: auto 0;
            }
            .search-btn {
                height: inherit;
                flex-shrink: 0;
                background-color: @colorPass;
                border: 1px solid @colorPass;
            }
        }
        .van-cell {
            padding: 8px 10px;
        }
        .general_setting {
            background-color: @appBarBackgroundColor;
            .shadow_border();
            width: 100%;
            text-align: left;
            border-radius: 10px!important;
            margin-bottom: 10px;
        }
    }
    .main-list {
        position: relative;

        .barcode-widget {
            .title {
                .iconfont {
                    font-size: 14px;
                    margin-right: 2px
                }
            }
            .item-default {
                .middle_center();
                height: 100%;
                flex-direction: column;
                .item-code {
                    .sign-code();
                }
                .item-name {
                    margin: 2px 2px 2px auto;
                    padding: 0 5px;
                    line-height: 22px;
                    height: 22px;
                    span {
                        .word_one_line();
                    }

                    .field {
                        color: @light-label-tertiary;
                        margin-right: 2px;
                    }
                    .field-value {
                        color: @light-label-secondary;
                    }
                    .field-value-primary {
                        color: @light-label-primary;
                    }
                }
            }
        }
    }
    .divider {
        position: relative;
        display: flex;
        align-items: center;
        margin: 3px 0;
        color: #999;
        font-size: 12px;
        transform: scale(0.9);

        &::before, &::after{
            content: "";
            display: block;
            flex: 1;
            box-sizing: border-box;
            height: 1px;
            border-color: #d3d3d3;
            border-style: solid;
            border-width: 1px 0 0;
            transform: scaleY(0.5);
        }
        &::before {
            margin-right: 10px;
            max-width: 15px;
        }
        &::after {
            margin-left: 10px;
        }
    }
}
// .onware_info-wrapper {
//     min-height: 100%;
//     overflow: auto;

//     .select-control-main {
//         margin: 10px;

//         .search-input-box {
//             .shadow_border();
//             display: flex;
//             height: 36px;
//             margin-top: 10px;
            
//             .search-input {
//                 flex: 1;
//                 margin: auto 0;
//             }
//             .search-btn {
//                 height: 100%;
//                 flex-shrink: 0;
//                 background-color: @colorPass;
//                 border: 1px solid @colorPass;
//             }
//         }
//         .van-cell {
//             padding: 8px 10px;
//         }
//         .general_setting {
//             background-color: @appBarBackgroundColor;
//             .shadow_border();
//             width: 100%;
//             text-align: left;
//             border-radius: 10px!important;
//         }
//     }
//     .main-list {
//         position: relative;

//         .barcode-widget {
//             .item-default {
//                 .middle_center();
//                 height: 100%;
//                 flex-direction: column;
//                 .item-code {
//                     .sign-code();
//                 }
//                 .item-name {
//                     margin: 2px 2px 2px auto;
//                     padding: 0 5px;
//                     line-height: 22px;
//                     height: 22px;
//                     span {
//                         .word_one_line();
//                     }
//                 }
//             }
//         }
//     }
// }

// pda直接扫描通用样式
.inware_info-wrapper {
    overflow: auto;

    .divider + .header-layout {
        padding-top: 0;
    }
    .header-layout {
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;

        .search-control {
            .control-main {
                background-color: @appBarBackgroundColor;
                .shadow_border();
            }
            .van-cell {
                padding: 8px 10px;
            }
             .general_setting {
                background-color: @appBarBackgroundColor;
                margin-top: 10px;
                .shadow_border();
                width: 100%;
                text-align: left;

                .reason-cell {
                    transition: all 0.2s ease-in-out;
                }
            }
        }
        .indicator_board {
            margin-bottom: 15px;
            .board-box {
                position: relative;
                display: flex;
                width: 100%;

                > span {
                    flex: 1;
                    margin: 0 2px;
                    padding: 3px;
                    border: 1px solid @colorPass;
                    background-color: @colorPassThr;
                    color: @colorPass;
                    border-radius: 5px;
                    font-size: 12px;
                    text-align: center;
                
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    
                    &:last-child {
                        max-width: 50px;
                    }
                    &.normal {
                        border: 1px solid @colorNormal;
                        background-color: @colorNormalThr;
                        color: @colorNormal;
                    }
                    &.back {
                        border: 1px solid @colorAlert;
                        background-color: @colorAlertThr;
                        color: @colorAlert;
                    }
                }
            }
        }
    }
    .divider {
        position: relative;
        display: flex;
        align-items: center;
        margin: 3px 0;
        color: #999;
        font-size: 12px;
        transform: scale(0.9);

        &::before, &::after{
            content: "";
            display: block;
            flex: 1;
            box-sizing: border-box;
            height: 1px;
            border-color: #d3d3d3;
            border-style: solid;
            border-width: 1px 0 0;
            transform: scaleY(0.5);
        }
        &::before {
            margin-right: 10px;
            max-width: 15px;
        }
        &::after {
            margin-left: 10px;
        }
    }
    .select-control-main {
        margin: 10px;

        .search-input-box {
            .shadow_border();
            position: relative;
            display: flex;
            align-items: stretch;
            display: -webkit-flex;
            
            .search-input {
                flex: 1;
                margin: auto 0;
            }
            .search-btn {
                height: inherit;
                flex-shrink: 0;
                background-color: @colorPass;
                border: 1px solid @colorPass;
            }
        }
    }
}

.line_bottom-enter,
.line_bottom-leave-to {
    opacity: 0;
    transform: translateY(100%);
}
.line_bottom-enter-active,
.line_bottom-leave-active {
    transition: all 0.1s ease-in-out;
}

.line_up-enter,
.line_up-leave-to {
    opacity: 0;
    transform: translateY(-100%);
}
.line_up-enter-active {
    transition: all 0.2s ease-in-out 0.4s;
}
.line_up-leave-active {
    transition: all 0.1s ease;
}

.line_opc-enter,
.line_opc-leave-to {
    opacity: 0;
}
.line_opc-enter-active {
    -webkit-transition: all 0.2s ease-out 1s;
    -moz-transition: all 0.2s ease-out 1s;        
    -o-transition: all 0.2s ease-out 1s;  
    transition: all 0.2s ease-out 1s;
}
.line_opc-leave-active {
    -webkit-transition: all 0 ease-out;
    -moz-transition: all 0 ease-out;        
    -o-transition: all 0 ease-out;  
    transition: all 0 ease-out;
}
.opacity-enter,
.opacity-leave-to {
    opacity: 0;
}
.opacity-enter-active {
    -webkit-transition: all 0.2s ease-out 0.2s;
    -moz-transition: all 0.2s ease-out 0.2s;        
    -o-transition: all 0.2s ease-out 0.2s;  
    transition: all 0.2s ease-out 0.2s;
}
.opacity-leave-active {
    -webkit-transition: all 0 ease-out;
    -moz-transition: all 0 ease-out;        
    -o-transition: all 0 ease-out;  
    transition: all 0 ease-out;
}
/*L1_PDA CSS Style ___________________end*/