<template>
	<div>
		<div v-show="state" class="retrieval">
			<div class="re_form">
				<el-form label-position="left" :model="formLabelAlign" :rules="rules" ref="formLabelAlign"
					class="demo-ruleForm">
					<el-form-item label="选择人像库" prop="name" style="margin-top:20px" label-width="95px">
						<el-select v-model="formLabelAlign.name" filterable multiple collapse-tags placeholder="请选择人像库"
							style="width:300px">
							<el-option v-for="item in options1" :key="item.idFactory" :label="item.factoryName"
								:value="item.idFactory">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="方式一：图片搜索" label-width="125px" style="margin-bottom:0px"></el-form-item>
					<el-form-item class="cf" label-width="125px">
						<div class="re_img">
							<div class="re_img_box">
								<div class="compare_img">
									<img v-if='imageUrl' :src="$replaceImgUrl(imageUrl)" class="pre-img">
									<div v-else class="avatar-uploader-icon">人物图像</div>
								</div>
								<div class="crop-demo-btn">
									上传图片<input class="crop-input" type="file" name="image" accept="image/*"
										@change="setImage" />
								</div>
								<el-dialog title="裁剪图片" :visible.sync="dialogVisible2" width="30%"
									:close-on-click-modal='false'>
									<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage"
										:cropmove="cropImage" style="width:100%;height:300px;">
									</vue-cropper>
									<span slot="footer" class="dialog-footer">
										<el-button @click="cancelCrop">取 消</el-button>
										<el-button type="primary" @click="clickOK()">确 定</el-button>
									</span>
								</el-dialog>
							</div>
							<span class="re_span">
								<el-button class="imgsbuton" type="primary" @click="clickP('formLabelAlign')">搜索
								</el-button>
							</span>
						</div>
					</el-form-item>
					<el-form-item label="方式二：信息搜索" label-width="125px" style="margin-bottom:0px"></el-form-item>
					<el-form-item label-width="125px">
						<div class="idCards">
							<el-input placeholder="请输入姓名或身份证号码" v-model="formLabelAlign.idNC" style="margin-right:10px">
							</el-input>
							<el-button type="primary" @click="clickSearch('formLabelAlign')">搜索</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div v-show="!state" class="retrievals">
			<p class="returnback" @click="returnBack()">
				< 返回</p>
					<el-row :gutter="20">
						<el-col :span="3" v-if="searchState">
							<div class="re_title">搜索结果</div>
							<div class="re_imgs">
								<div class="compare_img">
									<img v-if='imageUrl2' :src="imageUrl2" class="pre-img">
									<div v-else class="avatar-uploader-icon">人物图像</div>
								</div>
								<div class="crop-demo-btn2" v-if="imageUrl2" @click="clickDelImg()">删除图片</div>
								<div class="crop-demo-btn" v-else>
									上传图片<input class="crop-input" type="file" name="image" accept="image/*"
										@change="setImage2" />
								</div>
								<el-dialog title="裁剪图片" :visible.sync="dialogVisible9" width="30%"
									:close-on-click-modal='false'>
									<vue-cropper ref='cropper2' :src="imgSrc2" :ready="cropImage2" :zoom="cropImage2"
										:cropmove="cropImage2" style="width:100%;height:300px;">
									</vue-cropper>
									<span slot="footer" class="dialog-footer">
										<el-button @click="cancelCrop2">取 消</el-button>
										<el-button type="primary" @click="clickOK2()">确 定</el-button>
									</span>
								</el-dialog>
							</div>
						</el-col>
						<el-col :span="3" v-if="uploadState">
							<div class="re_title">搜索结果</div>
							<div class="re_imgs">
								<div class="pic" v-for="(index,key) in imageUrl3" :key=key>
									<img :src="index" alt="">
								</div>
							</div>
						</el-col>
						<el-col :span="21">
							<div class="re_title">条件筛选</div>
							<div class="retrieval_top">
								<el-form ref="form" :model="form" :inline="true">
									<el-form-item label="人像库" prop="library" label-width="70px">
										<el-select v-model="form.library" filterable multiple collapse-tags
											placeholder="请选择人脸库" style="width:250px">
											<el-option v-for="item in options1" :key="item.idFactory"
												:label="item.factoryName" :value="item.idFactory">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="姓名或身份证" prop="name">
										<el-input v-model="form.search" placeholder="请输入姓名或身份证号码" clearable
											style="width:200px"></el-input>
									</el-form-item>
									<el-form-item label="性别" prop="sex">
										<el-radio-group v-model="form.sex" size="small">
											<el-radio-button label="0" name="type">男</el-radio-button>
											<el-radio-button label="1" name="type">女</el-radio-button>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="阈值(%)" prop="idCard" label-width="auto">
										<el-slider style="width:250px" v-model="form.monitorThreshold" :step="10"
											show-input>
										</el-slider>
									</el-form-item>
									<el-form-item style="float:right">
										<el-button type="primary" @click="clickSearch2()">搜索</el-button>
									</el-form-item>
								</el-form>

							</div>
							<div v-if="arrLength != 0">
								<div class="box_c">
									<el-card class="box-card" v-for="(index,key) in array" :key=key>
										<el-row :gutter="20">
											<el-col :span="8">
												<img class="ret_imgs" :src="index.url" alt="">
											</el-col>
											<el-col :span="16">
												<p>姓名：{{index.name}}</p>
												<p>性别：{{index.sex}}</p>
												<p>身份证号码：{{index.idCard}}</p>
												<div class="re_aaaa">
													<div style="margin-bottom:0px">来源：</div>
													<div class="ret_from" :title="index.libraryName">
														{{index.libraryName}}</div>
												</div>
												<p v-if="imageUrl3[0] || imageUrl2">相似度：<span
														class="similarity">{{index.similarityDegree}}</span></p>
											</el-col>
										</el-row>
									</el-card>
								</div>
								<el-pagination v-if="arrLength!=0" @current-change="handleCurrentChange"
									:current-page.sync="jumpData.pageParam.pageNo"
									:page-size="jumpData.pageParam.pageSize" layout="prev, pager, next, jumper"
									:total="total">
								</el-pagination>
							</div>
							<div v-else>
								<p class="box_cs">当前检索图片没有结果</p>
							</div>
						</el-col>
					</el-row>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import {
		clearLoginInfo
	} from '@/utils'
	import VueCropper from 'vue-cropperjs';
	export default {
		inject: ["refresh"],
		data() {
			return {
				disabled: false,
				value: 0,
				state: true,
				props: {
					multiple: true
				},
				options: [{
					value: 1,
					label: '东南',
					children: [{
						value: 2,
						label: '上海',
						children: [{
								value: 3,
								label: '普陀'
							},
							{
								value: 4,
								label: '黄埔'
							},
							{
								value: 5,
								label: '徐汇'
							}
						]
					}, {
						value: 7,
						label: '江苏',
						children: [{
								value: 8,
								label: '南京'
							},
							{
								value: 9,
								label: '苏州'
							},
							{
								value: 10,
								label: '无锡'
							}
						]
					}, {
						value: 12,
						label: '浙江',
						children: [{
								value: 13,
								label: '杭州'
							},
							{
								value: 14,
								label: '宁波'
							},
							{
								value: 15,
								label: '嘉兴'
							}
						]
					}]
				}, {
					value: 17,
					label: '西北',
					children: [{
						value: 18,
						label: '陕西',
						children: [{
								value: 19,
								label: '西安'
							},
							{
								value: 20,
								label: '延安'
							}
						]
					}, {
						value: 21,
						label: '新疆维吾尔族自治区',
						children: [{
								value: 22,
								label: '乌鲁木齐'
							},
							{
								value: 23,
								label: '克拉玛依'
							}
						]
					}]
				}],
				input: '',
				//表单
				labelPosition: 'right',
				formLabelAlign: {
					name: '',
					img: '',
					idNC: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请选择人像库',
						trigger: 'blur'
					}],
				},
				//人像库
				options1: [],
				//第一次上传图片 路径
				uploadAction: '',
				//检索 里面上传
				uploadAction2: '',
				//第一次上传图片
				imageUrl: '',
				imageUrl2: '',
				//上传图片
				dialogImageUrl: '',
				dialogVisible: false,
				fileList: [],
				uploadState: false,
				searchState: false,
				//检索 结果
				imageUrl3: [],
				//搜索
				form: {
					library: '',
					name: '',
					idCard: '',
					sex: '',
					monitorThreshold: 80,
					search: ''
				},
				options2: [{
					value: 1,
					label: '东南',
					children: [{
						value: 2,
						label: '上海',
						children: [{
								value: 3,
								label: '普陀'
							},
							{
								value: 4,
								label: '黄埔'
							},
							{
								value: 5,
								label: '徐汇'
							}
						]
					}, {
						value: 7,
						label: '江苏',
						children: [{
								value: 8,
								label: '南京'
							},
							{
								value: 9,
								label: '苏州'
							},
							{
								value: 10,
								label: '无锡'
							}
						]
					}, {
						value: 12,
						label: '浙江',
						children: [{
								value: 13,
								label: '杭州'
							},
							{
								value: 14,
								label: '宁波'
							},
							{
								value: 15,
								label: '嘉兴'
							}
						]
					}]
				}, {
					value: 17,
					label: '西北',
					children: [{
						value: 18,
						label: '陕西',
						children: [{
								value: 19,
								label: '西安'
							},
							{
								value: 20,
								label: '延安'
							}
						]
					}, {
						value: 21,
						label: '新疆维吾尔族自治区',
						children: [{
								value: 22,
								label: '乌鲁木齐'
							},
							{
								value: 23,
								label: '克拉玛依'
							}
						]
					}]
				}],
				array: [],
				//分页
				total: 0,
				pages: {
					pageNo: 1,
					pageSize: 9,
					note: {},
					sort: {},
					sortString: ""
				},
				imgs: [],
				//没有上传图片 
				fileList2: [],
				picId: "",
				jumpData: {
					libIdList: [],
					faceImageRequestList: [],
					faceApiResultMap: {},
					minScore: '',
					pageParam: {
						pageNo: 1,
						pageSize: 9,
						note: {
							search: '',
							sex: ''
						},
						sort: {},
						sortString: ""
					},
				},
				arrLength: '',
				successFileUrlList: [],
				successFileUrlList2: [],
				CutVo: {
					x: '',
					y: '',
					w: '',
					h: '',
					url: ''
				},
				//人像库 数据 跳转
				librayUrl: '',
				//剪裁
				dialogVisible2: false,
				dialogVisible9: false,
				imgBase64: '',
				imgBase642: '',
				imgSrc: '',
				imgSrc2: '',
			}
		},
		created: function() {
			let paramsType = this.$route.params
			this.getCode()
			if (this.$route.params !== undefined) {
				this.state = true
				if (typeof paramsType === 'object' && paramsType.faceBgUrl !== undefined) {
					this.barrierSearch(this.$route.params)
				} else {
					this.libraySearch(this.$route.params.imageUrl)
				}
			}
		},
		watch: {
			$route(to, from) {
				if ((from.name == "monitoring-barrier" || from.name == "monitoring-library") && to.name ==
					'monitoring-retrieval') {
					this.state = true
					if (from.name === "monitoring-barrier") {
						this.barrierSearch(this.$route.params)
					} else if (from.name === "monitoring-library") {
						this.libraySearch(this.$route.params.imageUrl)
					}
				}
			}
		},
		components: {
			VueCropper
		},
		methods: {
			//卡口 过来搜索
			barrierSearch(val) {
				this.CutVo = {
					x: val.x,
					y: val.y,
					w: val.w,
					h: val.h,
					url: val.faceBgUrl
				}

				this.$http.post("/file/cut/picture", this.CutVo)
					.then(res => {
						if (res.data.code == 0) {
							this.imageUrl = res.data.data
							this.imageUrl3 = res.data.data.split(',')
							//this.successFileUrlList.push(res.data.data)
						}
					})
					.catch(err => {
						console.log(err);

					})
			},
			//人像库 过来搜索
			libraySearch(val) {
				if (val) {
					this.imageUrl = val
					this.imageUrl3 = val.split(',')
				}

			},
			//图片 搜索
			clickP(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.imageUrl == '') {
							this.$message.warning("请上传检索图片")
							return false;
						}
						this.state = !this.state
						this.uploadState = true

						if (!this.state) {
							this.jumpData.libIdList = this.formLabelAlign.name
							this.jumpData.pageParam.note.search = ''
						} else {
							this.jumpData.libIdList = this.form.library
							this.jumpData.pageParam.note.search = this.form.search

						}
						this.jumpData.faceImageRequestList = this.imageUrl3
						this.jumpData.minScore = this.form.monitorThreshold / 100
						this.jumpData.pageParam.note.sex = this.form.sex

						this.getJump(this.jumpData)
					} else {
						return false;
					}
				});
			},
			//信息 搜索
			clickSearch(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!this.formLabelAlign.idNC) {
							this.$message.warning("请输入检索条件进行检索")
							return false;
						}
						this.state = !this.state
						this.searchState = true

						if (!this.state) {
							this.jumpData.libIdList = this.formLabelAlign.name
							this.jumpData.pageParam.note.search = this.formLabelAlign.idNC
						} else {
							this.jumpData.libIdList = this.form.library
							this.jumpData.pageParam.note.search = this.form.search

						}
						this.jumpData.faceImageRequestList = []
						this.jumpData.minScore = this.form.monitorThreshold / 100
						this.jumpData.pageParam.note.sex = this.form.sex

						this.getJump(this.jumpData)
					} else {
						return false;
					}
				});
			},
			//返回
			returnBack() {
				this.state = !this.state
				this.formLabelAlign.name = []
				this.formLabelAlign.idNC = ''
				this.imageUrl = ''
				this.imageUrl2 = ''
				this.imageUrl3 = []
				this.uploadState = false
				this.searchState = false
			},
			//上传图片
			setImage(e) {
				const file = e.target.files[0];
				if (!file.type.includes('image/')) {
					return;
				}
				const reader = new FileReader();
				reader.onload = (event) => {
					this.dialogVisible2 = true;
					this.imgSrc = event.target.result;
					this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
				};
				reader.readAsDataURL(file);
			},
			cropImage() {
				this.imgBase64 = this.$refs.cropper.getCroppedCanvas().toDataURL();
			},
			cancelCrop() {
				this.dialogVisible2 = false;
				this.imageUrl = ''
			},
			clickOK() {
				if (this.imgBase64) {
					let compareRequestVo = {
						urlList: []
					}
					compareRequestVo.urlList.push(this.imgBase64)
					this.$http.post("/compare/oneToOneImage", compareRequestVo)
						.then(res => {
							if (res.data.code == 0) {
								this.dialogVisible2 = false
								this.imageUrl = res.data.data
								this.imageUrl3.push(res.data.data)
							} else if (res.data.code == 60001) {
								this.$message.warning(res.data.message);
							}

						})
						.catch(err => {
							console.log(err);

						})
				}
			},
			getJump(obj) {
				this.$http.post("/search/search", obj)
					.then(res => {
						if (res.data.code == 0) {
							this.array = res.data.data.resultPage.records
							this.total = parseInt(res.data.data.resultPage.total)
							this.arrLength = this.array.length

							if (this.array) {
								for (let i of this.array) {
									i.similarityDegree = (parseInt(i.similarityDegree * 100 * 100) / 100).toFixed(2) +
										'%';
								}
							}

							this.form.search = res.data.data.requestSearch
							this.form.library = res.data.data.requestLibIdList
							this.jumpData.faceApiResultMap = res.data.data.faceApiResultMap

						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//没有上传图片 跳转过去的 上传
			//删除 图片
			clickDelImg() {
				this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
						confirmButtonText: "确 定",
						cancelButtonText: "取 消",
						type: "warning"
					})
					.then(() => {
						this.jumpData.pageParam.pageNo = 1
						this.imageUrl2 = ''
						this.jumpData.faceImageRequestList = []
						this.jumpData.libIdList = this.form.library
						this.jumpData.pageParam.note.search = this.form.search
						this.jumpData.minScore = this.form.monitorThreshold / 100
						this.jumpData.pageParam.note.sex = this.form.sex

						this.getJump(this.jumpData)
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});

			},
			setImage2(e) {
				const file = e.target.files[0];
				if (!file.type.includes('image/')) {
					return;
				}
				const reader = new FileReader();
				reader.onload = (event) => {
					this.dialogVisible9 = true;
					this.imgSrc2 = event.target.result;
					this.$refs.cropper2 && this.$refs.cropper2.replace(event.target.result);
				};
				reader.readAsDataURL(file);
			},
			cropImage2() {
				this.imgBase642 = this.$refs.cropper2.getCroppedCanvas().toDataURL();
			},
			cancelCrop2() {
				this.dialogVisible9 = false;
				this.imageUrl2 = ''
			},
			clickOK2() {
				if (this.imgBase642) {
					let compareRequestVo = {
						urlList: []
					}
					compareRequestVo.urlList.push(this.imgBase642)
					this.$http.post("/compare/oneToOneImage", compareRequestVo)
						.then(res => {
							if (res.data.code == 0) {
								this.dialogVisible9 = false
								this.imageUrl2 = res.data.data

								this.jumpData.pageParam.pageNo = 1
								this.jumpData.libIdList = this.form.library
								this.jumpData.pageParam.note.search = this.form.search
								this.jumpData.faceImageRequestList.push(res.data.data)
								this.jumpData.minScore = this.form.monitorThreshold / 100
								this.jumpData.pageParam.note.sex = this.form.sex
								this.getJump(this.jumpData)

							} else if (res.data.code == 60001) {
								this.$message.warning(res.data.message);
							}
						})
						.catch(err => {
							console.log(err)
						})
				}
			},
			//结果 搜索
			clickSearch2() {
				if (this.form.library.length != 0) {
					this.jumpData.pageParam.pageNo = 1
					if (this.state) {
						this.jumpData.libIdList = this.formLabelAlign.name
						this.jumpData.pageParam.note.search = this.formLabelAlign.idNC
					} else {
						this.jumpData.libIdList = this.form.library
						this.jumpData.pageParam.note.search = this.form.search
					}

					if (this.imageUrl2) {
						this.jumpData.faceImageRequestList.push(this.imageUrl2)
					} else if (this.imageUrl3) {
						this.jumpData.faceImageRequestList = this.imageUrl3
					} else {
						this.jumpData.faceImageRequestList = []
					}

					this.jumpData.minScore = this.form.monitorThreshold / 100
					this.jumpData.pageParam.note.sex = this.form.sex
					this.getJump(this.jumpData)
				} else {
					this.$message.warning("请选择人像库 再搜索！")
					return
				}

			},
			//分页
			handleCurrentChange(val) {
				this.jumpData.pageParam.pageNo = val
				this.jumpData.libIdList = this.form.library
				this.jumpData.pageParam.note.search = this.form.search
				//this.jumpData.faceImageRequestList = this.imageUrl3
				this.jumpData.minScore = this.form.monitorThreshold / 100
				this.jumpData.pageParam.note.sex = this.form.sex

				if (this.imageUrl2) {
					this.jumpData.faceImageRequestList.push(this.imageUrl2)
				} else if (this.imageUrl3) {
					this.jumpData.faceImageRequestList = this.imageUrl3
				} else {
					this.jumpData.faceImageRequestList = []
				}

				this.getJump(this.jumpData)
			},
			//码表
			getCode() {
				this.$http.get("/search/libraries")
					.then(res => {
						if (res.data.code == 0) {
							this.options1 = res.data.data
						}

					})
					.catch(err => {
						console.log(err);

					})
			}
		}
	}
