index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>验证</title>
  7. <style>
  8. .zl-row {
  9. display: flex;
  10. flex-wrap: wrap;
  11. }
  12. * {
  13. box-sizing: border-box;
  14. }
  15. .zl-col-6 {
  16. flex: 0 0 50%;
  17. max-width: 50%;
  18. padding: 0 8px;
  19. }
  20. .zl-table-height {
  21. height: calc(100vh - 32px);
  22. overflow: auto;
  23. }
  24. body {
  25. margin: 0;
  26. }
  27. .zl-code {
  28. height: calc(50vh - 30px);
  29. overflow: auto;
  30. }
  31. .zl-col-12 {
  32. flex: 0 0 100%;
  33. max-width: 100%;
  34. }
  35. .zl-tree {
  36. height: calc(50vh - 30px);
  37. }
  38. .zl-table-head {
  39. font-size: 1rem;
  40. height: 20px;
  41. line-height: 20px;
  42. border-left: 5px solid #686f72;
  43. padding-left: 7px;
  44. margin: 4px 0;
  45. }
  46. </style>
  47. <script src="./lib/popper-2.0.0/popper.js"></script>
  48. <script src="./lib/jquery3.7/jquery.js"></script>
  49. <link rel="stylesheet" href="./lib/devexpress/css/dx.light.css">
  50. <script src="./lib/devexpress/js/dx.all.js"></script>
  51. <script src="./lib/zlExpressEditor/monaco-editor/min/vs/loader.min.js"></script>
  52. <script src="./js/CodeEditor.js"></script>
  53. <script src="./lib/ast/astparser.js"></script>
  54. <script src="./js/AstHelper.js"></script>
  55. <script src="./js/index.js"></script>
  56. </head>
  57. <body>
  58. <div class="zl-container">
  59. <div class="zl-row">
  60. <div class="zl-col-6">
  61. <div class="zl-table-head">JS中过滤器清单</div>
  62. <div class="zl-table-height">
  63. <div class="table table-bordered" id="filterTable">
  64. </div>
  65. </div>
  66. </div>
  67. <div class="zl-col-6">
  68. <div class="zl-row">
  69. <div class="zl-col-12">
  70. <div class="zl-table-head">JS实现代码</div>
  71. <div class="zl-code" id="jscode"></div>
  72. </div>
  73. </div>
  74. <div class="zl-row">
  75. <div class="zl-col-12">
  76. <div class="zl-table-head">JS对应AST树</div>
  77. <div class="zl-tree">树形块</div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>