page{
	background-color: #FAFAFA;
	padding-bottom: 100upx;
}

.liaotiancards{
	
}
.chatlist{
	background-color: #fff;
}
.chatitem{
	padding: 28upx 32upx;
	border-bottom: 1px solid #f3f3f3;
	
	.usertxbox{
		position: relative;
	}
	.tagmsgs{
		position: absolute;
		z-index: 9;
		top: -5upx;
		right: 0;
		width: 40upx;
		height: 40upx;
		line-height: 40upx;
		background-color: #ff0000;
		color: #FFFFFF;
		border-radius: 50%;
		text-align: center;
		font-size: 24upx;
	}
	
	.usertx{
		border: 1px solid #f1f1f1;
		width: 106upx;
		height: 106upx;
		border-radius: 10upx;
	}
	
	.chatitem_r{
		margin-left: 32upx;
		.linenamebox{
			.nikenames{
				color: #333333;
				font-size: 32upx;
			}
			.qiyenames{
				color: #999999;
				font-size: 24upx;
				margin-left: 24upx;
			}
			.istimes{
				color: #999999;
				font-size: 26upx;
				
			}
		}
		.isliaotcon{
			margin-top: 33upx;
			color: #666666;
			font-size: 28upx;
		}
	}
}

.chatlist .chatitem:last-child {
	border: 0;
}
// 消息end



.tuijiancards{
	padding: 42upx 32upx;
	background: #fff;
	.titheadbox{
		.tititis{
			color: #333333;
			font-weight: bold;
			font-size: 32upx;
		}
		.clearionc{
			width: 28upx;
			height: 28upx;
		}
	}
	.usertxss{
		margin-top: 26upx;
		.touxiongbox{
			.pbtouxiongs{
				position: relative;
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
			}
			.pbtouxiongs:nth-child(2){
				left: -10upx;
			}
			.pbtouxiongs:nth-child(3){
				left: -20upx;
			}
			.pbtouxiongs:nth-child(4){
				left: -30upx;
			}
			.pbtouxiongs:nth-child(5){
				left: -40upx;
			}
			.pbtouxiongs:nth-child(6){
				left: -50upx;
			}
			.pbtouxiongs:nth-child(7){
				left: -60upx;
			}
			.pbtouxiongs:nth-child(8){
				left: -70upx;
			}
			.pbtouxiongs:nth-child(9){
				left: -80upx;
			}
			.pbtouxiongs:nth-child(10){
				left: -90upx;
			}
		}
		.tagboxs{
			width: 128upx;
			height: 52upx;
			line-height: 52upx;
			text-align: center;
			color: #FDB933;
			font-size: 28upx;
			border: 1px solid #FDB933;
			border-radius: 10upx;
		}
	}
}



.renlistsbox{
	
}
.base-avatar-box {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
}

.base-img {
  padding: 2px;
  box-sizing: border-box;
}

.avatar-box-1 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  border-radius: 10rpx;
}

.avatar-box-1 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.avatar-box-2 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  display: flex;
  align-items: center;
  border-radius: 10rpx;
}

.avatar-box-2 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-3 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-3 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-3 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-3 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-3 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-4 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-4 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

.avatar-box-4 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 1px;
}

.avatar-box-4 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  right: 1px;
}

.avatar-box-4 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-4 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-5 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-5 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-5 .img:nth-of-type(1) {
  position: absolute;
  top: 16.666666666666668%;
  left: 16.666666666666668%;
}

.avatar-box-5 .img:nth-of-type(2) {
  position: absolute;
  top: 16.666666666666668%;
  right: 16.666666666666668%;
}

.avatar-box-5 .img:nth-last-child(3) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 1px;
}

.avatar-box-5 .img:nth-last-child(2) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-5 .img:nth-last-child(1) {
  position: absolute;
  bottom: 16.666666666666668%;
  right: 1px;
}

.avatar-box-6 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-6 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-6 .img:nth-of-type(1) {
  position: absolute;
  top: 16.666666666666668%;
  left: 1px;
}

.avatar-box-6 .img:nth-of-type(2) {
  position: absolute;
  top: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-6 .img:nth-of-type(3) {
  position: absolute;
  top: 16.666666666666668%;
  right: 1px;
}

.avatar-box-6 .img:nth-last-child(3) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 1px;
}

.avatar-box-6 .img:nth-last-child(2) {
  position: absolute;
  bottom: 16.666666666666668%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-6 .img:nth-last-child(1) {
  position: absolute;
  bottom: 16.666666666666668%;
  right: 1px;
}

.avatar-box-7 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-7 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-7 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-7 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-7 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-7 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-7 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-8 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-8 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-8 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 16.666666666666668%;
}

.avatar-box-8 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  right: 16.666666666666668%;
}

.avatar-box-8 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-8 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-8 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-8 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-8 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-8 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.avatar-box-9 {
  background-color: #e8e8e8;
  width: 106rpx;
  height: 106rpx;
  position: relative;
  border-radius: 10rpx;
}

.avatar-box-9 .img {
  padding: 2px;
  box-sizing: border-box;
  width: 33.333333333333336%;
  height: 33.333333333333336%;
}

.avatar-box-9 .img:nth-of-type(1) {
  position: absolute;
  top: 1px;
  left: 1px;
}

.avatar-box-9 .img:nth-of-type(2) {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-of-type(3) {
  position: absolute;
  top: 1px;
  right: 1px;
}

.avatar-box-9 .img:nth-last-child(6) {
  position: absolute;
  top: 33.333333333333336%;
  left: 1px;
}

.avatar-box-9 .img:nth-last-child(5) {
  position: absolute;
  top: 33.333333333333336%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-last-child(4) {
  position: absolute;
  top: 33.333333333333336%;
  right: 1px;
}

.avatar-box-9 .img:nth-last-child(3) {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.avatar-box-9 .img:nth-last-child(2) {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-box-9 .img:nth-last-child(1) {
  position: absolute;
  bottom: 1px;
  right: 1px;
}
