优化水印显示（减少对展示内容的影响）

src/views/Report/ReportDetail.vue

@@ -25,18 +25,22 @@
             <span>报告详情</span>
             <el-button type="primary" @click="downloadRow(row)">报告下载</el-button>
         </div>
+      <div class="preview-box" v-watermark="{ text: watermarkText }">
         <div class="preview-content" v-html="content"></div>
+      </div>
     </div>
 </template>
 
 <script>
-import {downloadFile} from "../../utils/downloadFile";
+import {downloadFile} from "@/utils/downloadFile";
+import {formatDate} from '@/utils/date'
 
 export default {
     name: "ReportDetail",
     data(){
         return {
-            content: '',
+          watermarkText: '', // 水印
+          content: '',
             row: {},
         }
     },
@@ -47,6 +51,7 @@ export default {
                 this.$router.push({path: '/report/list', query: {id: this.$route.query.id}});
                 return
             }
+            this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
             this.row = JSON.parse(this.$route.query.row);
             this.$api.report.reportGetReportHtmlId({id: this.row.id}).then(({data}) => {
                 this.content = data.content;
@@ -137,18 +142,26 @@ export default {
             color: #262626;
         }
     }
+    .preview-box {
+      // 定位使水印不溢出元素
+      position: relative;
+      // 居中
+      width: calc(100% - 13px - 14px);
+      margin-left: 13px;
 
-    .preview-content {
-        margin: 0 14px 0 13px;
+      .preview-content {
+        //margin: 0 14px 0 13px;
         padding-bottom: 11px;
 
         img {
             max-width: 100% !important;
         }
         table{
-            margin: 0 auto;
+          margin: 0 auto;
         }
 
+      }
     }
+
 }
 </style>