Customer-Service-Web/pc_chat/src/components/chat.vue

<template>
	<div v-loading="allLoading" element-loading-text="拼命连接中">
		<div class="chatBox">
			<!-- ************************* 头部消息 ************************* -->
			<el-header height='80px'>
				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
					<el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><span v-if="service">{{service.serverInfo.name}}</span>
					</el-col>
					<el-col>
						<div class="imgBox">
							<i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
							   :class="selType?'scActy':''"></i>
							<div style="float: right" class="pointer" @click="leaveMsg()">
								<span style="font-size: 25px; color: #b3c1e7; margin-top: 13px;" @click="back()"
									  class="el-icon-chat-line-round"></span>
							</div>
							<!-- <i class="sy pointer" @click="select(2)" :class="syType?'syActy':''"></i>
							<i class="sq pointer" @click="select(3)" :class="sqType?'sqActy':''"></i>-->
						</div>
					</el-col>
				</el-row>
			</el-header>
			<div class="cationer">

				<!--****************************** 聊天会话框模块 *****************************-->
				<el-main>
					<!-- 广告展示隐藏按钮 -->
					<div class="retract pointer" @click="retract()">
						<img src="./../assets/st-img/retract.png" alt="" v-if="retractShow">
						<img src="./../assets/st-img/retract2.png" alt="" v-else>
					</div>

					<el-row class="pd informationBox scroll" id="main">

						<!-------------------机器人聊天板块 ----------------------->
						<div v-if="machineAndAtl == 10">

							<!--··············· 欢迎语 ············-->
							<div class="conversationBox" v-if="machine != ''">
								<div class=" row">
									<div class="conversation row">
										<div class="headImg">
											<img src="./../assets/st-img/headAdvent.png" alt="">
										</div>
										<div class="cont left">
											<div>{{machine.content}}</div>
										</div>
									</div>
									<div style="width:66px;"></div>
								</div>
							</div>

							<!--··········· 快捷问题回答模块 ············-->
							<div class="questionList" v-if="questionShow">
								<section v-for="(item,idx) in problem" :key="item.id">
									<div @click="answers(idx)">
										<span class="pointer gl">{{item.robot_name}}</span>
									</div>
								</section>
								<section>
									<div>
										<span class="col6">上面问题都不是</span>
										<span class="pointer ly" @click="changeService()">转人工客服</span>
									</div>
								</section>
							</div>

							<!--················ 和机器人会话发送消息 ·············-->
							<div v-for="item in chatCont" :key="item.id">
								<!-- 用户发文本信息 -->
								<div class="conversationBox" v-if="item.type =='user'">
									<div class="timer">{{item.time}}</div>
									<div class="customer row allAlignment">
										<div style="width:66px;"></div>
										<div class="row">
											<!-- 显示内容 -->
											<div v-if="item.chat" class="cont right">
												<div v-html="item.chat"></div>
											</div>
											<div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
												<div slot="file">
													<img class="el-upload-list__item-thumbnail"
														 @click="handlePictureCardPreview(url+item.imgUrl)"
														 style="width:100%;height:auto;border-radius: 10px;"
														 :src="url+item.imgUrl" alt="">
												</div>
											</div>

											<!-- 图片放大 -->
											<el-dialog :visible.sync="dialogVisible">
												<img width="100%" :src="dialogImageUrl" alt="">
											</el-dialog>

											<!-- 头像 -->
											<div class="headImg">
												<img :src="user_info.avatar" alt="">
											</div>
										</div>
									</div>
								</div>

								<!-- 机器人无法回答转人工 -->
								<div class="conversationBox" v-if="item.type == 1001">
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>您的问题暂时无法处理</div>
												<div>
													<span class="col">问题没有解决？</span>
													<span class="change pointer ly"
														  @click="changeService()">转人工客服</span>
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 机器人回答 -->
								<div class="conversationBox" v-else-if='item.type == "service"'>
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>{{item.cont}}</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 快捷问题回答 -->
								<div class="conversationBox" v-else-if="item.type == 'machine'">
									<div class="timer">
										{{item.robot_addTime}}
									</div>
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img src="./../assets/st-img/headAdvent.png" alt="">
											</div>
											<div class="cont left">
												<div>{{item.robot_content}}</div>
												<div>
													<span class="col">问题没有解决</span>
													<span class="change pointer ly"
														  @click="changeService()">转人工客服</span>
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 转接客服列表 -->
								<div class="changeService" v-else-if="item.type == 'artService'">
									<div v-for="(itemList,idx) in serviceList" :key="idx">
										<span class="col6">人工客服:</span>
										<span class="colE5 pointer gl" @click="jumpService(itemList.id)">{{itemList.name}}</span>
									</div>
								</div>
							</div>

							<!--············· 各种消息提示框 ··············-->

							<!-- 客服不在线帮助提示框 -->
							<div class="promptBox" v-if="artAndLeave == 100">
								<div class="prompt help">
									<span>当前客服不在线，如需帮助请</span>
									<span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
								</div>
							</div>

						</div>

						<!--············ 和人工会话聊天模块 ··············-->
						<div v-if="machineAndAtl == 100">
							<!-- 人工客服回复消息 -->
							<div v-for="item in customerSviceChat" :key="item.id">
								<!-- tem.cont != '' -->
								<div class="conversationBox" v-if="item.type == 'service' ">
									<div class="timer"> {{item.time}}</div>
									<div class=" row">
										<div class="conversation row">
											<div class="headImg">
												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
													 alt="">
											</div>
											<div class="cont left">
												<div v-if="item.content != ''" v-html="item.content"></div>
												<div v-else slot="file">
													<img class="el-upload-list__item-thumbnail"
														 @click="handlePictureCardPreview(url+item.imgUrl)"
														 style="width:100%;height:auto;border-radius: 10px;"
														 :src="url+item.imgUrl" alt="">
												</div>
											</div>
										</div>
										<div style="width:66px;"></div>
									</div>
								</div>

								<!-- 用户发送文本消息 -->
								<div class="conversationBox" v-if="item.type == 'user' ">
									<div>
										<div class="timer">{{item.time}}</div>
										<div class="customer row allAlignment">
											<div style="width:66px;"></div>
											<div class="row">
												<div class="cont right">
													<div v-if="item.content != ''" v-html="item.content"></div>
													<div v-else slot="file">
														<img class="el-upload-list__item-thumbnail"
															 @click="handlePictureCardPreview(url+item.imgUrl)"
															 style="width:100%;height:auto;border-radius: 10px;"
															 :src="url+item.imgUrl" alt="">
													</div>
												</div>
												<div class="headImg">
													<img :src="user_info.avatar" alt="">
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- 点击图片放大 -->
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</div>

							<!-- 评价 -->
							<div class="evaluate" @click="ejectEvl(10)" v-if="consult">
								<span>欢迎你的咨询，请对我们的服务做出评价</span>
								<span class="btn seek">评价</span>
							</div>

							<div class="promptBox " v-if="comtSuccess">
								<div class="prompt help">
									<span>您对我们的服务评价为： {{comtCount}}。非常感谢！</span>
								</div>
							</div>
						</div>
					</el-row>


					<!--·········· 文本编辑框 ···········-->
					<el-row class="chatting">
						<el-col>
							<!-- 发送图和表情按钮 -->
							<div style="height:18px; display:flex;">
								<el-popover placement="top-start" width="200" trigger="hover"
											style="margin-top: -2px;">
									<ul>
										<li class="emoticon" v-for="(item,index) in frceArr" :key="item.id">
											<img class="pointer" :src="require(`@/assets/st-img/${index}.gif`)"
												 @click="memeImg(index)" alt="">
										</li>
									</ul>
									<el-button class="expression" slot="reference"></el-button>
								</el-popover>
								<el-upload class="avatar-uploader" action="/api/index/upload/uploadImg"
										   :on-success="handleAvatarSuccess"
										   :before-upload="beforeAvatarUpload"
										   :on-error='handError'
										   list-type='no' accept="image/jpeg,image/jpg,image/png,image/svg">
									<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
									<i slot="default" class=" photo"></i>
								</el-upload>
							</div>

							<div class="row center allAlignment chattingBox">
								<div style="height:44px;width:300px;">
									<textarea  name=""
											   id=""
											   v-model="information"
											   cols="30"
											   rows="1"
											   placeholder="请输入你的问题："
											   @keyup.enter.exact="listenEnter"
											   @keyup.ctrl.enter="lineFeed()"
									>
									</textarea>
								</div>
								<div>
									<!-- 准备修改 -->
									<div @click="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?sendInfo():''):''"
										 class="sendOut pointer"
										 :class="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?'sendCol':'netSendCol'):'netSendCol'">
										<span class="">发送</span>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-main>


				<el-aside width='255px' v-if="retractShow">
					<el-row class="rt">
						<el-col :span='24' class="artificial pd20">
							<div class="infor">
								<div v-if="machineAndAtl == 10">
									<span>姓名:</span>
									<span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
								</div>
								<div v-else-if="machineAndAtl == 100">
									<span>姓名:</span>
									<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
								</div>
								<div>
									<span>工号:</span>
									<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
								</div>
								<div>
									<span>性别:</span>
									<span>保密</span>
								</div>
								<div>
									<span>职务:</span>
									<span>咨询客服</span>
								</div>
							</div>
							<div class="headPortrait">
								<img :src="service.serverInfo?(url+service.serverInfo.avatar):require('@/assets/st-img/kf.png')"
									 alt="">
							</div>
						</el-col>

						<el-col class="autograph pd20">
							<div>
								<span>个性签名:</span>
								<span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
							</div>
						</el-col>
						<el-col class="advent" v-for="imgs in advert" :key="imgs.id">
							<a :href="'http://'+imgs.advertisement_url" target="_blank" rel="noopener noreferrer">
								<img :src="url + imgs.advertisement_img" alt="">
							</a>
						</el-col>
					</el-row>
				</el-aside>

			</div>
			<!-- 评价框 -->
			<el-card class="box-card" v-if="evlShow">
				<!-- <div class="close" @click="closeEvl(10)"> -->
				<!-- <i></i> -->
				<!-- </div> -->
				<div class="tit">
					<span>感谢您的咨询，请对我们的服务做出评价</span>
				</div>
				<div class="selIcon row allAlignment">
					<div @click="chage(1)">
						<i :class="changeIcon == 10? '':'sfd'"></i>
						<span>满意</span>
					</div>
					<div @click="chage(2)">
						<i class="comm" :class="changeIcon == 100?'comm2':''"></i>
						<span>一般</span>
					</div>
					<div @click="chage(3)">
						<i class="notSfd" :class="changeIcon == 1000?'notSfd2':''"></i>
						<span>不满意</span>
					</div>
				</div>
				<div class="levMsg">
					<el-input type="textarea" rows="6" placeholder="评价备注" v-model="textarea">
					</el-input>
				</div>
				<div class="sure" @click="evaluateSure()">
					<span>确定</span>
				</div>
			</el-card>
			<div class="zzBox" v-if="zzShow"></div>
		</div>
	</div>
