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

feat: 优化三个文本框显示逻辑，改为添加背景图后自动显示

Browse Source
This commit is contained in:
Zhukj
2026-04-20 11:05:19 +08:00
parent 58558a2bc6
commit 92397b5e00
3 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/style.css
View File

@@ -414,6 +414,11 @@ html, body {
cursor: grabbing; cursor: grabbing;
} }
/* 隐藏元素 */
.hidden {
display: none !important;
}
/* 隐藏空提示 */ /* 隐藏空提示 */
.empty-tip.hidden { .empty-tip.hidden {
display: none; display: none;

8
index.html
View File

@@ -84,13 +84,13 @@
<div class="guide-line guide-horizontal" id="guideH"></div> <div class="guide-line guide-horizontal" id="guideH"></div>
<div class="guide-line guide-vertical" id="guideV"></div> <div class="guide-line guide-vertical" id="guideV"></div>
<!-- 输入框图层 --> <!-- 输入框图层 -->
<div class="preview-input-layer"> <div class="preview-input-layer" id="previewInputLayer">
<!-- 文字输入框1 - 企业 --> <!-- 文字输入框1 - 企业 -->
<div class="text-input" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div> <div class="text-input hidden" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div>
<!-- 文字输入框2 - 姓名 --> <!-- 文字输入框2 - 姓名 -->
<div class="text-input" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div> <div class="text-input hidden" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div>
<!-- 文字输入框3 - 编号 --> <!-- 文字输入框3 - 编号 -->
<div class="text-input" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div> <div class="text-input hidden" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div>
</div> </div>
<!-- 提示文字（最上层，层叠图之下） --> <!-- 提示文字（最上层，层叠图之下） -->
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div> <div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>

12
js/script.js
View File

@@ -239,12 +239,24 @@
bgOpacitySlider.value = 100; bgOpacitySlider.value = 100;
bgOpacityValue.textContent = '100%'; bgOpacityValue.textContent = '100%';
updateBgImage(); updateBgImage();
// 显示预设的文本输入框
showPresetTextInputs();
}; };
img.src = e.target.result; img.src = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
// 显示预设的文本输入框
function showPresetTextInputs() {
[input1, input2, input3].forEach(inputEl => {
if (inputEl) {
inputEl.classList.remove('hidden');
}
});
}
// 添加文本输入框 // 添加文本输入框
function addTextInput() { function addTextInput() {
const container = imageContainer; const container = imageContainer;