fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/uploadFile/index.vue

@@ -0,0 +1,725 @@
+<template>
+	<div id="UploadFile">
+		<div class="ps-r content-width">
+			<input :id="uploadFileId" ref="inputer" type="file" :accept="uploadObj.type" class="filter0 inputer ps-a z-index2" :class="[type || type === '' ? 'full-content' : 'default-upload']" maxCount="1" :placeholder="i18n.t('financialinfo.carinfo.42bfwl')" @change="upLoad" />
+			<div v-if="deleteFlag && loadingObj.type !== 'loading'" class="delete-btn" @click="deleteFile">
+				<i class="c-ffffff delete-icon iconfont icon-guanbixian" />
+			</div>
+			<slot>
+				<!-- 头像上传 -->
+				<div v-if="type === 'Avatar'">
+					<img class="head-img head-cont-img" :src="uploadUrl || 'https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/header.png'" />
+				</div>
+				<div v-else class="ps-r flex-center-center br4 over-hidden border-thin bdc-theme-24" :class="[type ? '' : 'default-upload']">
+					<img v-if="type" class="full-width" :src="bgUrl" alt="" />
+					<div class="circle ps-a camera-icon theme-dark-bg flex-center">
+						<svg t="1713249822868" class="icon-xiangji" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16455" width="200" height="200">
+							<path d="M624.64 109.714286a73.142857 73.142857 0 0 1 55.533714 25.545143L768 237.714286h146.285714a73.142857 73.142857 0 0 1 73.142857 73.142857v530.285714a73.142857 73.142857 0 0 1-73.142857 73.142857H109.714286a73.142857 73.142857 0 0 1-73.142857-73.142857V310.857143a73.142857 73.142857 0 0 1 73.142857-73.142857h146.285714l87.826286-102.454857A73.142857 73.142857 0 0 1 399.36 109.714286h225.28zM512 365.714286c-111.085714 0-201.142857 90.057143-201.142857 201.142857s90.057143 201.142857 201.142857 201.142857 201.142857-90.057143 201.142857-201.142857-90.057143-201.142857-201.142857-201.142857z m0 91.428571a109.714286 109.714286 0 1 1 0 219.428572 109.714286 109.714286 0 0 1 0-219.428572z" fill="#ffffff" p-id="16456"></path>
+						</svg>
+					</div>
+					<img v-if="urlList[0]" class="full-width ps-a z-index2" :src="urlList[0]" alt="" @click="loadingClick" />
+					<!-- 上传中loading框 -->
+					<!--- isIconUpload标识是否是按钮上传 -->
+				</div>
+			</slot>
+			<!-- deleteFlag 表示上传框是否有删除按钮 -->
+			<div v-show="deleteFlag && !uploadObj.isIconUpload && loadingObj.visible" :class="[loadingObj.visible ? 'loading-content' : '']" class="ps-a full-content top0 full-content flex-column-center br4" @click="loadingClick">
+				<div v-if="loadingObj.type === 'loading'">
+					<van-loading style="width: 23px; height: 23px" />
+				</div>
+				<div v-else>
+					<i class="iconfont ft23 icon-guanbi c-ffffff" />
+				</div>
+				<span class="c-ffffff mt8">
+					{{ loadingObj.text }}
+				</span>
+			</div>
+
+			<!-- 裁剪遮罩层 -->
+			<div v-show="copperDialogVisible" class="mask-layer" :title="i18n.t('componentsfile.uploadfile.5j20wn')" />
+			<!-- 裁剪区域 -->
+			<div v-show="copperDialogVisible" :title="i18n.t('componentsfile.uploadfile.2hih6y')">
+				<div class="cropper-content">
+					<div class="cropper t-center">
+						<vueCropper v-if="option.img" ref="cropper" :img="option.img" :output-size="option.outputSize" :output-type="option.outputType" :info="option.info" :can-scale="option.canScale" :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :fixed="option.fixed" :fixed-box="option.fixedBox" :fixed-number="option.fixedNumber" />
+					</div>
+				</div>
+				<div class="cou-top-panel bg13 zindex">
+					<span class="mess-back" @click="cancel">
+						<div class="cont-wh" />
+					</span>
+					<span class="right ft14 c10" @click="finish">{{ i18n.t("product.product.n352cz") }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { blobToDataURL, loadJavaScript, isPerfectObj } from "../../assets/js/func";
+if (!window["vue-cropper"]) {
+	loadJavaScript("https://dop-pro-1251973116.file.myqcloud.com/upload/jsfile/vue-cropper@0.4.9/vue-cropper.js").then(() => {
+		console.log("vue-cropper 加载成功");
+	});
+}
+import i18n from "../../assets/vantLang";
+/**
+ *  ID_CARD("1","身份证"),
+    CARD_PHOTO("2","免冠证件照"),
+    DRIVER_CARD("3","驾驶证"),
+    OFFICIAL_CARD("4","军官证"),
+    SOLDIER("5","士兵证"),
+    LiSENCE("6","营业执照"),
+    CHINA_PASSPORT("7","中国护照"),
+    HM_PASSPORT("9","港澳通行证"),
+    TAIWAN_PASSPORT("10","台湾通行证"),
+    FOREIGN_PASSPORT("51","外国护照"),
+    BACK_HOME_CARD("11","回乡证"),
+    OTHER_CARD("99","其他");
+ *
+ */
+
+export default {
+	name: "UploadFile",
+	props: {
+		uploadObj: {
+			type: Object,
+			default: function () {
+				return {
+					name: {
+						// 名称
+						type: String,
+						default: () => "",
+					},
+					uploadId: {
+						// 上传id
+						type: String,
+						default: () => "",
+					},
+					type: {
+						type: String,
+						default: () => "",
+					},
+					fileType: {
+						// accept类型
+						type: String,
+						default: () => "",
+					}, // course 目录类型
+					fileSize: {
+						// 最大上传文件体积
+						type: String,
+						default: () => "",
+					},
+					uploadType: {
+						// 上传的图片类型，用于ocr传参，可选值如下 影像识别类型 1-身份证 2-驾驶证 3-银行卡 4-户口本 5-护照 6-通告证
+						type: String,
+						default: () => "",
+					},
+					uploadIndex: {
+						type: Number,
+						default: () => null,
+					},
+					loadingType: {
+						type: String,
+						default: "loading",
+					},
+					cosArea: {
+						type: String,
+						default: "Tencent",
+					},
+					cropper: {
+						type: Boolean,
+						default: false,
+					},
+					keyFunc: {
+						type: Object,
+					},
+				};
+			},
+		},
+		type: {
+			type: String,
+			validator: function (value) {
+				return ["ID_F", "ID_B", "BANK", "Avatar", ""].includes(value);
+			},
+			default: () => "",
+		},
+		cropWidth: {
+			type: Number,
+			default: () => 100,
+		},
+		cropHeight: {
+			type: Number,
+			default: () => 100,
+		},
+		cropRate: {
+			type: Array,
+			default: () => [16, 9],
+		},
+		fixed: {
+			type: Boolean,
+			default: () => true,
+		},
+		previewImage: {
+			type: Boolean,
+			default: () => true,
+		},
+		uploadUrl: {
+			type: String,
+			default: () => "",
+		},
+		deleteFlag: {
+			type: Boolean,
+			default: true,
+		},
+		uploadFileId: {
+			type: String,
+			required: true,
+			default: () => "",
+		},
+	},
+	data() {
+		return {
+			i18n,
+			fileArr: {},
+			showProcess: false,
+			// showPreview: false, // 展示预览遮罩层
+			processLen: 0,
+			urlList: [], // cos返回链接的集合
+			copperDialogVisible: false,
+			loadingObj: {
+				loading: false, // loading为true则表示上传成功、false则表示未上传上传中或者上传失败
+				visible: false,
+				type: "loading",
+				text: "",
+			},
+			ocrAvailableList: [1, 2, 3, 4, 5, 6], // 上传的图片类型，用于ocr传参，可选值如下 影像识别类型 1-身份证 2-驾驶证 3-银行卡 4-户口本 5-护照 6-通告证
+		};
+	},
+	computed: {
+		option() {
+			return {
+				// 裁剪组件的基础配置option
+				img: "", // 裁剪图片的地址
+				info: true, // 裁剪框的大小信息
+				outputSize: 0.8, // 裁剪生成图片的质量
+				outputType: "jpeg", // 裁剪生成图片的格式
+				canScale: false, // 图片是否允许滚轮缩放
+				autoCrop: true, // 是否默认生成截图框
+				autoCropWidth: this.cropWidth, // 默认生成截图框宽度
+				autoCropHeight: this.cropHeight, // 默认生成截图框高度
+				fixedBox: false, // 固定截图框大小 不允许改变
+				fixed: this.fixed, // 是否开启截图框宽高固定比例
+				fixedNumber: this.type === "Avatar" ? [1, 1] : this.cropRate, // 截图框的宽高比例
+				full: true, // 是否输出原图比例的截图
+				canMoveBox: false, // 截图框能否拖动
+				original: false, // 上传图片按照原始比例渲染
+				centerBox: false, // 截图框是否被限制在图片里面
+				infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+				canMove: true,
+			};
+		},
+		bgUrl() {
+			let result = "";
+			if (this.type === "ID_F") {
+				result = "https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/renxiangmian.png";
+			} else if (this.type === "ID_B") {
+				result = "https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/guohuimian.png";
+			} else if (this.type === "BANK") {
+				result = "https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/bank-label.png";
+			}
+			return result;
+		},
+	},
+	watch: {
+		uploadObj: {
+			handler(newVal, oldVal) {
+				let { type, visible } = this.loadingObj;
+				if (newVal.loadingType && newVal.loadingType !== type) {
+					type = newVal.loadingType;
+				}
+				if ((newVal.visible || newVal.visible === false) && newVal.visible !== visible) {
+					visible = newVal.visible;
+				}
+				// if (newVal.loading && newVal.loading !== loading) {
+				// 	loading = newVal.loading;
+				// }
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	created() {
+		if (this.uploadUrl) {
+			this.$set(this, "loadingObj", Object.assign(this.loadingObj, { type: "finish", loading: true }));
+			this.urlList.push(this.uploadUrl);
+		}
+		this.loadingObj.text = i18n.t("workorder.uploadfile.224534");
+	},
+	methods: {
+		// 删除上传的文件
+		deleteFile() {
+			const { loading, visible } = this.loadingObj;
+			// loading展示且不可见  表示上传成功
+			if (loading && !visible) {
+				this.$set(this.loadingObj, "loading", false);
+				this.$set(this.loadingObj, "type", "loading");
+				this.$refs.inputer.value = ""; // 清除inputer的value
+				this.$set(this, "urlList", []);
+				this.$emit("deleteFile", this.uploadObj.uploadIndex);
+			} else {
+				// 上传失败的删除事件
+				this.$set(this, "loadingObj", {
+					loading: false,
+					visible: false,
+					type: "loading",
+					text: "",
+				});
+				this.$refs.inputer.value = "";
+				this.$emit("deleteFile", this.uploadObj.uploadIndex);
+				this.$refs.inputer.click();
+			}
+		},
+		// 点击输入控件
+		clickWidget() {
+			this.$refs.inputer.click();
+		},
+		loadingClick() {
+			const { loading, visible } = this.loadingObj;
+			// loading展示且不可见  表示上传成功
+			if (loading && !visible && this.urlList?.length) {
+				// 展示图片预览
+				vant.ImagePreview({
+					images: this.urlList,
+					startPosition: 0,
+					closeable: true,
+				});
+			} else {
+				this.$set(this, "loadingObj", {
+					loading: false,
+					visible: false,
+					type: "loading",
+					text: "",
+				});
+				this.$refs.inputer.value = "";
+				this.$emit("deleteFile", this.uploadObj.uploadIndex);
+				this.$refs.inputer.click();
+			}
+		},
+		finish() {
+			const { getCropData, getCropBlob } = this.$refs.cropper;
+			getCropData((base64) => {
+				getCropBlob((file) => {
+					console.log(arguments);
+					this.uploadFile(file, "img", "assistant", base64);
+				});
+			});
+		},
+		cancel() {
+			this.copperDialogVisible = false;
+			this.urlList = [];
+		},
+		// 触发上传
+		upLoad() {
+			// const file = document.getElementById(this.uploadFileId).files;
+			const file = Array.from(document.getElementById(this.uploadFileId).files);
+
+			file.forEach( (item) => {
+				if (!this.deleteFlag) this.$loading(i18n.t("aqcomponents.offline.gl1k2s"));
+				this.upLoadFileObj(item);
+			});
+		},
+		upLoadFileObj(fileObj) {
+			// 拿到base64文件
+			// base64转成blob文件
+			const blobFile = this.$options.methods.dataURLtoBlob.bind(this)(fileObj);
+			const filename = fileObj.name;
+			if (fileObj.size === 0) return;
+			this.$set(this, "loadingObj", {
+				loading: false,
+				visible: true,
+				type: "loading",
+				text: i18n.t("workorder.uploadfile.224534"),
+			});
+			if (this.uploadObj.needLoading) {
+				this.$loading(i18n.t("aqcomponents.offline.gl1k2s"));
+			}
+			// this.$loading('处理中');
+			const isLt10M = fileObj.size / 1024 / 1024 < this.uploadObj.fileSize; // M
+			// mp4的话，限制300M
+			const isLt300M = fileObj.size / 1024 / 1024 / 30 < this.uploadObj.fileSize;
+			const HasFileType = fileObj.type ? fileObj.type.split("/")[0] : "";
+
+			blobToDataURL(fileObj).then((res) => {
+				// 如果图片不需要裁剪则直接提示不能超过多少
+				if (HasFileType === "video" && !isLt300M) {
+					this.$toast(i18n.t("componentsfile.uploadfile.0t6ddr", [this.uploadObj.fileSize * 30]));
+					this.loadingObj.visible = false;
+					return false;
+				} else if ((HasFileType === "image" || HasFileType === "application") && !isLt10M) {
+					// 如果图片需要裁剪
+					if (this.uploadObj["cropper"]) {
+						this.$loading(false);
+						this.copperDialogVisible = true;
+						this.option.img = res;
+						return;
+					}
+					this.$toast(i18n.t("componentsfile.uploadfile.0t6ddr", [this.uploadObj.fileSize]));
+					this.loadingObj.visible = false;
+					return false;
+				} else if (this.type === "Avatar") {
+					// 上传类型为 头像 时 需要进行裁剪
+					this.$loading(false);
+					this.copperDialogVisible = true;
+					this.option.img = res;
+					return;
+				}
+				// 将识别到的base64传给父组件回显
+				this.$emit("getImageDataUrl", { index: this.uploadObj.uploadIndex, base64: res });
+				// 开始上传
+				this.$loading(false);
+				this.uploadFile(blobFile, filename, "assistant", res, fileObj.type);
+			});
+		},
+		// 直接上传不裁剪
+		async uploadFile(file, filename, type, base64Img, fileType) {
+			// 港险环境就上传到亚马逊，其余上传到腾讯
+			const temp = filename.split(".");
+			const fileSffix = temp[temp.length - 1];
+			file.filename = filename;
+			try {
+				const param = {
+					file,
+					keyFunc: () => (typeof this.uploadObj.keyFunc === "function" ? `${this.uploadObj.keyFunc(filename)}.${fileSffix}` : this.uploadObj.keyFunc ? `${this.uploadObj.keyFunc}.${fileSffix}` : ""),
+					urlMaxLength: 12,
+				};
+				const fileUrl = await FHCommon.upload(param, (progress) => this.$emit("onProgress", progress));
+                console.log('20251216',param,fileUrl);
+                
+				this.handleUploadResult({ filename, url: fileUrl, base64Img, fileType });
+			} catch (err) {
+				this.$toast(typeof err === "string" ? err : i18n.t("applyprocess.examine.hdrtrf"), "error");
+				console.log(err);
+				if (err) {
+					this.$set(this, "loadingObj", {
+						loading: false,
+						visible: true,
+						type: "error",
+						text: i18n.t("aqcomponents.offline.u15l63"),
+					});
+					const result = {
+						uploadProgress: "error",
+					};
+					this.$emit("photoChanged", result);
+				}
+			}
+		},
+		handleUploadResult({ filename, url, base64Img, fileType }) {
+			this.fileArr = {
+				enclosureName: filename,
+				url,
+				id: this.uploadFileId,
+			};
+			this.copperDialogVisible = false;
+			this.$set(this, "loadingObj", {
+				loading: true,
+				visible: false,
+				type: "finish",
+				text: i18n.t("componentsfile.uploadfile.7b44sh"),
+			});
+			const { needOCR = false, uploadType, uploadIndex } = this.uploadObj;
+			// 只有needOCR和uploadType为1或3时才执行图片识别
+			if (needOCR && this.ocrAvailableList.includes(+uploadType)) {
+				this.imageRecognition(this.uploadObj.uploadType, base64Img);
+				return;
+			}
+			this.urlList = [decodeURIComponent(this.fileArr.url)];
+            console.log('20251216 this.urlList[0]',this.urlList[0]);
+            
+			this.$emit("photoChanged", { data: this.urlList[0], index: uploadIndex, base64Img, filename, fileType });
+		},
+		async imageRecognition(type, base64Img) {
+			this.$set(this, "loadingObj", {
+				loading: true,
+				visible: true,
+				type: "loading",
+				text: i18n.t("uploadfile.index.eo0cn6"),
+			});
+			const { uploadIndex, uploadType } = this.uploadObj;
+			const param = {
+				ocrtype: type, // 图片类型
+				// platformSaasId: appInfo.getPlatSaasId(),
+				cosPath: this.fileArr.url, // 图片地址
+			};
+            let res
+			try {
+				// 调用识别身份证接口
+				 res = await axios.post(`/funapi/config/ocr`, param);
+                console.log(res)
+                if(res.status === 'FAILED')throw new Error(res.message)
+				res = res.data || res;
+				if (this.uploadObj.isIconUpload) {
+					if (res.bankCard?.msg) {
+						// this.$toast(res.bankCard.msg);
+						this.urlList = [];
+						throw new Error(res.bankCard.msg);
+					}
+				}
+			} catch (err) {
+				this.$toast({ message: err.message, duration: 2000 });
+                return
+			}
+			let target = {};
+			if (type === "1") {
+				// 识别身份证 提取res中的数据
+				const { idCard } = res;
+				const { issueauthority, validperiod } = idCard;
+				const isNationalEmblemCover = !!issueauthority; // 国徽面
+				if (uploadIndex === 0 || (!uploadIndex && !isNationalEmblemCover)) {
+					// 删除非人像面的数据
+					delete idCard.issueauthority;
+					delete idCard.validperiod;
+					// 身份证人像面
+					target = idCard;
+				} else if (uploadIndex === 1 || (!uploadIndex && isNationalEmblemCover)) {
+					// 身份证国徽面
+					target = { issueauthority, validperiod };
+				}
+			} else if (type === "3") {
+				// 识别银行卡
+				const { bankCard } = res;
+				// delete bankCard.msg;
+				// delete bankCard.status;
+				// 银行卡
+				target = bankCard;
+			} else if (type === "4") {
+				// 识别户口本 提取res中的数据
+				target = res;
+			}
+			// 判断对象中是否有空属性
+			const isPerfect = isPerfectObj(target);
+			// 上传身份证不是完整的对象则中止执行
+			if ((!isPerfect && uploadType === "1") || (uploadType === "3" && res.bankCard.msg === i18n.t("componentsfile.uploadfile.h2m4ki"))) {
+				this.$loading(false);
+				const ocrMessage = this.getOcrMessage(uploadIndex, uploadType);
+				this.$toast({ message: ocrMessage, duration: 2000 });
+				this.$set(this, "loadingObj", {
+					loading: false,
+					visible: true,
+					type: "error",
+					text: i18n.t("aqcomponents.offline.u15l63"),
+				});
+				throw new Error();
+			}
+			const result = {
+				data: this.fileArr.url,
+				Card: target,
+				index: uploadIndex,
+				base64Img,
+			};
+			this.urlList = [decodeURIComponent(this.fileArr.url)];
+			this.$emit("photoChanged", result);
+			this.$set(this, "loadingObj", {
+				loading: true,
+				visible: false,
+				type: "finish",
+				text: i18n.t("componentsfile.uploadfile.7b44sh"),
+			});
+			this.copperDialogVisible = false;
+			if (this.uploadObj.needLoading) {
+				this.$loading(false);
+			}
+		},
+		getOcrMessage(index, type) {
+			let result = "";
+			// 如果是身份证
+			if (type === "1") {
+				result = index === 0 ? i18n.t("applyprocess.materials.5nk04d") : i18n.t("applyprocess.materials.2mi48o");
+			} else if (type === "3") {
+				result = i18n.t("aqcomponents.inputdata.w66u66");
+			}
+			return i18n.t("componentsfile.uploadfile.1uffo7", [result]);
+		},
+		// DataURL转Blob
+		dataURLtoBlob(fileObj) {
+			if (!fileObj) return;
+			return new Blob([fileObj], { type: fileObj.type });
+		},
+	},
+};
+</script>
+
+<style scoped lang="less">
+#UploadFile {
+	// width: max-content;
+	.fileBox {
+		display: inline-block;
+		width: 70px;
+		position: absolute;
+		overflow: hidden;
+		right: 0;
+	}
+
+	.file-ip {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.inputer {
+		left: 0;
+		top: 0;
+		// width: 0;
+		// height: 0;
+	}
+
+	.cropper-content,
+	.cropper-view-box img {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		left: 0;
+	}
+
+	.cropper {
+		width: 100%;
+		height: 100%;
+	}
+
+	.dialog-footer /deep/ .left {
+		position: absolute;
+		z-index: 30;
+		bottom: 0;
+		left: 0;
+	}
+
+	.dialog-footer /deep/ .right {
+		position: absolute;
+		z-index: 30;
+		bottom: 0;
+		right: 0;
+	}
+
+	.cou-top-panel {
+		position: fixed;
+		top: 0;
+		left: 0px;
+		height: 45px;
+		right: 0px;
+		z-index: 9;
+
+		.zindex {
+			z-index: 999;
+		}
+
+		.right {
+			display: block;
+			position: absolute;
+			right: 15px;
+			top: 13px;
+			display: block;
+		}
+	}
+
+	.c10 {
+		color: #178dff;
+	}
+
+	.bg13 {
+		background-color: rgba(0, 0, 0, 0.6);
+		z-index: 999;
+	}
+
+	.delete-btn {
+		position: absolute;
+		width: 18px;
+		height: 18px;
+		// width: calc(100% * 16 / 158);
+		// height: calc(100% * 16 / 99);
+		right: 0;
+		top: 0;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 0px 4px 0px 4px;
+		z-index: 3;
+
+		.delete-icon {
+			font-size: 14px;
+			line-height: 12px;
+			// width: calc(100% * 18 / 158);
+			// height: calc(100% * 18 / 99);
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			// position: absolute;
+			// right: 50%;
+			// bottom: 54%;
+			// transform: translate(50%, 50%);
+		}
+	}
+
+	.loading-content {
+		background-color: rgba(0, 0, 0, 0.7);
+	}
+
+	/*黑色*/
+	.mess-back {
+		position: absolute;
+		display: block;
+		top: 5px;
+		left: 5px;
+		width: 33px;
+		z-index: 11;
+		padding-left: 10px;
+		padding-top: 11px;
+		height: 30px;
+
+		.cont-wh {
+			width: 13px;
+			height: 13px;
+			border-top: 2px solid #fff;
+			border-left: 2px solid #fff;
+			-moz-transform: rotate(-45deg);
+			-webkit-transform: rotate(-45deg);
+			transform: rotate(-45deg);
+		}
+	}
+
+	/*返回*/
+	.camera-icon {
+		width: calc(100% * 32 / 158);
+		height: calc(100% * 32 / 99);
+		z-index: 0;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		.icon-xiangji {
+			width: calc(100% * 14 / 32);
+			height: calc(100% * 14 / 32);
+		}
+	}
+	.default-upload {
+		width: 158px;
+		height: 99px;
+	}
+	// 头像上传
+	.head-img {
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		border: 1px solid rgba(255, 255, 255, 0.4);
+		box-sizing: border-box;
+	}
+	.head-cont-img {
+		width: 80px;
+		height: 80px;
+	}
+}
+</style>