.page-im-box {
  width: 100%;
  height: 100vh;
  background-color: #2e2f3d;
  position: fixed;

  .chat-box {
    width: 980px;
    height: 797px;
    background: #ffffff;
    font-size: 14px;
    opacity: 1;
    margin: 61px auto 0 auto;

    .chat-box-left {
      overflow: auto;
      width: 287px;
      height: 100%;
      background: #ffffff;
      opacity: 1;
      border-right: 1px solid #eceef0;
      .empty-contacts{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        user-select: none;
        margin-top: -80px;
        .empty-img{
          width: 120px;
          height: 120px;
        }
        .empty-txt{
          margin-top: 12px;
          font-size: 14px;
          color: #666;
        }
      }
    }

    .chat-box-right {
      width: 100%;
      height: 100%;
    }

    .chat-box-top {
      width: 100%;
      height: 53px;
      padding-left: 15px;
      box-sizing: border-box;
      background: #f7f8fa;
      border-bottom: 1px solid #eceef0;
      opacity: 1;
      border-radius: 5px 5px 0 0;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 53px;
      color: #333333;
    }

    .chat-box-main {
      display: flex;
      height: 744px;
    }

    .base {
      min-height: 535px;
      padding-bottom: 0 !important;
      flex-direction: column;
    }

    .chat-box-left {
      .shop-list {
        padding: 0;
        margin: 0;

        .shop-item {
          display: flex;
          align-items: center;
          cursor: pointer;

          &:hover {
            background-color: #d0e9ff;
          }
        }
      }

      .shop-item {
        img {
          width: 36px;
          height: 36px;
          margin: 12px 12px 12px 15px;
        }

        .shop-info {
          width: 100%;
          display: flex;
          flex-direction: column;

          .shop-info-name {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #333333;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
          }

          .shop-info-icon {
            width: 110px;
            margin-top: 5px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #a1a6af;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
          }

          .ye {
            background-color: #ffc267;
          }
        }
      }
    }

    .shop-info-name {
      .name {
        width: 70%;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
      }

      .tips {
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 16px;
        padding: 0 5px;
        margin-right: 5px;
        box-sizing: border-box;
        color: #fff;
        font-size: 10px;
        content: " ";
        background: #fc1b35;
      }
    }

    .chat-box-right {
      .shop-name-tittle {
        line-height: 20px;
        padding: 20px 0 21px 21px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        border-bottom: 1px solid #ebedf0;
      }

      .im-box {
        display: flex;
        position: relative;
      }

      .im-main {
        width: 100%;
        height: 735px;
        border-right: 1px solid #ebedf0;
      }
    }

    .im-main {
      .chat-main-form {
        position: relative;
        z-index: 800;
        display: flex;
        flex-direction: column;

        .display-infor {
          height: 588px;
          padding-top: 15px;
          overflow-y: auto;
          box-sizing: border-box;
        }

        .reply {
          width: 100%;
          height: 147px;
          border-top: 1px solid #ebedf0;
          position: relative;

          .small-box {
            display: flex;

            .customerService {
              margin: 17px 0 8px 22px;
              cursor: pointer;
            }
          }

          .upload {
            width: 22px;
            height: 18px;
            background-image: url("@/assets/chat/upload.png");
            margin: 17px 0 8px 22px;
            cursor: pointer;
          }

          .reply-area {
            textarea {
              margin-left: 12px;
              border: none;
              resize: none;
              outline: none;
              box-shadow: none;
              width: 98%;
            }
          }

          .send {
            width: 62px;
            height: 26px;
            line-height: 26px;
            position: absolute;
            bottom: 0;
            right: 20px;
            text-align: center;
            background: #155bd4;
            color: #fff;
            cursor: pointer;
            opacity: 1;
          }
        }
      }
    }

    .row {
      padding: 15px;
      .divider-box{
        width: 90%;
        margin: 0 auto;
        .el-divider__text{
          color: #999;
        }
      }

      .system {
        display: flex;
        justify-content: center;

        view {
          padding: 0 15px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #c9c9c9;
          color: #fff;
          font-size: 12px;
          border-radius: 20px;
        }

        .red-envelope {
          image {
            margin-right: 3px;
            width: 15px;
            height: 15px;
          }
        }
      }

      &:first-child {
        margin-top: 15px;
      }

      .my {
        .left {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          margin-top: 20px;
          margin-left: 20px;
          min-height: 40px;
          justify-content: flex-end;
          flex-wrap: wrap;

          .bubble {
            max-width: 40%;
            padding: 12px 14px 11px 16px;
            word-break: break-word;
            box-sizing: border-box;
            background-color: #d0e9ff;
            color: #000;
            opacity: 1;
            border-radius: 8px 0 8px 8px;

            .longimage {
              cursor: pointer;
              width: 34px;
              height: 34px;
            }

            .squareimage {
              width: 150px;
              height: 150px;
            }
          }

          img {
            width: 40px !important;
            height: 40px !important;
            border-radius: 5px;
          }

          .bubble.play {
            .icon {
              &:after {
                border-left: solid 5px rgba(240, 108, 122, 0.5);
                animation: my-play 1s linear infinite;
              }
            }
          }

          .username {
            width: 100%;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .time {
              text-align: center;
              margin-left: 20px;
            }
          }
        }

        .right {
          .bubble {
            .longimage {
              width: 88px;
              height: 88px;
              cursor: pointer;
              object-fit: contain;
            }

            max-width: 40%;
            margin-top: 6px;
            color: #000;
            opacity: 1;
            border-radius: 8px 0 8px 8px;

            span {
              display: inline-block;
              padding: 12px 14px 11px 16px;
              word-break: break-word;
              box-sizing: border-box;
              background-color: #f3f3f3;
              color: #000;
              opacity: 1;
              border-radius: 8px 0 8px 8px;
            }
          }

          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          margin-left: 7px;

          .avatar {
            width: 34px;
            height: 34px;
            margin-right: 20px;
          }

          .username {
            .name {
              max-width: 70%;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        width: 100%;
        display: flex;
        justify-content: flex-end;
      }

      .other {
        .right {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          margin-top: 20px;
          flex-wrap: wrap;
          margin-left: -8px;
          margin-right: 15px;

          .bubble {
            max-width: 40%;
            padding: 12px 14px 11px 16px;
            word-break: break-word;
            box-sizing: border-box;
            justify-content: flex-end;
            opacity: 1;
            border-radius: 0 8px 8px 8px;

            .longimage {
              cursor: pointer;
              width: 34px;
              height: 34px;
            }

            .squareimage {
              width: 150px;
              height: 150px;
            }
          }

          img {
            width: 40px !important;
            height: 40px !important;
            border-radius: 5px;
          }

          .bubble.play {
            .icon {
              &:after {
                border-right: solid 5px rgba(255, 255, 255, 0.8);
                animation: other-play 1s linear infinite;
              }
            }
          }
        }

        .left {
          .bubble {
            .longimage {
              width: 88px;
              height: 88px;
              cursor: pointer;
              object-fit: contain;
            }

            align-self: flex-end;
            max-width: 40%;
            margin-top: 6px;
            margin-right: 14px;
            opacity: 1;
            border-radius: 8px 0 8px 8px;
            color: #333;

            span {
              display: inline-block;
              padding: 12px 14px 11px 16px;
              word-break: break-word;
              box-sizing: border-box;
              background-color: #d0e9ff;
              color: #333333;
              opacity: 1;
              border-radius: 8px 0 8px 8px;
              white-space: pre-line;
            }
          }

          width: 100%;
          display: flex;
          margin-left: 12px;
          flex-direction: column;
          margin-bottom: 20px;
          margin-right: 7px;

          .avatar {
            width: 34px;
            height: 34px;
            margin-right: 20px;
          }

          .username {
            width: 100%;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .name {
              max-width: 70%;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .take-charge-of {
            width: 100%;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10px;
          }
        }

        width: 100%;
        display: flex;
      }
    }

    .phone-icon {
      width: 30px;
      height: 30px;
    }

    .windows {
      .mask {
        position: fixed;
        top: 100%;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: opacity 0.2s ease-out;
      }

      .layer {
        position: fixed;
        width: 80%;
        height: 70%;
        left: 10%;
        z-index: 1001;
        border-radius: 10px;
        overflow: hidden;
        top: 100%;
        transform: scale3d(0.5, 0.5, 1);
        transition: all 0.2s ease-out;
      }
    }

    .windows.show {
      display: block;

      .mask {
        top: 0;
        opacity: 1;
      }

      .layer {
        transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
      }
    }

    .windows.hide {
      display: block;

      .mask {
        top: 0;
        opacity: 0;
      }
    }

    .flex-wrap {
      flex: auto;
    }

    .back-icon {
      position: absolute;
      left: 0;
      top: 18px;
      width: 25px;
      height: 15px;
      transform: rotate(90deg);
    }

    .shop-tit {
      text-align: center;
      max-width: 80%;
      margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .sys-tips {
      display: flex;
      justify-content: center;
    }

    .tips-content {
      color: #999999;
      font-size: 14px;
    }

    .topTime {
      text-align: center;
      margin-bottom: 15px;
      height: 14px;
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 14px;
      color: #aaaaaa;
      opacity: 1;
    }

    .order-column {
      flex: 1;

      .tab-switch {
        display: flex;
        height: 37px;
      }

      .inquiry {
        flex: 1;
        text-align: center;
        line-height: 37px;
        cursor: pointer;
        font-size: 12px;
        border-bottom: 1px solid #eceef0;
        background: #f8f8f8;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        opacity: 1;
      }

      .my-order {
        flex: 1;
        text-align: center;
        line-height: 37px;
        cursor: pointer;
        font-size: 12px;
        border-bottom: 1px solid #eceef0;
        background: #f8f8f8;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        opacity: 1;
      }

      .active {
        color: #e1251b;
        background-color: #fff;
        border: none;
      }

      .browse {
        width: 100%;
        border-bottom: 1px solid #eceef0;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 14px;
        color: #666666;
        opacity: 1;
      }

      .text {
        width: 60px;
        padding: 11px 0 5px 0;
        margin: auto;
        border-bottom: 2px solid #e1251b;
      }

      .order-list {
        .botl {
          border-bottom: 9px solid #faf9f9;
          flex-direction: column;
          padding-bottom: 0;
        }
      }
    }

    .recent-list {
      padding-left: 12px;
      height: 663px;
      overflow-y: auto;
    }

    .order-list {
      padding-left: 12px;
      height: 663px;
      overflow-y: auto;

      .bottom-tips {
        text-align: center;
        padding-top: 20px;
      }
    }

    .prod-item {
      display: flex;
      padding: 18px 0;
      border-bottom: 1px solid #eceef0;
      border-top: 1px solid #eceef0;
      margin-top: -1px;

      .prod-detail {
        padding-right: 12px;
        flex: 1;
      }

      img {
        width: 60px !important;
        height: 60px !important;
        margin-right: 12px;
      }

      .prod-name {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 18px;
        color: #333333;
        opacity: 1;
        word-break: break-word;
      }

      .interval {
        width: 100%;
        height: 10px;
        background: #faf9f9;
        opacity: 1;
      }
    }

    .prod-b {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .prod-price {
        margin-top: 5px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 18px;
        color: #e1251b;
        opacity: 1;
      }

      .prod-send {
        width: 46px;
        height: 24px;
        cursor: pointer;
        text-align: center;
        border: 1px solid #e9eaec;
        opacity: 1;
        border-radius: 12px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 24px;
        color: #333333;

        &:hover {
          border: 1px solid #e1251b;
          color: #e1251b;
        }
      }
    }

    .order-box {
      display: flex;

      .number {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 14px;
        color: #666666;
        opacity: 1;
      }

      .time {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 14px;
        color: #666666;
        opacity: 1;
      }
    }

    .order-number {
      padding-bottom: 6px;
      border-bottom: 1px solid #ebedf0;
      margin-bottom: 12px;

      .number {
        display: inline-block;
        margin-right: 16px;
      }
    }

    .search-btnn {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .newMessage {
      background-color: #FFF9cd;
    }

    .imgUp {
      position: absolute;
      left: 22px;
      top: 18px;

      &:hover {
        background-image: url("@/assets/chat/upload-on.png");
        cursor: pointer;
      }
    }

    .prod-number {
      margin-bottom: 5px;
    }

    .link-prod {
      width: 65%;
      border: 1px solid #f2f2f2;
      box-sizing: border-box;
      margin-top: 6px;
      padding: 15px 0 18px 12px;
      cursor: pointer;

      img {
        width: 88px !important;
        height: 88px !important;
        object-fit: contain;
      }

      .link-detail {
        display: flex;
        width: 70%;
        flex-direction: column;
        justify-content: space-between;
        margin: 15px;
        box-sizing: border-box;
      }

      .prod-price {
        margin-top: 10px;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        opacity: 1;
        display: flex;
        justify-content: space-between;
        word-break: break-all;
      }

      .payment-amount {
        flex: 1;
      }

      .prod-status {
        width: 35%;
        text-align: end;
      }
    }

    .prod-box {
      display: flex;
    }

    .link-detail {
      .prod-name {
        font-size: 10px;
        font-family: PingFang SC;
        padding-top: 5px;
        font-weight: 400;
        color: #333333;
        opacity: 1;
        word-break: break-word;
      }
    }

    .link-send {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 49px;
      text-align: center;
      color: #e43130;
    }

    .link-send-right {
      width: 5px;
      height: 8px;
      margin-left: 7px;
      display: inline-block;
      background: url("@/assets/chat/upload-on.png");
    }

    .img-view {
      position: inherit;
      width: 100%;
      height: 100%;
    }

    .img-layer {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
      overflow: hidden;

      .img {
        max-width: 50%;
        max-height: 50%;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1000;
        cursor: pointer;
      }

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        object-fit: contain;
      }
    }

    .display-infor {
      .more {
        font-size: 12px;
        color: #5a606b;
        text-align: center;
        margin-bottom: 20px;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    }

    .unread {
      font-size: 12px;
      color: #AAAAAA;
      margin-right: 9px;
    }

    .left {
      .message-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .prods-select-body {
      height: 630px;
      overflow: auto;
      border-top: 1px solid #eeeeee;
      border-right: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
    }

    .un-read-tips {
      background-color: #fff;
      padding: 10px 15px 10px 15px;
      font-size: 12px;
      border-radius: 20px 0 0 20px;
      position: absolute;
      color: #155bd4;
      top: 10px;
      right: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      -webkit-box-shadow: 1px 1px 5px 0 #aaa;
      box-shadow: 1px 1px 5px 0 #aaa;
    }

    .un-read-icon {
      margin-right: 5px;
      margin-bottom: 1px;
    }

    .changeUser {
      background-color: #D0E9FF;
    }

    .bubble {
      &:deep(.el-image-viewer__close) {
        color: red !important;
      }
    }

    .imbox {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .imboxItem {
      top: 50%;
      left: 50%;
      margin-left: -433px;
      margin-top: -300px;
      z-index: 10001;
      display: block;
      position: fixed;
      _position: absolute;
      box-shadow: 2px 2px 4px #a0a0a0, -2px -2px 4px #a0a0a0;
    }

    .web__tools {
      dl {
        display: none;
      }
    }

    .ChatPage {
      .main {
        .rightBox {
          border-left: 1px solid #f1f1f1;
        }
      }
    }

    .rightBox {
      .item {
        margin-bottom: 10px;
      }
    }

    .wrapper {
      span {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
        line-height: 1.5;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}

@keyframes "my-play" {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes "other-play" {
  0% {
    transform: translateX(-80%);
  }
  100% {
    transform: translateX(0%);
  }
}

@media screen and (max-width: 1680px) {
  .body {
    .chat-box {
      opacity: 1;
      margin: 20px auto 20px auto;
    }

    position: absolute;
    height: calc(110vh + 200px);
  }
}
