@uxda/appkit 4.3.8 → 4.3.12

package/src/scenarios/components/index.ts

@@ -1,3 +1,3 @@
-import SharePoster from './SharePoster.vue'
-
+import SharePoster from './SharePoster.vue'
+
 export { SharePoster }

package/src/scenarios/components/poster-paste.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="poster-paste">
-    <div
-      :class="['picture']"
-      :style="{ backgroundImage: `url(${poster.back})` }"
-    ></div>
-    <div
-      class="logo"
-      v-if="logo"
-      :style="{
-        width: `${tx(25)}%`,
-        height: `${ty(25)}%`,
-        ...(poster.logoX ? { left: `${tx(20)}%` } : {}),
-        ...(poster.logoX ? { top: `${ty(25)}%` } : {}),
-        backgroundImage: `url(${logo})`,
-        backgroundRepeat: 'no-repeat',
-      }"
-    ></div>
-    <div
-      v-if="nick"
-      class="nick"
-      :style="{
-        ...(poster.nickX ? { left: `${t(poster.nickX)}px` } : {}),
-        ...(poster.nickY ? { top: `${t(28)}px` } : {}),
-        fontSize: `${t(16)}px`,
-        color: '#353535',
-      }"
-    >
-      {{ nick }}
-    </div>
-    <div
-      class="qr"
-      v-if="poster.qr"
-      :style="{
-        ...(poster.qrW ? { width: `${tx(poster.qrW)}%` } : {}),
-        ...(poster.qrH ? { height: `${ty(poster.qrW)}%` } : {}),
-        ...(poster.qrX ? { left: `${tx(poster.qrX)}%` } : {}),
-        ...(poster.qrY ? { top: `${ty(poster.qrY)}%` } : {}),
-        backgroundImage: `url(${poster.qr})`,
-      }"
-    ></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  poster: any;
-  logo: string;
-  nick: string;
-  zoom: number;
-}>();
-
-const t = (s: number) => Math.round(s * (props.zoom || 1)); // 缩放后坐标值
-const tx = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 221; // 缩放后坐标值
-const ty = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 480; // 缩放后坐标值
-</script>
-
-<style lang="scss">
-.poster-paste {
-  position: relative;
-  width: auto;
-  height: 480px;
-  aspect-ratio: 375/812;
-  transition: transform 0.5s;
-  .picture {
-    position: absolute;
-    background-size: cover;
-    background-position: center;
-    height: 100%;
-    width: 100%;
-    border-radius: 10px;
-  }
-  .logo {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    left: 25px;
-    top: 25px;
-    background-size: contain;
-    background-position: center;
-  }
-  .nick {
-    position: absolute;
-    top: 24px;
-    line-height: 15px;
-  }
-  .qr {
-    position: absolute;
-    background-size: contain;
-    background-position: center;
-  }
-}
-</style>
+<template>
+  <div class="poster-paste">
+    <div
+      :class="['picture']"
+      :style="{ backgroundImage: `url(${poster.back})` }"
+    ></div>
+    <div
+      class="logo"
+      v-if="logo"
+      :style="{
+        width: `${tx(25)}%`,
+        height: `${ty(25)}%`,
+        ...(poster.logoX ? { left: `${tx(20)}%` } : {}),
+        ...(poster.logoX ? { top: `${ty(25)}%` } : {}),
+        backgroundImage: `url(${logo})`,
+        backgroundRepeat: 'no-repeat',
+      }"
+    ></div>
+    <div
+      v-if="nick"
+      class="nick"
+      :style="{
+        ...(poster.nickX ? { left: `${t(poster.nickX)}px` } : {}),
+        ...(poster.nickY ? { top: `${t(28)}px` } : {}),
+        fontSize: `${t(16)}px`,
+        color: '#353535',
+      }"
+    >
+      {{ nick }}
+    </div>
+    <div
+      class="qr"
+      v-if="poster.qr"
+      :style="{
+        ...(poster.qrW ? { width: `${tx(poster.qrW)}%` } : {}),
+        ...(poster.qrH ? { height: `${ty(poster.qrW)}%` } : {}),
+        ...(poster.qrX ? { left: `${tx(poster.qrX)}%` } : {}),
+        ...(poster.qrY ? { top: `${ty(poster.qrY)}%` } : {}),
+        backgroundImage: `url(${poster.qr})`,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  poster: any;
+  logo: string;
+  nick: string;
+  zoom: number;
+}>();
+
+const t = (s: number) => Math.round(s * (props.zoom || 1)); // 缩放后坐标值
+const tx = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 221; // 缩放后坐标值
+const ty = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 480; // 缩放后坐标值
+</script>
+
+<style lang="scss">
+.poster-paste {
+  position: relative;
+  width: auto;
+  height: 480px;
+  aspect-ratio: 375/812;
+  transition: transform 0.5s;
+  .picture {
+    position: absolute;
+    background-size: cover;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    border-radius: 10px;
+  }
+  .logo {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    left: 25px;
+    top: 25px;
+    background-size: contain;
+    background-position: center;
+  }
+  .nick {
+    position: absolute;
+    top: 24px;
+    line-height: 15px;
+  }
+  .qr {
+    position: absolute;
+    background-size: contain;
+    background-position: center;
+  }
+}
+</style>