1 line
27 KiB
JSON
1 line
27 KiB
JSON
{"remainingRequest":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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=script&lang=js&","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\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"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":["import \"core-js/modules/es6.typed.uint8-array\";\nimport \"core-js/modules/es6.regexp.match\";\nimport \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/es7.array.includes\";\nimport \"core-js/modules/es6.string.includes\";\nimport \"core-js/modules/es6.number.constructor\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport { VueCropper } from \"vue-cropper\";\nexport default {\n components: {\n VueCropper: VueCropper\n },\n props: {\n folderName: {\n type: String,\n default: \"student\"\n },\n // 裁剪区域宽度\n clipWidth: {\n type: Number,\n default: 400\n },\n // 裁剪区域高度\n clipHeight: {\n type: Number,\n default: 600\n },\n // 限制图片上传大小\n size: {\n type: Number,\n default: 0.4\n },\n // 初始化 显示图片路劲\n value: {\n type: String,\n default: \"\"\n },\n // 固定比例裁剪\n fixedNumber: {\n type: Array,\n default: function _default() {\n return [2, 3];\n }\n }\n },\n watch: {\n value: function value(val) {\n // 不为空 切不相等 更新\n if (val) {\n this.viewUrl = val;\n } else {\n this.viewUrl = \"\";\n }\n }\n },\n data: function data() {\n return {\n IEVisible: false,\n previewVisible: false,\n //预览图\n uploadLoading: false,\n //正在上传\n viewUrl: null,\n //裁剪图url\n clipVisible: false,\n //显示裁剪区域\n option: {\n img: \"\",\n //裁剪图片的地址\n outputType: \"jpg\",\n //生成的图片格式\n outputSize: 1,\n //图片质量0-1\n autoCrop: true,\n //默认生成截图框\n // autoCropWidth: 200, //默认生成截图框宽度\n // autoCropHeight: 200, //默认生成截图框高度\n fixed: true,\n //固定截图\n // fixedNumber: [1, 1], //固定截图比例\n fixedBox: true //固定截图框大小 不允许改变\n\n },\n fileName: \"\",\n uploadInfo: \"\"\n };\n },\n created: function created() {\n this.IEVersion();\n },\n methods: {\n init: function init(fiveUrl) {\n this.viewUrl = fiveUrl;\n },\n // 选择图片\n chooseImg: function chooseImg(e) {\n var _this = this;\n\n var files = e.target.files;\n var file = e.target.files[0];\n\n if (!file.name.includes(\".jpg\")) {\n this.$message.warning(\"仅支持.jpg格式的图片\");\n return false;\n } // 默认限制20MB 以内的图片\n\n\n if (file.size > 1024 * 1024 * 20) {\n this.$message.warning(\"请上传小于20MB的图片\");\n return false;\n }\n\n var formFile = new FormData();\n formFile.append(\"file\", file); // staff 职工 student 学生\n\n formFile.append(\"folderName\", this.folderName);\n this.$http({\n url: window.SITE_CONFIG['apiURL'] + '/system/upload',\n method: \"post\",\n data: formFile\n }).then(function (_ref) {\n var res = _ref.data;\n\n if (res && res.code === 0) {\n _this.$message.success(\"原图上传成功\");\n\n sessionStorage.setItem(\"eightPic\", res.data.path); // 接下来原图处理成5寸门禁需要的\n\n _this.setOutputSize(file.size);\n\n _this.fileName = file.name;\n _this.option.img = _this.getObjectURL(file);\n _this.clipVisible = true;\n _this.viewUrl = null;\n _this.$refs.uploadInput.value = null;\n } else if (res.msg) {\n _this.$message.error(res.msg);\n\n _this.deleteUpload();\n }\n }).catch(function (err) {\n _this.deleteUpload();\n }).finally(function () {\n _this.uploadLoading = false;\n });\n },\n // 裁剪\n clipImg: function clipImg() {\n var _this2 = this;\n\n this.$refs.cropper.getCropData(function (data) {\n // do something\n // var len = this.calcBase64(data);\n _this2.viewUrl = data;\n _this2.clipVisible = false; // 上传图片\n\n _this2.uploadImg(data);\n });\n },\n // 左旋\n rotateLeft: function rotateLeft() {\n this.$refs.cropper.rotateLeft();\n },\n // 右旋\n rotateRight: function rotateRight() {\n this.$refs.cropper.rotateRight();\n },\n // 删除图片\n deleteUpload: function deleteUpload() {\n this.fileName = \"\";\n this.uploadInfo = \"\";\n this.$emit(\"input\", \"\");\n this.viewUrl = null;\n },\n //将base64转换为文件\n dataURLtoFile: function dataURLtoFile(dataurl, filename) {\n var arr = dataurl.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n\n return new File([u8arr], filename, {\n type: mime\n });\n },\n // 上传图片\n uploadImg: function uploadImg(data) {\n var _this3 = this;\n\n var fileObj = this.dataURLtoFile(data, \"five\" + new Date().getTime() + this.fileName);\n var formFile = new FormData();\n formFile.append(\"file\", fileObj); // staff 职工 student 学生\n\n formFile.append(\"folderName\", this.folderName);\n this.uploadLoading = true;\n this.uploadInfo = \"上传中\";\n this.$http({\n url: window.SITE_CONFIG['apiURL'] + '/system/upload',\n method: \"post\",\n data: formFile\n }).then(function (_ref2) {\n var res = _ref2.data;\n\n if (res && res.code === 0) {\n _this3.$message.success(\"上传成功\");\n\n _this3.$emit(\"input\", res.data.path);\n } else if (res.msg) {\n _this3.$message.error(res.msg);\n\n _this3.deleteUpload();\n }\n }).catch(function (err) {\n _this3.deleteUpload();\n }).finally(function () {\n _this3.uploadLoading = false;\n });\n },\n // 取消上传\n cancelClip: function cancelClip() {\n this.clipVisible = false;\n },\n //计算base64 文件大小\n calcBase64: function calcBase64(baseStr) {\n var tag = \"base64,\";\n baseStr = baseStr.substring(baseStr.indexOf(tag) + tag.length);\n var eqTagIndex = baseStr.indexOf(\"=\");\n baseStr = eqTagIndex != -1 ? baseStr.substring(0, eqTagIndex) : baseStr;\n var strLen = baseStr.length;\n var fileSize = strLen - strLen / 8 * 2;\n return fileSize / 1024 / 1024;\n },\n // 获取本地图片上传路径\n getObjectURL: function getObjectURL(file) {\n var url = null;\n\n if (window.createObjectURL != undefined) {\n // basic\n url = window.createObjectURL(file);\n } else if (window.URL != undefined) {\n // mozilla(firefox)\n url = window.URL.createObjectURL(file);\n } else if (window.webkitURL != undefined) {\n // webkit or chrome\n url = window.webkitURL.createObjectURL(file);\n }\n\n return url;\n },\n // 设置图片质量 压缩比\n setOutputSize: function setOutputSize(size) {\n var result = 1;\n\n if (size / 1024 / 1024 > this.size) {\n result = (this.size * 1024 * 1024 / size).toFixed(2);\n }\n\n console.log(\"当前压缩率：\", result);\n this.option.outputSize = Number(result);\n },\n IEVersion: function IEVersion() {\n // 取得浏览器的userAgent字符串\n var userAgent = navigator.userAgent; // 判断是否为小于IE11的浏览器\n\n var isLessIE11 = userAgent.indexOf(\"compatible\") > -1 && userAgent.indexOf(\"MSIE\") > -1;\n\n if (isLessIE11) {\n this.IEVisible = true;\n }\n }\n }\n};",{"version":3,"sources":["img-clip.vue"],"names":[],"mappings":"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","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"],"sourceRoot":"src/components/public"}]} |