recycle-mobile/src/pages/message/index.vue

<template>
    <view class="message_user">
        <view class="gonggao">
            <view>防骗手册，为您保驾护航</view>
            <text class="iconfont icon-jinru"></text>
        </view>
        <view class="message_user_aview" v-for="(item,index) in 5" :key="index">
            <view class="message_user_a">
                <view class="message_user_info">
                    <!-- 头像 -->
                    <view class="user_head">

                    </view>
                    <view  class="user_info">
                        <!-- 姓名 -->
                        <view class="user_name">张锋</view>
                        <!-- 聊天信息最后一条 -->
                        <view class="user_goods">商品很nice</view>
                        <!-- 聊天信息最后一条的时间 -->
                        <view class="user_time">2023-10-21 12：20：21</view>
                    </view>
                    <!-- 商品图片 -->
                    <view  class="goods_img">

                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.message_user{
    width: 100%;
    box-sizing: border-box;
    padding-top: 80rpx;
    .gonggao{
        position: absolute;
        width: 100%;
        height: 80rpx;
        background: #fff2d4;
        top: 0;
        z-index: 999;
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        color: rgb(230, 138, 19);
        view{
            color: rgb(230, 138, 19);
        }
    }
    .message_user_aview{
        width:100%;
        height: auto;
        box-sizing: border-box;
        padding: 0 20rpx;
        background: #fff;
        .message_user_a{
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 20rpx 0;
        }

        &:not(:last-child){
            .message_user_a{
                border-bottom: 1rpx solid #ddd;
            }
        }
        .message_user_info{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .user_head{
                width: 80rpx;
                height: 80rpx;
            }
            .user_info{
                width: 500rpx;
                min-height: 100rpx;
                box-sizing: border-box;
                padding: 0 16rpx;
                .user_name{
                    width: 100%;
                    font-size: 28rpx;
                    font-weight: bold;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*禁止换行*/
                    text-overflow: ellipsis; /*省略号*/
                }
                .user_goods{
                    width: 100%;
                    font-size: 24rpx;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*禁止换行*/
                    text-overflow: ellipsis; /*省略号*/
                    margin: 10rpx 0;
                }
                .user_time{
                    width: 100%;
                    font-size: 20rpx;
                    color: #aaa;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*禁止换行*/
                    text-overflow: ellipsis; /*省略号*/
                }
            }
            .goods_img{
                width: 100rpx;
                height: 100rpx;
            }
        }
    }
}
</style>