| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue","mtime":1761185179957},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQppbXBvcnQgeyBWdWVDcm9wcGVyIH0gZnJvbSAndnVlLWNyb3BwZXInOw0KLy8gaW1wb3J0IHsgdXBkYXRlQXZhdGFyIH0gZnJvbSAnJzsgLy/ov5nph4zkuLrmlofku7bkuIrkvKDnmoTmjqXlj6PmjaLmiJDoh6rlt7HnmoTmlofku7YNCmltcG9ydCB7IGZpbGVVcGxvYWQgfSBmcm9tICdAL2FwaS9zZXR0aW5nJzsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0Nyb3BwZXJJbWFnZScsDQogIGNvbXBvbmVudHM6IHsNCiAgICBWdWVDcm9wcGVyLA0KICB9LA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBuYW1lOiAnJywNCiAgICAgIHJlc0ltZzogJycsDQogICAgICBwcmV2aWV3czoge30sDQogICAgICBvcHRpb246IHsNCiAgICAgICAgaW1nOiAnJywgLy/oo4Hliarlm77niYfnmoTlnLDlnYANCiAgICAgICAgb3V0cHV0U2l6ZTogMSwgLy/oo4HliarnlJ/miJDlm77niYfnmoTotKjph48o5Y+v6YCJMC4xIC0gMSkNCiAgICAgICAgb3V0cHV0VHlwZTogJ3BuZycsIC8v6KOB5Ymq55Sf5oiQ5Zu+54mH55qE5qC85byP77yIanBlZyB8fCBwbmcgfHwgd2VicO+8iQ0KICAgICAgICBpbmZvOiB0cnVlLCAvL+WbvueJh+Wkp+Wwj+S/oeaBrw0KICAgICAgICBjYW5TY2FsZTogdHJ1ZSwgLy/lm77niYfmmK/lkKblhYHorrjmu5rova7nvKnmlL4NCiAgICAgICAgYXV0b0Nyb3A6IHRydWUsIC8v5piv5ZCm6buY6K6k55Sf5oiQ5oiq5Zu+5qGGDQogICAgICAgIGF1dG9Dcm9wV2lkdGg6IDIwMCwgLy/pu5jorqTnlJ/miJDmiKrlm77moYblrr3luqYNCiAgICAgICAgYXV0b0Nyb3BIZWlnaHQ6IDIwMCwgLy/pu5jorqTnlJ/miJDmiKrlm77moYbpq5jluqYNCiAgICAgICAgZml4ZWQ6IHRydWUsIC8v5piv5ZCm5byA5ZCv5oiq5Zu+5qGG5a696auY5Zu65a6a5q+U5L6LDQogICAgICAgIGZpeGVkTnVtYmVyOiBbMSwgMV0sIC8v5oiq5Zu+5qGG55qE5a696auY5q+U5L6LDQogICAgICAgIGZ1bGw6IGZhbHNlLCAvL2ZhbHNl5oyJ5Y6f5q+U5L6L6KOB5YiH5Zu+54mH77yM5LiN5aSx55yfDQogICAgICAgIGZpeGVkQm94OiBmYWxzZSwgLy/lm7rlrprmiKrlm77moYblpKflsI/vvIzkuI3lhYHorrjmlLnlj5gNCiAgICAgICAgY2FuTW92ZTogdHJ1ZSwgLy/kuIrkvKDlm77niYfmmK/lkKblj6/ku6Xnp7vliqgNCiAgICAgICAgY2FuTW92ZUJveDogdHJ1ZSwgLy/miKrlm77moYbog73lkKbmi5bliqgNCiAgICAgICAgb3JpZ2luYWw6IGZhbHNlLCAvL+S4iuS8oOWbvueJh+aMieeFp+WOn+Wni+avlOS+i+a4suafkw0KICAgICAgICBjZW50ZXJCb3g6IHRydWUsIC8v5oiq5Zu+5qGG5piv5ZCm6KKr6ZmQ5Yi25Zyo5Zu+54mH6YeM6Z2iDQogICAgICAgIGhlaWdodDogZmFsc2UsIC8v5piv5ZCm5oyJ54Wn6K6+5aSH55qEZHByIOi+k+WHuuetieavlOS+i+WbvueJhw0KICAgICAgICBpbmZvVHJ1ZTogZmFsc2UsIC8vdHJ1ZeS4uuWxleekuuecn+Wunui+k+WHuuWbvueJh+WuvemrmO+8jGZhbHNl5bGV56S655yL5Yiw55qE5oiq5Zu+5qGG5a696auYDQogICAgICAgIG1heEltZ1NpemU6IDMwMDAsIC8v6ZmQ5Yi25Zu+54mH5pyA5aSn5a695bqm5ZKM6auY5bqmDQogICAgICAgIGVubGFyZ2U6IDEsIC8v5Zu+54mH5qC55o2u5oiq5Zu+5qGG6L6T5Ye65q+U5L6L5YCN5pWwDQogICAgICAgIG1vZGU6ICczMDBweCAzMDBweCcsIC8v5Zu+54mH6buY6K6k5riy5p+T5pa55byPDQogICAgICB9LA0KICAgIH07DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICAvL+WIneWni+WMluWHveaVsA0KICAgIGltZ0xvYWQobXNnKSB7DQogICAgICBjb25zb2xlLmxvZygn5bel5YW35Yid5aeL5YyW5Ye95pWwPT09PT0nICsgbXNnKTsNCiAgICB9LA0KICAgIC8v5Zu+54mH57yp5pS+DQogICAgY2hhbmdlU2NhbGUobnVtKSB7DQogICAgICBudW0gPSBudW0gfHwgMTsNCiAgICAgIHRoaXMuJHJlZnMuY3JvcHBlci5jaGFuZ2VTY2FsZShudW0pOw0KICAgIH0sDQogICAgLy/lkJHlt6bml4vovawNCiAgICByb3RhdGVMZWZ0KCkgew0KICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJvdGF0ZUxlZnQoKTsNCiAgICB9LA0KICAgIC8v5ZCR5Y+z5peL6L2sDQogICAgcm90YXRlUmlnaHQoKSB7DQogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIucm90YXRlUmlnaHQoKTsNCiAgICB9LA0KICAgIC8vIC8v5a6e5pe26aKE6KeI5Ye95pWwDQogICAgcmVhbFRpbWUoZGF0YSkgew0KICAgICAgbGV0IHRoYXQgPSB0aGlzOw0KICAgICAgdGhhdC5wcmV2aWV3cyA9IGRhdGE7DQogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIuZ2V0Q3JvcEJsb2IoKGRhdGEpID0+IHsNCiAgICAgICAgdGhpcy5ibG9iVG9EYXRhVVJJKGRhdGEsIGZ1bmN0aW9uIChyZXMpIHsNCiAgICAgICAgICB0aGF0LnByZXZpZXdJbWcgPSByZXM7DQogICAgICAgIH0pOw0KICAgICAgfSk7DQogICAgfSwNCiAgICBibG9iVG9EYXRhVVJJKGJsb2IsIGNhbGxiYWNrKSB7DQogICAgICB2YXIgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTsNCiAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGJsb2IpOw0KICAgICAgcmVhZGVyLm9ubG9hZCA9IGZ1bmN0aW9uIChlKSB7DQogICAgICAgIGNhbGxiYWNrKGUudGFyZ2V0LnJlc3VsdCk7DQogICAgICB9Ow0KICAgIH0sDQogICAgLy/pgInmi6nlm77niYcNCiAgICBzZWxlY3RJbWcoZSkgew0KICAgICAgbGV0IGZpbGUgPSBlLnRhcmdldC5maWxlc1swXTsNCiAgICAgIGlmICghL1wuKGpwZ3xqcGVnfHBuZ3xKUEd8UE5HKSQvLnRlc3QoZS50YXJnZXQudmFsdWUpKSB7DQogICAgICAgIHRoaXMuJG1lc3NhZ2Uoew0KICAgICAgICAgIG1lc3NhZ2U6ICflm77niYfnsbvlnovopoHmsYLvvJpqcGVn44CBanBn44CBcG5nJywNCiAgICAgICAgICB0eXBlOiAnZXJyb3InLA0KICAgICAgICB9KTsNCiAgICAgICAgcmV0dXJuIGZhbHNlOw0KICAgICAgfQ0KICAgICAgLy/ovazljJbkuLpibG9iDQogICAgICBsZXQgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTsNCiAgICAgIHJlYWRlci5vbmxvYWQgPSAoZSkgPT4gew0KICAgICAgICBsZXQgZGF0YTsNCiAgICAgICAgaWYgKHR5cGVvZiBlLnRhcmdldC5yZXN1bHQgPT09ICdvYmplY3QnKSB7DQogICAgICAgICAgZGF0YSA9IHdpbmRvdy5VUkwuY3JlYXRlT2JqZWN0VVJMKG5ldyBCbG9iKFtlLnRhcmdldC5yZXN1bHRdKSk7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgZGF0YSA9IGUudGFyZ2V0LnJlc3VsdDsNCiAgICAgICAgfQ0KICAgICAgICB0aGlzLm9wdGlvbi5pbWcgPSBkYXRhOw0KICAgICAgfTsNCiAgICAgIC8v6L2s5YyW5Li6YmFzZTY0DQogICAgICByZWFkZXIucmVhZEFzRGF0YVVSTChmaWxlKTsNCiAgICB9LA0KDQogICAgYmFzZTY0SW1ndG9GaWxlKGRhdGF1cmwsIGZpbGVuYW1lID0gJ2ZpbGUnKSB7DQogICAgICAvL+WwhmJhc2U2NOagvOW8j+WIhuWJsu+8mlsnZGF0YTppbWFnZS9wbmc7YmFzZTY0JywnWFhYWCddDQogICAgICBjb25zdCBhcnIgPSBkYXRhdXJsLnNwbGl0KCcsJyk7DQogICAgICAvLyAuKu+8nyDooajnpLrljLnphY3ku7vmhI/lrZfnrKbliLDkuIvkuIDkuKrnrKblkIjmnaHku7bnmoTlrZfnrKYg5Yia5aW95Yy56YWN5Yiw77yaDQogICAgICAvLyBpbWFnZS9wbmcNCiAgICAgIGNvbnN0IG1pbWUgPSBhcnJbMF0ubWF0Y2goLzooLio/KTsvKVsxXTsgLy9pbWFnZS9wbmcNCiAgICAgIC8vW2ltYWdlLHBuZ10g6I635Y+W5Zu+54mH57G75Z6L5ZCO57yADQogICAgICBjb25zdCBzdWZmaXggPSBtaW1lLnNwbGl0KCcvJylbMV07IC8vcG5nDQogICAgICBjb25zdCBic3RyID0gYXRvYihhcnJbMV0pOyAvL2F0b2IoKSDmlrnms5XnlKjkuo7op6PnoIHkvb/nlKggYmFzZS02NCDnvJbnoIHnmoTlrZfnrKbkuLINCiAgICAgIGxldCBuID0gYnN0ci5sZW5ndGg7DQogICAgICBjb25zdCB1OGFyciA9IG5ldyBVaW50OEFycmF5KG4pOw0KICAgICAgd2hpbGUgKG4tLSkgew0KICAgICAgICB1OGFycltuXSA9IGJzdHIuY2hhckNvZGVBdChuKTsNCiAgICAgIH0NCiAgICAgIHJldHVybiBuZXcgRmlsZShbdThhcnJdLCBgJHtmaWxlbmFtZX0uJHtzdWZmaXh9YCwgew0KICAgICAgICB0eXBlOiBtaW1lLA0KICAgICAgfSk7DQogICAgfSwNCg0KICAgIHVwbG9hZEZpbGUoZmlsZSkgew0KICAgICAgY29uc3QgZm9ybURhdGEgPSBuZXcgRm9ybURhdGEoKTsNCiAgICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZScsIGZpbGUpOw0KICAgICAgZmlsZVVwbG9hZChmb3JtRGF0YSkudGhlbigocmVzKSA9PiB7DQogICAgICAgIGlmIChyZXMuc3RhdHVzID09IDIwMCkgew0KICAgICAgICAgIHRoaXMuJGVtaXQoJ3VwbG9hZEltZ1N1Y2Nlc3MnLCByZXMuZGF0YSk7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgdGhpcy4kbWVzc2FnZSh7DQogICAgICAgICAgICBtZXNzYWdlOiAn5LiK5Lyg5aSx6LSlJywNCiAgICAgICAgICAgIHR5cGU6ICdlcnJvcicsDQogICAgICAgICAgICBkdXJhdGlvbjogMTAwMCwNCiAgICAgICAgICB9KTsNCiAgICAgICAgfQ0KICAgICAgfSk7DQogICAgfSwNCiAgICAvL+S4iuS8oOWbvueJhw0KICAgIHVwbG9hZEltZygpIHsNCiAgICAgIHRoaXMuJHJlZnMuY3JvcHBlci5nZXRDcm9wRGF0YSgoZGF0YSkgPT4gew0KICAgICAgICB0aGlzLnJlc0ltZyA9IHRoaXMuYmFzZTY0SW1ndG9GaWxlKGRhdGEpOw0KICAgICAgICB0aGlzLnVwbG9hZEZpbGUodGhpcy5yZXNJbWcpOw0KICAgICAgfSk7DQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAmEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/cropperImg","sourcesContent":["<template>\r\n <div class=\"cropper-content\">\r\n <div class=\"cropper-box\">\r\n <div class=\"cropper\">\r\n <vue-cropper\r\n ref=\"cropper\"\r\n :img=\"option.img\"\r\n :outputSize=\"option.outputSize\"\r\n :outputType=\"option.outputType\"\r\n :info=\"option.info\"\r\n :canScale=\"option.canScale\"\r\n :autoCrop=\"option.autoCrop\"\r\n :autoCropWidth=\"option.autoCropWidth\"\r\n :autoCropHeight=\"option.autoCropHeight\"\r\n :fixed=\"option.fixed\"\r\n :fixedNumber=\"option.fixedNumber\"\r\n :full=\"option.full\"\r\n :fixedBox=\"option.fixedBox\"\r\n :canMove=\"option.canMove\"\r\n :canMoveBox=\"option.canMoveBox\"\r\n :original=\"option.original\"\r\n :centerBox=\"option.centerBox\"\r\n :height=\"option.height\"\r\n :infoTrue=\"option.infoTrue\"\r\n :maxImgSize=\"option.maxImgSize\"\r\n :enlarge=\"option.enlarge\"\r\n :mode=\"option.mode\"\r\n @realTime=\"realTime\"\r\n @imgLoad=\"imgLoad\"\r\n >\r\n </vue-cropper>\r\n </div>\r\n <!--底部操作工具按钮-->\r\n <div class=\"footer-btn\">\r\n <div class=\"scope-btn\">\r\n <input\r\n type=\"file\"\r\n id=\"uploads\"\r\n style=\"position: absolute; clip: rect(0 0 0 0)\"\r\n accept=\"image/png, image/jpeg, image/gif, image/jpg\"\r\n @change=\"selectImg($event)\"\r\n />\r\n <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-in\" v-db-click @click=\"changeScale(1)\"\r\n >放大</el-button\r\n >\r\n <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-out\" v-db-click @click=\"changeScale(-1)\"\r\n >缩小</el-button\r\n >\r\n <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateLeft\">↺ 左旋转</el-button>\r\n <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateRight\">↻ 右旋转</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n <!--预览效果图-->\r\n <div class=\"show-preview\">\r\n <div class=\"preview\">\r\n <img :src=\"previews.url\" :style=\"previews.img\" />\r\n </div>\r\n <div class=\"upload-btn\">\r\n <label class=\"btn\" for=\"uploads\">选择图片</label>\r\n <el-button size=\"mini\" type=\"success\" v-db-click @click=\"uploadImg()\">确认上传</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { VueCropper } from 'vue-cropper';\r\n// import { updateAvatar } from ''; //这里为文件上传的接口换成自己的文件\r\nimport { fileUpload } from '@/api/setting';\r\nexport default {\r\n name: 'CropperImage',\r\n components: {\r\n VueCropper,\r\n },\r\n data() {\r\n return {\r\n name: '',\r\n resImg: '',\r\n previews: {},\r\n option: {\r\n img: '', //裁剪图片的地址\r\n outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)\r\n outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）\r\n info: true, //图片大小信息\r\n canScale: true, //图片是否允许滚轮缩放\r\n autoCrop: true, //是否默认生成截图框\r\n autoCropWidth: 200, //默认生成截图框宽度\r\n autoCropHeight: 200, //默认生成截图框高度\r\n fixed: true, //是否开启截图框宽高固定比例\r\n fixedNumber: [1, 1], //截图框的宽高比例\r\n full: false, //false按原比例裁切图片，不失真\r\n fixedBox: false, //固定截图框大小，不允许改变\r\n canMove: true, //上传图片是否可以移动\r\n canMoveBox: true, //截图框能否拖动\r\n original: false, //上传图片按照原始比例渲染\r\n centerBox: true, //截图框是否被限制在图片里面\r\n height: false, //是否按照设备的dpr 输出等比例图片\r\n infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高\r\n maxImgSize: 3000, //限制图片最大宽度和高度\r\n enlarge: 1, //图片根据截图框输出比例倍数\r\n mode: '300px 300px', //图片默认渲染方式\r\n },\r\n };\r\n },\r\n methods: {\r\n //初始化函数\r\n imgLoad(msg) {\r\n console.log('工具初始化函数=====' + msg);\r\n },\r\n //图片缩放\r\n changeScale(num) {\r\n num = num || 1;\r\n this.$refs.cropper.changeScale(num);\r\n },\r\n //向左旋转\r\n rotateLeft() {\r\n this.$refs.cropper.rotateLeft();\r\n },\r\n //向右旋转\r\n rotateRight() {\r\n this.$refs.cropper.rotateRight();\r\n },\r\n // //实时预览函数\r\n realTime(data) {\r\n let that = this;\r\n that.previews = data;\r\n this.$refs.cropper.getCropBlob((data) => {\r\n this.blobToDataURI(data, function (res) {\r\n that.previewImg = res;\r\n });\r\n });\r\n },\r\n blobToDataURI(blob, callback) {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onload = function (e) {\r\n callback(e.target.result);\r\n };\r\n },\r\n //选择图片\r\n selectImg(e) {\r\n let file = e.target.files[0];\r\n if (!/\\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {\r\n this.$message({\r\n message: '图片类型要求：jpeg、jpg、png',\r\n type: 'error',\r\n });\r\n return false;\r\n }\r\n //转化为blob\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n let data;\r\n if (typeof e.target.result === 'object') {\r\n data = window.URL.createObjectURL(new Blob([e.target.result]));\r\n } else {\r\n data = e.target.result;\r\n }\r\n this.option.img = data;\r\n };\r\n //转化为base64\r\n reader.readAsDataURL(file);\r\n },\r\n\r\n base64ImgtoFile(dataurl, filename = 'file') {\r\n //将base64格式分割：['data:image/png;base64','XXXX']\r\n const arr = dataurl.split(',');\r\n // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：\r\n // image/png\r\n const mime = arr[0].match(/:(.*?);/)[1]; //image/png\r\n //[image,png] 获取图片类型后缀\r\n const suffix = mime.split('/')[1]; //png\r\n const bstr = atob(arr[1]); //atob() 方法用于解码使用 base-64 编码的字符串\r\n let n = bstr.length;\r\n const u8arr = new Uint8Array(n);\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n return new File([u8arr], `${filename}.${suffix}`, {\r\n type: mime,\r\n });\r\n },\r\n\r\n uploadFile(file) {\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n fileUpload(formData).then((res) => {\r\n if (res.status == 200) {\r\n this.$emit('uploadImgSuccess', res.data);\r\n } else {\r\n this.$message({\r\n message: '上传失败',\r\n type: 'error',\r\n duration: 1000,\r\n });\r\n }\r\n });\r\n },\r\n //上传图片\r\n uploadImg() {\r\n this.$refs.cropper.getCropData((data) => {\r\n this.resImg = this.base64ImgtoFile(data);\r\n this.uploadFile(this.resImg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.btn {\r\n outline: none;\r\n display: inline-block;\r\n line-height: 1;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n text-align: center;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n outline: 0;\r\n -webkit-transition: 0.1s;\r\n transition: 0.1s;\r\n font-weight: 500;\r\n padding: 8px 15px;\r\n font-size: 12px;\r\n border-radius: 3px;\r\n color: #fff;\r\n background-color: #409eff;\r\n border-color: #409eff;\r\n margin-right: 10px;\r\n}\r\n.cropper-content {\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: flex-end;\r\n .cropper-box {\r\n flex: 1;\r\n width: 100%;\r\n .cropper {\r\n width: auto;\r\n height: 300px;\r\n }\r\n }\r\n\r\n .show-preview {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: center;\r\n .preview {\r\n overflow: hidden;\r\n height: 200px;\r\n width: 200px;\r\n background: #cccccc;\r\n transform: scale(0.8);\r\n border-radius: 50%;\r\n }\r\n }\r\n}\r\n.footer-btn {\r\n margin-top: 30px;\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: space-around;\r\n .scope-btn {\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: space-between;\r\n padding-right: 10px;\r\n }\r\n .upload-btn {\r\n flex: 1;\r\n -webkit-flex: 1;\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: center;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
