水印

src/views/hzyb/activity/reportDetail.vue

@@ -182,7 +182,7 @@ const goDetail=(e)=>{
 
         <template v-else>
             <div class="content-wrap" >
-                <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;opacity: 0.1;"></div>
+                <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1"></div>
                 <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort" style="position: relative;z-index: 5;">
                     <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
                     <div v-html="item.content" class="content-text"></div>
@@ -333,6 +333,7 @@ const goDetail=(e)=>{
     :deep(p){
         margin: 0;
         padding: 0;
+        background-color: rgba(255, 255, 255, 0) !important;
     }
 }
 .list-content{

src/views/hzyb/activity/reportWeekDetail.vue

@@ -137,7 +137,7 @@ onBeforeRouteUpdate(to => {
             <div class="box" @click="showTips"></div>
         </div>
         <div class="content-wrap">
-            <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;opacity: 0.1;"></div>
+            <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;"></div>
             <div class="top-box">
                 <h2>{{info.research_report_type_info.research_report_type_title}}</h2>
                 <span class="classify-box">
@@ -326,6 +326,7 @@ onBeforeRouteUpdate(to => {
     :deep(p) {
         margin: 0;
         padding: 0;
+        background-color: rgba(255, 255, 255, 0) !important;
     }
     .top-box{
         margin-bottom: 30px;

src/views/hzyb/hooks/watermark.js

@@ -9,11 +9,11 @@ export function useWaterMark(text,target) {
     if(!target) return
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
-    ctx.font = "20px Arial";
+    ctx.font = "18px Arial";
     ctx.rotate((-45 * Math.PI) / 200);
+    ctx.fillStyle='#F1F1F1'
     ctx.fillText(text, 30, 200);
     ctx.fillText(text, -40, 100);
-
     // 将canvas的内容转换为base64编码
     const data = canvas.toDataURL("image/png");
 

src/views/hzyb/report/ChapterDetail.vue

@@ -20,10 +20,8 @@
         </div>
         <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
       </div>
-      <div class="rich-content" style="position: relative;">
-        <div style="width:100%;height:100%;position: absolute;opacity: 0.1;z-index: 1;" ref="richConBox"></div>
-        <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
-        <div v-if="info.auth_ok" style="position: relative;z-index: 5;">
+      <div class="rich-content" ref="richConBox">
+        <div v-if="info.auth_ok">
           <ul>
               <li v-for="item in realContent" :key="item" v-html="item"></li>
           </ul>
@@ -351,8 +349,9 @@ export default {
       if(!target) return
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
-      ctx.font = "20px Arial";
+      ctx.font = "18px Arial";
       ctx.rotate((-45 * Math.PI) / 200);
+      ctx.fillStyle='#F1F1F1'
       ctx.fillText(text, 30, 200);
       ctx.fillText(text, -40, 100);
 
@@ -637,10 +636,12 @@ export default {
         :deep(span){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(p){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(iframe){
             width: 100% !important;

src/views/hzyb/report/Detail.vue

@@ -66,10 +66,8 @@
                 <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
             </div>
 
-            <div class="rich-content" style="position: relative;">
-                <div style="width:100%;height:100%;position: absolute;opacity: 0.1;z-index: 1;" ref="richConBox"></div>
-                <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
-                <div v-if="info.auth_ok" style="position: relative;z-index: 5;">
+            <div class="rich-content" style="position: relative;" ref="richConBox">
+                <div v-if="info.auth_ok">
                     <ul>
                         <li v-for="item in realContent" :key="item" v-html="item"></li>
                     </ul>
@@ -393,10 +391,12 @@ export default {
 
         //添加水印
         waterMark(text,target){
+            if(!target) return
             const canvas = document.createElement("canvas");
             const ctx = canvas.getContext("2d");
-            ctx.font = "20px Arial";
+            ctx.font = "18px Arial";
             ctx.rotate((-45 * Math.PI) / 200);
+            ctx.fillStyle='#F1F1F1'
             ctx.fillText(text, 30, 200);
             ctx.fillText(text, -40, 100);
 
@@ -678,10 +678,12 @@ export default {
         :deep(span){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(p){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(iframe){
             width: 100% !important;