travel/admin/node_modules/.cache/vue-loader/2f4b1327d80dbf9436343475f9797519.json

{"remainingRequest":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\components\\Watermark\\Watermark.vue?vue&type=style&index=0&id=66e7ec4e&scoped=true&lang=css","dependencies":[{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\components\\Watermark\\Watermark.vue","mtime":1718864675711},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\css-loader\\dist\\cjs.js","mtime":1718764958140},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1718764960674},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":1718764958994},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1718764957200},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":1718764959862}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoud2F0ZXJtYXJrLWNvbnRhaW5lciB7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7CiAgcG9zaXRpb246IGZpeGVkOwogIHRvcDogMDsKICBsZWZ0OiAwOwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKICB6LWluZGV4OiA5OTk5OyAvKiDnoa7kv53msLTljbDlnKjlhoXlrrnkuYvkuIogKi8KICBvdmVyZmxvdzogaGlkZGVuOwogIHBvaW50ZXItZXZlbnRzOiBub25lOyAvKiDpmLLmraLmsLTljbDlvbHlk43pobXpnaLkuqTkupIgKi8KfQoKLndhdGVybWFyayB7CiAgdXNlci1zZWxlY3Q6IG5vbmU7IC8qIOmYsuatouawtOWNsOaWh+acrOiiq+WkjeWItiAqLwogIHBvaW50ZXItZXZlbnRzOiBub25lOyAvKiDpmLLmraLmsLTljbDlvbHlk43pobXpnaLkuqTkupIgKi8KfQo="},{"version":3,"sources":["Watermark.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"Watermark.vue","sourceRoot":"src/components/Watermark","sourcesContent":["<template>\n  <div v-if=\"watermarkText\" class=\"watermark-container\">\n    <div class=\"watermark\" v-for=\"(text, index) in watermarkTexts\" :key=\"index\" :style=\"watermarkStyle\">\n      {{ text }}\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    watermarkText: {\n      type: String,\n      default: '金澳'\n    },\n    watermarkColor: {\n      type: String,\n      default: 'rgba(192, 192, 192, 0.3)'\n    },\n    watermarkFontSize: {\n      type: String,\n      default: '24px'\n    },\n    watermarkFontFamily: {\n      type: String,\n      default: 'Arial'\n    },\n    watermarkRotation: {\n      type: Number,\n      default: -45\n    },\n    watermarkSpacing: {\n      type: Number,\n      default: 200\n    },\n    watermarkWidth: {\n      type: Number,\n      default: 200\n    },\n    watermarkHeight: {\n      type: Number,\n      default: 100\n    }\n  },\n  computed: {\n    watermarkTexts() {\n      // 根据页面大小动态生成多个水印文本\n      const texts = [];\n      const width = window.innerWidth;\n      const height = window.innerHeight;\n      const count = Math.ceil(width * height / (this.watermarkWidth * this.watermarkHeight));\n      for (let i = 0; i < count; i++) {\n        texts.push(this.watermarkText);\n      }\n      return texts;\n    },\n    watermarkStyle() {\n      return {\n        position: 'fixed',\n        pointerEvents: 'none',\n        top: `${Math.random() * window.innerHeight}px`,\n        left: `${Math.random() * window.innerWidth}px`,\n        transform: `rotate(${this.watermarkRotation}deg)`,\n        fontSize: this.watermarkFontSize,\n        color: this.watermarkColor,\n        fontFamily: this.watermarkFontFamily,\n        // 可以根据需要添加更多样式\n      };\n    }\n  },\n  mounted() {\n    window.addEventListener('resize', this.handleResize);\n  },\n  beforeDestroy() {\n    window.removeEventListener('resize', this.handleResize);\n  },\n  methods: {\n    handleResize() {\n      // 在窗口大小改变时重新计算水印文本和样式\n      // 这里可以根据需要添加逻辑，比如使用nextTick来确保DOM更新后再计算\n    }\n  }\n};\n</script>\n\n<style scoped>\n.watermark-container {\n  pointer-events: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999; /* 确保水印在内容之上 */\n  overflow: hidden;\n  pointer-events: none; /* 防止水印影响页面交互 */\n}\n\n.watermark {\n  user-select: none; /* 防止水印文本被复制 */\n  pointer-events: none; /* 防止水印影响页面交互 */\n}\n</style>\n"]}]}