refactor: inputs-config.js 合并为 config.js,新增默认背景图配置及使用说明
This commit is contained in:
@@ -176,7 +176,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||||||
<script src="./js/inputs-config.js"></script>
|
<script src="./js/config.js"></script>
|
||||||
<script src="./js/script.js"></script>
|
<script src="./js/script.js"></script>
|
||||||
<script src="./js/qr.js"></script>
|
<script src="./js/qr.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
// 输入框初始化配置 - 独立于主逻辑的配置文件
|
// ============================================
|
||||||
// 如需调整初始化位置或样式,请修改此文件
|
// 邀请函制作工具 - 全局配置文件
|
||||||
|
// 修改以下数值即可调整外观,无需改动代码
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// -------- 默认背景图 --------
|
||||||
|
// 修改为你的图片路径即可替换默认背景
|
||||||
|
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
|
||||||
|
|
||||||
|
// -------- 三个预设输入框的初始位置与样式 --------
|
||||||
var INPUTS_CONFIG = {
|
var INPUTS_CONFIG = {
|
||||||
"inputs": [
|
"inputs": [
|
||||||
{
|
{
|
||||||
@@ -22,7 +30,7 @@ var INPUTS_CONFIG = {
|
|||||||
"id": "input3",
|
"id": "input3",
|
||||||
"label": "编号",
|
"label": "编号",
|
||||||
"left": 100,
|
"left": 100,
|
||||||
"top": 306.4,
|
"top": 308.1,
|
||||||
"fontWeight": 700,
|
"fontWeight": 700,
|
||||||
"placeholder": "请输入"
|
"placeholder": "请输入"
|
||||||
}
|
}
|
||||||
@@ -804,9 +804,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载默认背景图
|
// 加载默认背景图(路径从 config.js 读取)
|
||||||
function loadDefaultBackground() {
|
function loadDefaultBackground() {
|
||||||
const defaultBgUrl = './images/default-bg.jpg';
|
const defaultBgUrl = typeof DEFAULT_BG_IMAGE !== 'undefined' ? DEFAULT_BG_IMAGE : './images/default-bg.jpg';
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
currentImage = img;
|
currentImage = img;
|
||||||
|
|||||||
152
使用说明.md
Normal file
152
使用说明.md
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
# 邀请函制作工具 - 使用与配置说明
|
||||||
|
|
||||||
|
> 以下操作,只需要用记事本打开文件、修改几个数字即可。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 一、调整三个输入框的位置
|
||||||
|
|
||||||
|
### 适用场景
|
||||||
|
|
||||||
|
打开页面后,输入框(企业、嘉宾、编号)的位置不满意,想上下左右调一调。
|
||||||
|
|
||||||
|
### 操作步骤
|
||||||
|
|
||||||
|
1. 用 **记事本** 打开 `js/config.js` 文件
|
||||||
|
|
||||||
|
2. 找到下半部分的 `INPUTS_CONFIG` 配置段:
|
||||||
|
|
||||||
|
```js
|
||||||
|
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. 找到文件开头的这一行:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
|
||||||
|
```
|
||||||
|
|
||||||
|
4. 改成你的图片路径:
|
||||||
|
|
||||||
|
```js
|
||||||
|
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"` 行,例如:
|
||||||
|
|
||||||
|
```js
|
||||||
|
"placeholder": "请输入"
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 改成你想要的文字,比如:
|
||||||
|
|
||||||
|
```js
|
||||||
|
"placeholder": "在此输入企业名称"
|
||||||
|
```
|
||||||
|
|
||||||
|
4. 保存文件,刷新页面
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
**Q:修改文件后页面没变化?**
|
||||||
|
A:先确认文件已保存,然后刷新浏览器页面(按 F5 或点浏览器的刷新按钮)。
|
||||||
|
|
||||||
|
**Q:改坏了怎么办?**
|
||||||
|
A:可以重新下载项目,或者联系开发者恢复。
|
||||||
|
|
||||||
|
**Q:找不到 `images` 文件夹?**
|
||||||
|
A:项目文件夹里如果没看到,自己新建一个名叫 `images` 的文件夹即可。
|
||||||
|
|
||||||
|
**Q:`config.js` 在哪里?**
|
||||||
|
A:在 `js` 文件夹里,打开后一眼就能看到全部配置项。
|
||||||
Reference in New Issue
Block a user