Foshan4A4.0/src/components/permissionlist/permissionlist.scss

.bf-permissionlist {
  width: 100%;
  height: 100%;
  > .right {
    width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 0 32px 0 32px;
    > .paren_header {
      width: 100%;
      height: 57px;
      display: flex;
      align-items: flex-end;
      > p {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
    > .paren_type {
      width: 100%;
      height: 60px;
      > ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        > li {
          display: flex;
          align-items: center;
          background-size: 100% 100%;
          > .log {
            width: 22px;
            height: 22px;
            margin-right: 9px;
          }
          > p {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #303133;
            margin-bottom: 0;
            margin-top: 0;
          }
        }
        > li:nth-child(1) {
          > .log {
            background: url('../../assets/index/ic_time@2x.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        > li:nth-child(2) {
          > .log {
            background: url('../../assets/index/ic_data@2x.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        > li:nth-child(3) {
          > .log {
            background: url('../../assets/index/ic_screen_edit@2x.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }
        > li:nth-child(4) {
          > .log {
            background: url('../../assets/index/ic_screen@2x.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    > .paren_list {
      width: 100%;
      margin-bottom: 10px;
      > ul {
        width: 100%;
        height: 100%;
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        > li {
          margin-right: 16px;
          margin-bottom: 16px;
          > .up_type {
            padding: 0 5px;
            height: 32px;
            background: #f3f5fc;
            border: 1px solid #6e81bc;
            border-radius: 4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #6e81bc;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          > .up_types {
            padding: 0 5px;
            height: 32px;
            background: #6e81bc;
            border-radius: 4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
    }
    .paren_content {
      width: 100%;
      height: 65%;
      > .el-scrollbar {
        > .el-scrollbar__wrap {
          overflow-x: hidden;
          > .el-scrollbar__view {
            padding-top: 10px;
            .el-row {
              width: 100%;
            }
            .cide {
              height: 80px;
              cursor: pointer;
              background: #f5f7fa;
              box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
              border-radius: 8px;
              padding: 4px 16px 0 16px;
              margin-bottom: 16px;
              > .cide_header {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                > p {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #303133;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                > span {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #6e81bc;
                  cursor: pointer;
                  min-width: 30px;
                }
              }
              > .cide_cont {
                > ul {
                  width: 100%;
                  height: 22px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 0;
                  margin-top: 0;
                  padding-left: 0;
                  > li {
                    width: 22px;
                    height: 22px;
                    margin-right: 8px;
                  }
                  .statusDate {
                    background: url('../../assets/index/ic_time@2x.png')
                      no-repeat;
                    background-size: 100% 100%;
                  }
                  .statusShow {
                    background: url('../../assets/index/ic_data@2x.png')
                      no-repeat;
                    background-size: 100% 100%;
                  }
                  .statusRule1 {
                    background: url('../../assets/index/ic_screen@2x.png');
                    background-size: 100% 100%;
                  }
                  .statusRule2 {
                    background: url('../../assets/index/ic_screen_edit@2x.png');
                    background-size: 100% 100%;
                  }
                }
              }
            }
            > .paren_list {
              width: 100%;
              height: 32px;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .bgActive {
      > .el-scrollbar {
        > .el-scrollbar__wrap {
          > .el-scrollbar__view {
            .cide {
              cursor: pointer;
            }
            .bgColor {
              background: #6e81bc;
              > .cide_header {
                > p {
                  color: #f5f7fa;
                }
                > span {
                  color: #f5f7fa;
                }
              }
              .el-radio__input.is-checked .el-radio__inner {
                border-color: #f5f7fa;
              }
            }
          }
        }
      }
    }
  }
}
.hucPower {
  .right {
    .paren_content {
      height: 25%;
    }
  }
}