/*
 * @Author: lusx 
 * @Date: 2020-03-09 18:23:35 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-20 11:14:28
 */
@f: prj-form;

.@{f}-no-data {
    // font-family            : PingFang SC, "\5FAE\8F6F\96C5\9ED1", Arial;
    // -webkit-font-smoothing : antialiased;
    // -moz-osx-font-smoothing: grayscale;
    width                     : 100%;
    background-color          : #fff;
    text-align                : center;
    display                   : -webkit-box;
    display                   : flex;
    -webkit-box-pack          : center;
    justify-content           : center;
    -webkit-box-align         : center;
    align-items               : center;
    font-size                 : 20px;
    color                     : #a2b6c5;

    &::before {
        content  : "\2639"; //特殊字符或形状    
        color    : #a2b6c5;
        font-size: 100px;
        position : relative;
        left     : 4px;
        bottom   : 3px;
        cursor   : pointer;
    }
}

.@{f}-form-container {
    background-color: #fff;
    padding         : 0px 10px 0px;

    section {
        padding-bottom: 10px;

        &:last-child {
            padding-bottom: 40px;
        }
    }

    .@{f}-form-bottom-border {
        margin-left  : 20px;
        margin-right : 40px;
        border-bottom: 1px solid rgb(241, 236, 236);
    }

    .@{f}-card-title {
        &::before{
            content: '';
            display: inline-block;
            width: 20px;
            height: 16px;
            border-left: 3px solid #338fe5;
            position: absolute;
            top: 17px;
        }
        // font-family            : PingFang SC, "\5FAE\8F6F\96C5\9ED1", Arial;
        // -webkit-font-smoothing : antialiased;
        // -moz-osx-font-smoothing: grayscale;
        color                     : #303030;
        font-weight               : 500;
        height                    : 50px;
        line-height               : 50px;
        text-indent               : 20px;
        position: relative;

        // border-bottom: 1px solid rgb(241, 236, 236);
        .@{f}-main-card-title {
            //border-left  : 3px solid #0094ff;
            // padding-left: 5px;
            font-size      : inherit;
            padding-left: 5px;
        }

        .@{f}-main-card-subTitle {
            color                     : #909090;
            font-size                 : 14px !important;
            font-weight               : normal;
            margin-right              : 10px;
            // font-family            : PingFang SC,"\5FAE\8F6F\96C5\9ED1",Arial;
            // -webkit-font-smoothing : antialiased;
            // -moz-osx-font-smoothing: grayscale;

        }

        .@{f}-statistic-block {
            float                     : right;
            font-size                 : 14px;
            color                     : #606060;
            padding-left              : 15px;
            padding-right             : 15px;
            // font-family            : PingFang SC,"\5FAE\8F6F\96C5\9ED1",Arial;
            // -webkit-font-smoothing : antialiased;
            // -moz-osx-font-smoothing: grayscale;
            font-weight               : normal;

            span {
                &:first-child {
                    padding-left : 0px;
                    padding-right: 15px;
                }
            }

            span {
                &:last-child {
                    padding-left : 15px;
                    padding-right: 0px;
                    border-left  : 1px solid #dedede;
                }
            }
        }
    }
}


.@{f}-field-container {
    position: relative;

    .@{f}-field-name {
        display      : table-cell;
        min-width    : 0;
        overflow     : hidden;
        white-space  : nowrap;
        text-overflow: ellipsis;
        max-width    : 70px;
        font-size    : 14px;
        color        : #303030;

        &:hover {
            cursor: pointer;

            &+.@{f}-field-name-visable {
                visibility: visible;
            }

        }
    }

    .@{f}-field-name-visable {
        overflow        : visible;
        white-space     : nowrap;
        visibility      : hidden;
        position        : absolute;
        padding         : 0px 10px;
        border-radius   : 2px;
        left            : 10px;
        top             : 30px;
        z-index         : 1000;
        height          : 25px;
        line-height     : 25px;
        vertical-align  : bottom;
        background-color: #fafafa;
        border          : 1px solid rgba(0, 0, 0, 0.09);
        box-shadow      : 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);

        &::after {
            content            : '';
            display            : inline-block;
            width              : 5px;
            height             : 5px;
            position           : absolute;
            top                : -3px;
            left               : 15px;
            -webkit-transform  : translateX(-50%) rotate(45deg);
            transform          : translateX(-50%) rotate(45deg);
            border-top-color   : #fff;
            border-right-color : transparent;
            border-bottom-color: transparent;
            border-left-color  : #fff;
            box-shadow         : 3px 3px 7px rgba(0, 0, 0, .07);
            border-style       : solid;
        }
    }
}

.@{f}-cell-label {
    max-width                 : 300px;
    overflow                  : hidden;
    text-overflow             : ellipsis;
    white-space               : nowrap;
    // font-family            : PingFang SC,"\5FAE\8F6F\96C5\9ED1",Arial;
    // -webkit-font-smoothing : antialiased;
    // -moz-osx-font-smoothing: grayscale;
    font-size                    : 14px;
    color                        : #303030;


}
.@{f}-cell-label-rich {
    .@{f}-cell-label-box {
        max-width                 : 300px;
        overflow                  : hidden;
        text-overflow             : ellipsis;
        white-space               : nowrap; 
        font-size                 : 14px;
        color                     : #303030;   
    }
}
.@{f}-richtext-wraps {
    position: relative;

    .@{f}-cell-label-box {
        display: inherit;

        &:hover {
            cursor: pointer;

            &+.@{f}-field-name-visable {
                visibility: visible;
            }
        }
    }

    .@{f}-field-name-visable {
        overflow        : visible;
        white-space     : normal;
        visibility      : hidden;
        position        : absolute;
        padding         : 0px 10px;
        border-radius   : 2px;
        left            : 10px;
        top             : 30px;
        z-index         : 1000;
        min-height          : 25px;
        line-height     : 25px;
        vertical-align  : bottom;
        background-color: #fafafa;
        border          : 1px solid rgba(0, 0, 0, 0.09);
        box-shadow      : 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);

        &::after {
            content            : '';
            display            : inline-block;
            width              : 5px;
            height             : 5px;
            position           : absolute;
            top                : -3px;
            left               : 15px;
            -webkit-transform  : translateX(-50%) rotate(45deg);
            transform          : translateX(-50%) rotate(45deg);
            border-top-color   : #fff;
            border-right-color : transparent;
            border-bottom-color: transparent;
            border-left-color  : #fff;
            box-shadow         : 3px 3px 7px rgba(0, 0, 0, .07);
            border-style       : solid;
        }
    }
}