cgst/components/wallet/msg/msg-list.vue

<template>
	<!-- <view class="flex align-center p-2 border-bottom border-light-secondary animated fast fadeIn" hover-class="bg-light" @click="open"> -->
	<view class="msgLIst" hover-class="bg-light" @click="open">
		<image :src="item.avatar" mode="" style="height: 60rpx;width: 60rpx;" class="msgImg "></image>
		<view class="msgView">
			<view class="betWeen">
				<text class="font-md">
					{{item.username}}
				</text>
				<text class="text-secondary font-sm">
					{{item.updata_time | formateTime}}
				</text>
			</view>
			<view class="betWeen">
				<text class="text-secondary text-ellipsis" style="max-width: 500rpx;">
					{{item.data}}
				</text>
				<uni-badge :text="item.noread" type="error "></uni-badge>
			</view>
		</view>
	</view>

</template>

<script>
	// 引入时间库
	import $T from '@/components/common/time.js';
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	export default {
		props: {
			item: Object,
			index: Number
		},
		components: {
			uniBadge
		},
		filters: {
			formateTime(value) {
				return $T.gettime(value)
			}
		},
		methods: {
			open() {
				uni.navigateTo({
					url: '../../pages/user-chat/user-chat'
				});
			}
		}
	}
</script>

<style lang="scss">
	.msgLIst {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #dee2e6;
		&:first-of-type {
			margin-top: 20rpx;
		}

		.msgImg {
			margin-right: 20rpx;
			border-radius: 100rpx;

		}

		.msgView {
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}

	.betWeen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.font-md {
			font-size: 30rpx;
		}

		.text-secondary {
			color: #6c757d;
			font-size: 24rpx;
		}

		.font-sm {
			font-size: 20rpx;
		}

		/* 文字换行溢出处理 */
		.text-ellipsis {
			/* #ifndef APP-PLUS-NVUE */
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			/* #endif */
			/* #ifdef APP-PLUS-NVUE */
			lines: 1;
			/* #endif */
		}
	}
</style>