{"remainingRequest":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\components\\public\\img-clip.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\components\\public\\img-clip.vue","mtime":1614735254000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\sass-loader\\lib\\loader.js","mtime":1533139052000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.clip-upload {\n\t.error-tips {\n\t\tcolor: #ea0029;\n\t}\n\n\timg {\n\t\tmax-width: 100%;\n\t\tdisplay: block;\n\t\tmargin: 0 auto;\n\t}\n\n\t.tips {\n\t\tcolor: #b4b4b4;\n\t}\n\n\t.upload-btn {\n\t\tposition: relative;\n\t\tfont-size: 22px;\n\t\tcolor: #fff;\n\t\theight: 150px;\n\t\twidth: 106px;\n\t\tline-height: 150px;\n\t\ttext-align: center;\n\t\tborder: dashed 1px #fff;\n\t\tbackground: transparent;\n\t\tmargin-left: 20px;\n\n\t\t.el-icon-plus {\n\t\t\tvertical-align: middle;\n\t\t\tmargin-top: -24px;\n\t\t}\n\n\t\t.upload-input {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\topacity: 0;\n\t\t\twidth: 110px;\n\t\t}\n\t}\n\n\t.upload-preview {\n\t\tposition: relative;\n\t\tcolor: #fff;\n\t\theight: 150px;\n\t\twidth: 106px;\n\t\tline-height: 150px;\n\t\ttext-align: center;\n\t\tborder: dashed 1px #fff;\n\t\tbackground: transparent;\n\t\toverflow: hidden;\n\t\tborder-radius: 4px;\n\t\tmargin-left: 20px;\n\n\t\t&:hover {\n\t\t\tp {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\n\t\timg {\n\t\t\twidth: 106px;\n\t\t\theight: 150px;\n\t\t\tobject-fit: contain;\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t}\n\n\t\tp {\n\t\t\tdisplay: none;\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\tbackground: rgba(20, 20, 20, 0.3);\n\t\t\ttext-align: center;\n\t\t\tfont-size: 20px;\n\t\t\tcolor: #fff;\n\t\t\tline-height: 120px;\n\n\t\t\ti {\n\t\t\t\tmargin: 0 5px;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t.upload-info {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\ttext-align: center;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 30px;\n\t\t\tz-index: 10;\n\t\t\tcolor: #fff;\n\t\t\tbackground: rgba(20, 20, 20, 0.3);\n\t\t}\n\t}\n\n\t.vue-cropper-content {\n\t\twidth: 800px;\n\t\theight: 800px;\n\t\tmargin-bottom: 20px;\n\t}\n\n\t.alt-button {\n\t\ttext-align: center;\n\n\t\t.el-button {\n\t\t\twidth: auto;\n\n\t\t\t&.el-button--text {\n\t\t\t\tfont-size: 24px;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0 15px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.clip-dialog {\n\t.el-dialog__body {\n\t\tpadding-top: 0;\n\t}\n}\n",{"version":3,"sources":["img-clip.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmSA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"img-clip.vue","sourceRoot":"src/components/public","sourcesContent":["<template>\n\t<div class=\"clip-upload\" v-if=\"!IEVisible\">\n\t\t<!-- 上传按钮 -->\n\t\t<el-button v-show=\"!viewUrl\" class=\"upload-btn\" icon=\"el-icon-plus\">\n\t\t\t<input ref=\"uploadInput\" @change=\"chooseImg($event)\" class=\"upload-input\" type=\"file\" accept=\"image/jpg\" />\n\t\t</el-button>\n\n\t\t<!-- <span v-show=\"!viewUrl\" class=\"tips\">格式为jpg/jpeg/png文件，尺寸必须大于{{clipWidth}}px*{{clipHeight}}px，且不超过{{size}}MB</span> -->\n\t\t<!-- 裁剪后 预览显示框 -->\n\t\t<div v-show=\"viewUrl\" class=\"upload-preview\" v-loading=\"uploadLoading\">\n\t\t\t<img v-if=\"viewUrl\" :src=\"$ImgServerUrl+viewUrl\" alt=\"预览地址\" />\n\t\t\t<p>\n\t\t\t\t<i class=\"el-icon-delete\" @click=\"deleteUpload\"></i>\n\t\t\t</p>\n\t\t</div>\n\n\t\t<!-- 裁剪框 -->\n\t\t<el-dialog class=\"clip-dialog\" title=\"图片裁剪\" :visible.sync=\"clipVisible\" width=\"644px\" :modal=\"false\" :show-close=\"false\">\n\t\t\t<div class=\"vue-cropper-content\" :style=\"{width:'600px',height:'400px'}\">\n\t\t\t\t<div class=\"alt-button\">\n\t\t\t\t\t<el-button type=\"text\" icon=\"el-icon-refresh-left\" @click=\"rotateLeft\"></el-button>\n\t\t\t\t\t<el-button type=\"text\" icon=\"el-icon-refresh-right\" @click=\"rotateRight\"></el-button>\n\t\t\t\t</div>\n\t\t\t\t<vueCropper ref=\"cropper\" :img=\"option.img\" :autoCrop=\"option.autoCrop\" :autoCropWidth=\"clipWidth\" :autoCropHeight=\"clipHeight\"\n\t\t\t\t :outputSize=\"option.outputSize\" outputType=\"jpeg\" :fixed=\"option.fixed\" :fixedNumber=\"fixedNumber\"\n\t\t\t\t :fixedBox=\"option.fixedBox\"></vueCropper>\n\t\t\t</div>\n\t\t\t<div class=\"alt-button\">\n\t\t\t\t<br>\n\t\t\t\t<el-button @click=\"cancelClip\">取消</el-button>\n\t\t\t\t<el-button type=\"primary\" @click=\"clipImg\">确认</el-button>\n\t\t\t</div>\n\t\t</el-dialog>\n\t</div>\n\t<div v-else class=\"clip-upload\">\n\t\t<span class=\"error-tips\">检测到当前浏览器版本较低</span><br>\n\t\t请使用<span class=\"error-tips\">360浏览器极速模式</span>或使用<span class=\"error-tips\">chrome</span>浏览器等其它高级浏览器\n\t</div>\n</template>\n<script>\n\timport {\n\t\tVueCropper\n\t} from \"vue-cropper\";\n\n\texport default {\n\t\tcomponents: {\n\t\t\tVueCropper\n\t\t},\n\t\tprops: {\n\t\t\tfolderName: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: \"student\"\n\t\t\t},\n\t\t\t// 裁剪区域宽度\n\t\t\tclipWidth: {\n\t\t\t\ttype: Number,\n\t\t\t\tdefault: 400\n\t\t\t},\n\t\t\t// 裁剪区域高度\n\t\t\tclipHeight: {\n\t\t\t\ttype: Number,\n\t\t\t\tdefault: 600\n\t\t\t},\n\t\t\t// 限制图片上传大小\n\t\t\tsize: {\n\t\t\t\ttype: Number,\n\t\t\t\tdefault: 0.4\n\t\t\t},\n\t\t\t// 初始化  显示图片路劲\n\t\t\tvalue: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: \"\"\n\t\t\t},\n\t\t\t// 固定比例裁剪\n\t\t\tfixedNumber: {\n\t\t\t\ttype: Array,\n\t\t\t\tdefault: () => [2, 3]\n\t\t\t}\n\t\t},\n\t\twatch: {\n\t\t\tvalue(val) {\n\t\t\t\t// 不为空  切不相等  更新\n\t\t\t\tif (val) {\n\t\t\t\t\tthis.viewUrl = val;\n\t\t\t\t} else {\n\t\t\t\t\tthis.viewUrl = \"\";\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tIEVisible: false,\n\t\t\t\tpreviewVisible: false, //预览图\n\t\t\t\tuploadLoading: false, //正在上传\n\t\t\t\tviewUrl: null, //裁剪图url\n\t\t\t\tclipVisible: false, //显示裁剪区域\n\t\t\t\toption: {\n\t\t\t\t\timg: \"\", //裁剪图片的地址\n\t\t\t\t\toutputType: \"jpg\", //生成的图片格式\n\t\t\t\t\toutputSize: 1, //图片质量0-1\n\t\t\t\t\tautoCrop: true, //默认生成截图框\n\t\t\t\t\t// autoCropWidth: 200, //默认生成截图框宽度\n\t\t\t\t\t// autoCropHeight: 200, //默认生成截图框高度\n\t\t\t\t\tfixed: true, //固定截图\n\t\t\t\t\t// fixedNumber: [1, 1], //固定截图比例\n\t\t\t\t\tfixedBox: true //固定截图框大小 不允许改变\n\t\t\t\t},\n\t\t\t\tfileName: \"\",\n\t\t\t\tuploadInfo: \"\"\n\t\t\t};\n\t\t},\n\t\tcreated() {\n\t\t\tthis.IEVersion();\n\t\t},\n\t\tmethods: {\n\t\t\tinit(fiveUrl) {\n\t\t\t\tthis.viewUrl = fiveUrl\n\t\t\t},\n\t\t\t// 选择图片\n\t\t\tchooseImg(e) {\n\t\t\t\tconst files = e.target.files;\n\t\t\t\tconst file = e.target.files[0];\n\n\t\t\t\tif (!file.name.includes(\".jpg\")) {\n\t\t\t\t\tthis.$message.warning(\"仅支持.jpg格式的图片\");\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\t// 默认限制20MB 以内的图片\n\t\t\t\tif (file.size > 1024 * 1024 * 20) {\n\t\t\t\t\tthis.$message.warning(\"请上传小于20MB的图片\");\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tlet formFile = new FormData();\n\t\t\t\tformFile.append(\"file\", file);\n\t\t\t\t// staff  职工    student 学生\n\t\t\t\tformFile.append(\"folderName\", this.folderName);\n\n\t\t\t\tthis.$http({\n\t\t\t\t\t\turl: window.SITE_CONFIG['apiURL'] + '/system/upload',\n\t\t\t\t\t\tmethod: \"post\",\n\t\t\t\t\t\tdata: formFile\n\t\t\t\t\t})\n\t\t\t\t\t.then(({\n\t\t\t\t\t\tdata: res\n\t\t\t\t\t}) => {\n\t\t\t\t\t\tif (res && res.code === 0) {\n\t\t\t\t\t\t\tthis.$message.success(\"原图上传成功\");\n\t\t\t\t\t\t\tsessionStorage.setItem(\"eightPic\", res.data.path)\n\t\t\t\t\t\t\t// 接下来原图处理成5寸门禁需要的\n\t\t\t\t\t\t\tthis.setOutputSize(file.size);\n\t\t\t\t\t\t\tthis.fileName = file.name;\n\t\t\t\t\t\t\tthis.option.img = this.getObjectURL(file);\n\t\t\t\t\t\t\tthis.clipVisible = true;\n\t\t\t\t\t\t\tthis.viewUrl = null;\n\t\t\t\t\t\t\tthis.$refs.uploadInput.value = null;\n\t\t\t\t\t\t} else if (res.msg) {\n\t\t\t\t\t\t\tthis.$message.error(res.msg);\n\t\t\t\t\t\t\tthis.deleteUpload();\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => {\n\t\t\t\t\t\tthis.deleteUpload();\n\t\t\t\t\t})\n\t\t\t\t\t.finally(() => {\n\t\t\t\t\t\tthis.uploadLoading = false;\n\t\t\t\t\t});\n\t\t\t},\n\t\t\t// 裁剪\n\t\t\tclipImg() {\n\t\t\t\tthis.$refs.cropper.getCropData(data => {\n\t\t\t\t\t// do something\n\t\t\t\t\t// var len = this.calcBase64(data);\n\t\t\t\t\tthis.viewUrl = data;\n\t\t\t\t\tthis.clipVisible = false;\n\t\t\t\t\t// 上传图片\n\t\t\t\t\tthis.uploadImg(data);\n\t\t\t\t});\n\t\t\t},\n\t\t\t// 左旋\n\t\t\trotateLeft() {\n\t\t\t\tthis.$refs.cropper.rotateLeft();\n\t\t\t},\n\t\t\t// 右旋\n\t\t\trotateRight() {\n\t\t\t\tthis.$refs.cropper.rotateRight();\n\t\t\t},\n\t\t\t// 删除图片\n\t\t\tdeleteUpload() {\n\t\t\t\tthis.fileName = \"\";\n\t\t\t\tthis.uploadInfo = \"\";\n\t\t\t\tthis.$emit(\"input\", \"\");\n\t\t\t\tthis.viewUrl = null;\n\t\t\t},\n\t\t\t//将base64转换为文件\n\t\t\tdataURLtoFile(dataurl, filename) {\n\t\t\t\tvar arr = dataurl.split(\",\"),\n\t\t\t\t\tmime = arr[0].match(/:(.*?);/)[1],\n\t\t\t\t\tbstr = atob(arr[1]),\n\t\t\t\t\tn = bstr.length,\n\t\t\t\t\tu8arr = new Uint8Array(n);\n\t\t\t\twhile (n--) {\n\t\t\t\t\tu8arr[n] = bstr.charCodeAt(n);\n\t\t\t\t}\n\t\t\t\treturn new File([u8arr], filename, {\n\t\t\t\t\ttype: mime\n\t\t\t\t});\n\t\t\t},\n\t\t\t// 上传图片\n\t\t\tuploadImg(data) {\n\t\t\t\tvar fileObj = this.dataURLtoFile(data, \"five\" + new Date().getTime() + this.fileName);\n\t\t\t\tvar formFile = new FormData();\n\t\t\t\tformFile.append(\"file\", fileObj);\n\t\t\t\t// staff  职工    student 学生\n\t\t\t\tformFile.append(\"folderName\", this.folderName);\n\t\t\t\tthis.uploadLoading = true;\n\t\t\t\tthis.uploadInfo = \"上传中\";\n\t\t\t\tthis.$http({\n\t\t\t\t\t\turl: window.SITE_CONFIG['apiURL'] + '/system/upload',\n\t\t\t\t\t\tmethod: \"post\",\n\t\t\t\t\t\tdata: formFile\n\t\t\t\t\t})\n\t\t\t\t\t.then(({\n\t\t\t\t\t\tdata: res\n\t\t\t\t\t}) => {\n\t\t\t\t\t\tif (res && res.code === 0) {\n\t\t\t\t\t\t\tthis.$message.success(\"上传成功\");\n\t\t\t\t\t\t\tthis.$emit(\"input\", res.data.path);\n\t\t\t\t\t\t} else if (res.msg) {\n\t\t\t\t\t\t\tthis.$message.error(res.msg);\n\t\t\t\t\t\t\tthis.deleteUpload();\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => {\n\t\t\t\t\t\tthis.deleteUpload();\n\t\t\t\t\t})\n\t\t\t\t\t.finally(() => {\n\t\t\t\t\t\tthis.uploadLoading = false;\n\t\t\t\t\t});\n\t\t\t},\n\t\t\t// 取消上传\n\t\t\tcancelClip() {\n\t\t\t\tthis.clipVisible = false;\n\t\t\t},\n\t\t\t//计算base64   文件大小\n\t\t\tcalcBase64(baseStr) {\n\t\t\t\tlet tag = \"base64,\";\n\t\t\t\tbaseStr = baseStr.substring(baseStr.indexOf(tag) + tag.length);\n\t\t\t\tlet eqTagIndex = baseStr.indexOf(\"=\");\n\t\t\t\tbaseStr = eqTagIndex != -1 ? baseStr.substring(0, eqTagIndex) : baseStr;\n\t\t\t\tlet strLen = baseStr.length;\n\t\t\t\tlet fileSize = strLen - (strLen / 8) * 2;\n\t\t\t\treturn fileSize / 1024 / 1024;\n\t\t\t},\n\t\t\t// 获取本地图片上传路径\n\t\t\tgetObjectURL(file) {\n\t\t\t\tvar url = null;\n\t\t\t\tif (window.createObjectURL != undefined) {\n\t\t\t\t\t// basic\n\t\t\t\t\turl = window.createObjectURL(file);\n\t\t\t\t} else if (window.URL != undefined) {\n\t\t\t\t\t// mozilla(firefox)\n\t\t\t\t\turl = window.URL.createObjectURL(file);\n\t\t\t\t} else if (window.webkitURL != undefined) {\n\t\t\t\t\t// webkit or chrome\n\t\t\t\t\turl = window.webkitURL.createObjectURL(file);\n\t\t\t\t}\n\t\t\t\treturn url;\n\t\t\t},\n\t\t\t// 设置图片质量  压缩比\n\t\t\tsetOutputSize(size) {\n\t\t\t\tlet result = 1;\n\t\t\t\tif (size / 1024 / 1024 > this.size) {\n\t\t\t\t\tresult = ((this.size * 1024 * 1024) / size).toFixed(2);\n\t\t\t\t}\n\t\t\t\tconsole.log(\"当前压缩率：\", result);\n\t\t\t\tthis.option.outputSize = Number(result);\n\t\t\t},\n\t\t\tIEVersion() {\n\t\t\t\t// 取得浏览器的userAgent字符串\n\t\t\t\tvar userAgent = navigator.userAgent;\n\t\t\t\t// 判断是否为小于IE11的浏览器\n\t\t\t\tvar isLessIE11 = userAgent.indexOf(\"compatible\") > -1 && userAgent.indexOf(\"MSIE\") > -1;\n\t\t\t\tif (isLessIE11) {\n\t\t\t\t\tthis.IEVisible = true;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n</script>\n<style lang=\"scss\">\n\t.clip-upload {\n\t\t.error-tips {\n\t\t\tcolor: #ea0029;\n\t\t}\n\n\t\timg {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t}\n\n\t\t.tips {\n\t\t\tcolor: #b4b4b4;\n\t\t}\n\n\t\t.upload-btn {\n\t\t\tposition: relative;\n\t\t\tfont-size: 22px;\n\t\t\tcolor: #fff;\n\t\t\theight: 150px;\n\t\t\twidth: 106px;\n\t\t\tline-height: 150px;\n\t\t\ttext-align: center;\n\t\t\tborder: dashed 1px #fff;\n\t\t\tbackground: transparent;\n\t\t\tmargin-left: 20px;\n\n\t\t\t.el-icon-plus {\n\t\t\t\tvertical-align: middle;\n\t\t\t\tmargin-top: -24px;\n\t\t\t}\n\n\t\t\t.upload-input {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\topacity: 0;\n\t\t\t\twidth: 110px;\n\t\t\t}\n\t\t}\n\n\t\t.upload-preview {\n\t\t\tposition: relative;\n\t\t\tcolor: #fff;\n\t\t\theight: 150px;\n\t\t\twidth: 106px;\n\t\t\tline-height: 150px;\n\t\t\ttext-align: center;\n\t\t\tborder: dashed 1px #fff;\n\t\t\tbackground: transparent;\n\t\t\toverflow: hidden;\n\t\t\tborder-radius: 4px;\n\t\t\tmargin-left: 20px;\n\n\t\t\t&:hover {\n\t\t\t\tp {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\timg {\n\t\t\t\twidth: 106px;\n\t\t\t\theight: 150px;\n\t\t\t\tobject-fit: contain;\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin: 0 auto;\n\t\t\t}\n\n\t\t\tp {\n\t\t\t\tdisplay: none;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\tbackground: rgba(20, 20, 20, 0.3);\n\t\t\t\ttext-align: center;\n\t\t\t\tfont-size: 20px;\n\t\t\t\tcolor: #fff;\n\t\t\t\tline-height: 120px;\n\n\t\t\t\ti {\n\t\t\t\t\tmargin: 0 5px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.upload-info {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\ttext-align: center;\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 30px;\n\t\t\t\tz-index: 10;\n\t\t\t\tcolor: #fff;\n\t\t\t\tbackground: rgba(20, 20, 20, 0.3);\n\t\t\t}\n\t\t}\n\n\t\t.vue-cropper-content {\n\t\t\twidth: 800px;\n\t\t\theight: 800px;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\t.alt-button {\n\t\t\ttext-align: center;\n\n\t\t\t.el-button {\n\t\t\t\twidth: auto;\n\n\t\t\t\t&.el-button--text {\n\t\t\t\t\tfont-size: 24px;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tmargin: 0 15px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.clip-dialog {\n\t\t.el-dialog__body {\n\t\t\tpadding-top: 0;\n\t\t}\n\t}\n</style>\n"]}]}