opms_wechat/components/WaterMark/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-24 17:28:55
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-25 10:05:16
 * @Description: file content
 * @FilePath: \oms\components\WaterMark\index.vue
-->
<template>
  <view class="make">
    <view class="list">
      <view class="item" v-for="i in 300" :key="i">
        <text>{{ nickName }}{{ phone }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'watermark',
    computed: {
      ...mapGetters(['nickName', 'phone']),
    },
    data() {
      return {}
    },
    mounted() {
    },
  }
</script>

<style lang="scss" scoped>
  .make {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;

    .list {
      width: 500%;
      height: 400%;
      position: absolute;
      top: -50%;
      left: -50%;
      transform: rotate(-45deg);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      pointer-events: none;

      .item {
        font-size: 32rpx;
        color: rgba(220, 220, 220, 0.5);
        padding: 30rpx;
        pointer-events: none;
      }
    }
  }
</style>