WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化背景图滑动逻辑，确保居中显示、左右滑动完整，全内容可拖动到预览区

Browse Source
This commit is contained in:
Zhukj
2026-04-15 15:42:58 +08:00
parent e377aaf73c
commit c54050ff79
4 changed files with 313 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -16,13 +16,20 @@
<!-- 图片展示区 -->
<div class="canvas-area" id="canvasArea">
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
<div class="image-container empty" id="imageContainer">
<img id="bgImage" src="" alt="背景图">
<!-- 文字输入框1 -->
<div class="text-input" id="input1" contenteditable="false" style="left: 60%; top: 75%;">姓名</div>
<!-- 文字输入框2 -->
<div class="text-input" id="input2" contenteditable="false" style="left: 60%; top: 85%;">编号</div>
<div class="preview image-container empty" id="imageContainer">
<!-- 提示文字移到预览白板中 -->
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
<!-- 背景图层 -->
<div class="preview-bg-layer" id="bgLayer">
<img id="bgImage" src="" alt="背景图">
</div>
<!-- 输入框图层 -->
<div class="preview-input-layer">
<!-- 文字输入框1 - 右下角 -->
<div class="text-input" id="input1" contenteditable="false" style="left: 5%; top: 80%;">姓名：</div>
<!-- 文字输入框2 - 右下角 -->
<div class="text-input" id="input2" contenteditable="false" style="left: 5%; top: 90%;">编号：</div>
</div>
</div>
</div>