iosEnter.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  8. <link rel="stylesheet" href="../static/js/vender/bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="../static/css/experience2.css">
  10. <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
  11. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  12. <script src="../static/js/vender/bootstrap/js/bootstrap.min.js"></script>
  13. <script src="../static/js/vender/toastr/toastr.min.js"></script>
  14. <script src="../static/js/vender/config.js"></script>
  15. <script>
  16. toastr.options.positionClass = 'toast-center-center';
  17. </script>
  18. </head>
  19. <div class="container">
  20. <div class="index-icon" id="index-phone">
  21. <img class="img" src="../static/img/iosEnter/index-phone.png" />
  22. <img class="entry" src="../static/img/iosEnter/entry.png" />
  23. </div>
  24. <div class="index-icon" id="index-what">
  25. <img class="img" src="../static/img/iosEnter/index-what.png" />
  26. </div>
  27. </div>
  28. <script type="text/javascript" th:inline="javascript">
  29. let node = document.getElementById('index-what');
  30. let phone = document.getElementById('index-phone');
  31. let currIosVersionNumber = navigator.userAgent.split('iosVersionNumber/')[1];
  32. let serveIosVersionNumber = '';
  33. //获取版本号
  34. function switchControl(){
  35. $.ajax({
  36. url: baseUrl + '/api/public/v4/access/user/switchControl',
  37. type: 'get',
  38. contentType:"application/json",
  39. dataType: 'json',
  40. cache: false,
  41. success: function (res) {
  42. serveIosVersionNumber = res.data.iosVersionNumber;
  43. let result = versionStringCompare(currIosVersionNumber, serveIosVersionNumber);
  44. if(result === 1) {
  45. phone.style.display = 'none';
  46. } else {
  47. phone.style.display = 'block';
  48. }
  49. }
  50. })
  51. }
  52. switchControl();
  53. node.addEventListener('click', () => {
  54. window.location.href = 'https://www.baidu.com/'
  55. })
  56. phone.addEventListener('click', () => {
  57. window.location.href = baseUrl + '/cloud/phone/web/#/pages/index/index'
  58. })
  59. function versionStringCompare(preVersion='', lastVersion='') {
  60. var sources = preVersion.split('.');
  61. var dests = lastVersion.split('.');
  62. var maxL = Math.max(sources.length, dests.length);
  63. var result = 0;
  64. for (let i = 0; i < maxL; i++) {
  65. let preValue = sources.length>i ? sources[i]:0;
  66. let preNum = isNaN(Number(preValue)) ? preValue.charCodeAt() : Number(preValue);
  67. let lastValue = dests.length>i ? dests[i]:0;
  68. let lastNum = isNaN(Number(lastValue)) ? lastValue.charCodeAt() : Number(lastValue);
  69. if (preNum < lastNum) {
  70. result = -1;
  71. break;
  72. } else if (preNum > lastNum) {
  73. result = 1;
  74. break;
  75. }
  76. }
  77. return result;
  78. }
  79. </script>
  80. </body>
  81. <style>
  82. .container{
  83. width: 100%;
  84. height: 100vh;
  85. padding-top: 0.2rem;
  86. display: flex;
  87. flex-direction: column;
  88. align-items: center;
  89. background-color: rgba(16, 16, 16, 1);
  90. }
  91. .index-icon{
  92. width: 6.5rem;
  93. height: 2.28rem;
  94. margin-top: 0.36rem;
  95. position: relative;
  96. }
  97. .img{
  98. width: 100%;
  99. height: 100%;
  100. }
  101. #index-phone{
  102. display: none;
  103. }
  104. .entry{
  105. width: 2.08rem;
  106. height: 1.28rem;
  107. position: absolute;
  108. top: 0.32rem;
  109. right: 0.4rem;
  110. }
  111. #toast-container>.toast-error {
  112. background-image: none !important;
  113. }
  114. .toast-error {
  115. background-color: rgba(0, 0, 0, 0.8);
  116. }
  117. #toast-container>div {
  118. font-size: 14px;
  119. min-width: 80px !important;
  120. padding: 12px !important;
  121. box-shadow: none;
  122. }
  123. @media (max-width: 480px) and (min-width: 241px) {
  124. #toast-container>div {
  125. min-width: 80px !important;
  126. width: auto;
  127. }
  128. }
  129. @media only screen and (min-width: 640px) {
  130. .toast-center-center {
  131. top: 50%;
  132. left: 50%;
  133. transform: translate(-50%, -50%);
  134. }
  135. }
  136. @media only screen and (max-width: 640px) {
  137. .toast-center-center {
  138. top: 50%;
  139. left: 50%;
  140. transform: translate(-50%, -50%);
  141. }
  142. }
  143. input::-webkit-input-placeholder {
  144. color: #BBBBBB;
  145. }
  146. input::-moz-placeholder {
  147. /* Mozilla Firefox 19+ */
  148. color: #BBBBBB;
  149. }
  150. input:-moz-placeholder {
  151. /* Mozilla Firefox 4 to 18 */
  152. color: #BBBBBB;
  153. }
  154. input:-ms-input-placeholder {
  155. /* Internet Explorer 10-11 */
  156. color: #BBBBBB;
  157. }
  158. </style>
  159. </html>