custom-service.scss 3.66 KB
.content {
  display: flex;
  // margin-top: 2.333333rem;
  margin: 2.333333rem auto;
}

.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;
      height: 3.416667rem;
      margin-right: .166667rem;
      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;
  width: 64.416667rem;
  background-color: #ffffff;

  .panel {
    display: none;
  }

  .activity {
    display: block !important;
  }
}

.empty-line {
  height: 1.333333rem;
}