fix: card content position

pages/make/index.vue

@@ -12,12 +12,16 @@
           <text class="main">新春快乐</text>
           <text class="sub">2026 YEAR OF THE HORSE</text>
         </view>
-        <view class="bubble" @tap="activeTool = 'text'">
+        <view
+          class="bubble"
+          @tap="activeTool = 'text'"
+          :style="{ marginTop: 80 + bubbleOffsetY + 'rpx' }"
+        >
           <text class="bubble-text" :style="{ color: selectedColor }">{{
             targetName + "\n  " + blessingText
           }}</text>
         </view>
-        <view class="user">
+        <view class="user" :style="{ left: 160 + userOffsetX + 'rpx' }">
           <image class="avatar" :src="userAvatar" mode="aspectFill" />
           <view class="user-info">
             <text class="user-name">{{ signatureName }}</text>
@@ -163,12 +167,29 @@
         </view>
       </view>
 
-      <!-- 图片/背景 -->
+      <!-- 位置调整 -->
-      <view v-if="activeTool === 'image'" class="section">
+      <view v-if="activeTool === 'position'" class="section">
-        <view class="section-title"><text>替换背景</text></view>
+        <view class="form-item">
-        <view class="row">
+          <text class="label">祝福语位置 (上下)</text>
-          <button class="btn" @tap="pickImage">从相册选择</button>
+          <slider
-          <button class="btn" @tap="resetBackground">重置为模板背景</button>
+            :value="bubbleOffsetY"
+            min="-200"
+            max="200"
+            show-value
+            @change="(e) => (bubbleOffsetY = e.detail.value)"
+            activeColor="#ff3b30"
+          />
+        </view>
+        <view class="form-item">
+          <text class="label">署名位置 (左右)</text>
+          <slider
+            :value="userOffsetX"
+            min="-200"
+            max="200"
+            show-value
+            @change="(e) => (userOffsetX = e.detail.value)"
+            activeColor="#ff3b30"
+          />
         </view>
       </view>
 
@@ -222,6 +243,9 @@ const selectedColor = ref("#ffffff");
 const greetingLib = ref([]);
 const greetingIndex = ref(0);
 
+const bubbleOffsetY = ref(0);
+const userOffsetX = ref(0);
+
 onLoad((options) => {
   cardId.value = "69674f307307beac4519025f";
   // createCard();
@@ -337,7 +361,7 @@ const selectGreeting = (text) => {
 const tools = [
   { type: "template", text: "模板", icon: "▦" },
   { type: "text", text: "文字", icon: "文" },
-  // { type: "image", text: "图片/背景", icon: "图" },
+  { type: "position", text: "位置", icon: "图" },
   // { type: "avatar", text: "头像挂饰", icon: "饰" },
 ];
 const activeTool = ref("template");
@@ -438,7 +462,7 @@ const saveByCanvas = async (save = true) => {
   drawBubbleText(ctx, {
     text: targetName.value + "\n  " + blessingText.value,
     x: 70,
-    y: 260,
+    y: 260 + bubbleOffsetY.value,
     maxWidth: 400,
     fontSize: 32,
     lineHeight: 46,
@@ -447,7 +471,7 @@ const saveByCanvas = async (save = true) => {
   });
 
   drawUserBubble(ctx, {
-    x: 40,
+    x: 40 + userOffsetX.value,
     y: H - 120,
     avatarPath: avatarPath,
     username: signatureName.value,