xlb-main-login/src/common/stylus/chat-record.less

``` yarn install ```

.column_wei(@wid) {
  width: @wid;
}

.h_100() {
  height: 100%;
}

.w_100() {
  width: 100%;
}

.col(@col) {
  color: @col;
}

.fl_l() {
  float: left;
}

.font_12() {
  font-size: 12px;
}

.font_14() {
  font-size: 14px;
}

.font_16() {
  font-size: 16px;
}

.box_siz_pad(@pad) {
  padding: @pad;
  box-sizing: border-box;
}

.box_siz() {
  box-sizing: border-box;
}

.mar_27() {
  margin-bottom: 27px;
}

.back(@back) {
  background: @back;
}

.column_bor(@wid,@sty,@col) {
  border-width: @wid;
  border-style: @sty;
  border-color: @col;
}

.flo(@flo) {
  float: @flo;
}

.lin_hei(@hei) {
  line-height: @hei;
}

.single-content-box {
  .h_100;
  .w_100;
}


.single-content-box-scroll,
.single-list,
.text,
.item-box-content,
.withdraw,
.img,
.img-m,
.video,
.video-number,
.red-envelopes,
.red-envelopes-m-content,
.cards,
.cards-m,
link,
link-m,
.content,
.file,
.file-m,
.chat-record,
.chat-record-m,
.application-message,
.application-message-m,
.meeting,
.meeting-m,
.schedule,
.schedule-m,
.applet,
.applet-m,
.voice,
.voice-m,
.conversation,
.conversation-m,
.business-card,
.business-card-m,
.show-no,
.show-no-m {
  height: auto;
  overflow: hidden;
}

