vue页面加系统时间水印

你可以使用 CSS3 的伪元素 ::after 来实现页面水印效果，同时使用 JavaScript 获取系统时间来显示水印内容。以下是一个示例代码：

HTML:

<div id="watermark">
  <div class="watermark-content">
    <span>系统时间：</span>
    <span id="system-time"></span>
  </div>
</div>

CSS:

#watermark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.watermark-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: rgba(0,0,0,0.2);
}

.watermark-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Ctext x="50%" y="50%" dy="0.4em" text-anchor="middle" font-size="35"%3EWatermark%3C/text%3E%3C/svg%3E');
  background-repeat: repeat;
  opacity: 0.2;
}

JavaScript:

function updateSystemTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const date = now.getDate();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  const systemTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
  document.getElementById('system-time').textContent = systemTime;
}

setInterval(updateSystemTime, 1000);

你可以将以上代码保存为一个 vue 文件，然后在需要显示水印的页面中引入即可。注意，以上代码只是一个简单的示例，你需要根据实际情况进行修改。