BlackFruit-UI/plugins/addon/example/template/clientarea/pc/default/css/ticketDetails.less

.ticket-details {
  .main-card {
    .top {
      padding: 0;
      font-size: 0.3rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .2rem;

      .top-l {
        .top-img {
          cursor: pointer;
          margin-right: .25rem;
        }
      }
    }

    .top-line {
      width: 100%;
      height: 1px;
      background: #E6E7EB;
      opacity: 1;
    }

    .card {
      display: flex;
      flex-direction: column;
      margin-bottom: .65rem;

      .card-title {
        font-size: .2rem;
        line-height: .25rem;
        color: #171725;
        margin-top: .42rem;
        margin-bottom: .2rem;
      }

      .card-main {
        height: 100%;
        background: #FFFFFF;
        border: 1px solid #E6E7EB;
        opacity: 1;
        border-radius: 3px;
        padding-left: .2rem;
        padding-bottom: .2rem;

        .close-btn {
          width: 88px;
          height: 32px;
          border: 1px solid var(--color-danger);
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--color-danger);
          cursor: pointer;
          float: right;
          margin-top: .2rem;
          margin-right: .3rem;
        }

        .card-main-item {
          margin-top: .2rem;

          .main-item-label {
            font-size: .12rem;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: .17rem;
            color: #8692B0;
            margin-bottom: .04rem;
          }

          .main-item-text {
            font-size: .14rem;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: .2rem;
            color: #171725;
          }

          .host-item-text {
            color: var(--color-primary);

            .host-item {
              cursor: pointer;
            }
          }
        }


      }

      .talk-main {
        padding: 0;

        .tox-statusbar__branding {
          display: none;
        }

        .main-old-msg {
          // height: 5.38rem;
          box-sizing: border-box;
          overflow-y: auto;
          overflow-x: hidden;
          padding-bottom: .17rem;

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

          .reply-item {
            display: flex;
            flex-direction: column;

          }

          // 用户回复
          .Client {
            align-items: flex-end;
            padding-right: .2rem;

            .reply-item-top {
              display: flex;
              flex-direction: row;
              margin-top: .25rem;
              align-items: baseline;

              .reply-time {
                font-size: .12rem;
                line-height: .13rem;
                color: #8692B0;
                margin-right: .04rem;
              }

              .reply-name {
                font-size: .15rem;
                line-height: .16rem;
                color: #1E2736;
              }

              .reply-img {
                width: .32rem;
                height: .32rem;
                margin-left: .05rem;

                img {
                  width: .32rem;
                }
              }
            }

            .reply-item-content {
              max-width: 90%;
              padding: .16rem;
              background: #E3FBFA;
              font-size: 14px;
              color: #4E5259;
              margin-top: .16rem;
              // white-space: pre-line;
            }

            .reply-item-attachment {
              display: flex;
              flex-direction: row;
              margin-top: .15rem;

              .reply-item-attachment-item {
                margin-left: .2rem;
                cursor: pointer;
              }
            }
          }

          // 管理员回复
          .Admin {
            align-items: flex-start;
            padding-left: .2rem;

            .reply-item-top {
              display: flex;
              flex-direction: row-reverse;
              margin-top: .25rem;
              align-items: baseline;

              .reply-time {
                font-size: .12rem;
                color: #8692B0;
                margin-left: .04rem;
              }

              .reply-name {
                font-size: .15rem;
                color: #1E2736;
              }

              .reply-img {
                width: .32rem;
                height: .32rem;
                margin-right: .05rem;

                img {
                  width: .32rem;
                  height: .32rem;
                }
              }

            }

            .reply-item-content {
              // width: 6.95rem;
              max-width: 90%;
              padding: .16rem;
              background: #EEF4FF;
              font-size: 14px;
              color: #4E5259;
              margin-top: .16rem;
            }

            .reply-item-attachment {
              display: flex;
              flex-direction: row;
              margin-top: .15rem;

              .reply-item-attachment-item {
                margin-right: .2rem;
                cursor: pointer;
              }
            }
          }
        }

        .main-now-msg {
          .tox-tinymce {
            height: 300px !important;
          }

          .msg-input {
            width: 100%;

            .el-textarea__inner {
              border-radius: 0%;
              border-left: none;
              border-bottom: none;
              border-right: none;
            }
          }
        }
      }

      .card-footer {
        display: flex;
        justify-content: space-between;
        margin-top: .2rem;

        .upload-btn {

          .el-icon-upload2 {
            font-size: .12rem;
            margin-right: .02rem;
          }

          .btn-text {
            height: .32rem;
            line-height: .32rem;
          }
        }

        .send-btn {
          width: .88rem;
          height: .32rem;
          font-size: .14rem;
          line-height: .14rem;
          background: var(--color-primary);
          opacity: 1;
          border-radius: 3px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
}

.del-dialog {

  // 弹窗相关
  .el-dialog__body {
    padding-left: .8rem;
    padding-right: .8rem;
  }

  .dialog-main {
    margin-top: .4rem;

    .el-input__inner {
      height: .52rem;

    }

    .label {
      font-size: .16rem;
      color: #1E2736;
      margin-bottom: .1rem;

      &:not(:first-child) {
        margin-top: .2rem;
      }
    }
  }

  .dialog-footer {
    .btn-no {
      margin-left: .12rem;
      cursor: pointer;
    }

    .btn-ok {
      cursor: pointer;
    }
  }
}

.el-main {
  overflow: unset;
}

#viewer {
  width: 0;
  height: 0;
}

@media screen and (max-width: 750px) {
  .ticket-details .main-card .card .card-footer .send-btn {
    height: auto;
  }
}