1<!DOCTYPE html> 2<html style="width:100%;height:100%;"> 3<style> 4 .phone { 5 justify-content:space-around; 6 display:flex; 7 margin-left:30px; 8 margin-right:30px; 9 margin-top:80px; 10 flex-wrap: wrap 11 } 12 .searchArea { 13 min-width: 150px; 14 font-size: 1.9rem; 15 position: relative; 16 height: 48px; 17 margin: 0 auto; 18 box-shadow: 0 4px 10px rgb(0 0 0 / 10%); 19 width: 80%; 20 margin-top: 26%; 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: 15px; 31 z-index: 2; 32 } 33 .searchFirmIcon { 34 width: 20px; 35 height: 20px; 36 margin: 13px 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% - 120px); 53 font-size: 26px; 54 z-index: 2; 55 position: absolute; 56 right: 0; 57 outline: none; 58 } 59</style> 60<script> 61 var isPhone = false; 62 function initPhone() { 63 console.info('function init') 64 this.isPhone = true 65 func1() 66 console.info('function init end') 67 } 68 function initPad() { 69 this.isPhone = false 70 func1() 71 } 72 function uploadWord() { 73 let inputDom = document.getElementById("searchCon") 74 console.info(`inputDom.value= ${inputDom.value}`) 75 etsObj.searchWord(inputDom.value) 76 } 77 78 function func1() { 79 let array = [{src: "./bing.png", name:"必应", addr: "bing.com"}, 80 {src: "./bilibili.png", name: "哔哩哔哩", addr: "www.bilibili.com"}, 81 {src: "./dianping.png", name: "大众点评", addr:"www.dianping.com"}, 82 {src: "./dongchedi.png", name:"懂车帝", addr:"www.dongchedi.com"}, 83 {src: "./jingdong.png", name: "京东", addr:"www.jd.com"}, 84 {src: "./pinduoduo.png", name: "拼多多", addr:"www.pinduoduo.com"}, 85 {src: "./sohu.png", name:"搜狐", addr: "www.sohu.com"}, 86 {src: "./weibo.png", name:"微博", addr: "weibo.com/"}, 87 {src: "./weipinhui.png", name:"唯品会", addr:"www.vip.com"}, 88 {src: "./yuedu.png", name:"阅读", addr:"m.zhangyue.com"}, 89 {src: "./zhihu.png", name:"知乎", addr:"www.zhihu.com"}, 90 {src: "./meituan.png", name:"美团", addr:"meituan.com"},] 91 var div = document.getElementById("test") 92 div.className = isPhone ? "phone" : "tablet" 93 for(let i = 0; i < array.length; i++) { 94 let box = document.createElement("div") 95 box.style.display = 'flex' 96 box.style.flexDirection = 'column' 97 box.style.justifyContent = 'center' 98 box.style.alignItems = 'center' 99 box.style.height = '120px' 100 box.style.minWidth = '120px' 101 box.style.borderRadius = '15px' 102 box.addEventListener('touchstart', function(e){ 103 box.style.backgroundColor = '#e4e4e4' 104 }) 105 box.addEventListener('touchend', function(e){ 106 box.style.backgroundColor = '#00000000' 107 }) 108 let text = document.createElement('p') 109 text.innerHTML = array[i].name 110 text.style.fontSize = '12px' 111 text.style.fontWeight = 400 112 var image = new Image() 113 image.src = array[i].src 114 image.style.width = '48px' 115 image.style.height = '48px' 116 image.onclick = function() { 117 console.info('image.onclick') 118 etsObj.test(array[i].addr) 119 } 120 box.appendChild(image) 121 box.appendChild(text) 122 div.appendChild(box) 123 } 124 125 } 126 127 function searchWord(e) { 128 console.info(`searchWord keyCode=${e.keyCode}`) 129 if (e.keyCode == 13) { 130 let inputDom = document.getElementById("searchCon") 131 console.info(`phone inputDom.value=${inputDom.value}`) 132 etsObj.searchWord(inputDom.value) 133 return true 134 } 135 } 136 </script> 137<body style="height:98%;margin：0px" onload="initPhone()"> 138<div style="display:flex;flex-direction:column;background-color:#fdfdfd;width:100%;height:100%"> 139 <div class="searchArea" style="border-radius: 60px; display: block; background-color: rgba(255, 255, 255, 0.7);flex-shrink: 0;"> 140 <div class="searchFirm" style="border-bottom-left-radius: 8px; border-top-left-radius: 8px;"> 141 <div class="searchFirmIcon sfBaidu" style="background-image: url(./all.png);"> 142 </div> 143 </div> 144 <form autocomplete="off"> 145 <input id="searchCon" onkeypress="return event.keyCode != 13;" type="text" autocomplete="off" onkeyup="searchWord(event)" 146 style="border-bottom-right-radius: 8px;border-top-right-radius: 8px; text-align: left;"> 147 </form> 148 <div style="display:flex;height: 100%; width: 33px;position: absolute; right:18px; z-index: 3; 149 align-items: center;justify-content: center;" onclick="uploadWord()"> 150 <img src="./search.svg" style="width: 20px; height: 20px;"> 151 </div> 152 </div> 153 <div id = "test"/> 154</div> 155</body > 156</html>
