fix user avatar

src/App.vue

@@ -65,14 +65,17 @@ export default {
 #app {
   background-color: #f6f7f8;
   overflow: hidden;
+
   .single {
     height: 100%;
   }
 }
+
 :deep(.el-main) {
   --el-main-padding: 0 !important;
   padding: 0 !important;
 }
+
 :deep(.el-header) {
   padding: 0 !important;
 }

src/directives/watermark.js

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+
+const app = createApp({})
+export default () => {
+  app.directive('watermark', (el, binding) => {
+    const addWaterMarker = (text, el) => {
+      const canvas = document.createElement('canvas')
+      canvas.width = 400
+      canvas.height = 200
+      const cans = canvas.getContext('2d')
+      cans.rotate((-20 * Math.PI) / 180) // 旋转弧度
+      cans.font = '16px' // 字体
+      cans.fillStyle = 'rgba(0, 0, 0, 0.5)' // 字体填充颜色
+      cans.textAlign = 'left' // 对齐方式
+      cans.textBaseline = 'Middle' // 基线
+      cans.fillText(text, canvas.width / 3, canvas.height / 2) // 被填充的文本
+      el.style.background = `url(${canvas.toDataURL('image/png')})`
+    }
+    const { text } = binding.value
+    addWaterMarker(text, el)
+  })
+}

src/layout/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="flex flex-justify-start full-screen" @scroll="scroll">
+  <div
+    class="flex flex-justify-start full-screen"
+    v-watermark="text"
+    @scroll="scroll"
+  >
     <el-container>
       <el-header class="header">
         <top @openMenu="show = true" />
@@ -149,6 +153,7 @@ export default {
 .wt-main {
   background-color: #f6f7f8;
   overflow-x: hidden;
+
   .mp {
     top: 200px;
     right: 0;
@@ -161,9 +166,11 @@ export default {
     box-shadow: -1px 0px 1px 1px rgba(51, 51, 51, 0.05098);
   }
 }
+
 .icon {
   width: 140px;
 }
+
 .content {
   overflow-y: scroll;
   height: calc(100vh - 80px);

src/main.js

@@ -13,6 +13,7 @@ import '@/assets/style/theme/index.scss'
 import Avue from '@smallwei/avue'
 import '@smallwei/avue/lib/index.css'
 import bus from 'vue3-eventbus'
+import watermark from './directives/watermark.js'
 
 const myApp = createApp(App)
 myApp.config.globalProperties.$router = router
@@ -32,4 +33,5 @@ myApp
   .use(elementPlus, { locale, size: 'default', zIndex: 300 })
   .use(Avue)
   .use(bus)
+  .use(watermark)
   .mount('#app')

src/views/project/componens/info1.vue

@@ -1,7 +1,7 @@
 <template>
   <wt-card title="基础信息" :edit-btn="true" @change="change" @save="save">
     <el-form class="mt-20" :disabled="disabled">
-      <div class="flex flex-justify-center">
+      <div class="flex flex-justify-center" v-watermark="{ text: '33' }">
         <el-form-item class="full-width flex-child-average">
           <div class="flex flex-center full-width item">
             <span class="title">项目名称:</span>

src/views/project/componens/info2.vue

@@ -1,6 +1,6 @@
 <template>
   <wt-card title="前期情况" class="mt-10">
-    <div>info2</div>
+    <div v-watermark:[text]="33">info2</div>
   </wt-card>
 </template>
 

src/views/project/index.vue

@@ -11,7 +11,7 @@
       </template>
     </tips-custom>
     <!--    content-->
-    <div style="margin-bottom: 50px">
+    <div style="margin-bottom: 60px">
       <info1 :info="detail" />
       <info2 />
       <info3 :project-id="projectId" :stage-id="stageId" />

src/views/resource/component/preview.vue

@@ -18,7 +18,7 @@
           {{ data ? data.title : '' }}
         </h4>
       </template>
-      <div>
+      <div v-watermark="{ text: '22' }">
         <div v-if="data">
           <div v-if="data.imgs.length === 0" class="flex flex-center">
             <div v-html="data.content" class="preview"></div>
@@ -32,8 +32,8 @@
           v-if="isAccess === 2 || showAction"
         >
           <el-button type="primary" icon="Download" @click="downloadClick"
-            >下 载</el-button
-          >
+            >下 载
+          </el-button>
           <share
             class="ml-20"
             :project-id="projectId"
@@ -83,7 +83,14 @@ export default {
       show: false,
       data: null,
       preList: [],
-      showImage: false
+      showImage: false,
+      watermarkOptions: {
+        content: 'watermark',
+        gap: [20, 20],
+        offset: [10, 10],
+        zIndex: 5,
+        rotate: -20
+      }
     }
   },
   methods: {
@@ -134,6 +141,7 @@ export default {
   width: 960px;
   padding: 20px;
 }
+
 .bottom {
   position: fixed;
   bottom: 0;
@@ -144,6 +152,7 @@ export default {
   width: 1200px;
   border: #e6e8ed solid 1px;
 }
+
 :deep(.el-drawer__body) {
   padding: 0;
 }