1<!DOCTYPE html> 2<html style="width:100%;height:100%;"> 3<style> 4 .tablet { 5 justify-content:space-around; 6 display:flex; 7 margin-left:130px; 8 margin-right:130px; 9 margin-top:90px; 10 flex-wrap: wrap 11 } 12 .searchArea { 13 min-width: 300px; 14 font-size: 1.9rem; 15 position: relative; 16 height: 53px; 17 margin: 0 auto; 18 box-shadow: 0 4px 10px rgb(0 0 0 / 10%); 19 width: 64%; 20 margin-top: 8%; 21 z-index: 4; 22 } 23 .searchFirm { 24 width: 33px; 25 height: 33px; 26 float: left; 27 border-top-left-radius: 8px; 28 border-bottom-left-radius: 8px; 29 position: absolute; 30 left: 10px; 31 z-index: 2; 32 } 33 .searchFirmIcon { 34 width: 20px; 35 height: 20px; 36 margin: 16px auto ; 37 cursor: pointer; 38 background-position: 24px -24px; 39 background-size: 20px; 40 background-repeat: no-repeat; 41 } 42 .sfBaidu { 43 background-position: 0 -40px; 44 } 45 46 #searchCon { 47 height: 100%; 48 background: transparent; 49 float: left; 50 border: none; 51 margin: 0 33px 0 0; 52 width: calc(100% - 80px); 53 font-size: 18px; 54 z-index: 2; 55 position: absolute; 56 right: 0; 57 outline: none; 58 } 59</style> 60<script> 61 function initPad() { 62 this.isPhone = false 63 func1() 64 } 65 function adapterDevice() { 66 console.info('function adapterDevice') 67 var v = document.querySelector('meta[name="viewport"]'); 68 if (v) { 69 v.setAttribute('content', 'width=720, user-scalable=yes'); 70 } else { 71 var m = document.createElement('meta'); 72 m.content='width=720, user-scalable=yes' 73 m.name='viewport'; 74 document.getElementsByTagName('head')[0].appendChild(m); 75 } 76 } 77 function func1() { 78 let array = [{src: "./bing.png", name:"必应", addr: "bing.com"}, 79 {src: "./12306.png", name: "12306", addr: "www.12306.cn"}, 80 {src: "./dianping.png", name: "大众点评", addr:"www.dianping.com"}, 81 {src: "./sina.png", name: "新浪新闻", addr:"news.sina.com.cn/"}, 82 {src: "./jingdong.png", name: "京东", addr:"www.jd.com"}, 83 {src: "./pinduoduo.png", name: "拼多多", addr:"www.pinduoduo.com"}, 84 {src: "./weibo.png", name:"微博", addr: "weibo.com/"}, 85 {src: "./taobao.png", name:"淘宝", addr: "www.tmall.com"}, 86 {src: "./weipinhui.png", name:"唯品会", addr:"www.vip.com"}, 87 {src: "./weixin.png", name:"微信阅读", addr:"weread.qq.com"}, 88 {src: "./zhihu.png", name:"知乎", addr:"www.zhihu.com"}, 89 {src: "./xiecheng.png", name:"携程", addr:"www.ctrip.com"},] 90 var div = document.getElementById("test") 91 div.className = isPhone ? "phone" : "tablet" 92 for(let i = 0; i < array.length; i++) { 93 let box = document.createElement("div") 94 box.style.display = 'flex' 95 box.style.flexDirection = 'column' 96 box.style.justifyContent = 'center' 97 box.style.alignItems = 'center' 98 box.style.height = '120px' 99 box.style.minWidth = '100px' 100 box.style.borderRadius = '15px' 101 box.addEventListener('touchstart', function(e){ 102 box.style.backgroundColor = '#e4e4e4' 103 }) 104 box.addEventListener('touchend', function(e){ 105 box.style.backgroundColor = '#00000000' 106 }) 107 let text = document.createElement('p') 108 text.innerHTML = array[i].name 109 text.style.fontSize = '13px' 110 text.style.fontWeight = 400 111 var image = new Image() 112 image.src = array[i].src 113 image.style.width = '48px' 114 image.style.height = '48px' 115 image.onclick = function() { 116 console.info('image.onclick') 117 etsObj.test(array[i].addr) 118 } 119 box.appendChild(image) 120 box.appendChild(text) 121 div.appendChild(box) 122 } 123 } 124 function uploadWord() { 125 let inputDom = document.getElementById("searchCon") 126 console.info(`pad inputDom.value=${inputDom.value}`) 127 etsObj.searchWord(inputDom.value) 128 } 129 </script> 130<body style="margin：0px; background-image: url(./backgroundImg.jpg); 131 background-size:cover;height:98% padding-bottom:60px" onload="initPad()"> 132<div style="display:flex;flex-direction:column;width:100%;padding-bottom:60px"> 133 <div class="searchArea" style="border-radius: 20px; display: block; background-color: rgba(255, 255, 255, 0.7);flex-shrink: 0;"> 134 <div class="searchFirm" style="border-bottom-left-radius: 8px; border-top-left-radius: 8px;"> 135 <div class="searchFirmIcon sfBaidu" style="background-image: url(./all.png);"> 136 </div> 137 </div> 138 <form autocomplete="off"> 139 <input id="searchCon" type="text" style="border-bottom-right-radius: 8px; 140 border-top-right-radius: 8px; text-align: left;"> 141 </form> 142 <div style="display:flex;height: 100%; width: 33px;position: absolute; right:9px; z-index: 3; 143 align-items: center;justify-content: center;" onclick="uploadWord()"> 144 <img src="./search.svg" style="width: 20px; height: 20px;"> 145 </div> 146 </div> 147 <div id = "test"></div> 148</div> 149</body > 150</html>
