Newer
Older
KaiFengPC / src / assets / styles / rainReportDetail.scss
@鲁yixuan 鲁yixuan 8 days ago 12 KB 迁移分析报告
.publicContainer {}

.reportDetail {
    width: 100%;
    background: #fff;
    color: #333;
    margin-bottom: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;

    // 表格样式
    .table_content {

        .el-table {
            background-color: transparent !important;

            .el-table__cell {
                padding: 6px 0 !important;
            }

            .success {
                color: #24de8d;
                font-weight: bold;
            }

            .fail {
                color: #f85050;
                font-weight: bold;
            }


            .el-loading-mask {
                background: rgba(3, 20, 37, 0.9) !important;
            }

            .indexClass_1 {
                width: 26px;
                height: 26px;
                background: linear-gradient(0deg, #F4C064 0%, rgba(244, 192, 100, 0) 100%);
                border-radius: 2px;
                opacity: 0.9;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                display: block;
                justify-content: center;
                line-height: 26px;
            }

            .indexClass_2 {
                width: 26px;
                height: 26px;
                background: linear-gradient(0deg, #BACDFF 0%, rgba(186, 205, 255, 0) 100%);
                border-radius: 2px;
                opacity: 0.9;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                display: block;
                justify-content: center;
                line-height: 26px;
            }

            .indexClass_3 {
                width: 26px;
                height: 26px;
                background: linear-gradient(0deg, #E07748 0%, rgba(224, 119, 72, 0) 100%);
                border-radius: 2px;
                opacity: 0.9;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                display: block;
                justify-content: center;
                line-height: 26px;
            }

            thead {
                // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
                // background-size: 100% 100%;
                background: #005CBA !important;
            }

            .el-button--primary {
                width: 49px;
                height: 22px;
                background: linear-gradient(0deg, #0566D7 0%, #007EFF 100%);
                border-radius: 11px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #D2EFFF;
                line-height: 22px;
            }

            .el-table__header-wrapper {
                .el-table__header {
                    th {
                        background: transparent !important;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        font-size: 14px;
                        color: #fff;
                        line-height: 32px;
                    }
                }
            }

            tr {
                height: 36px !important;
            }

            tr:nth-of-type(even) {
                // background: rgba(0, 72, 153, 0.3) !important;
                background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;

            }

            tr:nth-of-type(odd) {
                // background: rgba(19, 108, 183, 0.5) !important;
                background: transparent !important;

            }

            .el-table__body {
                border-bottom: none !important;

                tr:nth-of-type(odd) {}

                tr:nth-of-type(even) {
                    td {}
                }

                tr:hover>td {
                    cursor: pointer;
                    background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
                }
            }

            .el-table__inner-wrapper {
                &::before {
                    display: none;
                }
            }

            .el-table__header-wrapper,
            .el-table__fixed-header-wrapper {
                tr {
                    background-color: transparent !important;
                }

                th {
                    word-break: break-word;
                }
            }

            .el-table__body-wrapper {
                .el-button [class*='el-icon-']+span {
                    margin-left: 1px;
                }
            }

            th.el-table__cell {
                color: #fff;
                text-align: center;
                border-bottom: none !important;
                border-right: none !important;
            }

            th.is-left {
                text-align: left !important;
            }

            td.el-table__cell {
                text-align: center;
                border-bottom: none !important;
                border-right: none !important;
                color: #fff !important;
            }

            td.is-left {
                text-align: left;
            }

            td.el-table-fixed-column--right {
                background-color: #0f3a4f !important;
                color: #fff !important;

                .el-button {
                    color: #fff !important;
                }
            }

            .el-table__empty-block {
                .el-table__empty-text {
                    color: #fff !important;
                }
            }
        }

        // .ListBoxHeader_Sel {
        //   .el-input__wrapper {
        //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
        //     // box-shadow: none !important;
        //   }
        // }

        .el-progress-bar__outer {
            background: #2eafbf !important;
        }

        .el-tabs {
            .el-tabs__header {
                .el-tabs__nav {
                    .el-tabs__item {
                        color: #fff !important;

                        &.is-active {
                            color: #409eff !important;
                        }
                    }
                }
            }
        }
    }

    .waterlogImg {
        flex-wrap: wrap;

        .part {
            width: 18%;
            margin-left: 10px;
            margin-bottom: 10px;
            text-align: center;

            img {
                width: 100%;
                height: 150px;
            }

            p {
                line-height: 20px;
            }
        }
    }

    #rain_chart,
    #chartOneBG,
    .chartOneBG,
    #chartOneBG2,
    #chartOneBG3,
    #chartOneBG4 {
        // width: 100%;
        width: 1250px;
        height: 300px;
    }


    h1 {
        text-align: center;
        color: $red;
        font-size: 28px;
        letter-spacing: 5px;
    }

    h4 {
        color: $red;
        border-bottom: 3px solid $red;
        padding: 10px 0px;
        text-align: right;
    }

    .title {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .small_title {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .button_title {
        width: 66px;
        height: 22px;
        line-height: 22px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-left: 20px;
        cursor: pointer;

        &:hover {
            background: #00A4AE;
            border-radius: 6px;
            text-align: center;
        }
    }

    .active_button_title {
        background: #00A4AE;
        border-radius: 6px;
        text-align: center;
    }

    .content {
        text-indent: 14px;
        position: relative;

        span {
            color: #333333;
            font-weight: bolder;
        }

        &:after {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #918f8f;
            border-radius: 50%;
            content: '';
            left: 0;
            top: 16px;
            margin-top: -4px;
        }
    }

    .small_tip {
        text-align: center;
        font-weight: bold;
        margin: 10px 0px;
    }

    .rain_date_detail {
        margin-bottom: 10px;

        .rain_box2 {
            &:hover {
                background: #5DAEE6;
            }
        }

        .active_rain_box2 {
            background: #5DAEE6 !important;
        }

        .rain_box {
            // width: 112px;
            height: 78px;
            background: #155785;
            border-radius: 6px;
            margin-right: 10px;
            cursor: pointer;
            color: #ffffff;

            &:last-child {
                margin-right: 0;
            }


            .rainfall {
                span {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 20px;
                    color: #FFFFFF;
                }

            }
        }
    }
}

.table_content_box {
    width: 70%;
    margin: 20px auto;
    color: #000;
    border: 1px solid #00314e !important;

    .header {
        text-align: center;
        border-bottom: 0.00521rem solid #00314e !important;
        color: #000;
        font-weight: bolder;
        border-right: none !important;
        position: static !important;
        background-color: #dee1e6 !important;
        height: 0.20833rem !important;
        line-height: 0.20833rem !important;
        font-size: 0.06771rem;

    }

    .basic_label {
        text-align: center;
        border-bottom: 1px solid #00314e !important;
        border-right: none !important;
        position: static !important;
        height: 38px;
        border-right: 1px solid #00314e !important;
    }

    .basic_val {
        text-align: center;
        border-bottom: 1px solid #00314e !important;
        border-right: none !important;
        position: static !important;
        height: 38px;
    }
}

.img_content {
    max-width: 80%;

    .img_box {
        width: 100%;
    }

}

::v-deep(.el-loading-spinner) {
    position: fixed;
    top: 420px !important;
    left: 0;
}

.reportDetail {
    .detailDataTable {
        margin-bottom: 10px !important;
    }

    ::v-deep(.el-table) {
        --el-table-border-color: $mainColor1 !important;
        --el-table-bg-color: $mainColor1 !important;

        .el-table__body {
            border-bottom: 1px solid #333 !important;
        }

        .el-table__header-wrapper,
        .el-table__fixed-header-wrapper {
            th {
                word-break: break-word;
                background-color: #dee1e6 !important;
                height: 40px !important;
                font-size: 13px;
            }
        }

        .el-table__body-wrapper {
            background-color: #004770 !important;

            .el-button [class*='el-icon-']+span {
                margin-left: 1px;
            }

            td.el-table-fixed-column--right {
                background: $mainBg !important;
            }
        }

        tr {
            background-color: #f8f8f9 !important;
        }

        tr:nth-of-type(odd) {
            background-color: #fff !important;
        }

        tr:hover>td {
            background-color: #f5f7fa !important;
        }

        th.el-table__cell,
        td.el-table__cell {
            text-align: center;
            border-bottom: 1px solid $mainBg !important;
            color: #000;
            border-right: none !important;
            position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
        }

        .el-table__empty-block {
            background-color: #fff !important;

            .el-table__empty-text {
                color: #c6c6c6 !important;
            }
        }

        .el-button {
            border: none !important;
            background: none !important;

            &:hover {
                background: none !important;
                transform: scale(1.01);
            }
        }
    }
}