商丘市柘城县——前端

conDetail.html 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../Script/Common/huayi.load.js"></script>
  6. <script src="../Script/Common/huayi.config.js"></script>
  7. <title></title>
  8. <style>
  9. .diff-wrapper > div, .diff-wrapper {
  10. height: 100%;
  11. }
  12. .diff-wrapper p {
  13. font-size: 14px;
  14. color: #7a7a7a;
  15. margin-bottom: 10px;
  16. font-weight: 600;
  17. }
  18. .original, .changed, .diff1 {
  19. font-size: 12px;
  20. color: #7b8a97;
  21. margin-top: 0;
  22. margin-bottom: 0;
  23. line-height: 25px;
  24. word-break: break-all;
  25. word-wrap: break-word;
  26. background: #f5f5f5;
  27. height: 90%;
  28. padding: 5px;
  29. }
  30. .diff-wrapper {
  31. padding-top: 20px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="container-fluid diff-wrapper">
  37. <div class="before col-md-4">
  38. <p>修改前内容</p>
  39. <div class="original"></div>
  40. </div>
  41. <div class="after col-md-4">
  42. <p>修改后内容</p>
  43. <div class="changed">
  44. </div>
  45. </div>
  46. <div class="col-md-4">
  47. <p>修改前后对比结果 ( <span style="font-size: 12px; color: red;">注: 红色为已删除 绿色为新增</span>)</p>
  48. <div class="diff1">
  49. </div>
  50. </div>
  51. </div>
  52. <script src="../js/content.min.js?v=1.0.0"></script>
  53. <script src="../js/plugins/diff_match_patch/diff_match_patch.js"></script>
  54. <script src="../js/plugins/preetyTextDiff/jquery.pretty-text-diff.min.js"></script>
  55. <script>
  56. var bef = $('#pre', parent.document).val();
  57. var aft = $('#aft', parent.document).val();
  58. bef = decodeURIComponent(bef) ;
  59. aft = decodeURIComponent(aft);
  60. $('.original').html(bef);
  61. $('.changed').html(aft);
  62. $(document).ready(function () {
  63. $(".diff-wrapper").prettyTextDiff({
  64. diffContainer: ".diff1"
  65. });
  66. })
  67. </script>
  68. </body>
  69. </html>