ttk-app-core/compatible/apps/asset/app-asset-card/style.less

enterprise develop framework

@lineBorderColor: #ECECEC;
@fontColor: #515151;

.app-asset-card{
    .ant-spin-container{
        overflow-y: scroll;
        overflow-x: hidden;
        padding-right: 24px;
        font-size: 12px;
        margin-bottom: 50px;
    }
    .ant-tabs-nav-container{
        font-size: 12px;
    }
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    color: @fontColor;
    .isHasInitValue {
        color: #FA954C;
    }
    .hasinit.ant-form-item .ant-form-item-control-wrapper {
        width: 415px !important;
    }
    .ant-spin-nested-loading {
        overflow: hidden;
    }
    .ant-select-selection__clear{
        right: 22px;
    }
    .ant-form-item-control {
        .ant-form-item-children {
            input {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    &-item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .ant-tabs {
            width: 100%;
        }
    }
    .ant-form-item.memo {
        padding-bottom: 15px;
    }
    &-footer {
        border-top: 1px solid #e8e8e8;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        padding-top: 10px;
        height: 50px;
        display: flex;
        background: #fff;
        border-radius: 0 0 4px 4px;
        justify-content: center;
        &-btnGroup {
            &-item {
                margin: 0 4px;
                width: 59.39px;
            }
            &-item:nth-child(3) {
                width: 78px;
            }
        } 
    }
    
    .ant-calendar-picker {
        width: 100%;
        :hover{
            .ant-calendar-picker-input:not(.ant-input-disabled)~.ant-calendar-picker-icon:after{
                color: @primary-color;
            }
        }
    }
    .ant-form-item.use-date {
        .ant-input {
            width: 80px;
            margin-right: 3px;
        }
    }
    .ant-form-item.card-month-style{
        .ant-form-item-label{
            width: 255px;
        }
        .ant-form-item-control-wrapper{
            width: 100px !important;
        }
    }

    .hasinit {
        width: 100% !important;
        .ant-form-item-control{
            width: 396px !important;
        }
    }
    .ant-form-item-label{
        width:180px;
    }
    .ant-form-explain{
        position: relative;
        z-index: 1;
    }
    .right-item {
        text-align: right;
    }

    &-title {
        border-bottom: 1px dashed @lineBorderColor;
        width: 100%;
        margin: 0 10px 10px 10px;
        height: 12px;
        position: relative;
        bottom: 7px;
        span {
            height: 20px;
            display: inline-block;
            width: 80px;
            background-color: #fff;
            position: relative;
            top: 3px;
        }
    }

    &-more {
        width: 100%;
        border-top: 1px dashed @lineBorderColor;
        display: flex;
        justify-content: center;
        margin: 3px 0 18px 0;
        :hover {
            color: @primary-color;
        }
        >span {
            display: inline-block;
            width: 70px;
            height: 26px;
            line-height: 26px;
            background-color: #F9F8FA;
            border-radius: 3px;
            cursor: pointer;
            padding-left: 10px;
            position: relative;
            span, i {
                margin-right: 5px;
                line-height: 26px;
                display: inline-block;
                height: 26px;
                position: absolute;
            }
            span {
                left: 10px;
            }
            i {
                right: 2px;
                font-size: 20px !important;
                opacity: 0.7;
            }
        }
    }

    .ant-tabs-nav {
        .ant-tabs-tab{
            border-bottom: 3px solid transparent;
        }
        .ant-tabs-tab-active {
            color: @primary-color;
            border-bottom: 3px solid @primary-color;
        }
    }

    .tab-status .ant-tabs-nav {
        .ant-tabs-tab, .ant-tabs-tab:hover {
            cursor: not-allowed;
            color: rgba(0, 0, 0, 0.25)
        }
        .ant-tabs-tab-active {
            color: @primary-color;
            border-bottom: 3px solid @primary-color;
        }
        .ant-tabs-tab-active:hover {
            color: @primary-color;
        }

        .ant-tabs-ink-bar{
            display: none !important
        }
    }

    &-form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        overflow:hidden;

        .ant-form-explain{
            margin-top: 5px;
        }

        .ant-form-item-control{
            text-align: center
        }

        .mk-datepicker,.mk-select{
            width:100%
        }
    }
}
// .add-type {
//     max-height: 300px;
//     font-size: 12px
// }


@media screen and (min-width: 1440px){ 
    .asset-card{
        .cards{
            width: 1050px !important;
            top: 35px;
            height: 638px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -525px;
            margin-top: -254px;
            padding-bottom: 0px;
            .app-asset-card{
                .app-asset-card-title {
                    margin: 0 10px 24px 10px;
                    bottom: 0;
                }
                .ant-spin-nested-loading {
                    width: 100%;
                }
                .ant-spin-container{
                    
                    height: 390px;
                    //height: 518px;
                }
                .ant-form-item {
                    display: flex;
                    margin-bottom: 13px;
                    width: 25%;
                    .ant-form-item-control-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 150px;
                        .ant-form-item-control {
                            width: 100%;
                            position: relative;
            
                            .ant-form-explain {
                                position: absolute;
                                top: 36px;
                                line-height: 18px;
                            }
                            .ant-input {
                                //height: 30px;
                                border-radius: 3px;
                            }
                            .mk-select {
                                width: 150px;
                                .ant-select-selection {
                                    //height: 30px;
                                    border-radius: 3px;
                                }
                            }
                        }
                    }
                }
                .ant-form-item.card-month-style{
                    .ant-form-item-label{
                        width: 150px;
                    }
                }
                .ant-form-item.hasinit1{
                    .ant-form-item-label{
                        width: 120px;
                    }
                }
                .ant-form-item.memo {
                    width: 100%;
                    .ant-form-item-label{
                        width: 97px;
                    }
                    .ant-form-item-control-wrapper {
                        input{
                            width: 648px;
                        }
                    }
                }
                .ant-form-item-label {
                    width: 39%;
                }
                .hasinit {
                    .ant-form-item-label {
                        width: 98px;
                    }
                }
            }
        }
    }    
}
@media screen and (min-width:1280px) and (max-width:1439px){
    .asset-card{
        .cards{
            width: 910px !important;
            top: 35px;
            height: 578px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -455px;
            margin-top: -289px;
            .app-asset-card{
                .ant-spin-container{
                    height: 465px;
                }
                .app-asset-card-item:nth-child(2){
                    .ant-form-item:last-child{
                        margin-left: 3px;
                        width: 33%;
                    }
                }
                .app-asset-card-item:nth-child(5){
                    .ant-form-item:last-child{
                        margin-left: 3px;
                        width: 33%;
                        .ant-select-selection{
                            width: 171px;
                        }
                    }
                    .ant-form-item:first-child{
                        input{
                            width: 170px;
                        }
                    }
                }
            }
            .app-asset-card{
                .ant-form-item {
                    display: flex;
                    margin-bottom: 13px;
                    width: 33.3%;
                    .ant-form-item-control-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 200px;
                        .ant-form-item-control {
                            width: 171px;
                            position: relative;
            
                            .ant-form-explain {
                                position: absolute;
                                top: 36px;
                                line-height: 18px;
                            }
                            .ant-input {
                                //height: 30px;
                                border-radius: 3px;
                            }
                            .mk-select {
                                width: 170px;
                                .ant-select-selection {
                                    //height: 30px;
                                    border-radius: 3px;
                                    /*.ant-select-selection__rendered {
                                        line-height: 24px;
                                    }*/
                                }
                            }
                        }
                    }
                }
            
                .ant-form-item.memo {
                    width: 100%;
                    .ant-form-item-label{
                        width: 114px;
                    }
                    .ant-form-item-control-wrapper {
                        width: 400px;
                        .mk-select {
                            width: 400px;
                        }
                        input{
                            width: 455px;
                        }
                    }
                }
                .hasinit {
                    .ant-form-item-label {
                        width: 114.05px;
                    }
                }
            }
        }
    }
}
@media screen and (min-width:1024px) and (max-width:1279px){  
    .asset-card{
        .cards{
            width: 830px !important;
            top: 35px;
            //height: 470px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -415px;
            margin-top: -290px;
            .app-asset-card{
                .ant-spin-container{
                    height: 465px;
                }
                /*.app-asset-card-item:nth-child(2){
                    //padding-left: 25px;
                    .ant-form-item:nth-child(3){
                        //width: 30%;
                        .ant-form-item-control{
                            //width: 150px;
                        }
                    }
                }
                .app-asset-card-item:nth-child(5){
                    .ant-form-item:first-child{
                        .ant-form-item-label{
                            width: 210px;
                        }
                        .ant-form-item-control{
                            margin-right: -15px
                        }
                    }
                    .ant-form-item:nth-child(2){
                        margin-left: 8px
                    }
                    .ant-form-item:nth-child(3){
                        width: 28%;
                    }
                    .ant-form-item:last-child{
                        margin-left: 15px
                    }
                }
                .app-asset-card-item:nth-child(7){
                    padding-left: 15px;
                    .ant-form-item:last-child{
                        width: 32%;
                    }
                }*/
                .hasinit1{
                    width: 248px !important;
                    .ant-form-item-label{
                        width: 230px;
                    }
                    .ant-form-item-control{
                        width: 132px !important;
                    }
                }
                .hasinit2{
                    .ant-form-item-control{
                        width: 130px !important;
                    }
                }
                .hasinit3{
                    .ant-form-item-control{
                        width: 92px !important;
                    }
                }
                .more-last-item{
                    padding-left: 20px
                }
                .ant-form-item {
                    display: flex;
                    margin-bottom: 13px;
                    width: 33.3%;
                    .ant-form-item-control-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 200px;
                        .ant-form-item-control {
                            width: 135px;
                            position: relative;
            
                            .ant-form-explain {
                                position: absolute;
                                top: 36px;
                                line-height: 18px;
                            }
                            .ant-input {
                                //height: 30px;
                                border-radius: 3px;
                            }
                            .mk-select {
                                width: 135px;
                                .ant-select-selection {
                                    //height: 30px;
                                    border-radius: 3px;
                                }
                            }
                        }
                    }
                }
            
                .ant-form-item.card-month-style{
                    .ant-form-item-label{
                        width: 255px;
                    }
                    .ant-form-item-control-wrapper{
                        width: 85px;
                    }
                }
                .ant-form-item.depr-method-style{
                    .mk-select .ant-select{
                        width: 135px;
                    }
                }
                .ant-form-item{
                    width: 32%;
                    .ant-form-item-control{
                        width: 135px;
                    }
                }
               
                .ant-form-item.memo {
                    width: 100%;
                    .ant-form-item-label{
                        width: 105px;
                    }
                    .ant-form-item-control-wrapper {
                        width: 400px;
                        .mk-select {
                            width: 400px;
                        }
                        input{
                            width: 380px;
                        }
                    }
                }
                .hasinit {
                    .ant-form-item-label {
                        width: 114px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1023px){ 
    .asset-card{
        .cards{
            width: 569px !important;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -285px;
            margin-top: -235px;
            .app-asset-card{
                .ant-spin-container{
                    height: 370px;
                    padding-right: 35px;
                }
                .hasinit1{
                    .ant-form-item-label{
                        width: 340px;
                    } 
                    .ant-form-item-control{
                        width: 100px !important;
                    }  
                }
                .app-asset-card-item:nth-child(7){
                    .ant-form-item:last-child{
                        .ant-form-item-control-wrapper{
                            width: 100px;
                        }
                    }
                }
                .ant-form-item {
                    display: flex;
                    margin-bottom: 13px;
                    width: 50%;
                    .ant-form-item-control-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 200px;
                        .ant-form-item-control {
                            width: 148px;
                            position: relative;
            
                            .ant-form-explain {
                                position: absolute;
                                top: 36px;
                                line-height: 18px;
                            }
                            .ant-input {
                                //height: 30px;
                                border-radius: 3px;
                            }
                            .mk-select {
                                width: 148px;
                                .ant-select-selection {
                                    //height: 30px;
                                    border-radius: 3px;
                                }
                            }
                        }
                    }
                }
            
                .ant-form-item.card-month-style{
                    .ant-form-item-label{
                        width: 255px;
                    }
                    .ant-form-item-control-wrapper{
                        width: 100px;
                    }
                }
               
                .ant-form-item.memo {
                    width: 100%;
                    .ant-form-item-label{
                        width: 103px;
                    }
                    .ant-form-item-control-wrapper {
                        width: 400px;
                        .mk-select {
                            width: 400px;
                        }
                        input{
                            width: 400px;
                        }
                    }
                }
                .hasinit {
                    .ant-form-item-label {
                        width: 108px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 575px)  {
    .asset-card {
        .cards {
            left: 0px;
            margin-left: 0px;
        }
        .ant-form-item-label {
            text-align: right !important;
            line-height: 35px;
            vertical-align: middle;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 4px 0;
        }
        .ant-form-item-label:after {
            content: ':';
            margin: 0 5px 0 2px;
        }
    }
}