crmchat/uniapp/pages/view/customerServer/less/customerServer.less

.header {
	height: 116rpx;
	background: linear-gradient(90deg, #3875ea 0%, #1890fc 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;

	color: #fff;
	> view {
		flex: 1;
		text-align: center;
	}
	.header_left {
		text-align: left;
	}

	&_center {
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		font-weight: 600;
		font-size: 16px;
		white-space: nowrap;
	}
	.header_right {
		text-align: right;
	}
}

// 聊天对话框
.content {
	padding: 36rpx 30rpx;
	&_list {
		display: flex;
		margin-bottom: 36rpx;
		color: #282828;
		font-weight: 600;
		&_avar {
			width: 90rpx;
			height: 90rpx;
			margin-right: 22rpx;
			border-radius: 50%;
			// border: 1px solid rgba(0, 0, 0, 0.1);
			overflow: hidden;
			image {
				width: 100%;
			}
		}

		&_message {
			max-width: 420rpx;
			padding: 15rpx 28rpx;
			background: #fff;
			border-radius: 7px;
			display: flex;
			align-items: center;
			&_value{
				word-break:break-all;
				word-wrap:break-word;
			}
			&_product {
				.content_list_message_orderId {
					padding-bottom: 15rpx;
					border-bottom: 1px solid #eceff8;
				}

				.content_list_message_detils {
					padding-top: 20rpx;
					display: flex;
					&_image {
						width: 204rpx;
						height: 204rpx;
						border-radius: 6px;
						overflow: hidden;
						background: #eee;
						image {
							width: 100%;
							height: 100%;
						}
					}

					&_value {
						flex: 1;
						padding-left: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						&_shopPrice {
							color: #f74c31;
							margin-top: 10rpx;
						}
						.content_list_message_detils_value_shopMessag {
						}

						.content_list_message_detils_value_shopMessag_item {
							display: flex;
						}
					}
				}
			}

			&_image {
				max-width: 400rpx;
				image {
					max-width: 100%;
				}
			}
		}
	}
	.right_box {
		flex-direction: row-reverse;
		.content_list_message {
			margin-right: 20rpx;
			background: #cde0ff;
		}

		.content_list_avar {
			margin-right: 0rpx !important;
		}
	}
}

.footer {
	background: #f3f4f5;
	padding-bottom: 20rpx;
	&_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		border-top: 1px solid #dddddd;
		&_icon {
			// align-self: flex-start;
		}
		.iconfont {
			font-size: 24px;
		}
		.mr18 {
			margin-right: 18rpx;
		}
		&_content {
			flex: 1;
			position: relative;
			display: flex;
			align-items: center;
			background: #fff;
			padding: 8rpx;
			border-radius: 32px;
			overflow: hidden; // 隐藏超出部分的textarea
			.font {
				padding: 8rpx 16rpx;
			}
			textarea {
				height: 20px;
				display: block;
				// position: absolute;
				// top: 0rpx;
				// left: 0rpx;
				z-index: 10;
				resize: none;
				outline: none;
				background: none;
				color: rgba(0, 0, 0, 1);
				font-weight: bold;
				border: none;
				width: 80%;
				font-size: 14px;
			}
			p {
				width: 100%;
				display: block;
				min-height: 20rpx;
				opacity: 0;
			}
			.iconfont {
				color: #e0e0e0;
			}
			.canSend {
				color: @primaryColor;
			}
		}
		.footer_input_icon {
			display: flex;
			align-items: center;
			.iconfont {
				font-size: 60rpx;
			}
			.sendMessage {
				display: inline-block;
				background: @primaryColor;
				color: #fff;
				font-size: 14px;
				padding: 12rpx 25rpx;
				border-radius: 8rpx;
			}
		}
	}

	&_option {
		background: #fff;
		height: 440rpx;
		transition: 0.3s;
		.option {
			padding: 46rpx 65rpx;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 68rpx;
			> view {
				text-align: center;
				image {
					width: 90%;
				}
				> view {
					color: #282828;
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		.emoji {
			height: 100%;

			.emoji-item {
				display: inline-block;
				width: 12.5%;
				text-align: center;
				margin: 20rpx 0;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				.em {
					width: 56rpx;
					height: 56rpx;
					box-sizing: border-box;
				}
			}
		}
	}
}

.translateY0 {
	// transform: translateY(0);
	top: 0;
}

.speechArtSelectEd {
	color: @primaryColor;
}

.image_content {
	max-width: 90%;
	margin: auto;
	position: relative;
	image {
		max-width: 100%;
		margin: auto;
	}
	span {
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		z-index: 100;
		font-size: 60rpx;
		opacity: 0.9;
	}
}

.chat_result {
	display: flex;
	align-items: center;
	padding: 0 10rpx;
}

.chat_result_ing {
	width: 40rpx;
	height: 40rpx;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	animation: changeleft 1s linear infinite;
	border-radius: 50%;
}

.chat_result_faile {
	width: 40rpx;
	height: 40rpx;
	background: #FF0000;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes changeleft {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(-180deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.scriptLibary_header {
    display: flex;
    padding: 44rpx 32rpx;
    position: relative;
    justify-content: flex-end;
}
.scriptLibary_header_title[data-v-afab33f6] {
    position: absolute;
    top: 50%;
    display: flex;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.speechArtSelectEd[data-v-afab33f6] {
    color: #3875EA;
}
.scriptLibary_header_icon {
    display: flex;
}
.tit {
    padding: 0 40rpx;
}
.search {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: #f5f6f9;
    margin: 0 5%;
    border-radius: 30rpx;
    padding: 10rpx 0;
    color: #9f9f9f;
}
.icon_search {
	position: absolute;
	top: auto;
	left: 33%;
}
.uni-input-placeholder {
	color: #9f9f9f !important;
}
.icon_edit {
	margin-right: 10rpx;
}