<div id="layerControl" class="layerControl"> <div class="title"><label></label></div> <ul> <li> <select id="xj_type" class="xj_type"> <option value="anquan" selected>安全</option> <option value="shengchan">生产</option> </select> </li> <li> <input placeholder="巡检时间" id="routeDay" type="text" readonly="readonly" onClick="WdatePicker()" class="xj_time"/> <button οnclick="findRouteBytime();" class="xj_but">查询</button> </li> </ul> <div id="time1" οnclick="initRouteInfo(0,riqi)" class="xj_div"> <ul class="xj_ul"> <li class="xj_li"> <label>巡检日期:</label> <input id="xjrq1" style="width:130px" disabled="disabled"/> <label>已巡检数</label> <input id="yxjs1" style="width:50px" disabled="disabled"/> </li> <li class="xj_li"> <label>巡检时间</label> <input id="xjsj1" style="width:130px" disabled="disabled"/> <label>未巡检数</label> <input id="wxjs1" style="width:50px" disabled="disabled"/> </li> </ul> </div> <div id="time2" οnclick="initRouteInfo(1,riqi)" class="xj_div"> <ul class="xj_ul"> <li class="xj_li"> <label>巡检日期</label> <input id="xjrq2" style="width:130px" disabled="disabled"/> <label>已巡检数</label> <input id="yxjs2" style="width:50px" disabled="disabled"/> </li> <li class="xj_li"> <label>巡检时间</label> <input id="xjsj2" style="width:130px" disabled="disabled"/> <label>未巡检数</label> <input id="wxjs2" style="width:50px" disabled="disabled"/> </li> </ul> </div> <div id="time3" οnclick="initRouteInfo(2,riqi)" class="xj_div"> <ul class="xj_ul"> <li class="xj_li"> <label>巡检日期</label> <input id="xjrq3" style="width:130px" disabled="disabled"/> <label>已巡检数</label> <input id="yxjs3" style="width:50px" disabled="disabled"/> </li> <li class="xj_li"> <label>巡检时间</label> <input id="xjsj3" style="width:130px" disabled="disabled"/> <label>未巡检数</label> <input id="wxjs3" style="width:50px" disabled="disabled"/> </li> </ul> </div> <div id="time4" οnclick="initRouteInfo(3,riqi)" class="xj_div"> <ul class="xj_ul"> <li class="xj_li"> <label>巡检日期</label> <input id="xjrq4" style="width:130px" disabled="disabled"/> <label>已巡检数</label> <input id="yxjs4" style="width:50px" disabled="disabled"/> </li> <li class="xj_li"> <label>巡检时间</label> <input id="xjsj4" style="width:130px" disabled="disabled"/> <label>未巡检数</label> <input id="wxjs4" style="width:50px" disabled="disabled"/> </li> </ul> </div> <div id="time5" οnclick="initRouteInfo(4,riqi)" class="xj_div" style="display: none"> <ul class="xj_ul"> <li class="xj_li"> <label>巡检日期</label> <input id="xjrq5" style="width:130px" disabled="disabled"/> <label>已巡检数</label> <input id="yxjs5" style="width:50px" disabled="disabled"/> </li> <li class="xj_li"> <label>巡检时间</label> <input id="xjsj5" style="width:130px" disabled="disabled"/> <label>未巡检数</label> <input id="wxjs5" style="width:50px" disabled="disabled"/> </li> </ul> </div> </div>
<style> body,html { margin: 0px; padding: 0px; } .layerControl { position: absolute; bottom: 5px; min-width: 580px; max-height: 1031px; left: 20px; top: 75px; z-index: 2001; /*在地图容器中的层,要设置z-index的值让其显示在地图上层*/ color: #00ff00; background-color: #999999; background: url("${pageContext.request.contextPath}/resources/lib/gislib/imgs/xj_newframe.png"); border-width: 10px; /*边缘的宽度*/ border-radius: 10px; /*圆角的大小 */ border-color: #000 #000 #000 #000; /*边框颜色*/ } .layerControl .title { font-weight: bold; font-size: 18px; color: #00CC00; margin: 10px; } .layerTree li { list-style: none; margin: 5px 10px; } /* 鼠标位置控件层样式设置 */ #mouse-position { float: left; position: absolute; bottom: 5px; width: 200px; height: 20px; z-index: 2000; } /*巡检相关样式*/ .xj_but{ width: 60px; height: 42px; size: 20px; margin-left: 50px; /*圆角的大小 */ border-radius: 8px; /*背景颜色*/ background-color: #00FF00; /*边框颜色*/ border-color: #00FF00 #00FF00 #00FF00 #00FF00; } .xj_type{ width: 300px; height: 45px; size: 40px; font-size: 30px; margin-left: 55px; margin-top: 10px; /*圆角的大小 */ border-radius: 8px; } .xj_time{ width: 300px; height: 42px; size: 40px; font-size: 30px; margin-left: 55px; margin-top: 10px; /*圆角的大小 */ border-radius: 8px; } .xj_ul{ font-size: 25px; margin-left: 70px; } .xj_div{ width: 580px; height: 150px; /*margin-top: -13px;*/ padding-top: 18px; } .xj_li{ margin-top: 30px; } .xj_test { position: absolute; bottom: 5px; min-width: 580px; max-height: 1031px; right: 20px; top: 75px; z-index: 2001; /*在地图容器中的层,要设置z-index的值让其显示在地图上层*/ color: #00ff00; background-color: #999999; background: url("${pageContext.request.contextPath}/resources/lib/gislib/imgs/xj_frame.png"); border-width: 10px; /*边缘的宽度*/ border-radius: 10px; /*圆角的大小 */ border-color: #000 #000 #000 #000; /*边框颜色*/ } </style>
实现的页面效果如图: