place/static/zaiui/style/chat.scss

.zaiui-goods-details-box {
	position: relative;
	padding: 18.18upx;
	z-index: 999;
	.cu-avatar {
		position: absolute;
		height: 90.9upx;
		width: 90.9upx;
		left: 18.18upx;
	}
	.goods-info-view {
		position: relative;
		padding-left: 118.18upx;
		height: 90.9upx;
		.title-view {
			text {
				display: none;
			}
		}
		.price-tools-view {
			position: relative;
			margin-top: 18.18upx;
			.zaiui-tag-view {
				position: absolute;
				bottom: 3.63upx;
				right: 0;
			}
		}
	}
	.zaiui-goods-info-btn-view {
		position: absolute;
		width: 72.72upx;
		height: 36.36upx;
		background: #Fff;
		bottom: -36.36upx;
		left: calc((100% / 2) - 36.36upx);
		border-radius: 0 0 9.09upx 9.09upx;
		.h-line-view {
			position: relative;
			padding: 0 18.18upx;
			height: 100%;
			.h-line {
				background-color: rgba(0, 0, 0, 0.1);
				margin: 9.09upx 0;
				height: 3.63upx;
				width: 100%;
			}
		}
	}
	.zaiui-goods-tip-view {
		display: none;
		position: relative;
		margin-top: 18.18upx;
		padding-top: 18.18upx;
		border-top: 2upx solid #f3f3f3;
		.icon {
			position: absolute;
		    top: 23.63upx;	
		}
		.content {
		    position: relative;
		    padding-left: 36.36upx;	
		}
	}
	.zaiui-goods-tip-view.show {
		display: block;
	}
}

.zaiui-goods-details-box.pay_status .goods-info-view{
	.title-view {
		position: relative;
		view {
			padding-right: 181.81upx;
		}
		text {
			display: block;
			position: absolute;
			top: 5.45upx;
			right: 0;
		}
	}
}

.zaiui-chat-scroll-view {
	position: relative;
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - 327.27upx);
	/* #endif */
	
	/* #ifndef H5 */
	height: calc(100vh - 380upx);
	/* #endif */
	transition: height .15s;
	.scroll-view {
		position: relative;
		height: 100%;
		.news-view-item {
			position: relative;
			display: grid;
			margin: 36.36upx 27.27upx;
			&:first-child { 
				margin-top: 54.54upx;
			}
			.cu-avatar {
			    background-color: #fff;
			}
			.news-content {
				position: relative;
			    padding-left: 81.81upx;
				padding-right: 254.54upx;
			    min-height: 63.63upx;
				.content {
					position: relative;	
				    padding: 12.72upx;
					font-size: 25.45upx;
					width: fit-content;
				    top: 0;
					.emoji {
						position: absolute;
						width: 36.36upx;
						height: 36.36upx !important;
					}
					.emoji + text {
						margin-left: 36.36upx;
					}
					.status {
						position: absolute;
					    left: -63.63upx;
					    bottom: 0;	
					}
					.sound-icon {
						font-size: 36.36upx;
					}
					.s-text {
						position: relative;
						top: -5.45upx;
					}
				}
			}
		}
		.news-view-item.time {
			text-align: center;
		}
		.news-view-item.left {
			.cu-avatar {
			    position: absolute;	
			}
			.news-content {
			    padding-left: 81.81upx;
				padding-right: 250.9upx;
				.content {
					border-radius: 0 18.18upx 18.18upx 18.18upx;
				}
				.img-content {
					position: relative;
					height: 218.18upx;
					width: 363.63upx;
					border-radius: 0 18.18upx 18.18upx 18.18upx;
				}
			}
		}
		.news-view-item.right {
			.news-content {
				padding-left: 254.54upx;
				padding-right: 81.81upx;
				.content {
					float: right;
					border-radius: 18.18upx 0 18.18upx 18.18upx;
					.s-text {
						color: #ececec;
					}
				}
				.img-content {
					position: relative;
					height: 218.18upx;
					width: 363.63upx;
					border-radius: 18.18upx 0 18.18upx 18.18upx;
					.status {
						position: absolute;
					    left: -63.63upx;
					    bottom: 0;	
					}
				}
			}
			.cu-avatar {
			    position: absolute;
				right: 0;
				top: 0;
			}
		}
		.news-view-item.notice {
			.notice-content-view {
				position: relative;
				border-radius: 9.09upx;
				padding: 18.18upx;
				.cu-avatar {
					position: absolute;	
				}
				.notice-content {
					position: relative;
					padding-left: 81.81upx;
					.introduce {
					    margin-top: 9.09upx;	
					}
				}
			}
		}
		.news-view-item.order {
			.order-content-view {
				position: relative;
				border-radius: 9.09upx;
				padding: 18.18upx;
				.cu-avatar {
					position: absolute;
					width: 72.72upx;
					height: 72.72upx;
				}
				.order-content {
					position: relative;
					padding-left: 90.9upx;
					.title-view {
						position: relative;
						.text-right {
						    position: absolute;
							top: 3.63upx;	
						    right: 0;
						}
					}
					.introduce {
						margin-top: 2upx;
					}
				}
			}
		}
		.news-view-item.tip {
			text-align: center;
		}
	}
}

