添加背景水印

src/layout/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="layout">
     <Header :horizontalNavList="[]"></Header>
-    <AppMain :menuItems="menuList"/>
+    <el-watermark :font="font" :content="[waterText]" :z-index="9999">
+      <AppMain :menuItems="menuList"/>
+    </el-watermark>
+
   </div>
 </template>
 
 <!-- vue3 setup -->
 <script setup lang="ts">
-import {computed,ref} from 'vue'
+import {computed,ref,reactive,} from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import Header from './components/header.vue'
@@ -25,4 +28,11 @@ const menuList =  computed(()=>{
 })
 
 
+const font = reactive({
+  color: 'rgba(0, 0, 0, 0.08)',
+})
+const waterText = computed(()=>{
+  let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+  return userInfo.username + ' ' + userInfo.phoneNo
+})
 </script>