custom-service.scss 4.15 KB


.content {
    display: flex;
}

.left-panel {
    width: 12.833333rem ;
    height: 42.333333rem ;
    margin-left: 3.166667rem;

    .separator {
        margin:auto;
        width: 10.5rem ;
        height: .083333rem;
        background-color: #dcdddd;
    }
    .menu-item {
        height: 5.916667rem;
        line-height: 5.916667rem;
        font-size: 1.5rem ;
        font-weight: bold;
        color: #4c4948;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
            display: inline-block;
            width: 3.416667rem /* 41/12 */;
            height: 3.416667rem /* 41/12 */;
            // margin-right: 1.333333rem;
            margin-right: .166667rem /* 2/12 */;
            vertical-align: middle;
        }
        .m1 {
            background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m2 {
            background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m3 {
            background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m4 {
            background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m5 {
            background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m6 {
            background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m7 {
            background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m8 {
            background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
            background-size: 100% 100%;
        }
    }
    .menu-item.activity {
        color: #f05a23 !important;

        .m1 {
            background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m2 {
            background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m3 {
            background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m4 {
            background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m5 {
            background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m6 {
            background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m7 {
            background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .m8 {
            background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
            background-size: 100% 100%;
        }

    }
}

.min-panel {
    margin-left: .666667rem;
    width: 1.166667rem;

    .item {
        width: 1.166667rem ;
        height: 6rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .activity .triangle {
       width: .583333rem;
       height: 1.166667rem ;
       background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
       background-size: 100% 100%;
    }
}

.right-panel {
    margin-left: 1.166667rem;
    width: 64.166667rem ;
    background-color: #ffffff;

    .panel {
        display: none;
    }

    .activity {
        display: block !important;
    }
}

.empty-line {
    height: 1.333333rem /* 16/12 */;
}