uniapp 聊天页的显示，右对齐，圆形头像_uniapp圆形头像

<template>
	<view class="concent">
		<view class="avatar">
			<image class="avatar-img" src="/static/e00f010e2f4cc816936609caaa8125cd_1.jpg" mode="aspectFill"></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.avatar {
		width: 160rpx;
		height: 160rpx;
		background-color: #FFFFFF;
		/* 可选，设置背景颜色 */
		padding: 30rpx 30rpx;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.concent{
		width:100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		/* 实现右对齐 */
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47