</script>

<style scoped>
	.retrieval {
		/* width:1632px; */
		height: 500px;
		background: rgba(255, 255, 255, 1);
		border-radius: 2px;
		display: flex;
		justify-content: center
	}

	.retrieval .re_form {
		/* width: 500px; */
		margin: 30px 0px 30px 0px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.retrieval .avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		background-color: #FBFDFF;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}

	.avatars,
	.avatar {
		width: 150px;
		height: 150px;
		display: block;

	}

	.pre-img {
		width: 150px;
		height: 150px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.re_img_del {
		color: red;
		width: 150px;
		margin-top: 10px;
		text-align: center;
		cursor: pointer;
	}

	.idCards {
		display: flex;
		margin-left: -40px;
	}

	.re_img {
		display: flex;
		margin-left: -36px;
	}

	.crop-demo-btn {
		position: relative;
		width: 70px;
		height: 40px;
		line-height: 40px;
		margin-top: 10px;
		margin-left: 36px;
		background-color: #ECF5FF;
		color: #409eff;
		border: 1px solid #409eff;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
		cursor: pointer;
		text-align: center
	}

	.crop-demo-btn2 {
		position: relative;
		width: 70px;
		height: 40px;
		line-height: 40px;
		margin-top: 10px;
		margin-left: 36px;
		text-align: center;
		background-color: #FEF0F0;
		color: #F56C6C;
		border: 1px solid#FBC4C4;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
		cursor: pointer;
	}

	.crop-input {
		position: absolute;
		width: 100px;
		height: 40px;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
	}

	.re_img span {
		display: inline-block;
		margin-top: 70px;
		margin-left: 20px;
	}

	.returnback {
		width: 50px;
		cursor: pointer;
		margin-top: 0px;
	}

	/* 检索结果 */
	.re_title {
		font-size: 18px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 10px;
	}

	/* 左边图片 滚动条 */
	.re_imgs {
		height: 770px;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.re_imgs::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.re_imgs::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: #999;
		-webkit-border-radius: 4px;
		outline: 2px solid #fff;
		outline-offset: -2px;
		border: 2px solid #fff;
	}

	.re_imgs::-webkit-scrollbar-track-piece {
		background-color: #F1F1F1;
		-webkit-border-radius: 0;
	}

	.re_imgs img {
		width: 150px;
		height: 150px;
		margin-bottom: 10px;
	}

	.retrieval_top {
		height: 100%;
		background: rgba(255, 255, 255, 1);
		border-radius: 4px;
	}

	.retrieval_top>>>.el-form-item {
		margin: 10px;
	}

	/* 卡片 */
	.box-card {
		width: 460px;
		height: 160px;
		margin: 15px 0px 20px 0px;
	}

	.box-card:not(:nth-child(3n)) {
		margin-right: 34px;
	}

	.ret_imgs {
		width: 120px;
		height: 120px;
	}

	.box-card p {
		margin-top: 0px;
		margin-bottom: 10px;
	}

	.similarity {
		width: 52px;
		height: 14px;
		font-size: 18px;
		font-family: Bahnschrift;
		color: rgba(255, 52, 62, 1);
		line-height: 40px;
	}

	.box_c {
		display: flex;
		flex-wrap: wrap;
		/* margin-top: 20px; */
	}

	.box_cs {
		text-align: center
	}

	.re_aaaa {
		display: flex
	}

	.ret_from {
		width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.fs12 {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: Source Han Sans CN;
	}
</style>
