85 lines
3.6 KiB
HTML
85 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>二维码生成器</title>
|
|
<link rel="stylesheet" href="./semantic.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
<script src="./jquery.min.js"></script>
|
|
<script src="./semantic.min.js"></script>
|
|
<script src="./qrcode.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="ui container">
|
|
<h2 class="ui blue header center aligned">二维码生成器</h2>
|
|
|
|
<div class="ui two column centered grid">
|
|
<div class="column">
|
|
<div class="ui fluid raised card">
|
|
<div class="content form-content">
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>二维码标题</label>
|
|
<input type="text" id="qrTitle" value="扫码签到">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>选择预定义内容</label>
|
|
<div class="ui fluid search selection dropdown" id="deptSelector">
|
|
<input type="hidden" name="department">
|
|
<div class="default text">选择或搜索科室</div>
|
|
<div class="menu"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="required field">
|
|
<label>输入内容</label>
|
|
<textarea id="qrContent" placeholder="请输入要生成二维码的内容"></textarea>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>底部文字</label>
|
|
<textarea id="centerText" placeholder="请输入要在二维码下方显示的文字"></textarea>
|
|
</div>
|
|
|
|
<div class="field button-container">
|
|
<div class="ui fluid buttons">
|
|
<button class="ui primary button" id="generateBtn">生成二维码</button>
|
|
<button class="ui button" id="printBtn">打印二维码</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui info message print-tips">
|
|
<div class="header">打印设置建议</div>
|
|
<ul class="list">
|
|
<li>纸张大小: A4</li>
|
|
<li>打印方式: 单面</li>
|
|
<li>缩放比例: 100%</li>
|
|
<li>边距: 无</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="ui fluid raised card preview-card">
|
|
<div class="content">
|
|
<div class="preview-paper">
|
|
<div class="preview-content">
|
|
<div id="qrcode"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="print-container" class="print-only"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|