「微信小程序11-16.jpg」，点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载，极速在线查看享用。 链接：https://www.aliyundrive.com/s/ddQRjLnjedv

message.wxml

<view class="title-item">
    私信对话
</view>
<!-- 所有信息 -->
<view class="message-all">
    <!-- 每条信息 -->
    <view class="message-item">
        <!-- 左边的头部 -->
        <view class="item-head">
            <image src="https://p1.music.126.net/QwX2jcWETpEKxWqhgtuUwA==/109951165121122973.jpg"></image>
        </view>
        <!-- 右边内容 -->
        <view class="item-con">
            <!-- 右边内容又分为 左右结构 -->
            <view class="item-con-title">
                <text>主标题主标题主标题主标题</text>
                <text>副标题副标题副标题副标题副标题副标题副标题副标题副标题</text>
            </view>
            <view class="item-con-time">
                <view>11月16日</view>
                <view>3</view>
            </view>
        </view>
    </view>
</view>

message.wxss

/* pages/message/message.wxss */
page{
    background-color: #ffffff;
}
.title-item{
    width: 90%;
    height: 60rpx;
    background-color: #f7f7f7;
    line-height: 60rpx;
    padding: 0 5%;
    font-size: 25rpx;
    color: #686868;
}
.message-all{
    width: 100%;
    height: auto;
}
.message-item{
    width: 90%;
    height: 150rpx;
    padding: 0 5%;
}
/* 左边的头像 */
.item-head{
    width: 20%;
    height: 150rpx;
    float: left;
    text-align: center;
}
/* 找到头像下面的图片 */
.item-head image{
    width: 110rpx;
    height: 110rpx;
    margin-top: 20rpx;
    border-radius: 50%;
}
.item-con{
    width: 80%;
    height: 150rpx;
    float: left;
    border-bottom: 1rpx #cccccc solid;
}
.item-con-title{
    width: 80%;
    height: 150rpx;
    float: left;
}
.item-con-title text:nth-child(1){
    display: block;
    margin-top: 30rpx;
    font-size: 35rpx;
}
.item-con-title text:nth-child(2){
    display: block;
    color: #b0b0b0;
    font-size: 25rpx;
    margin-top: 10rpx;
    /* 多行文本溢出 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


.item-con-time{
    width: 20%;
    height: 150rpx;
    float: left;
}
.item-con-time view:nth-child(1){
    width: 100%;
    height: 50%;
    font-size: 25rpx;
    line-height: 100rpx;
    color: #b0b0b0;
}
.item-con-time view:nth-child(2){
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 27rpx;
    color: #ffffff;
    float: right;
    background-color: #ff3a39;
    border-radius: 50%;
}