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;

      .contentBox {
        .time {
          width: 200rpx;
          margin-bottom: 10rpx;
          font-size: 22rpx;
          color: #969696;
        }

        .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 {
          max-width: 200rpx;
        }
      }

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

    }

    .someone {
      justify-content: flex-start;

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

    .self {
      justify-content: flex-end;

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

  }

  .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;
  }
}