watermark.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="make">
  3. <view class="list">
  4. <view class="item" v-for="i in 20">
  5. <text>{{info}}</text>
  6. </view>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. name: "watermark",
  13. props: {
  14. info: {
  15. type: String,
  16. default: '全局水印'
  17. }
  18. },
  19. data() {
  20. return {
  21. };
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .make {
  27. // position: fixed;
  28. // width: 100%;
  29. // height: 100%;
  30. position: absolute;
  31. right: 0;
  32. bottom: 0;
  33. top: 0;
  34. left: 0;
  35. z-index: 9;
  36. background: rgba(0, 0, 0, 0);
  37. pointer-events: none;
  38. .list {
  39. width: 150%;
  40. height: 100%;
  41. position: absolute;
  42. top: 0%;
  43. left: -30%;
  44. transform: rotate(-45deg);
  45. display: flex;
  46. flex-wrap: wrap;
  47. justify-content: space-between;
  48. pointer-events: none;
  49. .item {
  50. font-size: 36rpx;
  51. color: rgba(175,175,175,0.3);
  52. // font-weight: bold;
  53. padding: 30rpx;
  54. pointer-events: none;
  55. }
  56. }
  57. }
  58. </style>