demingshangjia/pages/messages/messagesList.vue

<template>
	<!-- login页面 -->
	<view>
		<view class="border_serach">
			<view class="u-search">
				<u-search :show-action="false" input-align="left" shape="round" placeholder="搜索" v-model="keyword"></u-search>
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="massage_list" v-for="(item,index) in list" :key="index">
			<view class="images">
				<image :src="item.url" ></image>
			</view>
			<view class="names">{{item.name}}</view>
			<view class="content">{{item.content}}</view>
			<view class="times">{{item.time}}</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '搜索',
				list: [{
						name: '瘦瘦',
						content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
						url: '../../static/image/tosign/tosigin(5).png',
						id : '1',
						time : '10：15'
					},
					{
						name: '瘦瘦',
						content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
						url: '../../static/image/tosign/tosigin(5).png',
						id : '1',
						time : '10：15'
					},
					{
						name: '瘦瘦',
						content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
						url: '../../static/image/tosign/tosigin(5).png',
						id : '1',
						time : '10：15'
					},
				],
			};
		},
		methods: {
			
		}
	};
</script>

<style lang="scss" scoped>
	.u-search{
		width: 690rpx;
		margin: 0 auto;
		padding: 14rpx;
	}
	.border_serach{
		border-top: 1px solid #EDEDED;
	}
	.massage_list{
		padding: 25rpx 18rpx 25rpx 31rpx;
		position: relative;
		border-bottom: 1px #ECECEC solid;
		overflow: hidden;
		zoom: 1;
		.images{
			width: 84rpx;
			height: 84rpx;
			margin-right: 28rpx;
		}
	}
	.massage_list image{
		width: 84rpx;
		height: 84rpx;
		.names{
			font-size: 30rpx;
			color: #333;
		}
		
		.content{
			margin-bottom: 19rpx;
		}
	}
	.content , .names{
		width: 480rpx;
	}
	.content{
		margin-top: 19rpx;
		font-size: 26rpx;
		color: #666666;
		height: 30rpx;
		height: 30rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}
	.times{
		position: absolute;
		right: 29rpx;
		top: 29rpx;
		font-size: 22rpx;
		color: #999999;
	}
	.massage_list > view{
		float: left;
	}
</style>