browser.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  8. <title>双子星浏览器</title>
  9. <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  10. <script src="../static/js/vender/vue/axios.min.js"></script>
  11. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  12. <script src="../static/js/vender/vue/vue.min.js"></script>
  13. <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  14. <script src="../static/js/vender/config.js"></script>
  15. <link rel="stylesheet" href="../static/css/browser.css">
  16. <script src="../static/js/vender/vue/config.js"></script>
  17. <script type="text/javascript">
  18. var deviveWidth = document.documentElement.clientWidth;
  19. document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px';
  20. </script>
  21. </head>
  22. <body>
  23. <div class="container">
  24. <div class="logo-row">
  25. <img class="logo" src="../static/img/browser/logo.png" />
  26. </div>
  27. <div class="search-wrap">
  28. <img class="search-icon" id="search-icon" src="../static/img/browser/search-icon.png" />
  29. <input class="ipt" id="ipt" placeholder="搜索或输入网址" />
  30. </div>
  31. <div class="tag-wrap" id="tag-wrap"></div>
  32. </div>
  33. <script type="text/javascript">
  34. const tagDom = document.getElementById("tag-wrap");
  35. (function(){
  36. init();
  37. })();
  38. function init(){
  39. $.ajax({
  40. url: `${baseUrl}/api/public/v1/browserPlate/client/query`,
  41. type: 'get',
  42. contentType:"application/json",
  43. dataType: 'json',
  44. cache: false,
  45. success: function (res) {
  46. let list = res.data;
  47. let node = '';
  48. for(let i=0; i < list.length; i++){
  49. node += `<div class="tag-item" data-plateName="${list[i].plateName}" data-id="${list[i].id}">
  50. <img class="icon-row" data-plateName="${list[i].plateName}" data-id="${list[i].id}" src=${fileCenterApi}/document/newFile/download/0/3dn9b4585511476691c6?fileKey=${list[i].iconImage} />
  51. <div class="icon-title" data-plateName="${list[i].plateName}" data-id="${list[i].id}">${list[i].plateName}</div>
  52. <img class="right-arrow" src="../static/img/browser/right-arrow.png" data-plateName="${list[i].plateName}" data-id="${list[i].id}" />
  53. </div>`
  54. }
  55. tagDom.innerHTML = node;
  56. }
  57. })
  58. };
  59. tagDom.addEventListener('click',(e)=>{
  60. let plateName = e.target.dataset.platename;
  61. let id = e.target.dataset.id;
  62. $.ajax({
  63. url: `${baseUrl}/api/public/v1/browserPlate/reportClickNum/${id}`,
  64. type: 'get',
  65. contentType:"application/json",
  66. dataType: 'json',
  67. cache: false,
  68. success: function (res) {
  69. if(res.status === 0){
  70. location.href = `./browserDetail.html?plateName=${encodeURIComponent(plateName)}&plateId=${id}`;
  71. }
  72. }
  73. })
  74. },false);
  75. //点击按钮搜索
  76. const searchDom = document.getElementById("search-icon");
  77. searchDom.addEventListener('click',()=>{
  78. var key = document.getElementById("ipt").value;
  79. var wd = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" + key;
  80. window.open(wd);
  81. },false);
  82. </script>
  83. </body>
  84. </html>