shuquAi/pages/chat/chat.scss

page {
		background-color: #f1f1f1;
		font-size: 28rpx;
	}

	.ask {
		color: #26b3a0;
		margin-top: 22rpx;
	}

	/* 加载数据提示 */
	.tips {
		position: fixed;
		left: 0;
		top: var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform: translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;

		&.show {
			transform: translateY(0);
		}
	}

	.box-1 {
		width: 100%;
		height: auto;
		padding-bottom: 138rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		// bottom: 98rpx;
		height: auto;
		// border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		border-top: #9e9e9e38 solid 1px;
		// border-bottom: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #ffffff;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 20rpx;
			height: 150rpx;

		}

		.content {
			background-color: #f1f1f1;
			height: 64rpx;
			width: 100%;
			padding: 15rpx 20rpx 0;
			border-radius: 32rpx;
			// font-size: 28rpx;
			padding-bottom: 98rpx;
	
		}

		.send {
			background-color: #26b3a0d6;
			color: #fff;
			height: 75rpx;
			margin-left: 20rpx;
			border-radius: 50rpx;
			padding: 0;
			width: 138rpx;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 75rpx;

			&:active {
				background-color: #26b3a08a;
			}
		}
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				font-weight: bold;
				padding: 15rpx 25rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				.time {
					margin-left: 22rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
					color: #9e9e9e;
					position: absolute;
					width: 300rpx;
					top: 0rpx;
					left: 0rpx;
				}

				.content {
					margin-left: 22rpx;
					background-color: #fff;
					border-radius: 0px 8px 8px 8px;
					margin-top: 45rpx;
					// &::after{
					// 	content: '';
					// 	display: block;
					// 	width: 0;
					// 	height: 0;
					// 	border-top: 16rpx solid transparent;
					// 	border-bottom: 16rpx solid transparent;
					// 	border-right: 20rpx solid #fff;
					// 	position: absolute;
					// 	top: 30rpx;
					// 	left: -18rpx;
					// }
				}

				.sentpictures {
					width: 300rpx;
					// height: 237.5rpx;
					margin-left: 22rpx;
					border-radius: 0px 8px 8px 8px;
					margin-top: 46rpx;
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.time {
					margin-right: 22rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
					color: #9e9e9e;
					position: absolute;
					width: 300rpx;
					top: 0rpx;
					right: 0rpx;
					display: flex;
					justify-content: flex-end;
				}

				.content {
					margin-right: 22rpx;
					background-color: #26b3a0;
					color: #fff;
					border-radius: 8px 0px 8px 8px;
					margin-top: 45rpx;
				}

				.sentpictures {
					width: 300rpx;

					margin-right: 22rpx;
					border-radius: 8px 0 8px 8px;
					margin-top: 46rpx;
				}
			}
		}
	}

	.flex_photo {
		// width: 80rpx;
		border-radius: 50%;
		background: #f1f1f1;
		padding: 12rpx;
		margin-right: 20rpx;
	}

	.content {
		width: 100%;

		.msg-list {
			// width: 95%;
			// padding: 38rpx 20rpx 237rpx 20rpx;
			padding: 20rpx;
			// position: absolute;
			// top: 0rpx;
			// bottom: 130rpx;
			// margin-bottom: constant(safe-area-inset-bottom);
			// margin-bottom: env(safe-area-inset-bottom);

			.loading {
				//loading动画
				display: flex;
				justify-content: center;

				@keyframes stretchdelay {

					0%,
					40%,
					100% {
						transform: scaleY(0.6);
					}

					20% {
						transform: scaleY(1);
					}
				}

				.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: -1s;
					}

					.rect4 {
						animation-delay: -0.9s;
					}

					.rect5 {
						animation-delay: -0.8s;
					}
				}
			}

			.row {
				.system {
					display: flex;
					justify-content: center;

					view {
						padding: 0 30rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c9c9c9;
						color: #fff;
						font-size: 24rpx;
						border-radius: 40rpx;
					}

					.red-envelope {
						image {
							margin-right: 5rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				&:first-child {
					// margin-top: 20rpx;
				}

				padding: 15rpx 0;

				.my .left,
				.other .right {
					width: 86%;
					display: flex;

					.bubble {
						max-width: 91%;
						min-height: 50rpx;
						// border-radius: 13rpx;
						padding: 20rpx 30rpx;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						word-break: break-word;

						&.img {
							background-color: transparent;
							padding: 0;
							overflow: hidden;

							image {
								max-width: 300rpx;
								// max-height: 350rpx;
							}
						}

						&.red-envelope {
							background-color: transparent;
							padding: 0;
							overflow: hidden;
							position: relative;
							justify-content: center;
							align-items: flex-start;

							image {
								width: 250rpx;
								height: 313rpx;
							}

							.tis {
								position: absolute;
								top: 6%;
								font-size: 26rpx;
								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: 40rpx;
								display: flex;
								align-items: center;
							}

							.icon:after {
								content: ' ';
								width: 53rpx;
								height: 53rpx;
								border-radius: 100%;
								position: absolute;
								box-sizing: border-box;
							}

							.length {
								font-size: 28rpx;
							}
						}
					}
				}

				.my .right,
				.other .left {
					flex-shrink: 0;
					// width: 84rpx;
					// height: 84rpx;

					// image {
					// 	width: 80rpx;
					// 	height: 80rpx;
					// 	border-radius: 50%;
					// }
				}

				.my {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.left {
						min-height: 80rpx;
						flex-wrap: wrap;
						align-items: center;
						justify-content: flex-end;

						.bubbleimg {
							image {
								height: 300rpx;
								width: 400rpx;
								border-radius: 10px 0px 10px 10px;
							}
						}

						.bubble {
							border-radius: 20rpx 0rpx 20rpx 20rpx;
						}

						.username {
							width: 100%;
							height: 48rpx;
							font-size: 26rpx;
							color: #999;
							display: flex;
							justify-content: flex-end;

							.name {
								// margin-right: 50rpx;
							}
						}

						.bubble {
							background-color: #26b3a0;
							color: #000;
							font-size: 30rpx;

							&.voice {
								.icon {
									color: #fff;
								}

								.length {
									margin-right: 20rpx;
								}
							}

							&.play {
								@keyframes my-play {
									0% {
										transform: translateX(80%);
									}

									100% {
										transform: translateX(0%);
									}
								}

								.icon:after {
									border-left: solid 10rpx rgba(240, 108, 122, 0.5);
									animation: my-play 1s linear infinite;
								}
							}
						}
					}

					.right {
						margin-left: 22rpx;
					}
				}

				.other {
					width: 100%;
					display: flex;

					.bubbleimg {
						image {
							width: 400rpx;
							height: 300rpx;
							border-radius: 0px 10px 10px 10px;
						}
					}

					.bubble {
						border-radius: 0rpx 20rpx 20rpx 20rpx;
					}

					.left {
						margin-right: 22rpx;
					}

					.tip {
						display: flex;
						flex-direction: column;
						position: absolute;
						justify-content: space-between;
						right: -50rpx;
						bottom: 0;
						height: 92rpx;
					}

					.right {
						flex-wrap: wrap;

						.username {
							width: 100%;
							height: 48rpx;
							font-size: 26rpx;
							color: #999;
							display: flex;

							.name {
								// margin-right: 50rpx;
							}
						}

						.bubble {
							background-color: #fff;
							color: #333;

							&.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, 0.8);

									animation: other-play 1s linear infinite;
								}
							}
						}
					}
				}

				.exchange {
					font-weight: bold;
					font-size: 30rpx;
					background: #00000014;
					padding: 15rpx 35rpx;
					border-radius: 45rpx;

					.launch {
						margin-right: 35rpx;
					}

					.agree {
						color: #4095e5;
						margin-right: 25rpx;
					}

					.refuse {
						color: #fe7058;
					}
				}
			}
		}
	}

	.ability {
		width: 100%;
		position: fixed;
		top: 0;
		height: 115rpx;
		background: #ffffff;
		z-index: 9;
		border-bottom: #e5e5e5 solid 1px;

		.item_ability {
			width: 20%;

			.t_ability {
				font-size: 26rpx;
				margin-top: 6rpx;
			}
		}
	}

	.flash {
		margin-left: 2px;
		animation: flash 0.8s linear infinite;
	}

	// 实现光标闪烁
	@keyframes flash {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.neckBtn_view {
		align-items: center;
		display: flex;
		justify-content: center;
		position: fixed;
		flex-direction: column;
		background: linear-gradient(-45deg, #26b3a0, #3edd3e);
		border-radius: 100rpx 0 0 100rpx;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		color: #fff;
		font-size: 25rpx;
		line-height: 30rpx;
		padding: 10rpx 25rpx 10rpx;
		right: 0;
		text-align: center;
		bottom: 415rpx;

		.free_view {
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
	}

	.poster-img {
		width: 670rpx;
		height: 928rpx;
		position: relative;

		text {
			background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -60rpx;
			right: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		view {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 32rpx;
			text-align: center;
			margin-top: 28rpx;
		}
	}

	.poster {
		padding: 24rpx 40rpx;

		.footer-btn {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 319rpx;
				height: 66rpx;
				border-radius: 40rpx;
				border: 1px solid #4070ff;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4070ff;
				line-height: 66rpx;
				text-align: center;
			}

			.save {
				background: #4070ff;
				color: #ffffff;
			}
		}
	}

	.poster-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background: #ffffff;
		border-radius: 32rpx 32rpx 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>view {
			width: 80rpx;
			height: 80rpx;
			position: relative;
			border-radius: 10rpx;
			border: 4rpx solid #fff;

			&.is-check {
				border: 4rpx solid #4070ff;
			}

			image {
				width: 100%;
				height: 100%;
			}

			view {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: -15rpx;
				bottom: -15rpx;
				background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.select {
		font-weight: bold;
		font-size: 32rpx;
		margin: 30rpx;
	}

	.model_view {
		margin: 30rpx;

		.modelname {
			font-size: 32rpx;
			font-weight: bold;
			width: 56%;

			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.modeldetails {
				font-size: 26rpx;
				font-weight: 500;
				margin-top: 12rpx;
				color: #9e9e9e;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.modelselect {
			background: #03a9f4;
			border-radius: 14rpx;
			color: #fff;
			width: 58px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
	}

	.expand {
		// padding: 20rpx;
		// margin: 20rpx 20rpx 155rpx 20rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		margin-left: 20rpx;

		.surplus {
			font-size: 26rpx;
			background: #fff;
			border-radius: 50rpx;
			padding: 8rpx 12rpx;
			margin-right: 20rpx;
			border: 1px solid #ededed;
			// box-shadow: 0px 0px 10px 3px #f1f1f1;

			.item {
				margin-left: 10rpx;
			}

			// display: inline-block;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-bottom: 177rpx;
	}

	.operate {
		width: 91%;
		margin-top: 12rpx;
		position: relative;

		.duplicate {
			font-size: 26rpx;
			margin-left: 6rpx;
			color: #9e9e9e;
		}

		// .eliseaudio {
		// 	position: absolute;
		// 	right: 0;
		// }

		.share {
			font-size: 26rpx;
			margin-left: 6rpx;
			color: #9e9e9e;
		}

		.broadcast {
			background: #fff;
			width: 150rpx;
			height: 40rpx;
			border-radius: 60rpx;

			// padding: 0 5rpx;
			.play {
				border-radius: 50%;
			}

			image {
				width: 150rpx;
				height: 40rpx;
				border-radius: 60rpx;
			}
		}

		.hoversubmit {
			background: #9e9e9e61;
		}
	}

	.bottomheight {
		width: 100%;
		height: 217rpx;
	}

	.soundrecording {
		flex-direction: column;

		.discriminate {
			color: #9e9e9e;
			margin-bottom: 30rpx;
		}
	}

	.waveform {
		image {
			width: 468rpx;
			height: 168rpx;
		}


	}

	.operation {
		margin: 60rpx 0 30rpx;

		.affirm {
			margin: 0 42rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.longpress {
			background: red;
			border-radius: 50%;
			padding: 30rpx;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.hoversubmit {
			background: #9e9e9e61;
		}
	}

	.env {
		padding-bottom: env(safe-area-inset-bottom);
	}