| 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\\hotpotModal\\AreaBox.vue?vue&type=style&index=0&id=9b4f62d8&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\hotpotModal\\AreaBox.vue","mtime":1761185179970},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"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:DQouYXJlYUJveCB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgYmFja2dyb3VuZDogcmdiYSgyNCwgMTQ0LCAyNTUsIDAuNSk7DQogIGJvcmRlcjogMXB4IGRhc2hlZCB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgY3Vyc29yOiBtb3ZlOw0KICAucHJvbXB0LXRleHQgew0KICAgIG92ZXJmbG93OiBoaWRkZW47DQogICAgZGlzcGxheTogZmxleDsNCiAgICBmbGV4LXdyYXA6IHdyYXA7DQogICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogICAgbWF4LXdpZHRoOiAxMDAlOw0KICAgIG1heC1oZWlnaHQ6IDEwMCU7DQogICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgY29sb3I6ICNmZmY7DQogICAgLm51bSB7DQogICAgICBmb250LXNpemU6IDEycHg7DQogICAgfQ0KICAgIC5wcm9tcHQtaXRlbSB7DQogICAgICBjb2xvcjogI2ZmZjsNCiAgICAgIG1hcmdpbjogMCAycHg7DQogICAgfQ0KICB9DQogIC5kZWwgew0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICB3aWR0aDogMTZweDsNCiAgICBoZWlnaHQ6IDE2cHg7DQogICAgbGluZS1oZWlnaHQ6IDE2cHg7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGJhY2tncm91bmQ6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgY29sb3I6ICNmZmY7DQogICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgIGJvcmRlci1yYWRpdXM6IDAgMCAwIDNweDsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgcmlnaHQ6IDdweDsNCiAgICB0b3A6IDdweDsNCiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDUwJSwgLTUwJSwgMCk7DQogICAgY3Vyc29yOiBkZWZhdWx0Ow0KICB9DQogIC5kZWw6aG92ZXIgew0KICAgIHdpZHRoOiAxNnB4Ow0KICAgIGhlaWdodDogMTZweDsNCiAgICBsaW5lLWhlaWdodDogMTZweDsNCiAgfQ0KICAuc2hhcGUgew0KICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICB3aWR0aDogN3B4Ow0KICAgIGhlaWdodDogN3B4Ow0KICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50Ow0KICAgIHJpZ2h0OiAwOw0KICAgIGJvdHRvbTogMDsNCiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDUwJSwgNTAlLCAwKTsNCiAgICBjdXJzb3I6IG53c2UtcmVzaXplOw0KICB9DQp9DQouYXJlYS1zZXQgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBtYXJnaW46IDE2cHggMDsNCn0NCi5hcmVhLWxhYmVsIHsNCiAgd2lkdGg6IDEwMHB4Ow0KfQ0KLmFyZWEtY29udGVudCB7DQogIGZsZXg6IDE7DQp9DQo="},{"version":3,"sources":["AreaBox.vue"],"names":[],"mappings":";AAiNA;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","file":"AreaBox.vue","sourceRoot":"src/components/hotpotModal","sourcesContent":["<template>\r\n <div\r\n :style=\"{\r\n width: areaInit.areaWidth + 'px',\r\n height: areaInit.areaHeight + 'px',\r\n left: areaInit.starX + 'px',\r\n top: areaInit.starY + 'px',\r\n }\"\r\n class=\"areaBox\"\r\n @dblclick=\"editBoxShow = true\"\r\n @mousedown.left.stop=\"mouseDownLint($event)\"\r\n @mouseup.left.stop=\"mouseUp($event)\"\r\n >\r\n <div class=\"prompt-text\">\r\n <div class=\"prompt-item num\">热区 {{ areaInit.number }}</div>\r\n <div class=\"prompt-item\" :style=\"{ color: isSet ? '#2d8cf0' : '#f00' }\">\r\n {{ isSet ? '(已设置)' : '(未设置)' }}\r\n </div>\r\n </div>\r\n <!--删除-->\r\n <div class=\"del\" @click.stop=\"del()\">\r\n <i class=\"el-icon-close\" size=\"16\" />\r\n </div>\r\n <!--形变点-->\r\n <div class=\"shape\" @mousedown.left.stop=\"shapeDown($event)\" @mouseup.left.stop=\"mouseUp($event)\" />\r\n <!--编辑框-->\r\n\r\n <div>\r\n <el-dialog :visible.sync=\"editBoxShow\" title=\"设置热区\" width=\"560px\" append-to-body>\r\n <div class=\"area-set\">\r\n <div class=\"area-label\">热区跳转链接：</div>\r\n <div class=\"area-content\">\r\n <el-input v-model=\"url\" style=\"width: 100%\" placeholder=\"选择跳转链接\">\r\n <i class=\"el-icon-link\" slot=\"suffix\" @click=\"getLink()\" />\r\n </el-input>\r\n </div>\r\n </div>\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button @click.stop=\"editBoxShow = false\">取 消</el-button>\r\n <el-button type=\"primary\" @click.stop=\"addURL\">确 定</el-button>\r\n </span>\r\n </el-dialog>\r\n <linkaddress ref=\"linkaddres\" @linkUrl=\"linkUrl\"></linkaddress>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport linkaddress from '@/components/linkaddress';\r\nexport default {\r\n name: 'AreaBox',\r\n components: { linkaddress },\r\n props: {\r\n areaInit: {\r\n type: Object,\r\n default: () => {},\r\n },\r\n areaDataIndex: {\r\n type: Number,\r\n default: null,\r\n },\r\n link: {\r\n type: String,\r\n default: '',\r\n },\r\n title: {\r\n type: String,\r\n default: '',\r\n },\r\n type: {\r\n type: Number,\r\n default: -1,\r\n },\r\n parentWidth: {\r\n type: Number,\r\n default: 0,\r\n },\r\n parentHeight: {\r\n type: Number,\r\n default: 0,\r\n },\r\n },\r\n data() {\r\n return {\r\n areaTitle: '',\r\n url: '',\r\n editBoxShow: false,\r\n promptText: '双击设置热区',\r\n // box操作初始点\r\n move: {\r\n // 拖动\r\n startX: 0,\r\n starY: 0,\r\n // 形变\r\n start1X: 0,\r\n start1Y: 0,\r\n },\r\n };\r\n },\r\n computed: {\r\n isSet() {\r\n return !!this.link;\r\n },\r\n },\r\n watch: {\r\n title(val) {\r\n this.areaTitle = val;\r\n },\r\n link(val) {\r\n this.url = val;\r\n },\r\n },\r\n mounted() {\r\n this.url = this.link;\r\n },\r\n methods: {\r\n // 删除\r\n del() {\r\n this.$emit('delAreaBox', this.areaDataIndex);\r\n },\r\n // 添加网址\r\n addURL() {\r\n if (!this.url) {\r\n this.$message.error('请输入链接');\r\n } else {\r\n this.$emit('addURL', this.areaDataIndex, this.url);\r\n this.editBoxShow = false;\r\n }\r\n },\r\n // 开始拖动限制范围\r\n mouseDownLint(e) {\r\n e.preventDefault();\r\n this.starX = e.clientX;\r\n this.starY = e.clientY;\r\n const childrenDiv = e.target || e;\r\n //获取子元素的宽高\r\n let childrenWidth = childrenDiv.getBoundingClientRect().width;\r\n let childrenHight = childrenDiv.getBoundingClientRect().height;\r\n // console.log(childrenWidth, childrenHight)\r\n if (!document.onmousemove) {\r\n const initX = this.areaInit.starX;\r\n const initY = this.areaInit.starY;\r\n document.onmousemove = (ev) => {\r\n // 移动位置\r\n let nLeft = initX + ev.clientX - this.starX;\r\n let nTop = initY + ev.clientY - this.starY;\r\n nLeft = nLeft <= 0 ? 0 : nLeft; //判断左边是否越界\r\n nTop = nTop <= 0 ? 0 : nTop; //判断上边是否越界\r\n let nRight = nLeft + childrenWidth;\r\n let nBottom = nTop + childrenHight;\r\n // 判断右边是否越界\r\n if (nRight >= this.parentWidth) {\r\n nLeft = this.parentWidth - childrenWidth;\r\n }\r\n // 判断下边是否越界\r\n if (nBottom >= this.parentHeight) {\r\n nTop = this.parentHeight - childrenHight;\r\n }\r\n this.areaInit.starX = nLeft;\r\n this.areaInit.starY = nTop;\r\n };\r\n }\r\n },\r\n // 开始拖动不限制范围\r\n mouseDown(e) {\r\n e.preventDefault();\r\n this.starX = e.clientX;\r\n this.starY = e.clientY;\r\n if (!document.onmousemove) {\r\n const initX = this.areaInit.starX;\r\n const initY = this.areaInit.starY;\r\n document.onmousemove = (ev) => {\r\n this.areaInit.starX = initX + ev.clientX - this.starX;\r\n this.areaInit.starY = initY + ev.clientY - this.starY;\r\n };\r\n }\r\n },\r\n // 结束拖动/变形\r\n mouseUp() {\r\n document.onmousemove = null;\r\n },\r\n // 形变开始\r\n shapeDown(e) {\r\n e.preventDefault();\r\n\r\n this.star1X = e.clientX;\r\n this.star1Y = e.clientY;\r\n // 获取左部和底部的偏移量\r\n\r\n if (!document.onmousemove) {\r\n const initX = this.areaInit.areaWidth;\r\n const initY = this.areaInit.areaHeight;\r\n document.onmousemove = (ev) => {\r\n this.areaInit.areaWidth = initX + ev.clientX - this.star1X;\r\n this.areaInit.areaHeight = initY + ev.clientY - this.star1Y;\r\n };\r\n }\r\n },\r\n getLink() {\r\n this.$refs.linkaddres.modals = true;\r\n },\r\n linkUrl(e) {\r\n this.url = e;\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.areaBox {\r\n position: absolute;\r\n background: rgba(24, 144, 255, 0.5);\r\n border: 1px dashed var(--prev-color-primary);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: var(--prev-color-primary);\r\n font-size: 12px;\r\n cursor: move;\r\n .prompt-text {\r\n overflow: hidden;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n max-width: 100%;\r\n max-height: 100%;\r\n text-align: center;\r\n align-items: center;\r\n color: #fff;\r\n .num {\r\n font-size: 12px;\r\n }\r\n .prompt-item {\r\n color: #fff;\r\n margin: 0 2px;\r\n }\r\n }\r\n .del {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 16px;\r\n height: 16px;\r\n line-height: 16px;\r\n font-size: 12px;\r\n background: var(--prev-color-primary);\r\n color: #fff;\r\n text-align: center;\r\n border-radius: 0 0 0 3px;\r\n position: absolute;\r\n right: 7px;\r\n top: 7px;\r\n transform: translate3d(50%, -50%, 0);\r\n cursor: default;\r\n }\r\n .del:hover {\r\n width: 16px;\r\n height: 16px;\r\n line-height: 16px;\r\n }\r\n .shape {\r\n position: absolute;\r\n width: 7px;\r\n height: 7px;\r\n background: transparent;\r\n right: 0;\r\n bottom: 0;\r\n transform: translate3d(50%, 50%, 0);\r\n cursor: nwse-resize;\r\n }\r\n}\r\n.area-set {\r\n display: flex;\r\n align-items: center;\r\n margin: 16px 0;\r\n}\r\n.area-label {\r\n width: 100px;\r\n}\r\n.area-content {\r\n flex: 1;\r\n}\r\n</style>\r\n"]}]}
|