.zaiui-chat-scroll-view.tools {
	/* #ifdef H5 */
	height: calc(100vh - 654.54upx);
	/* #endif */
	/* #ifndef H5 */
	height: calc(100vh - 740upx);
	/* #endif */
	transition: height .15s;
}

.zaiui-footer-fixed {
	.zaiui-foot-bar-input-tools {
		.action {
			margin-left: 18.18upx;
			&:first-child {
			    margin-left: 18.18upx;
			    font-size: 29.09upx;
			}
			&:last-child {
				margin-right: 0;
			}
		}
		.input-radius {
		    background: #F8F8F8;
		    border-radius: 90.9upx;
		    padding: 0 27.27upx;
			font-size: 25.45upx;
			margin: 0 18.18upx;
			margin-left: 0;
		}
		.input-radius + .action {
		    margin-right: 0;
		    margin-left: 0;
		}
	}
	.zaiui-speedy-view, .zaiui-emoji-view,.zaiui-tools-view {
		position: relative;
		overflow-y: auto;
		height: 0;
		transition: height .15s;
	}
	.zaiui-speedy-view.show, .zaiui-emoji-view.show, .zaiui-tools-view.show {
		height: 327.27upx;
		transition: height .15s;
	}
	.zaiui-speedy-view {
		.key-bar {
			height: 81.81upx;
			line-height: 81.81upx;	
		}
		.key-bar + .key-bar {
			border-top: 2upx solid #f3f3f3;
		}
	}
	.zaiui-emoji-view {
		.emoji-scroll-view-box {
			position: relative;
			.emoji-swiper {
				height: 272.72upx;
				.cu-list.grid {
					background-color: inherit;
					padding: 0 9.09upx;
					.emoji {
						margin: 14.54upx 29.63upx;
						width: 45.45upx;
						height: 45.45upx !important;
					}
					.del_btn {
						margin: 14.54upx 29.63upx;
						width: 45.45upx;
					}
				}
			}
		}
		.emoji-tools-scroll-view {
			position: relative;
			width: 100%;
			.emoji-tools-item {
				display: inline-block;
				padding-top: 2upx;
				border-right: 2upx solid #F8F8F8;
				.emoji {
					width: 36.36upx;
					height: 36.36upx !important;
					margin: 5.45upx 18.18upx;
					position: relative;
					top: 3.63upx;
				}
			}
			.emoji-tools-item.select {
				background: #F8F8F8;
			}
		}
	}
	.zaiui-tools-view {
		.cu-list.grid.no-border {
		    padding: 0;
		}
		.cu-list.grid.no-border>.cu-item {
			.img-view {
				.img {
					width: 72.72upx;
					height: 72.72upx !important;
					border-radius: 50%;
				}
			}
		}
	}
}