</template>
<script>
	import '../css/index.css';
	import frce from '../assets/frce.js';

	export default {
		data() {
			return {
				textarea: '',//备注
				evlShow: false, // 评价框显示
				zzShow: false, // 遮罩层显示
				vertion: '',//图形验证码
				provShow: true, // 验证框显示
				changeIcon: 10,
				name: '', // 验证框姓名model
				phone: '',// 验证框电话model
				email: '',// 验证框邮箱model
				frceArr: [], //表情包代码
				information: '',//发送的文本信息
				sendCol: false, // 发送按钮切换样式
				selType: false, //图标选中样式 true为选中，false为未选中
				selNum: 0, // 自增当达到某个条件显示图片
				// syType : false,
				// sqType : false,
				error: false,
				emlError: false,
				artAndLeave: 0, // 默认为100，转人工为10，人工不在转留言为100
				chatCont: [], // 客户会话数据
				imageUrl: [],//上传图片
				img: '', //上传的单个图片路径
				dialogVisible: false, //图片放大
				dialogImageUrl: '', // 放大的图片
				dialogUrl: false,
				serviceInfor: '', //客服信息
				websock: null, //会话初始值
				currTime: "", //获取系统时间
				apiToken: '',//系统Token
				machine: '', //机器会话信息
				advert: '', // 广告语
				problem: '', //机器智能问题
				macNotPro: false, //机器人问题无法解决显示
				answer: [], //解答问题的答案
				questionShow: true, // 问题显示
				consult: false, //评价模块显示
				type: 1001, //自增
				jumpArtl: false, // 跳转人工客服状态
				group: '', //客服组
				userConversation: {}, //用户当前会话
				machineAndAtl: 10, //默认为机器人，100为人工
				satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
				url: 'http://kfadmin.bocai186.com', // 域名地址
				//url :'http://192.168.2.186:8090', // 域名地址
				user_info: '', // 用户信息
				// 人工客服信息
				service: '',
				serviceList: [], //后台推送的人工客服列表
				customerWelCome: '', // 客服欢迎语
				customerSviceChat: [], // 客服会话信息
				serviceImg: '',
				timerVote: '', //存储上一次时间
				curtTimer: '',//当前时间
				returnTimer: '',//返回当前时间
				// isConnection:true,//人工分组列表开关
				chatNum: '', // 会话数量
				comtSuccess: false, // 评论发送成功显示
				comtCount: '', // 评论成功返回的满意度
				retractShow: true, // 展开侧边栏
				sensitive: [], //敏感词1
				senType: false,//敏感词状态
				sensitiveNumber: 0,//敏感词次数
				doubSensitive: [],//重复的敏感词
				senInfo: '', //敏感词数据
				// sensitiveWordsNumber:0,
				hourse: '', //返回时间，小时
				closeByServer: false, //客服关闭会话
				serverNotOnlin: false, //客服掉线
				willOverTime: '', //超时关闭会话
				allLoading: true, //整个页面加载中
				webTime: '',//网络时间
				/*****************websockt心跳变量*******************/
				reconnectData: null,
				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
				timeout: 10000,          //10s一次心跳检测
				timeoutObj: null,
				serverTimeoutObj: null,

			}
		},
		methods: {
			// 回车提交
			listenEnter(){
				this.sendInfo();
			},
			// ctrl+center 换行
			lineFeed(){
				this.information = this.information + '\n'
			},
			// 切换留言板返回
			back(){
				this.$emit('value',100)
			},
			/******************文字信息转表情******************/
			turnFace(data) {
				let str = data.match(/\#\[.*?\]\//g);
				let arr = Array.from(new Set(str));
				arr.forEach(e => {
					let imgsrc = '';
					for (let i = 0; i < this.frceArr.length; i++) {
						let expText = e.slice(1, e.length - 1);
						if (expText == this.frceArr[i]) {
							imgsrc = '<img class="hover" src="' + require(`@/assets/st-img/${i}.gif`) + '"/>'
							break;
						}
					}
					data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
				})
				return data;
			},

			// 关闭加载中
			allLoadingClose() {
				this.allLoading = false;
			},

			/**************切换显示客服信息**************** */
			retract() {
				this.retractShow = !this.retractShow;
			},

			/***************发送图片***************/
			beforeAvatarUpload(file) {
				let self = this
				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				//对图片进行压缩
				const imgSize = file.size / 1024 / 1024;
				if (imgSize > 0.5) {
					const _this = this
					return new Promise(resolve => {
						const reader = new FileReader()
						const image = new Image()
						image.onload = (imageEvent) => {
							const canvas = document.createElement('canvas');
							const context = canvas.getContext('2d');
							const width = image.width * 0.4;
							const height = image.height * 0.4;
							canvas.width = width;
							canvas.height = height;
							context.clearRect(0, 0, width, height);
							context.drawImage(image, 0, 0, width, height);
							const dataUrl = canvas.toDataURL(file.type);
							const blobData = _this.dataURItoBlob(dataUrl, file.type);
							resolve(blobData)
						}
						reader.onload = (e => {
							image.src = e.target.result;
						});
						reader.readAsDataURL(file);
					})
				}
			},

			dataURItoBlob(dataURI, type) {
				var binary = atob(dataURI.split(',')[1]);
				var array = [];
				for (var i = 0; i < binary.length; i++) {
					array.push(binary.charCodeAt(i));
				}
				return new Blob([new Uint8Array(array)], {type: type});
			},

			handError(err, file, fileList) {
				// 获取当前发送时间
			},


			/***************传输成功之后返回图片*************** */
			handleAvatarSuccess(res, file) {
				// console.log(res)
				this.dialogUrl = true;
				this.img = res.data.src;
				this.sendMessage();
			},
			/***************图片放大*************** */
			handlePictureCardPreview(url) {
				this.dialogImageUrl = url;
				this.dialogVisible = true;
			},

			/***************弹出评价框*************** */
			ejectEvl(type) {
				if (this.comtSuccess) return;
				this.changeIcon = 10;
				if (type == 10) {
					this.evlShow = true
				}
				this.zzShow = true;
			},

			/***************传入父组件进行组件切换*************** */
			leaveMsg() {
				this.$emit('value', 100)
			},
			//回到初始页面
			goBack(type) {
				if (type === 1) {
					this.artAndLeave = 0;
					this.chatCont = [];
				}else {
					this.machineAndAtl = 10;
					this.macNotPro = false;
					this.jumpArtl = false;
					this.time = '';
					this.returnTimer = '';
					// this.automaticRolling();
					this.initWebSocket();
					this.customerSviceChat = [];
					this.reconnect();
				}
			},


			/*******发送消息按钮*******/
			sendInfo() {
				this.closeByServer = false;
				this.artAndLeave = 0;
				this.jumpArtl = false;
				this.dialogUrl = false;
				this.sendMessage();
			},

			/***************改变评价框的满意度*************** */
			chage(type) {
				this.satisfaction = type;
				if (type == 1) {
					this.comtCount = '满意'
					this.changeIcon = 10;
				} else if (type == 2) {
					this.comtCount = '一般'
					this.changeIcon = 100;
				} else {
					this.comtCount = '不满意'
					this.changeIcon = 1000;
				}
			},

			/***************图标样式切换*************** */
			select(type) {
				if (type == 1) {
					this.selType = !this.selType;
				} else if (type == 2) {
					this.syType = !this.syType;
				} else {
					this.sqType = !this.sqType;
				}
			},

			/***************评价确认*************** */
			evaluateSure() {
				// 参数
				let params = {
					'evaluateId': this.satisfaction,
					'conversationId': this.service.conversationId,
					'evaluateContent': this.textarea
				}
				this.$axios.get('/api/index/evaluate/putEvaluate', {
					params,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currTime, 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.evlShow = false;
						this.zzShow = false;
						this.textarea = '';
						this.comtSuccess = true;
						if (this.changeIcon == 10) {
							this.comtCount = '满意'
						}
					}
				})
			},

			/***************验证框确认*************** */
			yySure() {
				this.provShow = false;
				this.zzShow = false;
			},

			/***************转人工客服列表*************** */
			changeService() {
				// if(!this.isConnection) return
				this.$axios.post('/api/index/groups/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('index', 'groups', this.currTime, 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.serviceList = res.data.data;
						this.chatCont.push({
							'type': 'artService'
						})
						this.automaticRolling();
					}
				})
				// this.isConnection = false;
			},

			/***************表情点击*************** */
			memeImg(i) {
				//当表情被点击
				this.information = this.information + "#" + this.frceArr[i] + "/";
			},

			/***************失去焦点做正则验证*************** */
			sureInfor(type) {
				if (type == 1) {
					if (!/^1[34578]\d{9}$/.test(this.phone)) {
						this.error = true;
						this.phone = '';
					} else {
						this.error = false;
					}
				} else if (type == 10) {
					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
						this.emlError = true;
						this.email = '';
					} else {
						this.emlError = false;
					}
				}
			},

			/***************获取热点智能问题*************** */
			getProblem() {
				this.$axios.post('/api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('index', 'robot', this.currTime, 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.problem = res.data.data
					}
				})
			},

			/*****************获取聊天次数*******************/
			getChatNum() {
				this.$axios.post('/api/index/evaluate/minRound', '', {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'apiToken': this.setApiToken('minround', 'evaluate', this.currTime, 'index')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.chatNum = res.data.data.systemconfig_data
					}
				})
			},

			/*****************屏蔽关键字******************/
			shieldingKeyword(data) {
				//将敏感词组用|转换字符串
				let snstive = this.sensitive.join('|');
				//console.log(snstive);
				this.sensitiveNumber = 0;
				//匹配出会话中的敏感词
				return data.replace(eval('/' + snstive + '/g'), (res) => {
					var str = '';
					for (var i = 0; i < res.length; i++) {
						str += '*';
					}
					this.sensitiveNumber++;
					return str;
				})
			},

			/*---------------------------------------------------------------------------------*/
			/**************初始化WebSocket****************/
			initWebSocket() {
				let _this = this;
				let apiToken = this.$md5.hex_md5('customer-service' + this.currTime + window.location.origin);
				this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
				//this.websock = new WebSocket('ws://192.168.2.186:9101?apiToken=' + apiToken);
				// 数据接收
				this.websock.onmessage = this.websocketonmessage;
				// 连接建立之后
				this.websock.onopen = this.websocketonopen;
				// 连接建立失败重连
				this.websock.onerror = this.websocketonerror;
				// 关闭会话
				this.websock.onclose = this.websocketonclose;
			},

			/****************连接建立成功***************/
			websocketonopen() {
				console.log('链接成功');
				//心跳检测
				this.heatBeat()
			},

			/*************连接建立失败重连***************** */
			websocketonerror() {
				console.log('连接建立失败重连');
				this.goBack(1);
			},

			/**************数据接收***************** */
			websocketonmessage(e) {
				let redata = e
				if(e.data){
					redata = JSON.parse(e.data);
				}
				//心跳检测
				this.heatBeat()
				console.log(redata)
				// 欢迎语
				if (redata.message_type == 'helloMessage') {
					this.machine = redata.data;
				}
				// 广告语
				if (redata.message_type == 'advertisement') {
					this.advert = redata.data;
				}
				// 评价
				if (redata.message_type == 'getEvaluate') {
					this.consult = true;
				}
				//返回的会话时间
				if (redata.message_type == 'webTime') {
					//处理会话时间大于两分钟显示会话时间并且储存本次会话时间
					if (this.machineAndAtl == 100) {
						let num = this.customerSviceChat.length - 1;
						if (this.customerSviceChat[num].type == "user") {
							if (redata.data.webTime.split(":")[1] - this.webTime.split(":")[1] > 2) {
								this.$set(this.customerSviceChat[num], 'time', redata.data.webTime);
								this.webTime = redata.data.webTime;
							} else {
								this.$set(this.customerSviceChat[num], 'time', '');
							}
						}
					}

				}
				//会话超时提示
				if (redata.message_type == 'overtime') {
					console.log('接收会话超时');
				}
				// 链接客服信息
				if (redata.message_type == 'connect') {
					this.artAndLeave = 10;
					this.machineAndAtl = 100;
					this.service = redata.data;
					console.log(this.service, '============客服信息')
					this.serviceImg = redata.data.serverInfo.avatar;
				}
				// 暂无客服
				if (redata.message_type == 'wait') {
					let content = JSON.parse(redata.data.content)
					this.artAndLeave = 100;
				}
				//接收客服会话
				if (redata.message_type == 'chatMessage') {
					//存储会话超时间
					this.webTime = redata.data.time;
					//会话大于两分钟显示
					let timer = ''
					if (this.returnTimer == '') {
						timer = redata.data.time;
						this.returnTimer = redata.data.time
					} else {
						let timeStamp = this.returnTimer.split(":");
						let rdtime = redata.data.time.split(":");
						if (timeStamp[0] == rdtime[0]) {
							if ((rdtime[1] - timeStamp[1]) < 2) {
								timer = ''
							} else {
								timer = redata.data.time;
							}
						}
					}
					//
					let contType = this.isJSON(redata.data.content);
					let content = {};
					if (contType == false) {
						content.text = redata.data.content
					} else {
						content = JSON.parse(redata.data.content)
					}
					let obj = {
						time: timer,
						content: content.text ? this.turnFace(content.text) : '',
						imgUrl: content.img ? content.img : '',
						type: 'service'
					}
					this.customerSviceChat.push(obj);
					// console.log(this.customerSviceChat);
					this.selNum++;
					this.automaticRolling();
				}
				//接收机器会话
				if (redata.message_type == 'robotMessage') {
					if (redata.data.content == 'error') {
						let _this = this;
						this.chatCont.push({type: 1001})
						this.automaticRolling();
					} else {
						this.chatCont.push({
							'robot_content': redata.data.content,
							'type': 'machine'
						})
						this.automaticRolling();
					}

					let num = this.chatCont.length - 2;
					if (this.webTime) {
						if (redata.data.time.split(":")[1] - this.webTime.split(":")[1] > 2) {
							this.$set(this.chatCont[num], 'time', redata.data.time);
							this.webTime = redata.data.time;
						} else {
							this.$set(this.chatCont[num], 'time', '');
						}
					} else {
						this.webTime = redata.data.time;
						this.$set(this.chatCont[num], 'time', redata.data.time);
					}

				}
				// 没有客服上线.
				if (redata.message_type == 'notice') {
					this.artAndLeave = 100;
					this.automaticRolling();
					this.machineAndAtl = 10;
					this.jumpArtl = false;
				}
				// 客服关闭会话.
				if (redata.message_type == 'closeBysever') {
					this.goBack(1);
					this.lockReconnect = true;
					clearTimeout(this.reconnectData);      //离开清除 timeout
					clearTimeout(this.timeoutObj);         //离开清除 timeout
					clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
				}
				// 客服掉线.
				if (redata.message_type == 'serviceoffline') {
					this.serverNotOnlin = true;
					this.closeByServer = true;
					this.automaticRolling();
				}
				// 超时.
				if (redata.message_type == 'overtime') {
					this.willOverTime = redata.data.content;
					this.automaticRolling();
				}


			},


			/************关闭会话*******************/
			websocketonclose(e) {
				console.log('断开会话', e);
				this.goBack();
			},

			/*************数据发送***************** */
			websocketsend(data) {
				this.websock.send(data);
			},


			/***************************************/
			//socket重连
			reconnect() {
				console.log('=========重连==============')
				if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
					return
				}
				this.lockReconnect = true;
				this.reconnectData && clearTimeout(this.reconnectData);
				this.reconnectData = setTimeout(() => {
					this.initWebSocket();
					this.lockReconnect = false;
				}, 5000)
			},

			/*************************************/
			//心跳检测
			heatBeat() {
				this.timeoutObj && clearTimeout(this.timeoutObj);
				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
				this.timeoutObj = setTimeout(() => {
					console.log('发送', {type: 'ping'});
					this.websocketsend(JSON.stringify({type: 'ping'}))   //根据后台要求发送
					this.serverTimeoutObj = setTimeout(() => {
						this.websock.close(); //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
					}, 5000);
				}, this.timeout)
			},


			/******************消息发送数据处理********************/
			sendMessage() {
				// 给机器人发送文本消息
				if (this.machineAndAtl == 10) {
					//给机器人发送文本消息-本地储存
					let datas = {
						time: '',
						chat: this.turnFace(this.shieldingKeyword(this.information)),
						imgUrl: this.img,
						type: 'user'
					}
					this.chatCont.push(datas)
					//消息发送-机器人
					this.websocketsend(JSON.stringify({
						type: 'toRobot',
						data: {
							groups_id: '1',
							robot_name: this.shieldingKeyword(this.information),
							webTime: this.webTime,
							robotgroups_id: '1',
						}
					}))
				} else if (this.machineAndAtl == 100) { //人工聊天
					//发送给客服消息-本地储存
					this.customerSviceChat.push({
						time: '',
						content: this.turnFace(this.shieldingKeyword(this.information)),
						imgUrl: this.img,
						type: 'user',
					});

					//消息发送-客服
					this.websocketsend(JSON.stringify({
						type: 'chatMessage',
						data: {
							from_name: this.user_info.name,
							from_avatar: this.user_info.avatar,
							from_id: this.user_info.id,
							content: JSON.stringify({
								text: this.information,
								img: this.img,
								type: 'user'
							}),
							webTime: this.webTime,
							to_id: this.service.kf_id,
							to_name: this.service.kf_name,
							sensitiveNumber: this.sensitiveNumber,
							conversationId: this.service.conversationId
						}
					}))
				}
				// 发送之后清空发送数据
				this.img = '';
				this.information = '';
				//高度自动向上滑动
				this.automaticRolling();
			},

			/*************设置token加密***************** */
			setApiToken(name, controller, time, modules) {
				return this.$md5.hex_md5(name + 'customer-service' + controller + time + modules)
			},

			/*************跳转人工客服***************** */
			jumpService(id) {

				this.jumpArtl = true;
				this.closeByServer = false;
				this.group = id;
				//人工会话登陆
				let data = {
					'type': 'userInit',
					data: {
						'uid': this.user_info.id,
						'name': this.user_info.name,
						'avatar': this.user_info.avatar,
						'group': this.group
					}
				}
				this.websock.send(JSON.stringify(data));
			},

			/*************机器智能回答问题***************** */
			answers(idx) {
				let obj = {
					'robot_addTime': this.problem[idx].robot_addTime,
					'robot_content': this.problem[idx].robot_content,
					'type': 'machine'
				}
				this.information = this.problem[idx].robot_name
				this.sendMessage();
				this.automaticRolling();
			},

			/**************匿名注册**************** */
			registered() {
				let token = sessionStorage.getItem('token');
				let data = {
					token: token != null ? token : '',//
					appid: this.$public.getQueryString('appid'),//
					appuid: this.$public.getQueryString('appuid'),//
				}
				let obj = {
					headers: {
						"apiToken": this.setApiToken('autoreg', 'register', this.currTime, 'index')
					}
				}
				this.$axios.post('/api/index/register/autoReg', data, obj).then(res => {
					if (res.data.code == 1) {
						this.user_info = res.data.data;
						sessionStorage.setItem("token", res.data.data.token);
					}
				})
			},

			/***********聊天滑动的时候滑动滚动条到底部******************* */
			automaticRolling() {
				this.$nextTick(() => {
					let msg = document.getElementById('main') // 获取对象
					msg.scrollTop = msg.scrollHeight // 滚动高度
				})
			},

			/**************获取敏感词**************** */
			getSensitive() {
				let obj = {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						"apiToken": this.setApiToken('sensitivewords', 'index', this.currTime, 'index')
					}
				};
				let data = {
					userToken: ''
				}
				this.$axios.post('/api/index/index/sensitiveWords', '', obj).then(res => {
					if (res.data.code == 1) {
						console.log(res.data.data);
						res.data.data.userSensitive.forEach(res => {
							this.sensitive.push(res.sensitivewords_word)
						})
					}
				})
			},

			/**********判定是否是JSON格式*********** */
			isJSON(str) {
				if (typeof str == 'string') {
					try {
						JSON.parse(str);
						return true;
					} catch (e) {
						//console.log(e);
						return false;
					}
				}
			},

		},

		/**************页面加载中挂载**************** */
		mounted() {
			let self = this;
			this.frceArr = frce.frce;
			this.$axios.get('api/index/index/systime?t=' + new Date()).then(res => {
				if (res.data.code == 1) {
					// 获取系统时间
					let date = res.data.data.time.split(" ");
					date[0] = (new Date(date[0].replace(/-/g, '/')).getTime()) / 1000;
					this.currTime = date[0];
					this.hourse = date[1];
					// 获取机器智能问题
					this.getProblem();
					// 匿名注册
					this.registered();
					setTimeout(() => {
						//关闭加载条
						this.allLoadingClose();
						// 初始化websocket
						this.initWebSocket();
					}, 2000);
					// 获取聊天次数
					this.getChatNum();
					// 获取敏感词
					this.getSensitive();
				}
			})
		},
		// 组件挂载阶段

		destroyed() {
			this.websock.close() //离开路由之后断开websocket连接
			this.lockReconnect = true;
			clearTimeout(this.reconnectData);      //离开清除 timeout
			clearTimeout(this.timeoutObj);         //离开清除 timeout
			clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
		},
		computed: {
			inforLeng() {
				return this.information.length;
			}
		},
		watch: {
			inforLeng(val) {
				if (val > 0) {
					this.sendCol = true;
				} else {
					this.sendCol = false;
				}
			}
		}

	}
