codedetail.html 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="divport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>JSTYLE精美</title>
  7. <link href="css/global.css?v=a54dd0df" rel="stylesheet"><link href="css/codedetail.css?v=a54dd0df" rel="stylesheet"></head>
  8. <body>
  9. <div class="maginfo">
  10. <img src='http://7.jstyle.cn/1/2019/03/06/91e4fb0f002311e72cd285706e71d800.jpg' />
  11. <div>
  12. <span>兑换码只能被激活一次,当您购买成功后,可进入小程序使用兑换码查看,若您购买了多本,可将剩余兑换码赠送好友。</span>
  13. <a href="#" node-act="read" class="button black">阅读</a>
  14. </div>
  15. </div>
  16. <div class="code-list">
  17. <div class='dl'>
  18. <div class='dd'>
  19. <div class='p'>
  20. <span class="ico-code"></span>兑换码:675386834</div>
  21. <span class="span" style="font-size:.37333rem">未使用</span>
  22. </div>
  23. <div class='dt'>
  24. <a href="javascript:;" class="button" node-id="copy" data-clipboard-text="675386834">复制</a>
  25. </div>
  26. </div>
  27. <div class='dl'>
  28. <div class='dd'>
  29. <div class='p'>
  30. <span class="ico-code"></span>兑换码:675386834</div>
  31. <span class="span used">已使用</span>
  32. </div>
  33. <div class='dt'>
  34. <div class="button disabled">复制</div>
  35. </div>
  36. </div>
  37. <div class='dl'>
  38. <div class='dd'>
  39. <div class='p'>
  40. <span class="ico-code"></span>兑换码:675386834</div>
  41. <span class="span used">已作废</text>
  42. </div>
  43. <div class='dt'>
  44. <div class="button disabled">复制</div>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="success fn-hide" id="success">复制成功</div>
  49. <div class="mask fn-hide" id="layer">
  50. <div class="layer read-layer">
  51. <div class="qrcode-wrap">
  52. <img src="images/qrcode.png" alt="" class="default" id="code">
  53. <p>长按识别小程序阅读电子刊</p>
  54. </div>
  55. <a href="javascript:;" class="btn-close" id="close"></a>
  56. </div>
  57. </div>
  58. <script type="text/javascript" src="js/global.js?v=a54dd0df"></script><script type="text/javascript" src="js/codedetail.js?v=a54dd0df"></script></body>
  59. <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
  60. <script>
  61. var timer;
  62. var clipboard = new ClipboardJS('[node-id="copy"]');
  63. clipboard.on('success', function (e) {
  64. $('#success').removeClass('fn-hide');
  65. clearTimeout(timer);
  66. timer = setTimeout(function () {
  67. $('#success').addClass('fn-hide');
  68. }, 3000)
  69. e.clearSelection();
  70. });
  71. $('[node-act="read"]').on('click', function () {
  72. $('#layer').show();
  73. })
  74. $('#close').on('click', function () {
  75. $('#layer').hide();
  76. });
  77. </script>
  78. </html>