.single-content-box-scroll {
  .h_100;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-scroll {
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

.agency-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 600px;

  .agency-title {
    .font_14;
    font-weight: 400;
    .col(#888888);
  }

  .agency-text {
    margin-top: 16px;
    .font_16;
    .col(#353535);
    line-height: 22px;
  }
}

.single-list {
  .item-box {
    padding: 0 24px;

    .content {
      .box_siz;


      h5,
      h6 {
        .font_12;

        span {
          .col(#353535);
        }

        em {
          .col(#888888);
          font-style: normal;
        }
      }

      h5 {
        text-align: left;

        em {
          margin-left: 8px;
        }
      }

      h6 {
        text-align: right;

        span {
          margin-left: 8px;
        }
      }

      .text {
        .mar_27;

        &-m {
          .font_14;
          .col(#353535);
          width: auto;
          display: inline-block;
          max-width: 425px;
          padding: 10px 12px;
          border-radius: 2px;
        }

        &-m-right {
          .flo(right);
          .back(#C6E5FE);
        }

        &-m-left {
          .flo(left);
          .back(#EEEEEE);
        }
      }

      .mixed {
        .mar_27;
        max-width: 425px;
        padding: 10px 12px;
        border-radius: 2px;
        width: auto;
        display: inline-block;

        &-item {
          max-width: 100%;
          .font_14;
          .col(#353535);

          div {
            height: auto;
            overflow: hidden;
            max-width: 100%;

            img {
              max-width: 230px;
              height: auto;
            }

            p {
              margin: 0;
            }
          }
        }
      }

      .img {
        .mar_27;

        &-m {
          max-width: 230px;
          width: auto;

          img {
            max-width: 230px;
            height: auto;
          }
        }

        &-m-left {
          .flo(left);
        }

        &-m-right {
          .flo(right);
        }
      }

      .video {
        .mar_27;

        &-m {
          max-width: 230px;
          width: auto;

          video {
            max-width: 230px;
            width: auto;
            height: auto;
          }
        }

        &-m-left {
          .flo(left);
        }

        &-m-right {
          .flo(right);
        }
      }

      .video-number {
        .mar_27;

        &-m {
          padding: 12px 12px 0 12px;
          .box_siz;
          width: 232px;
          height: auto;
          overflow: hidden;
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid #e8e8e8;

          &-title {
            display: flex;
            align-items: center;

            em {
              .font_14;
              .col(#353535);
              font-weight: bold;
              font-style: normal;
            }

            span {
              margin-left: 8px;
              width: auto;
              padding: 1px 15px;
              .back(#FF6146);
              border-radius: 10px;
              .font_12;
              .col(#FFFFFF);
            }
          }

          &-introduce {
            .font_14;
            margin-top: 10px;
            .col(#888888);
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          &-footer {
            height: 33px;
            margin: 10px auto 0 auto;
            .column_bor(1px, solid none none none, #F8F8F8);
            display: flex;
            align-items: center;

            img {
              width: 11px;
              height: 10px;
            }

            span {
              .font_12;
              .col(#999999);
              margin-left: 4px;
            }
          }
        }

        &-m-left {
          .flo(left);
        }

        &-m-right {
          .flo(right);
        }
      }

      .red-envelopes {
        .mar_27;

        &-m {
          width: 253px;
          height: 97px;
          .back(#EE6B56);
          border-radius: 4px;
          padding: 16px 14px 0 14px;
          box-sizing: border-box;

          &-content {
            .content-left {
              width: 26px;
              height: 36.4px;
              .flo(left);

              img {
                width: 100%;
                height: 100%;
              }
            }

            .content-right {
              .flo(right);
              width: calc(100% - 34px);

              p {
                .font_14;
                .col(#FFF3D6);
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
              }

              span {
                .font_12;
                .col(#FFF3D6);

                em {
                  font-style: normal;
                }
              }
            }
          }

          &-footer {
            height: 31px;
            .column_bor(1px, solid none none none, #FFAD9F);
            width: 100%;
            margin-top: 8px;
            line-height: 31px;
            .font_12;
            .col(#FCBBB0);
          }
        }

        &-m-left {
          float: left;
        }

        &-m-right {
          float: right;
        }
      }

      .cards {

        .mar_27;

        &-m {
          width: 276px;
          .back(#FFFFFF);
          .column_bor(1px, solid, #EEEEEE);
          padding: 12px 12px 0 12px;
          border-radius: 4px;
          .box_siz;

          &-content {
            height: auto;
            overflow: hidden;

            h5 {
              .font_14;
              .col(#353535);
              font-weight: 500;
              margin: 0;
            }

            h6 {
              .font_12;
              font-weight: 400;
              .col(#888888);
              text-align: left;
              margin-top: 8px;
            }

            p {
              .font_12;
              .col(#888888);
              margin: 0;
              padding: 12px 0;
              .column_bor(1px, none none solid none, #EEEEEE);
            }
          }

          &-footer {
            height: 40px;
            display: flex;
            align-items: center;
            .column_bor(1px, solid none none none, #EEEEEE);

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

            span {
              .font_12;
              .col(#888888);
              margin-left: 5px;
            }
          }

          ul,
          li,
          dl,
          dd {
            height: auto;
            overflow: hidden;
          }

          dl,
          ul {
            padding: 0 12px;
            .box_siz;
            .back(#F8F8F8);
            border-radius: 4px;
            margin: 8px 0 0 0;
          }

          dl dd,
          ul li {
            .font_12;
            height: 41px;
            line-height: 41px;
            .col(#353535);
            .column_bor(1px, none none solid none, #EEEEEE);
          }

          dl {
            dd {
              margin: 0;

              em {
                font-style: normal;
                margin-right: 8px;
                .font_12;
                .col(#888888);
              }

              &:last-child {
                border-bottom: none;
              }
            }
          }

          ul {
            li {
              padding-left: 16px;
              position: relative;

              &:after {
                content: '';
                width: 8px;
                height: 8px;
                .back(#FFFFFF);
                .column_bor(1px, solid, #D9D9D9);
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -4px;
                border-radius: 50%;
                border: 1px solid #d9d9d9;
              }

              &:last-child {
                border-bottom: none;
              }
            }
          }
        }

        .agency-left,
        .vote-left,
        .collect-left {
          .flo(left);
        }

        .agency-right,
        .vote-right,
        .collect-right {
          .flo(right);
        }
      }

      .link {
        .mar_27;

        &-m {
          width: auto;
          display: inline-block;
          max-width: 425px;
          padding: 10px 12px;
          border-radius: 2px;
          .back(#EEEEEE);

          a {
            .font_14;

            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;

            h4 {
              .font_14;
              .col(#006CE0);
              font-weight: 400;
              margin: 0;
            }

            .link-m-text {
              padding: 10px;
              border-radius: 2px;
              .box_siz;
              .back(#ffffff);
              margin-top: 8px;


              h5 {
                .font_14;
                font-weight: 400;
                .col(#353535);
              }

              .link-m-text-footer {
                display: flex;

                justify-content: space-between;

                .link-m-text-footer-left {

                  width: calc(100% - 31px - 23px);


                  .text {
                    .font_12;
                    .col(#888888);
                    margin: 0;
                    float: none;
                  }

                  .img {
                    max-width: 100%;
                    height: auto;
                    overflow: hidden;
                    margin: 10px 0 0 0;
                    float: none;

                    img {
                      max-width: 100%;
                      height: auto;
                    }
                  }
                }

                .link-m-text-footer-right {
                  width: 31px;
                  height: 31px;

                  img {
                    .w_100;
                    .h_100;
                  }
                }
              }
            }
          }


        }
      }

      .file {
        .mar_27;

        &-m {
          padding: 12px;
          .column_bor(1px, solid, #EEEEEE);
          border-radius: 4px;
          .box_siz;
          width: 234px;

          &-content {
            height: auto;
            overflow: hidden;

            &-left {
              .flo(left);
              width: calc(100% - 31px - 15px);
              .font_12;
              font-weight: 600;
              .col(#353535);
            }

            &-right {
              .flo(right);
              width: 31px;
              height: 26px;

              img {
                .w_100;
                .h_100;
              }
            }
          }

          &-footer {
            margin-top: 4px;
            .font_12;
            .col(#A0A9B5);
          }
        }
      }

      .chat-record {
        .mar_27;

        &-m {
          width: 292px;
          .back(#FFFFFF);
          .column_bor(1px, solid, #EEEEEE);
          padding: 12px;
          .box_siz;
          border-radius: 4px;

          h5 {
            .font_14;
            font-weight: 500;
            .col(#353535);
          }

          ul {
            height: auto;
            overflow: hidden;
            margin: 0;

            li {
              margin-bottom: 2px;

              div {
                .font_12;
                font-weight: 400;
                .col(#888888);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                word-wrap: break-word;
                white-space: normal;
                word-break: break-all;
              }

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }

      .application-message {
        .mar_27;

        &-m {
          width: 276px;
          .back(#FFFFFF);
          .column_bor(1px, solid, #EEEEEE);
          padding: 12px;
          .box_siz;
          border-radius: 4px;

          &-title {
            display: flex;
            align-items: center;

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

            span {
              .font_12;
              margin-left: 3px;
              .col(#888888);
            }
          }

          &-content {
            height: auto;
            overflow: hidden;
            margin-top: 12px;

            .content-left {
              width: calc(100% - 41px - 16px);
              .flo(left);

              h6 {
                text-align: left;
                .font_14;
                font-weight: 500;
                .col(#353535);
              }

              p {
                .font_12;
                .col(#888888);
                margin: 0;
              }
            }

            .content-right {
              .flo(right);
              width: 41px;
              height: 43px;

              img {
                .w_100;
                .h_100;
              }
            }
          }
        }
      }

      .meeting {
        .mar_27;

        &-m {
          width: 276px;
          .back(#FFFFFF);
          border-radius: 4px;
          .column_bor(1px, solid, #EEEEEE);
          padding: 12px;
          .box_siz;

          &-title {
            display: flex;
            align-items: center;

            img {
              width: 18px;
              height: 11px;
            }

            span {
              .font_12;
              .col(#888888);
              margin-left: 4px;
            }
          }

          h4 {
            .font_14;
            font-weight: 500;
            .col(#353535);
            margin-top: 13px;
          }

          &-type {
            display: flex;
            align-items: center;
            margin: 11px 0 15px 0;

            img {
              width: 19px;
              height: 11px;
            }

            span {
              .font_12;
              font-size: 12px;
              .col(#353535);
              margin-left: 3px;
            }
          }

          h5 {
            .font_14;
            .col(#888888);
            font-weight: 400;

            span {
              .col(#353535);
              margin-left: 8px;
            }
          }

          &-goto {
            width: 252px;
            height: 38px;
            margin-top: 18px;
            .back(#F9F9F9);
            border-radius: 2px;
            .font_14;
            .col(#2f86f0);
            font-weight: 500;
            text-align: center;
            line-height: 38px;
          }
        }
      }

      .schedule {
        .mar_27;

        &-m {
          width: 276px;
          .back(#ECF4FF);
          border-radius: 4px;
          .column_bor(1px, solid, #EEEEEE);
          padding-top: 12px;
          .box_siz;

          &-title {
            display: flex;
            align-items: center;
            padding: 0 12px;
            .box_siz;

            img {
              width: 18px;
              height: 11px;
            }

            span {
              .font_12;
              .col(#888888);
              margin-left: 4px;
            }
          }

          h4 {
            .font_14;
            font-weight: 500;
            .col(#353535);
            margin-top: 13px;
            padding: 0 12px;
            .box_siz;
          }

          h6 {
            text-align: left;
            .font_14;
            .col(#353535);
            font-weight: 400;
            padding: 0 12px;
            .box_siz;
          }

          &-type {
            display: flex;
            align-items: center;
            margin: 11px 0 15px 0;
            padding: 0 12px;
            .box_siz;

            img {
              width: 19px;
              height: 11px;
            }

            span {
              .font_12;
              font-size: 12px;
              .col(#353535);
              margin-left: 3px;
            }
          }

          &-tip {
            height: 44px;
            padding: 12px;
            .box_siz;
            display: flex;
            align-items: center;
            .back(#ffffff);
          }
        }
      }

      .applet {
        .mar_27;

        &-m {
          padding: 10px 10px 0 10px;
          width: 232px;
          background: #ffffff;
          border-radius: 6px;

          .box_siz;
          .column_bor(1px, solid, #E8E8E8);
          .box_siz;

          &-title {
            display: flex;
            align-items: center;

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

            span {
              .font_12;
              .col(#999999);
              margin-left: 6px;
            }
          }

          h4, h6 {
            text-align: left;
          }

          h4 {
            .font_14;
            .col(#353535);
            font-weight: 500;
            margin-top: 8px;
            height: auto;
            overflow: hidden;
          }

          h6 {
            .font_12;
            .col(#353535);
            font-weight: 400;
            margin-top: 8px;
          }

          &-content {
            height: auto;
            overflow: hidden;
            .column_bor(1px, solid, #F8F8F8);
            margin-top: 8px;
            .box_siz;
            position: relative;

            &-img {
              width: 100%;
              height: auto;
              overflow: hidden;

              img {
                width: 100%;
                height: auto;
              }
            }

            &-text {
              h3 {
                font-size: 20px;
                font-weight: 800;
                padding-left: 8px;
                .col(#DE1F26);
                margin-top: 6px;

                span {
                  .font_16;
                }
              }

              div {
                width: 65px;
                height: 24px;
                .back(#DE1F26);
                border-radius: 22px;
                position: absolute;
                bottom: 10px;
                right: 10px;
                font-size: 9px;
                font-weight: 500;
                .col(#FFFFFF);
                text-align: center;
                line-height: 24px;
              }
            }
          }

          &-tip {
            .column_bor(1px, solid none none none, #F8F8F8);
            height: 30px;
            display: flex;
            align-items: center;
            margin-top: 9px;

            img {
              width: 11px;
              height: 10px;
            }

            span {
              margin-left: 4px;
              .font_12;
              font-size: 12px;
              .col(#999999);
            }
          }
        }
      }

      .voice {
        .mar_27;

        &-m {
          &-left {
            width: 126px;
            height: 40px;
            .back(#EEEEEE);
            border-radius: 2px;
            display: flex;
            align-items: center;
            .box_siz;
            .flo(left);

            img {
              margin-left: 10px;
              width: 20px;
              height: 20px;
            }
          }

          &-right {
            .flo(left);
            height: 40px;
            line-height: 68px;
            margin-left: 8px;
            .font_12;
            font-weight: 400;
            .col(#858585);
          }

          &-down {
            width: 20px;
            height: 20px;
            //border: 1px solid #EFEFEF;
            //border-radius: 50%;
            margin-left: 13px;
            float: left;
            margin-top: 10px;
            overflow: hidden;


            img {
              .w_100;
              .h_100;
            }
          }
        }
      }

      .conversation {
        .mar_27;

        &-m {
          width: auto;
          float: left;
          height: 40px;
          border-radius: 2px;
          .box_siz;
          .column_bor(1px, solid, #EEEEEE);
          display: flex;
          align-items: center;
          padding: 0 12px;

          img {
            width: 25px;
            height: 9px;
          }

          span {
            .font_14;
            margin-left: 8px;
            .col(#353535);
          }
        }
      }

      .business-card {
        .mar_27;

        &-m {
          width: 234px;
          padding: 12px 8px 0 8px;
          border-radius: 2px;
          .box_siz;
          .back(#FFFFFF);
          .column_bor(1px, solid, #EEEEEE);

          &-header {
            height: auto;
            overflow: hidden;

            &-left {
              .flo(left);
              text-align: left;

              h5 {
                .font_12;
                font-weight: 500;
                .col(#353535);
              }

              h4 {
                .font_14;
                font-weight: 500;
                .col(#353535);
                margin: 12px 0 0 0;
              }

              p {
                font-size: 13px;
                font-weight: 400;
                .col(#888888);
                margin: 4px 0 0 0;
              }
            }

            &-right {
              .flo(right);
              width: 41px;
              height: 41px;

              img {
                .h_100;
                .w_100;
              }
            }
          }

          &-footer {
            height: 35px;
            line-height: 35px;
            margin-top: 12px;
            .font_12;
            .col(#888888);
            .column_bor(1px, solid none none none, #EEEEEE);
          }
        }
      }

      .show-no {
        .mar_27;

        &-m {
          height: 40px;
          .back(#FFFFFF);
          .column_bor(1px, solid, #EEEEEE);
          line-height: 40px;
          padding: 0 12px;
          border-radius: 2px;
        }

        &-m-left {
          .flo(left);
        }
      }
    }

    .content-right {
      .text, .img, .video, .mixed, .video-number, .conversation, .red-envelopes, .cards, .link, .file, .chat-record, .application-message, .schedule, .applet, .voice, .business-card, .show-no {
        .flo(right);
      }

      .text {
        &-m {
          .back(#C6E5FE);
          word-wrap: break-word;
          white-space: normal;
          word-break: break-all;
        }
      }

      .mixed {
        .back(#C6E5FE);
      }
    }

    .content-left {
      .text, .img, .mixed, .video, .video-number, .conversation, .red-envelopes, .cards, .link, .file, .chat-record, .application-message, .schedule, .applet, .voice, .business-card, .show-no {
        .flo(left);
      }

      .text {
        &-m {
          .back(#EEEEEE);
          word-wrap: break-word;
          white-space: normal;
          word-break: break-all;
        }
      }

      .mixed {
        .back(#EEEEEE);
      }
    }

    .withdraw {
      display: flex;
      align-items: center;
      flex-direction: column;
      .mar_27;

      h5 {
        .font_12;
        font-weight: 400;
        color: #858585;
        margin-bottom: 8px;
      }

      div {
        .font_12;
        .col(#858585);
        .back(#F3F3F3);
        padding: 5px 12px;
        display: inline-block;
      }
    }
  }
}


.single-list-record {
  .item-box {
    padding: 16px 0;
    .column_bor(1px, none none solid none, #EEEEEE);

    .content {
      .text {
        margin-bottom: 0;

        &-m {
          padding: 0 12px;
        }
      }
    }


    &:last-child {
      border-bottom: none;
    }
  }
}