1
0

index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>二维码生成工具</title>
  5. <meta charset="UTF-8">
  6. <link rel="stylesheet" href="index.css" />
  7. <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
  8. <script type="text/javascript" src="../static/vendor/require/require.js"></script>
  9. <script type="text/javascript" src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
  10. <script type="text/javascript" src="../static/vendor/jquery/jquery.colorpicker.js"></script>
  11. <script type="text/javascript" src="../static/vendor/jquery/jquery.qrcode.min.js"></script>
  12. </head>
  13. <body>
  14. <div class="wrapper" id="pageContainer">
  15. <div class="panel panel-default" style="margin-bottom: 0px;">
  16. <div class="panel-heading">
  17. <span class="x-tips" title="在网页二维码上右击,在FeHelper菜单中点击:二维码解码">★温馨提示:在网页右键菜单中已增加<i>「二维码解码」</i>功能</span>
  18. <h3 class="panel-title">
  19. <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
  20. <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:二维码生成器</h3>
  21. </div>
  22. </div>
  23. <div class="panel-body mod-json">
  24. <div class="row">
  25. <textarea class="form-control mod-textarea" id="codeSource" ref="codeSource" v-model="textContent" placeholder="在这里填写需要生成二维码的任意内容"></textarea>
  26. </div>
  27. <div class="row ui-mt-10">
  28. <div class="ui-d-ib x-sizes">
  29. 尺寸:<input name="opt_width" type="text" id="opt_width" v-model="qrSize" size="4" maxlength="4"/>
  30. </div>
  31. <div class="ui-d-ib x-colors">
  32. 颜色:<input type="text" id="opt_fc" v-model="qrColor" size="10" />
  33. </div>
  34. <div class="radio ui-d-ib x-icons">
  35. 图标:<label><input id="remove_icon" name="qr_icon" type="radio" value="no" v-model="useIcon" @click="convert()">不要</label>
  36. </div>
  37. <div class="radio ui-d-ib ui-ml-10">
  38. <label><input id="default_icon" name="qr_icon" type="radio" value="default" v-model="useIcon" @click="convert()">默认</label>
  39. </div>
  40. <div class="radio ui-d-ib ui-ml-10">
  41. <label><input id="upload_icon" name="qr_icon" type="radio" value="custom" v-model="useIcon" @click="$refs.fileBox.click()">上传</label>
  42. (提示:支持直接拖拽一个图标到页面)
  43. </div>
  44. <button id="confirm_button" class="btn btn-success ui-fl-r" @click="convert()">生成QR图</button>
  45. </div>
  46. <div class="row ui-mt-20">
  47. <h4>结果</h4>
  48. <hr class="x-hr"/>
  49. <div id="preview"></div>
  50. </div>
  51. </div>
  52. <div class="x-logo">
  53. <img src="../static/img/fe-48.png" alt="#" id="logo_default" ref="logoDefault"/>
  54. <img src="../static/img/fe-48.png" alt="#" id="logo" ref="logoCustom"/>
  55. <form action="#">
  56. <input type="file" id="file" ref="fileBox" accept=".jpg,.jpeg,.gif,.png,.bmp" @change="fileChanged($event)">
  57. </form>
  58. </div>
  59. </div>
  60. <script type="text/javascript" src="index.js"></script>
  61. </body>
  62. </html>