@ebiz/designer-components 0.0.60 → 0.0.62

package/src/views/WatermarkDemo.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="watermark-demo">
-    <h1>水印组件演示</h1>
-    <div class="demo-section">
-      <h2>基础用法</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
-          <div class="content-box">
-            <p>这是被水印覆盖的内容</p>
-            <p>水印会显示在此内容之上</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
-      <div style="width: 100%; height: 300px" />
-    </t-watermark>
-
-    <div class="demo-section">
-      <h2>自定义透明度和角度</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
-          <div class="content-box">
-            <p>此水印透明度为0.2且角度为0</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>自定义间距和大小</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
-          <div class="content-box">
-            <p>此水印设置了自定义的宽高和间距</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>可移动水印</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
-          <div class="content-box">
-            <p>此水印可以随着页面滚动而移动</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizWatermark } from '../index.js';
-import { Watermark as TWatermark } from 'tdesign-vue-next';
-</script>
-
-<style scoped>
-.watermark-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-}
-
-.demo-card {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  margin-top: 10px;
-  background-color: #fafafa;
-  overflow: hidden;
-}
-
-.content-box {
-  padding: 40px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
+<template>
+  <div class="watermark-demo">
+    <h1>水印组件演示</h1>
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
+          <div class="content-box">
+            <p>这是被水印覆盖的内容</p>
+            <p>水印会显示在此内容之上</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
+      <div style="width: 100%; height: 300px" />
+    </t-watermark>
+
+    <div class="demo-section">
+      <h2>自定义透明度和角度</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
+          <div class="content-box">
+            <p>此水印透明度为0.2且角度为0</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>自定义间距和大小</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
+          <div class="content-box">
+            <p>此水印设置了自定义的宽高和间距</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>可移动水印</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
+          <div class="content-box">
+            <p>此水印可以随着页面滚动而移动</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizWatermark } from '../index.js';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+</script>
+
+<style scoped>
+.watermark-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+.demo-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+
+.content-box {
+  padding: 40px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 </style>