xiangqin/pages/profile/zixunList.vue

<template>
	<view>
		<view class="" style="width: 690rpx;
height: 248rpx;
background: #FFFFFF;
border-radius: 28rpx;margin: 0 auto 20rpx;padding: 24rpx 20rpx;box-sizing: border-box;">
		<view class="content" style="max-height: 130rpx;">
			我和对象到了谈婚论嫁的地步，但是因为彩礼谈崩了分手，之前我也找了其他的，都是我在学习后没太大作用，当时也没抱太大希望，就试试看的…
		</view>
		<view class="u-flex u-row-between" style="margin-top: 20rpx;">
			<text style="font-size: 24rpx;color: #888888;">2022-08-12</text>
			<view class="" style="width: 144rpx;
height: 52rpx;
border-radius: 26rpx;
border: 1px solid #979797;line-height: 52rpx;text-align: center;" @click="delectItem">
				删除
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			delectItem(){
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>
page{
background: #F3F3F3;
}
.content{
	                 /* height: 100px; 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/
	                 /* 设置高度是行高的倍数，防止文本露出一半 */
	                 /* 旧版弹性盒 */
	                 display: -webkit-box;
	                 /* 弹性盒子元素垂直排列 */
	                 -webkit-box-orient: vertical;
	                 /* 控制要显示的行数 */
	                 -webkit-line-clamp: 3;
	                 overflow: hidden;

}

</style>