invitation-maker/使用说明.md

邀请函制作工具 - 使用与配置说明

以下操作，只需要用记事本打开文件、修改几个数字即可。

---

一、调整三个输入框的位置

适用场景

打开页面后，输入框（企业、嘉宾、编号）的位置不满意，想上下左右调一调。

操作步骤

1. 用 记事本 打开 js/config.js 文件

2. 找到下半部分的 INPUTS_CONFIG 配置段：

var INPUTS_CONFIG = {
  "inputs": [
    {
      "id": "input1",         // ← 第一个输入框（企业）
      "left": 100,            // ← 距离左边多少像素
      "top": 218.4            // ← 距离顶部多少像素
    },
    {
      "id": "input2",         // ← 第二个输入框（嘉宾）
      "left": 100,
      "top": 261.4
    },
    {
      "id": "input3",         // ← 第三个输入框（编号）
      "left": 100,
      "top": 308.1
    }
  ]
};

3. 修改数字即可：

   • left：数字越大，输入框越靠右；数字越小，越靠左
   • top：数字越大，输入框越靠下；数字越小，越靠上

   小技巧：在页面上选中输入框，会显示它的坐标，复制数字填进来即可。

4. 保存文件，然后刷新页面，效果就会生效。

---

二、更换默认背景图片

适用场景

打开页面时自动显示的那张背景图想换成自己的图片。

操作步骤

方法一（推荐）—— 替换图片文件：

1. 准备一张你想要的图片（建议用 JPG 格式）
2. 把图片放到 images 文件夹里，重命名为 default-bg.jpg

   如果原来有一张，会提示"替换文件"，点击确定即可。

3. 刷新页面，新背景图就会自动加载

方法二—— 修改配置文件路径：

1. 把你的图片放到 images 文件夹，比如命名为 my-bg.png
2. 用记事本打开 js/config.js
3. 找到文件开头的这一行：

var DEFAULT_BG_IMAGE = './images/default-bg.jpg';

4. 改成你的图片路径：

var DEFAULT_BG_IMAGE = './images/my-bg.png';

5. 保存文件，刷新页面

---

三、修改输入框的文字粗细

适用场景

想让输入框的文字更粗或更细。

操作步骤

1. 用记事本打开 js/config.js

2. 找到 "fontWeight": 700 这一行

3. 修改数字（范围 400 ~ 900）：

数值	效果
400	正常粗细
500	中等
600	半粗
700	加粗（默认）
800	更粗
900	最粗

4. 保存文件，刷新页面

---

四、修改输入框的占位提示文字

适用场景

想把"请输入"改成其他提示语。

操作步骤

1. 用记事本打开 js/config.js

2. 找到相应的 "placeholder" 行，例如：

"placeholder": "请输入"

3. 改成你想要的文字，比如：

"placeholder": "在此输入企业名称"

4. 保存文件，刷新页面

---

常见问题

Q：修改文件后页面没变化？ A：先确认文件已保存，然后刷新浏览器页面（按 F5 或点浏览器的刷新按钮）。

Q：改坏了怎么办？ A：可以重新下载项目，或者联系开发者恢复。

Q：找不到 images 文件夹？ A：项目文件夹里如果没看到，自己新建一个名叫 images 的文件夹即可。

Q：config.js 在哪里？ A：在 js 文件夹里，打开后一眼就能看到全部配置项。