shop-app/pages/account/message/group.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 16:13:00
 * @LastEditors: ch
 * @LastEditTime: 2022-04-09 15:09:26
 * @Description: file content
-->
<template>
	<view>
		<BsEmpty tips="暂时还没有消息哦~" :icon="require('@/static/message/empty.png')" />
		<view class="msgItem" v-for="item in 5" :key="item">
			<image class="msgItem--headImg" src="@/static/account/tx.png"></image>
			<view class="msgItem--con">
				<view>
					<text class="msgItem--title">马士兵严选你的包裹已经到达菜鸟驿站</text>
					<text class="msgItem--text">你的包裹已经到达菜鸟驿站你的包裹已经到达菜鸟驿站你的包裹已经到达菜鸟驿站你的包裹已经到达菜鸟驿站</text>
				</view>
				<view class="msgItem--right">
					<text class="msgItem--time">03-03 24:00</text>
					<u-badge class="msgItem--badge" value="99"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import BsEmpty from '../../../components/BsEmpty.vue';
export default {
	components: { BsEmpty }
}
</script>
<style lang="scss" scoped>
.msgItem{
	display: flex;
	padding: 40rpx 0 0 40rpx;
	&--headImg{
		width: 106rpx;
		height: 106rpx;
		margin-right: 30rpx;
	}
	&--con{
		flex: 1;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid $color-grey2;
		padding: 0 40rpx 40rpx 0;
	}
	&--title{
		width: 350rpx;
		display: block;
		font-size: $font-size-lg;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}
	&--text{
		width: 350rpx;
		font-size: $font-size-base;
		line-height: 36rpx;
		color: $color-grey4;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	&--right{
		text-align: right;
	}
	&--time{
		font-size: $font-size-sm;
		color: $color-grey4;
		display: block;
		height: 36rpx;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
	&--badge{
		display: inline-block;
	}
}
</style>