From 4efcbd3b95bf678e8b317c59349f34e198c292da Mon Sep 17 00:00:00 2001
From: liuxi <357439530@qq.com>
Date: Thu, 20 Feb 2025 20:12:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E6=B0=B4=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |  5 ++++
 package.json               |  3 ++-
 src/pages/layout/index.vue | 50 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a247ad9..d70e931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21110,6 +21110,11 @@
                 }
             }
         },
+        "watermark-dom": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmmirror.com/watermark-dom/-/watermark-dom-2.3.0.tgz",
+            "integrity": "sha512-2++fJESs8ULlrOPHEJGi72UxcDmVTsJDZ3kMa5umU6IWc78A4g1kOAqh1k6FEQhrq9QpkV7wzuoUeMhvFlWGWg=="
+        },
         "wbuf": {
             "version": "1.7.3",
             "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
diff --git a/package.json b/package.json
index 2c24282..5465854 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.1.6",
         "vuex": "^3.4.0",
-        "vuex-persistedstate": "^4.0.0-beta.3"
+        "vuex-persistedstate": "^4.0.0-beta.3",
+        "watermark-dom": "^2.3.0"
     },
     "devDependencies": {
         "@stomp/stompjs": "^5.4.4",
diff --git a/src/pages/layout/index.vue b/src/pages/layout/index.vue
index f3a8127..bb322b1 100644
--- a/src/pages/layout/index.vue
+++ b/src/pages/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-wrap">
+    <div class="layout-wrap" ref="watermarkContainer">
         <LayoutHeader />
         <div class="layout-bottom-wrap">
             <!-- <SideMenu /> -->
@@ -12,6 +12,7 @@
     </div>
 </template>
 <script>
+import watermark from 'watermark-dom';
 export default {
     components: {
         LayoutHeader: () => import('./components/LayoutHeader'),
@@ -31,6 +32,53 @@ export default {
             return this.$route.name; // 获取当前路由的名称
         }
     },
+    mounted() {
+        this.addWatermark();
+    },
+    methods: {
+        addWatermark() {
+           
+            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+            let watermark_txt = userInfo.realName + ' '+ userInfo.phone
+            let options = {
+                // 水印内容
+                watermark_txt: watermark_txt,
+                // 水印起始位置x轴坐标
+                watermark_x: 20,
+                // 水印起始位置Y轴坐标
+                watermark_y: 20,
+                // 水印行数
+                watermark_rows: 5,
+                // 水印列数
+                watermark_cols: 10,
+                // 水印x轴间隔
+                watermark_x_space: 150,
+                // 水印y轴间隔
+                watermark_y_space: 150,
+                // 水印字体颜色
+                watermark_color: '#aaa',
+                // 水印透明度
+                watermark_alpha: 0.2,
+                // 水印字体大小
+                watermark_fontsize: '15px',
+                // 水印字体
+                watermark_font: '微软雅黑',
+                // 水印宽度
+                watermark_width: 210,
+                // 水印长度
+                watermark_height: 80,
+                // 水印倾斜度数
+                watermark_angle: 15
+            }
+
+            watermark.init(options);
+            // watermark.load({
+            //     watermark_txt: '水印文本',
+            //     watermark_parent_node: this.$refs.watermarkContainer,
+            //     options11
+            // });
+        },
+    },
 }
 </script>
 <style lang="scss">