wxml

<view class="container">
  <view class="userinfo">
    <view class="userinfo-avatar">
      <open-data type="userAvatarUrl"></open-data>
    </view>
    <open-data class="userinfo-nickname" type="userNickName"></open-data>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

wxcc

.handle-main-box {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fle1 {
  flex: 1;
}

.show-rev {
  display: inline-flex;
}

.show-text-view {
  display: flex;
  border-top: 1px solid gainsboro;
  height: 100px;
  padding-top: 8px;
}

.show-d {
  display: block;
  word-wrap: break-word;
  word-break: break-all;
}

.show-s-d {
  color: #73d721;
}

.show-t-d {
  color: #a1a8ba;
}

.clear-btn {
  position: fixed;
  width: 120px;
  color: white;
  text-align: center;
  background-color: #16d867;
  border-radius: 20px 0px 0px 20px;
  line-height: 45px;
  display: inline-block;
  top: 180px;
  right: 0px;
}

.clear-btn-send {
  position: fixed;
  width: 120px;
  color: white;
  text-align: center;
  background-color: #ffb202;
  border-radius: 20px 0px 0px 20px;
  line-height: 45px;
  display: inline-block;
  top: 100px;
  right: 0px;
}

.sendDataBox {
  line-height: 30px;
  min-height: 100px;
  margin: 0px auto;
  width: 100%;
}

text {
  line-height: 30px;
}

.handle-box-view {
  line-height: 30px;
  display: flex;
}

.handle-btn {
  border-radius: 0px;
}

.list-history-box {
  position: absolute;
  bottom: 0px;
  z-index: 12;
  height: 260px;
  width: 100%;
  background-color: ghostwhite;
}

.history-list-val-box {
  height: 200px;
}

.send-history-text {
  display: block;
  line-height: 35px;
  border-bottom: 1px solid white;
}

.history-item-value-table {
  display: block;
  line-height: 35px;
  border-bottom: 1px solid white;
}

.history-hidden {
  width: 100%;
}

效果图