前端增加隐藏水印

<template>
  <el-watermark :font="font" :content="content" :zIndex="99999" :gap="[40, 40]">
    <el-watermark :font="{color: 'rgba(0, 0, 0, 0.01)',}" :content="transparentContent" :zIndex="99999" :gap="[10, 10]">
      <router-view />
    </el-watermark>
  </el-watermark>
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useUserStore from "@/store/modules/user";

const userStore = useUserStore()


console.log(userStore)


const content = computed(() => {
  if (userStore.userInfo.nickName) {
    return [userStore.userInfo.nickName, userStore.userInfo.phonenumber]
  } else {
    return ['', '']
  }
})

const transparentContent = computed(() => {
  if (userStore.userInfo.nickName) {
    return [userStore.userInfo.nickName, userStore.userInfo.phonenumber,'四合财务管理系统']
  } else {
    return ['', '','四合财务管理系统']
  }
})

const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})
</script>

这是截图的图片：

这是经过PS处理后的图片