@import "~antd/es/style/themes/default.less";
@imgSrc: '@/assets/images/system/notifications';

.contentPage {
  width: 100%;
  height: 100%;
  background: url('@{imgSrc}/messageBg.png') center/100% 100% no-repeat;
  // padding: 20px 300px 0 300px;

  .messageBox {
    width: 931px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 5px;
    margin-left: 50%;
    transform: translateX(-50%);

    .headerTop {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      opacity: 0.85;
    }

    .headerContent {
      display: flex;
      height: 32px;
      line-height: 32px;
      margin-bottom: 10px;

      .selectForm {
        display: flex;
        flex-grow: 1;
        margin-left: 44px;

        .form {
          // width: 85px;
          // // width: 200px;
        }
      }

      .sortForm {
        display: flex;
        flex-grow: 10;

        .form {
          .sortBox {
            display: flex;
            width: 226px;
            background: #FFFFFF;
            border: 1px solid #E4E6EA;
            border-radius: 5px;
            cursor: pointer;

            .tab {
              width: 100%;
              text-align: center;
              color: #a6a6a6;
            }

            .tab:nth-of-type(1) {
              border-right: 1px solid #E4E6EA;
            }

            .tabActive {
              color: #262626;
              // font-weight: 700;
            }
          }

        }
      }

      .haveRead {
        flex-grow: 1;
        color: #8D8D90;
        font-size: 14px;
        cursor: pointer;
      }

      .haveRead:hover {
        color: #1890ff;
      }
    }

    .msgContent {
      height: 100%;
      width: 878px;
      margin-left: 50%;
      transform: translateX(-50%);
      overflow-y: scroll;
      padding-bottom: 100px;

      .loaderTip {
        width: 200px;
        height: 36px;
        line-height: 36px;
        background-color: #f6f6f6;
        border-radius: 5px;
        text-align: center;
        margin-top: 5px;
        margin-left: 50%;
        transform: translateX(-50%);
        color: #5a5a5f;
      }

      .msgItem {
        position: relative;
        display: flex;
        height: 85px;
        border-bottom: 1px solid #EDEEF1;
        cursor: pointer;


        .left {
          width: 36px;
          height: 100%;
          line-height: 85px;
          margin-left: 17px;

          img {
            width: 36px;
            height: 36px;
          }
        }

        .msgCenter {

          flex: 1;
          width: 0;
          margin-left: 30px;
          margin-right: 10px;
          // white-space: nowrap;
          // // overflow: hidden;
          // text-overflow: ellipsis;


          .msgBox {
            position: relative;
            top: 50%;
            transform: translateY(-50%);

            .title {
              color: #000000;
              font-weight: 700;
              font-size: 14px;
              height: 22px;
            }

            .msgDesc {
              color: #000000;
              font-size: 14px;
              height: 22px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

        }

        .right {
          line-height: 85px;
          margin-right: 10px;
        }
      }

      .msgItem:hover {
        background-color: #F4F4F5;
      }

      .msgHasRead {
        opacity: 0.5;
      }
    }
  }
  :global {
    .@{ant-prefix}-tabs-ink-bar.@{ant-prefix}-tabs-ink-bar-animated {
      transform: translateZ(0) !important;
    }
  }
}