yiliangyiyun-app/pageC/chat/style.scss

@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: 50upx;
		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";
		}
		&.add:before {
		  content: "\e655";
		}
		&.close:before {
		  content: "\e607";
		}
		&.to:before {
		  content: "\e675";
		}
	}
	

	
.hidden{
	display: none !important;
}
.box-xx{
	font-size:16px;
	width: 120rpx; 
	height: 120rpx;
}
.chat-h {
	height: calc(100% - 70vw - 50px);
}
.popup-layer{
	&.showLayer{transform: translate3d(0,-70vw,0);}
	transition: all 0s ease-in 0s;
	width: 100%;
	height: 64vw;
	padding-bottom: 30upx;
	background-color: #F6F7F8;
	border-top: solid 1upx #ddd;
	position: fixed;
	z-index: 20;
	top: 100%;
	.more-layer{
		width: 100%;
		height: 64vw;
		background-color: #F6F7F8;
		.list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.box{
				width: 16vw;
				height: 16vw;
				border-radius: 20upx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 5vw 3vw 5vw 5vw;
				.icon{
					font-size: 70upx;
				}
			}
		}
	}
}

.input-box{
	width: 100%;
	min-height: 110upx;
	background-color: #fff;
	display: flex;
	position: fixed;
	z-index: 999;
	box-sizing: content-box;
	bottom:-2upx;
	&.showLayer{transform: translate3d(0,-70vw,0);}
	transition: all 0s ease-in 0s;
	
	.voice,.more{
		flex-shrink: 0;
		width: 90rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.send{
		width: 120rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}
	.textbox{
		width: 100%;
		min-height: 70upx;
		margin-top: 15upx;
		.voice-mode{
			width: calc(100% - 2upx);
			min-height: 70upx;
			border-radius: 10upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			background-color: #F5F6F8;
			color: #555;
			font-weight: 600;
			&.recording{
				background-color: #e5e5e5;
			}
		}
		.text-mode{
			width: 100%;
			min-height: 70upx;
			display: flex;
			background-color: #F5F6F8;
			border-radius: 10upx;
			.box{
				width: 100%;
				padding-left: 30upx;
				min-height: 70upx;
				display: flex;
				align-items: center;
				textarea{
					width: 100%;
				}
			}
			.em{
				flex-shrink: 0;
				width: 70upx;
				height: 60upx;
				padding-left: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.record{
	width: 40vw;
	height: 40vw;
	position: fixed;
	top: 55%;
	left: 30%;
	background-color: rgba(0,0,0,.6);
	border-radius: 20upx;
	.ing{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		// 模拟录音音效动画
		@keyframes volatility {
			0% {background-position: 0% 130%;}
			20% {background-position: 0% 150%;}
			30% {background-position: 0% 155%;}
			40% {background-position: 0% 150%;}
			50% {background-position: 0% 145%;}
			70% {background-position: 0% 150%;}
			80% {background-position: 0% 155%;}
			90% {background-position: 0% 140%;}
			100% {background-position: 0% 135%;}
		}
		.icon{
			background-image:linear-gradient(to bottom,#000,#fff 50%); 
			background-size:100% 200%;
			animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
			-webkit-background-clip:text; 
			-webkit-text-fill-color:transparent; 
			font-size: 150upx;
			color: #000;
		}
	}
	.cancel{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			color: #fff;
			font-size: 150upx;
		}
	}
	.tis{
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #fff;
		&.change{
			color: #fff;
		}
	}
}
.content{
	width: 100%;
	.msg-list{
		width: 96%;
		padding: 0 2%;
		background-color: #F6F7F8;
		border-top: 1px solid #e5e6e6;
		position: absolute;
		top: 0;
		bottom: 100upx;
		.loading{
			position: fixed;
			left: 50%;
			display: flex;
			justify-content: center;
			@keyframes stretchdelay {
				0%, 40%, 100% {
					transform: scaleY(0.6);
				}
				20% {
					transform: scaleY(1.0);
				}
			}
			.spinner {
				width: 80upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view {
					background-color: rgba(0,0,0,.6);
					height: 80upx;
					width: 4upx;
					border-radius: 8upx;
					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;
				}
			}
		}
		.row{
			.system{
				display: flex;
				justify-content: center;
				view{
					padding: 0 30upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #c9c9c9;
					color: #fff;
					font-size: 24upx;
					border-radius: 40upx;
				}
				.red-envelope{
					image{
						margin-right: 5upx;
						width: 30upx;
						height: 30upx;
					}
				}
			}
			&:first-child{
				margin-top: 20upx;
			}
			padding: 20upx 0;
			.my .left,.other .right{
				width: 100%;
				display: flex;
				.bubble{
					max-width: 70%;
					min-height: 50upx;
					border-radius: 10upx;
					padding: 15upx 20upx;
					display: flex;
					align-items: center;
					font-size: $uni-font-size-lg;
					word-break: break-word;
					&.img{
						background-color: transparent;
						padding:0;
						overflow: hidden;
						image{
							flex:1;
							max-width: 350upx;
							max-height: 350upx;
						}
					}
					&.red-envelope{
						background-color: transparent;
						padding:0;
						overflow: hidden;
						position: relative;
						justify-content: center;
						align-items: flex-start;
						image{
							width: 250upx;
							height: 313upx;
						}
						.tis{
							position: absolute;
							top: 6%;
							font-size: 26upx;
							color: #9c1712;
						}
						.blessing{
							position: absolute;
							bottom: 14%;
							color: #e9b874;
							width: 80%;
							text-align: center;
							overflow: hidden;
							display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
						}
					}
					&.voice{
						.icon{
							font-size: 40upx;
							display: flex;
							align-items: center;
						}
						.icon:after
						{
							content:" ";
							width: 53upx;
							height: 53upx;
							border-radius: 100%;
							position: absolute;
							box-sizing: border-box;
						}
						.length{
							font-size: 28upx;
						}
					}
				}
			}
			.my .right,.other .left{
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				image{
					width: 80upx;
					height: 80upx;
					border-radius: 10upx;
				}
			}
			.my{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.left{
					min-height: 80upx;
					
					align-items: center;
					justify-content: flex-end;
					.bubble{
						background-color: $uni-color-success;
						color: #000;
						font-size: $uni-font-size-lg;
						&.voice{
							.icon{
								color: #fff;
							}
							.length{
								margin-right: 20upx;
							}
						}
						&.play{
							@keyframes my-play {
								0% {
									transform: translateX(80%);
								}
								100% {
									transform: translateX(0%);
								}
							}
							.icon:after
							{
								border-left: solid 10upx rgba(198, 235, 254, 0.5);
								animation: my-play 1s linear infinite;
							}
						}
					}
				}
				.right{
					margin-left: 15upx;
					&.text::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-left: 16rpx solid $uni-color-success;
						position: relative;
						top: -60rpx;
						right: 20rpx;
					}
				}
			}
			.other{
				width: 100%;
				display: flex;
				.left{
					margin-right: 15upx;
					&.text::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 16rpx solid #fff;
						position: relative;
						left: 80rpx;
						top: -20rpx;
					}
				}
				.right{
					flex-wrap: wrap;
					.username{
						width: 100%;
						height: 45upx;
						font-size: 24upx;
						color: #999;
						display: flex;
						.name{
							margin-right: 50upx;
						}
					}
					.bubble{
						background-color: #fff;
						color: #333;
						font-size: $uni-font-size-lg;
						
						&.voice{
							.icon{
								color: #333;
							}
							.length{
								margin-left: 20upx;
							}
						}
						&.play{
							@keyframes other-play {
								0% {
									transform: translateX(-80%);
								}
								100% {
									transform: translateX(0%);
								}
							}
							.icon:after
							{
								border-right: solid 10upx rgba(255,255,255,.8);
								
								animation: other-play 1s linear infinite;
							}
						}
					}
				}
			}
		}
	}
}
//@功能提示样式
.process{
	position: absolute;
	bottom: 120rpx;
	left: 10rpx;
	height: 80rpx;
	width: 90%;
	overflow: hidden;
	text{
		background-color: #fff;
		text-align: center;
		padding: 20rpx;
	}
	&::after {
		position: relative;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 16rpx solid #fff;
		left: 10rpx;
		top: 20rpx;
	}
}
//左菜单样式
.left-click {
	display: flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	right: 120rpx;
	margin-top: -35rpx;
	background-color: #2a2a2a;
	border-radius: 10rpx;
	height: 70rpx;
	padding: 10rpx;
	color: #e2e2e2;
	z-index: 9999;
	view {
		padding: 0 30rpx;
		height: 70rpx;
		height: auto;
		border-right: 2rpx solid $uni-border-color;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:center;
		align-items:center;
	}
	text {
		padding: 0 30rpx;
		height: 70rpx;
		height: auto;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:center;
		align-items:center;
	}
	&::after {
		position: relative;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 20rpx solid #2a2a2a;
		top: 40rpx;
		right: 450rpx;
	}
}
//右击菜单样式
.right-click {
	
	display: flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	right: 100rpx;
	margin-top: -70rpx;
	background-color: #2a2a2a;
	border-radius: 10rpx;
	height: 70rpx;
	padding: 10rpx;
	color: #e2e2e2;
	z-index: 9999;
	
	view {
		padding: 0 30rpx;
		height: 70rpx;
		height: auto;
		border-right: 2rpx solid $uni-border-color;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:center;
		align-items:center;
		animation-delay: -0.8s;
	}
	text {
		padding: 0 30rpx;
		height: 70rpx;
		height: auto;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:center;
		align-items:center;
	}
	&::after {
		position: relative;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 20rpx solid #2a2a2a;
		top: 40rpx;
		right: 10rpx;
	}
}

.windows{

	.mask{
		position: fixed;
		top: 100%;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,.6);
		opacity: 0;
		transition: opacity .2s ease-out;
	}
	.layer{
		position: fixed;
		width: 80%;
		height: 70%;
		left: 10%;
		z-index: 1001;
		border-radius: 10rpx;
		//border: 2rpx dotted red;
		overflow: hidden;
		top:100%;
		transform: scale3d(.5,.5,1);
		transition: all .2s ease-out;
	}
	&.show{
		display: block;
		.mask{
			top: 0;
			opacity: 1;
		}
		.layer{
			transform: translate3d(0,-85vh,0) scale3d(1,1,1);
		}
	}
	&.hide{
		display: block;
		.mask{
			top: 0;
			opacity: 0;
		}
		.layer{
			transform: translate3d(0,-85vh,0) scale3d(.5,.5,1);
		}
	}
}
.open-redenvelope{
	width: 100%;
	height: 70vh;
	background-color: #EC624F; 
	position: relative;
	padding-top: 150rpx;
	.top{
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		background-color: #EC624F;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-radius: 0 0 100% 100%;
		box-shadow: inset 0 -8upx 0 #DE4129;
		.close-btn{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: flex-end;
			.icon{
				color: #EE5B49;
				margin-top: 10upx;
				margin-right: 10upx;
			}
		}
		.img{
			width: 200upx;
			height: 200upx;
			background-color: #E7CB9B;
			border-radius: 100%;
			font-size: 30px;
			text-align: center;
			padding-top: 30px;
			margin-bottom: -65upx;
		}
		margin-bottom: 65upx;
	}
	.from,.blessing,.money,.showDetails{
		width: 90%;
		padding: 5upx 5%;
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 32upx;
		color: #E7CB9B;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 80rpx;
		}
	}
	.money{
		font-size: 100upx;
		color: #E7CB9B;
		display: flex;
		padding-top: 20upx;
	}
	.showDetails{
		position: absolute;
		bottom: 20upx;
		text-align: center;
		font-size: 28upx;
		color: #E7CB9B;
		.icon{
			font-size: 26upx;
			color: #E7CB9B;
		}
	}
}
 .message-red-packet-left {
	position: relative;
	border-radius: 10rpx;
	background: orange;
	font-size: 0.4rem;
	color: #fff;
	text-align: right;
	display: inline-table;
	max-width: 300px;
	min-width: 200px;
	height: 60px;
	box-shadow: 1px 1px 1px 1px #efefef;
	.packet {
	  padding-right: 12px;
	  font-size: 28rpx;
	}
	.text {
	  height: 40px;
	  color: #fff;
	  padding: 10px;
	  i {
		color: red;
		font-size: 25px;
		float: right;
	  }
	  image{
		  width: 64rpx;
		  height: 64rpx;
	  }
	}
	.footer {
	  margin-top: 8px;
	  height: 25px;
	  font-size: 20rpx;
	  border-top: 1px solid #f9b56f;
	  background: #F09D47;
	  padding-right: 5px;
	  border-radius: 10rpx;
	  color: #fff;
	}
	.footer2 {
	  margin-top: 8px;
	  height: 25px;
	  font-size: 20rpx;
	  background:#F7DFC3;
	  padding-right: 5px;
	  border-radius: 10rpx;
	  color: #fff;
	}
	.arrow-org {
	  width: 10px;
	  height: 10px;
	  background: orange;
	  position: absolute;
	  left: -2px;
	  top: 10px;
	  transform: rotate(45deg);
	}
	}
	.message-red-packet-right {
	position: relative;
	border-radius: 10rpx;
	background: orange;
	font-size: 0.4rem;
	color: #fff;
	text-align: left;
	display: inline-table;
	max-width: 300px;
	min-width: 200px;
	height: 60px;
	box-shadow: 1px 1px 1px 1px #efefef;
	.packet {
	  padding-left: 12px;
	  font-size: 28rpx;
	}
	.text {
	  height: 40px;
	  color: #fff;
	  padding: 10px;
	  i {
		color: red;
		font-size: 25px;
	  }
	  image{
		  width: 64rpx;
		  height: 64rpx;
	  }
	}
	.footer {
	  margin-top: 8px;
	  height: 25px;
	  font-size: 20rpx;
	  background: #F09D47;
	  border-top: 1px solid #f9b56f;
	  padding-left: 5px;
	  border-radius: 10rpx;
	  color: #fff;
	}
	.footer2 {
	  margin-top: 8px;
	  height: 25px;
	  font-size: 20rpx;
	  background:#F7DFC3;
	  padding-left: 5px;
	  border-radius: 10rpx;
	  color: #fff;
	}
	.arrow-org {
	  width: 10px;
	  height: 10px;
	  background: orange;
	  position: absolute;
	  right: -2px;
	  top: 10px;
	  transform: rotate(45deg);
	}
}

.voice_an{
		// width: 300rpx;
		// height: 300rpx;
		// position: fixed;
		// top: 50%;
		// left: 50%;
		//transform: translate(-50%,-55%);
		//background-color: rgba(41,41,41,0.7);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;
		.text{
			padding-top: 30rpx;
		}
		@keyframes runVoice{
			0%{
				height: 10%;
			}
			20%{
				height: 50%;
			}
			50%{
				height: 100%;
			}
			80%{
				height: 50%;
			}
			100%{
				height: 0%;
			}
		}	
		.wave{
			width:6rpx;
			height: 100%;
			margin-left: 10rpx;
			border-radius: 50rpx;
			background-color: #fafafa;
			vertical-align: middle;
			display: inline-block;
		}
		.voice_an_icon{
			width: 200rpx;
			height: 100rpx;
			line-height: 50rpx;
			margin: 50rpx 0;
		}
		.voice_an_icon #one{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #two{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #three{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #four{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #five{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #six{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #seven{
			animation:runVoice 0.6s infinite 0.1s;
		}
	}