{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\hotpotModal\\AreaBox.vue?vue&type=style&index=0&id=9b4f62d8&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\hotpotModal\\AreaBox.vue","mtime":1761614938956},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"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"]}]}