veterans_chat_h5/pages/chat/chat.scss

page {
	background-color: #f2f2f2;
}
@font-face {
	font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}
.icon {
	font-family:"HMfont-home" !important;
	font-size: 56rpx;
	font-style: normal;
	color: #333;
	&.biaoqing:before {
		content: "\e797";
	}
	&.jianpan:before {
		content: "\e7b2";
	}
	&.yuyin:before {
		content: "\e805";
	}
	&.tupian:before {
		content: "\e639";
	}
	&.chehui:before {
		content: "\e904";
	}
	&.luyin:before {
		content: "\e905";
	}
	&.luyin2:before {
		content: "\e677";
	}
	&.other-voice:before {
		content: "\e667";
	}
	&.my-voice:before {
		content: "\e906";
	}
	&.hongbao:before {
		content: "\e626";
	}
	&.tupian2:before {
		content: "\e674";
	}
	&.paizhao:before {
		content: "\e63e";
	}
	&.add:before {
		content: "\e655";
	}
	&.close:before {
		content: "\e607";
	}
	&.to:before {
		content: "\e675";
	}
}
.chat {
	width: 100%;
	&-content {
		width: 100%;
	}
}
.hidden{
	display: none !important;
}
.chat-content-srcoll-loading {
	display: flex;
	justify-content: center;
	@keyframes stretchdelay {
		0%, 40%, 100% {
			transform: scaleY(0.6);
		}
		20% {
			transform: scaleY(1.0);
		}
	}
	.spinner {
		margin: 20rpx 0;
		width: 60rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			background-color: #f06c7a;
			height: 50rpx;
			width: 6rpx;
			border-radius: 6rpx;
			animation: stretchdelay 1.2s infinite ease-in-out;
		}
		.rect2 {
			animation-delay: -1.1s;
		}
		.rect3 {
			animation-delay: -1.0s;
		}
		.rect4 {
			animation-delay: -0.9s;
		}
		.rect5 {
			animation-delay: -0.8s;
		}
	}
}
#chat-content-srcoll {
	width: 96%;
	padding: 0 2%;
	position: absolute;
	top: 0;
	bottom: 100rpx;
}
.chat-content-srcoll-list {
	width: 100%;
	height: 100%;
	&-item {
		padding: 20rpx 30rpx;
		&:first-child {
			margin-top: 20rpx;
		}
		.my-info {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			&-left {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.time {
					height: 45rpx;
					font-size: 24rpx;
					color: #999;
					text-align: right;
					padding-right: 30rpx;
				}
				.my-username {
					display: flex;
					justify-content: space-between;
				}
				.bubble {
					max-width: 90%;
					min-height: 50rpx;
					border-radius: 10rpx;
					padding: 18rpx 28rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					word-break: break-word;
					background-color: #BDE5C3;
					color: #333333;
					margin-right: 20rpx;
					position: relative;
					&::before {
						position: absolute;
						content: "";
						width: 0;
						height: 0;
						left: 100%;
						top: 8rpx;
						border-top: 10rpx solid transparent;
						border-left: 20rpx solid #BDE5C3;
						border-bottom: 10rpx solid transparent;
					}
				}
			}
			&-right {
				display: flex;
				justify-content: flex-end;
			}
		}
		.other-info {
			width: 100%;
			display: flex;
			align-items: center;
			&-left {
				margin-right: 30rpx;
			}
			&-right {
				flex-wrap: wrap;
				.username {
					width: 100%;
					height: 45rpx;
					font-size: 24rpx;
					color: #999;
					display: flex;
					.name{
						margin-right: 50rpx;
					}
				}
				.bubble {
					max-width: 90%;
					min-height: 50rpx;
					border-radius: 10rpx;
					padding: 18rpx 28rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					word-break: break-word;
					background-color: #fff;
					color: #606060;
					position: relative;
					&::before {
						position: absolute;
						content: "";
						width: 0;
						height: 0;
						right: 100%;
						top: 10rpx;
						border-top: 10rpx solid transparent;
						border-right: 20rpx solid #fff;
						border-bottom: 10rpx solid transparent;
					}
					&.voice{
						.icon{
							color: #333;
						}
						.length{
							margin-left: 20rpx;
						}
					}
					&.play{
						@keyframes other-play {
							0% {
								transform: translateX(-80%);
							}
							100% {
								transform: translateX(0%);
							}
						}
						.icon:after {
							border-right: solid 10rpx rgba(255,255,255,.8);
							animation: other-play 1s linear infinite;
						}
					}
				}
			}
		}
	}
}
.input-box {
	width: 100%;
	min-height: 100rpx;
	background-color: #f2f2f2;
	display: flex;
	position: fixed;
	z-index: 20;
	bottom: -2rpx;
	padding: 0 10rpx;
	&.showLayer{
		transform: translate3d(0, -42vw, 0);
	}
	transition: all .15s linear;
	border-bottom: solid 1px #ddd;
	border-top: solid 1px #ddd;
	.voice,.more{
		flex-shrink: 0;
		width: 90rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.send{
		/* #ifdef H5 */
		margin-left: 20rpx;
		/* #endif */
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		.btn{
			width: 90rpx;
			height: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background:linear-gradient(to right,#f09b37,#eb632c);
			color: #fff;
			border-radius: 6rpx;
			font-size: 24rpx;
		}
	}
	.textbox{
		width: 100%;
		min-height: 70rpx;
		margin-top: 15rpx;
		.voice-mode{
			width: calc(100% - 2rpx);
			height: 68rpx;
			border-radius: 70rpx;
			border:solid 1rpx #cdcdcd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			background-color: #fff;
			color: #555;
			&.recording{
				background-color: #e5e5e5;
			}
		}
		.text-mode{
			width: 100%;
			min-height: 70rpx;
			display: flex;
			background-color: #fff;
			border-radius: 40rpx;
			.box {
				width: 100%;
				padding-left: 30rpx;
				min-height: 70rpx;
				display: flex;
				align-items: center;
				textarea{
					width: 100%;
				}
			}
			.em {
				flex-shrink: 0;
				width: 80rpx;
				padding-left: 10rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.popup-layer{
	&.showLayer{transform: translate3d(0,-42vw,0);}
	transition: all .15s linear;
	width: 100%;
	height: 42vw;
	padding: 10rpx;
	background-color: #f3f3f3;
	border-top: solid 1rpx #ddd;
	position: fixed;
	z-index: 20;
	top: 100%;
	.emoji-swiper{
		height: 40vw;
		swiper-item{
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			view{
				width: 12vw;
				height: 12vw;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 8.4vw;
					height: 8.4vw;
				}
			}
		}
	}
	.more-layer{
		width: 100%;
		height: 42vw;
		.list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx;
			.box {
				width: 18vw;
				height: 18vw;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;
				.icon {
					font-size: 70rpx;
				}
				.shipin {
					font-size: 70rpx;
				}
			}
		}
	}
}