siyu_app/components/message/msg-list.vue

<template>
	<view class="msg-item" @tap='clickMsgItem'>
		<view class="msg-timer">{{$formatDate(item.createTime)}}</view>
		<view class="msg-content u-f u-f-jsb">
			
			<image class="msg-img" v-if="item.msgType==1" src="@/static/images/message/regular_client_icon_80.png" mode="widthFix"></image>
			<image class="msg-img" v-else-if="item.msgType==2" src="@/static/images/message/Timingvideo.png" mode="widthFix"></image>
			<image class="msg-img" v-else-if="item.msgType==3" src="@/static/images/message/budget_icon_80.png" mode="widthFix"></image>
			<image class="msg-img" v-else src="@/static/images/message/announcement_icon_100.png" mode="widthFix"></image>
			
			<view class="msg-txt">{{item.content}}</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:function(){
					return {};
				}
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			clickMsgItem(){
				return this.$emit('clickMsgItem',this.index)
			}
		}
	}
</script>

<style lang="scss">
	.msg-item{
		width: 710rpx;
		padding: 0 20rpx;
		.msg-timer{
			margin: 30rpx 0;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.msg-content{
			.msg-img{
				width: 90rpx;
				height: 90rpx;
				margin-right: 20rpx;
			}
			.msg-txt{
				background-color: #FFFFFF;
				width: 600rpx;
				padding: 30rpx 20rpx;
				border-radius: 0px 30px 30px 30px;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
</style>