qlxxCommon.scss 4 KB
.djxxTable {
    width: 100%;
    height: 100%;
    background: #fff;
    color: #333;

    .tableBox {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;

        .title {
            width: 100%;
            font-weight: 700;
            font-size: 16px;
            text-align: center;
            background: #e9e9e9;
            height: 62px;
            line-height: 62px;
            position: relative;
            margin: 0 3px;

            .checkbox {
                position: absolute;
                right: 20px;
                bottom: -16px;
                height: 62px;
            }
        }

        .xxTableBox {
            overflow: scroll;
            width: 100%;
        }

        .xxTable>tr:first-child th {
            width: 140px;
        }

        .xxTable {
            //border-spacing: 1px;
            width: 100%;
            table-layout: fixed;

            tr {
                box-sizing: border-box;
            }

            tr>th {
                border: 1px solid #ccc;
                background: #F2F2F2;
                color: #333333;
                font-size: 16px;
                height: 40px;
            }

            tr:nth-child(1) {
                position: sticky;
                top: 0px;
                z-index: 3;
                margin-top: -2px;
            }

            tr:nth-child(2) {
                position: sticky;
                top: 40px;
                z-index: 3;
            }

            tr:nth-child(3) {
                position: sticky;
                top: 80px;
                z-index: 3;
            }

            tr>td:first-child {
                position: sticky;
                left: 0;
                z-index: 2;
            }

            th.linshi,
            th.xianshi {
                background: #464c5b;
            }

            th.lishi {
                background: rgba(70, 76, 91, 0.8);
            }

            .one th {
                height: 25px;
                font-size: 14px;
            }

            th.linshi {
                color: #fe9400;
            }

            .two th {
                height: 45px;

                p:nth-child(2) {
                    font-size: 14px;
                }
            }

            .linshiIcon {
                position: relative;
            }

            .linshiIcon::after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-width: 0px 0px 55px 55px;
                border-style: none solid solid;
                border-color: transparent transparent #fe9400;
                position: absolute;
                top: 0;
                right: 0;
                transform: rotate(-90deg);
            }

            .icon {
                position: absolute;
                top: 12px;
                right: -5px;
                transform: rotate(45deg);
                color: #fff;
                font-size: 12px;
                z-index: 10;
            }

            tr {
                display: flex;
            }

            tr td {
                border: 1px solid rgb(227, 226, 226);
                text-align: center;
                height: 40px;
                font-size: 13px;
                width: 140px;
                flex: 1;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 344px;
                z-index: 1;
            }

            >tr:nth-child(odd) td {
                background: #f2f2f2;
            }

            >tr:nth-child(even) td {
                background: #f9f9f9;
            }

            td.linshi {
                color: #fe9400;
            }

            tr>td.lishi {
                color: #7f7f7f;
            }
        }

        .rollTable {
            margin-top: -2px;
            display: block;
            height: calc(100vh - 185px);
            overflow-y: scroll;
            margin-left: 2px;
        }
    }
}