diff --git a/pages/make/index.vue b/pages/make/index.vue
index 6275c9f..0aeac17 100644
--- a/pages/make/index.vue
+++ b/pages/make/index.vue
@@ -61,7 +61,13 @@
>{{ targetName + "\n " + blessingText.content }}
-
+
{{
@@ -76,6 +82,10 @@
+
+
+ 点击标题或个人信息可拖动,双指可缩放标题
+
分享或保存即可去除水印
@@ -125,41 +135,6 @@
没有更多了
-
-
- 标题位置 (上下)
- (titleOffsetY = e.detail.value)"
- activeColor="#ff3b30"
- />
-
-
- 标题位置 (左右)
- (titleOffsetX = e.detail.value)"
- activeColor="#ff3b30"
- />
-
-
- 标题缩放
- (titleScale = e.detail.value / 100)"
- activeColor="#ff3b30"
- />
-
-
@@ -334,8 +309,8 @@
个人信息 (上下)
(userOffsetY = e.detail.value)"
activeColor="#ff3b30"
@@ -346,8 +321,8 @@
个人信息 (左右)
(userOffsetX = e.detail.value)"
activeColor="#ff3b30"
@@ -464,6 +439,38 @@ const handleTitleTouchEnd = () => {
startTouches = [];
};
+// 个人信息触摸交互相关
+let startUserTouches = [];
+let initialUserState = {
+ offsetX: 0,
+ offsetY: 0,
+};
+
+const handleUserTouchStart = (e) => {
+ startUserTouches = e.touches;
+ initialUserState = {
+ offsetX: userOffsetX.value,
+ offsetY: userOffsetY.value,
+ };
+};
+
+const handleUserTouchEnd = () => {
+ startUserTouches = [];
+};
+
+const handleUserTouchMove = (e) => {
+ if (!startUserTouches.length) return;
+
+ if (e.touches.length === 1 && startUserTouches.length === 1) {
+ // 单指拖拽
+ const moveX = e.touches[0].clientX - startUserTouches[0].clientX;
+ const moveY = e.touches[0].clientY - startUserTouches[0].clientY;
+
+ userOffsetX.value = initialUserState.offsetX + moveX * pxToRpx;
+ userOffsetY.value = initialUserState.offsetY + moveY * pxToRpx;
+ }
+};
+
const handleTitleTouchMove = (e) => {
if (!currentTitle.value || !startTouches.length) return;
@@ -1242,6 +1249,20 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */
}
+.interaction-tip {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8rpx;
+ color: #ff3b30;
+ font-size: 24rpx;
+ font-weight: 500;
+ margin-bottom: 12rpx;
+ background: rgba(255, 59, 48, 0.05);
+ padding: 8rpx 0;
+ border-radius: 8rpx;
+}
+
/* 卡片预览 */
.card-preview {
margin: 30rpx auto 20rpx;