uniapp 单条聊天信息的css样式

<template>
	<view class="content">
		<view class="buttompadding" >
			<view class="row">
				<view class="name" >
					{{title}}
				</view>
			</view>
				
				<view class="avatar">
					<image class="avatar-img" src="/static/e00f010e2f4cc816936609caaa8125cd_1.jpg" 
					style="width: 50px; height: 50px; object-fit: cover;"
					mode="aspectFill">
					</image>
				</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"俄罗斯星期一（1月29日）晚在乌克兰发动自1月2日以来最大规模的无人机及导弹袭击，其中20架绕过乌军的防空系统，对基辅、第聂伯罗彼得罗夫斯克州、哈尔科夫地区、顿涅茨克州等地民用基础设施造成破坏及三人死亡。美国战争研究所分析称，在乌克兰的反攻陷入停滞之际，俄军继续沿着前线推进并在东部一些地方取得一些进展。图为基辅地区一栋行政大楼遭无人机袭击起火燃烧。（法新社）"
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style>
	/* 现在有两个元素,这两个元素是上下排列的 */
	.avatar {
		background-color: #FFFFFF;
		/* 可选，设置头像背景颜色 */
	}
	
	.avatar-img {
		border-radius: 50%;
		/* 设置圆形头像 */
	}
	
	/* 这个是父元素 */
	.buttompadding{
		display: flex;
		justify-content: flex-end;
		padding: 35rpx 25rpx 0 0;
	}
	
	/* 这是文字的子元素 */
	.name{
		padding: 15rpx 15rpx;
		background-color: aliceblue;
		border-radius: 20rpx;
	}
	.row {
		padding: 0 30rpx 0 30rpx;
		
	}
</style>