.hc-system-announcement-box {
  position: relative;
  height: 100%;
  .card-body {
    position: absolute;
    inset: 0;
    .card-main {
      position: relative;
      background: white;
      height: calc(100% - 14px);
      margin: 0 10px 10px;
      border-radius: 5px;
      .header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #eee;
        .title {
          position: relative;
          display: flex;
          align-items: center;
          margin-bottom: 0;
        }
        .extra {
          position: relative;
          display: flex;
          align-items: center;
        }
      }
      .content {
        position: relative;
        box-sizing: border-box;
        overflow: auto;
        height: calc(100% - 98px);
        padding: 10px;
        .el-table th.el-table__cell {
          background-color: #f7f7f7;
          padding: 8px 0;
          .el-checkbox:last-of-type {
            margin-right: 0;
          }
        }
        .el-table .el-table__cell {
          padding: 4px 0;
          .el-checkbox:last-of-type {
            margin-right: 0;
          }
        }
      }
      .action {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-top: 1px solid #eee;
        padding: 8px 10px;
      }
    }
  }
}

//通用弹窗
.el-dialog__wrapper.hc-system-announcement-dialog .el-dialog {
  text-align: left;
  .el-dialog__header {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 10px 14px 10px;
    .el-dialog__headerbtn {
      top: 14px;
      right: 14px;
    }
  }
  .el-dialog__body {
    position: relative;
    padding: 14px;
    text-align: unset;
  }
  .el-dialog__footer {
    position: relative;
    border-top: 1px solid #eee;
    text-align: center;
    padding: 10px;
    .el-button {
      padding: 10px 20px;
    }
    .el-button + span {
      margin-left: 60px;
    }
    .el-button + .el-button {
      margin-left: 60px;
    }
    span + .el-button {
      margin-left: 60px;
    }
  }
}

.el-dialog__wrapper.hc-system-announcement-dialog.h-full .el-dialog {
  margin-top: 5vh !important;
  height: calc(100% - 10vh) !important;
  .el-dialog__body {
    height: calc(100% - 130px);
    overflow: auto;
  }
}
.el-dialog__wrapper.hc-system-announcement-dialog.black-card .el-dialog {
  margin-top: 15vh !important;
  height: calc(100% - 39vh) !important;
  .el-dialog__body {
    height: calc(100% - 73px);
    overflow: auto;
  }
}

.block {
  width: 100%;
}

.hc-system-announcement-black-card {
  position: relative;
  background: #20222A;
  color: white;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .icon-box {
    position: relative;
    text-align: center;
    margin-right: 24px;
    width: 95px;
    .name {
      font-size: 26px;
      margin-bottom: 10px;
    }
    .icon {
      position: relative;
      i {
        font-size: 50px;
      }
    }
  }
  .content {
    position: relative;
    flex: 1;
    .top-box {
      position: relative;
      display: flex;
      align-items: flex-end; 
      margin-bottom: 10px;
      .left {
        position: relative;
        .name {
          font-size: 14px;
          margin-right: 15px;
        }
        .num {
          font-size: 50px;
          font-weight: bold;
        }
      }
      .right {
        position: relative;
        margin-left: 120px;
        .name {
          font-size: 14px;
          margin-right: 15px;
        }
        .user {
          font-size: 30px;
          font-weight: bold;
        }
      }
    }
  }
  .text-box {
    position: relative;
    margin-bottom: 10px;
    .name {
      font-size: 14px;
      margin-right: 15px;
    }
    .text {
      font-size: 22px;
      font-weight: bold;
      margin-top: 8px;
    }
  }
  .time-box {
    position: relative;
    display: flex;
    align-items: baseline;
    vertical-align: bottom;
    .name {
      font-size: 14px;
      margin-right: 15px;
    }
    .time {
      font-size: 26px;
      font-weight: bold;
    }
  }
}

.el-divider.hc-system-announcement-black-divider {
  margin-top: 40px !important;
  margin-bottom: 20px !important;
  .el-divider__text {
    font-size: 18px;
  }
  &.top {
    margin-top:5px !important;
  }
}
