userManual.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta
  7. name="viewport"
  8. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
  9. />
  10. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico" />
  11. <title>双子星</title>
  12. <link rel="stylesheet" href="../static/css/normalize-8.0.1.css" />
  13. <script src="../static/js/vender/vue/vue.min.js"></script>
  14. <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script> -->
  15. <!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script> -->
  16. <script src="../static/js/vender/config.js"></script>
  17. <script src="../static/js/tailwindcss/v3.0.24/index.js"></script>
  18. <script>
  19. tailwind.config = {
  20. theme: {},
  21. corePlugins: {
  22. preflight: false,
  23. },
  24. };
  25. </script>
  26. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  27. <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css" />
  28. <script src="../static/js/vender/toastr/toastr.min.js"></script>
  29. <script>
  30. toastr.options.positionClass = 'toast-center-center';
  31. </script>
  32. <style>
  33. [v-cloak] {
  34. display: none;
  35. }
  36. @media screen and (max-width: 750px) {
  37. html {
  38. font-size: calc(100vw / 7.5);
  39. }
  40. }
  41. @media screen and (min-width: 750px) {
  42. html {
  43. font-size: calc(750px / 7.5);
  44. }
  45. }
  46. .phone-container {
  47. color: #333333;
  48. line-height: 1.5;
  49. }
  50. .user-Agreement-content {
  51. font-size: 0.28rem;
  52. line-height: 1.5;
  53. text-align: justify;
  54. }
  55. h1 {
  56. font-size: 0.32rem;
  57. }
  58. h2 {
  59. font-size: 0.31rem;
  60. }
  61. h3 {
  62. font-size: 0.3rem;
  63. }
  64. h4 {
  65. font-size: 0.29rem;
  66. }
  67. h5 {
  68. font-size: 0.28rem;
  69. }
  70. h6 {
  71. font-size: 0.27rem;
  72. }
  73. .phone-container p {
  74. font-size: 0.28rem;
  75. color: #333;
  76. }
  77. </style>
  78. </head>
  79. <body>
  80. <div v-cloak id="app">
  81. <h1 class="text-center mt-2">{{title}}</h1>
  82. <div class="p-2 phone-container" v-html="content"></div>
  83. </div>
  84. <script src="../static/js/vender/vue/axios.min.js"></script>
  85. <script src="../static/js/vender/vue/config.js"></script>
  86. <script src="../static/js/vender/vue/api.js"></script>
  87. <script type="text/javascript">
  88. Vue.config.errorHandler = function (err, vm, info) {
  89. toastr.error(err.message);
  90. return false;
  91. };
  92. new Vue({
  93. el: '#app',
  94. data: {
  95. title: '',
  96. content: '',
  97. },
  98. computed: {},
  99. methods: {},
  100. mounted() {
  101. service
  102. .get('/api/public/v5/agreementApi/content/getContentByType', {
  103. params: {
  104. agreementCoding: 'XYPZYHXY2004',
  105. type: 1,
  106. },
  107. })
  108. .then(
  109. (response) => {
  110. this.title = response.data.agreementName;
  111. const html = document.createElement('html');
  112. html.innerHTML = response.data.content;
  113. const phoneContainers =
  114. html.querySelectorAll('.phone-container');
  115. if (phoneContainers.length > 0) {
  116. this.content = phoneContainers.item(
  117. phoneContainers.length - 1,
  118. ).innerHTML;
  119. } else {
  120. this.content = response.data.content;
  121. }
  122. },
  123. (error) => {
  124. toastr.error(err.message);
  125. },
  126. );
  127. },
  128. errorCaptured(err, vm, info) {
  129. toastr.error(err.message);
  130. return false;
  131. },
  132. });
  133. </script>
  134. </body>
  135. </html>