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%;
}
效果图