<template>
	<view class="msg-block">
		<view class="time">
			<text>{{time}}</text>
		</view>
		<view class="msg-content">
			<text class="caption">{{caption}}</text>
			<text class="content">{{content}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			time: {
				type: String,
				required: true
			},
			caption: {
				type: String,
				required: true
			},
			content: {
				type: String,
				required: true
			}
		},
		data() {
			return {}
		}
	}
</script>

<style>
	.msg-block {
		padding: 20rpx;
		display: inline-block;
	}
	
	.msg-block .time {
		text-align: center;
		font-size: 28rpx;
		color: #a5a5a5;
		margin-bottom: 20rpx;
	}
	
	.msg-content {
		background-color: #FFFFFF;
		padding: 40rpx;
		border-radius: 10rpx;
	}
	
	.msg-content .caption {
		font-size: 32rpx;
		display: block;
		color: #000000;
		padding: 0 0 20rpx 0rpx;
	}
	
	.msg-content .content {
		font-size: 30rpx;
		display: block;
		color: #a4a4a4;
		padding: 0rpx;
		word-wrap: break-word;
		word-break: break-all;
	}
</style>