</script>
<style scoped>
	.chatBox {
		width: 700px;
		position: relative;
	}

	.el-header {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
	}

	.tit {
		height: 100%;
		line-height: 80px;
		text-align: left;
		padding-left: 20px;
	}

	.el-col span {
		font-size: 18px;
		color: #FFFFFF;
	}

	.imgBox {
		text-align: right;
	}

	.imgBox img {
		margin-right: 20px;
	}

	.imgBox img:nth-last-child(1) {
		margin-right: 0
	}

	.el-main {
		background: #fff;
		width: 63%;
		padding: 0;
	}

	.el-aside {
		background: #F5F5F5;
		width: 37%;
	}

	.cationer, .artificial {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.rt {
		width: 100%;
		box-sizing: inherit;
	}

	.artificial {
		/* width: 150px; */
		/* padding:0 20px; */
		margin-top: 23px;
		margin-bottom: 9px;
		vertical-align: middle;
		/* flex-direction: column;*/

	}

	.infor div {
		margin-bottom: 3px;
	}

	.infor div span, .autograph span {
		color: #999999;
		font-size: 14px;
		font-weight: 400;
	}

	.infor div span:nth-child(2), .autograph span:nth-child(2) {
		color: #666666;
		margin-left: 4px;
	}

	.headPortrait {
		width: 46%;
		height: 100px;
	}

	.headPortrait img {
		width: 100%;
		height: 100%;
	}

	.autograph {
		margin-bottom: 11px;
	}

	.advent {
		border-top: 1px solid #DDDDDD;
		padding: 20px;
	}

	.advent img {
		width: 100%;
		height: 350px;
	}

	.pd {
		padding: 20px;
	}

	.pd20 {
		padding: 0 20px;
	}

	/* 会话 */
	.conversationBox {
		margin-top: 13px;
		margin-bottom: 13px;
	}

	.timer {
		text-align: center;
		margin: 10px 0;
		color: #999999;
		font-size: 12px;
	}

	.headImg {
		width: 40px;
		height: 40px;
		margin-right: 13px;
	}

	.headImg img {
		display: inline-block;
		width: 40px;
		height: 40px;
	}

	.conversation .cont, .customer .cont {
		background: #ffffff;
		padding: 9px 8px 12px 10px;
		display: inline-block;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
		position: relative;
		max-width: 270px;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -4px;
		top: 5px;
		width: 5px;
		height: 9px;
		background: #fff;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		/* z-index: -1; */
		border-left: 1px solid #dfdfdf;
		border-top: 1px solid #dfdfdf;
	}

	div.noafter::after {
		content: '';
		width: 0;
		height: 0;;
		display: inline;
		position: relative;
		border: 0;
	}

	.conversation .cont div, .customer .cont div {
		color: #666666;
		font-size: 16px;
	}

	.customer {
		justify-content: space-between;
	}

	.customer .cont {
		margin-right: 13px;
		border: 0;
		background: #5EA0F7;
		max-width: 260px;
		word-wrap: break-word;
		word-break: normal;
	}

	.customer .cont div {
		color: #FFFFFF;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -2px;
		top: 6px;
		width: 5px;
		height: 9px;
		background: #5ea0f7;
		-webkit-transform: skewX(-30deg);
		transform: skewX(-30deg);
		border-left: 1px solid #5ea0f7;
		border-top: 1px solid #5ea0f7;
	}

	.col {
		color: #999999;
	}

	.change {
		color: #5ea0f7;
	}

	.questionList, .changeService {
		margin: 10px;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
	}

	.questionList div, .changeService div {
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
	}

	.questionList div span {
		color: #5EA0F7;
		font-size: 14px;
	}

	.questionList section:nth-child(odd), .changeService div:nth-child(odd) {
		background: #F6F6F6;
	}

	.changeService div span {
		font-size: 14px;
	}

	.changeService div span:nth-child(1) {
		margin-right: 5px;
	}

	.col6 {
		color: #666666 !important;
	}

	.colE5 {
		color: #5EA0F7;
	}

	.promptBox {
		display: flex;
		justify-content: center;
		height: 26px;
		margin: 10px 0 10px;
		/* line-height: 26px; */
	}

	.promptBoxH {
		display: flex;
		justify-content: center;
		height: 50px;
		margin: 10px 0 10px;
		/* line-height: 26px; */
	}

	.prompt {
		line-height: 25px;
		text-align: center;
		background: #DDDDDD;
		border-radius: 30px;
		width: 140px;
		color: #FFFFFF;
		font-size: 12px;
	}

	.help {
		width: 260px;
	}

	.help .prompt {
		width: 100%;
	}

	/* 评论 */
	.evaluate {
		height: 101px;
		padding: 19px 0 16px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 10px;
		margin-top: 15px;
		text-align: center;
		position: relative;
		box-sizing: border-box;
	}

	.evaluate span {
		font-size: 14px;
		color: #666666;
	}

	.nopd {
		padding: 0;
	}

	.evaluate .btn {
		display: block;
		background: #F04992;
		border-radius: 10px;
		margin-top: 10px;
		color: #FFFFFF;
		height: 36px;
		line-height: 36px;
		width: 100px;
		position: absolute;
		bottom: 16px;
		left: 35%;
		cursor: pointer;
	}

	/* 聊天框 */
	.chatting {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
		height: 100px;
		padding: 10px 20px;
	}

	.informationBox {
		height: 500px;
		overflow: auto;
	}

	.expression, .photo {
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url("./../assets/st-img/expression.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
		margin-right: 18px;
	}

	.expression:hover {
		background: url("./../assets/st-img/expressionHover.png") no-repeat;
		background-size: 100% 100%;
	}

	.photo {
		background: url("./../assets/st-img/photo.png") no-repeat;
		background-size: 100% 100%;
	}

	.photo:hover {
		background: url("./../assets/st-img/photoHover.png") no-repeat;
		background-size: 100% 100%;
	}

	textarea {
		height: 30px;
		width: 300px;
		border: 0;
		-webkit-user-select: auto;
		user-select: auto;
		-o-user-select: auto;
		-ms-user-select: auto;
		resize: none;
		outline: none;
		padding-top: 10px;
	}

	.sendOut {
		width: 80px;
		height: 44px;
		line-height: 40px;
		border: 1px solid rgba(221, 221, 221, 1);
		border-radius: 5px;
		text-align: center;
		margin-left: 20px;
	}

	.sendOut span {
		color: #CCCCCC;
		font-size: 16px;
	}

	.chattingBox {
		margin-top: 12px;
	}

	/* 评论弹框 */
	.zzBox {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3)
	}

	.box-card, .proving {
		width: 494px;
		height: 429px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		border-radius: 10px;
		padding: 20px 20px 30px 50px;
		box-sizing: border-box;
	}

	.proving {
		padding: 20px 20px 30px 47px;
	}

	/* .close{
	  text-align: right;
	  cursor: pointer;
	} */

	/* .close i{
	  display: inline-block;
	  width: 18px;
	  height: 18px;
	  background: url("./../assets/st-img/close.png") no-repeat;
	  background-size: 100% 100%;
	} */
	.box-card .tit {
		text-align: center;
		padding-right: 65px;
		margin-bottom: 40px;
	}

	.box-card .tit span {
		font-size: 18px;
		color: #666666;
	}

	.selIcon {
		padding-right: 30px;
		margin-bottom: 30px;
	}

	.selIcon div {
		text-align: center;
		cursor: pointer;
	}

	.selIcon div i {
		display: block;
		width: 44px;
		height: 44px;
		background: url("./../assets/st-img/satisfied.png") no-repeat;
		background-size: 100% 100%;
		margin-bottom: 10px;
	}

	.selIcon div span {
		/* display: block; */
	}

	.selIcon div .comm {
		background: url("./../assets/st-img/comm2.png") no-repeat;
	}

	.selIcon div .sfd {
		background: url("./../assets/st-img/Satisfied2.png") no-repeat;
	}

	.selIcon div .comm2 {
		background: url("./../assets/st-img/comm.png") no-repeat;
	}

	.selIcon div .notSfd {
		background: url("./../assets/st-img/notSatisfied2.png")
	}

	.selIcon div .notSfd2 {
		background: url("./../assets/st-img/notSatisfied.png")
	}

	.levMsg {
		padding-right: 30px;
		margin-bottom: 20px;
	}

	.sure {
		text-align: center;
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		width: 100px;
		height: 48px;
		line-height: 48px;
		color: #fff;
		position: absolute;
		bottom: 30px;
		left: 37%;
		cursor: pointer;
	}

	/* 验证框 */
	.logo {
		text-align: center;
		margin-bottom: 20px;
	}

	.logo span {
		font-size: 38px;
		font-weight: bold;
		color: #5EA0F7;
		font-family: Microsoft YaHei;
	}

	.logo span:nth-child(1) {
		color: #F04992;
	}

	.formBox {
		padding: 0 27px 0 0;
	}

	.formBox .el-input {
		margin-bottom: 21px;
	}

	.formBox .phone .el-input, .formBox .email .el-input {
		margin-bottom: 0;
	}

	.formBox .phone, .formBox .email {
		margin-bottom: 10px;
	}

	.vertion {
		vertical-align: middle;
		/* margin-bottom: 28px; */
	}

	.vertion .el-input {
		width: 250px;
		margin-right: 15px;
		display: inline-block;
	}

	.vertion span {
		display: inline-block;
		width: 128px;
		height: 40px;;
		vertical-align: middle;
		background: rgba(241, 225, 224, 1);
	}

	.formBox .sure {
		bottom: 21px;
	}

	.el-card__body .tit {
		line-height: 25px;
	}

	.chatting .el-button {
		border: none;
		padding: 0;
		border-radius: 0
	}

	.emoticon {
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.pointer {
		cursor: pointer;
	}

	.ly:hover {
		border-bottom: 1px solid #5EA0F7;
		/* 高亮效果 */
		filter: brightness(0.9);
	}

	.gl:hover {
		filter: brightness(0.9);
	}

	.seek:hover {
		background: #860c60
	}

	.sendCol {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
	}

	.netSendCol {
		cursor: not-allowed;
	}

	/* 修改滚动条 */
	::-webkit-scrollbar-button {
		background: transparent;
		border: 0;
	}

	/* 顶部三个图标 */
	.imgBox i {
		display: inline-block;
		width: 25px;
		height: 25px;
		margin-right: 20px;
		background: url("./../assets/st-img/pj.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	.imgBox .sy {
		background: url("./../assets/st-img/sy.png") no-repeat;
	}

	.imgBox .sq {
		background: url("./../assets/st-img/sq.png") no-repeat;
	}

	/* .sc:hover{
	  background: url("./../assets/st-img/pjhover.png") no-repeat;
	}
	.sy:hover{
	  background: url("./../assets/st-img/sy2.png")no-repeat;
	}
	.sq:hover{
	  background: url("./../assets/st-img/sq2.png") no-repeat;
	} */
	i.scActy {
		background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
		width: 33px;
		height: 33px;
		background-position: 5px;
	}

	/* .imgBox .syActy{
	  background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
	  width: 33px;
	  height: 33px;
	  background-position: 5px;
	}
	.imgBox  .sqActy{
	  background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
	  width: 33px;
	  height: 33px;
	  transform: rotate(180deg);
	  background-position: 5px;
	} */
	.tips {
		font-size: 12px;
		color: #F04992;
	}

	#main {
		position: relative;
	}

	.retract {
		position: absolute;
		right: 0;
		top: 290px;
		z-index: 999;
	}

	/* 滚动条样式 */

	.scroll::-webkit-scrollbar {
		border: 5px solid #fff;
	}

	.scroll::-webkit-scrollbar {
		width: 5px;
		height: 20px;
	}

	.scroll::-webkit-scrollbar-button {
		width: 0px;
		height: 0px;
	}

	.scroll::-webkit-scrollbar-thumb {
		border-radius: 5px;
		box-shadow: inset 0 0 0 5px #aaa;
		border: .02rem solid transparent;
	}

	.scroll::-webkit-scrollbar-track {
		display: block;
		background: rgba(0, 0, 0, 0.1);
	}

</style>