reader/pages/chat/index.less

.chat {
  background-color: white;

  .content {
    height: 100vh;
    padding: 0rpx 30rpx;
    box-sizing: border-box;

    .base {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 42rpx;
      margin-top: 20rpx;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: rgb(238, 238, 238);
      }

      .message {
        max-width: 80%;
        padding: 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        line-height: 42rpx;
        border-radius: 14rpx;
        background-color: #F2F6FC;
        word-break: break-all;
      }

      .msgImg {
        margin-right: 24rpx;
        max-width: 200rpx;
      }
    }

    .someone {
      justify-content: flex-start;

      .avatar {
        margin-right: 30rpx;
      }
    }

    .self {
      justify-content: flex-end;

      .message {
        display: inline-block;
        margin-right: 30rpx;
        background-color: #3DD076;
        color: white;
      }
    }

  }

  .inputBox {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx 26rpx;
    background-color: #EEEDED;

    .input {
      height: 80rpx;
      flex: 1;
      padding-left: 20rpx;
      border-radius: 10rpx;
      background-color: white;
    }

    .sendImg {
      width: 32rpx;
      height: 32rpx;
      border: 4rpx solid #3DD076;
      margin: 0rpx 24rpx;
      padding: 10rpx;
      border-radius: 50%;
    }

    .submit {
      padding: 14rpx 10rpx 14rpx 0rpx;
      color: #0091FF;
      font-size: 38rpx;
    }
  }

  .iosPadding {
    padding-bottom: 40rpx;
  }
}