nova-live/projects/live-app/src/modules/tabs/notice/notice.component.scss

.header {
  padding: 10px;
  border-bottom: 1px solid #dfdfdf;
  background: white;
  .top {
    display: flex;
    justify-content: space-between;
    ion-segment {
      justify-content: start;
      padding: 0 3.2vw;
      position: sticky;
      top: 0;
      // background: #fd6f6a;
    }
    // ion-segment-button {
    //   color: #fd6f6a;
    //   --indicator-color: #fd6f6a;
    // }
    .more {
      width: 50px;
      margin: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 20px;
        height: 20px;
      }
      ion-button {
        --background: white;
        --background-hover: white;
        --background-activated: white;
        --background-focused: white;
        --color: #000;
      }
    }
  }
}
.content {
  --padding-bottom: 100px;
  --background: #f8f8f8;
  ion-segment-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notice-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    .li {
      display: flex;
      margin-bottom: 10px;
      .avatar{
        margin-right: 10px;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
      }
      .li-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        // border-bottom: 1px solid #e5e5e5;
        // padding-bottom: 6px;
        .name {
          display: flex;
          justify-content: space-between;
          .time {
            color: #676767;
            font-size: 12px;
          }
        }
        .message-content {
          color: #676767;
          margin-top: 6px;
        }
      }
    }
    ion-avatar {
      margin-right: 10px;
      flex-shrink: 0;
    }
  }
}
ion-popover {
  --width: 120px;
}
.clear {
  // padding: 4px 10px;
  // text-align: center;
  font-size: 14px;
  color: #676767;
}