.Header-page {
  width: 100vw;
}

.com-header-box {
  height: 88px;
}

.com-header-container {
  position: fixed;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 88px;
  padding: 0 20px;
  background-color: #fff;

  &.bordered {
    border-bottom: 1px solid #ebebeb;
  }

  .action-area {
    display: flex;
    align-items: center;

    .taro-img {
      width: 48px;
      height: 48px;
    }
  }

  .icon {
    .taro-img {
      width: 34px;
      height: 34px;
    }
  }

  .page-title {
    overflow: hidden;
    font-size: 36px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222;
  }

  .search {
    margin-left: 100px;
  }

  .self-def {
    font-size: 32px;
    color: #222;
  }

  .rule {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
    color: #ffe400;
    background-color: #222;
  }

  .left {
    flex: 2;
  }

  .center {
    flex: 6;
    overflow: hidden;
  }

  .right {
    display: flex;
    flex: 2;
    justify-content: flex-end;
    align-items: center;

    span {
      font-size: 32px;
      color: #3f444c;
    }
  }
}