HTML层:
<div id="basicInformationBox" class="tab-panel-parent1 common-hide1"> <div class=u-tab1> <span class='u-tab-btn1 active1' >基本情况</span> </div> <div id="shipDetailPanel1" class="tab-panel-child1 active1"> <table> <tr> <td> <div class="lonLatPicture"> <span class="boat"></span> <span class="bow"></span> <span class="shipTraceDirection"></span> <span class="waveHeight"></span> <span class="flowVelocity"></span> </div> </td> <td> 更新时间:<td id="1"></td> 船舶名称:<td id="2"></td> 船舶名称:<td id="3"></td> 船舶名称:<td id="4"></td> </td> <td> <div class="bow"></div> <p>船首向</p> <div class="shipTraceDirection"></div> <p>船迹向</p> <div class="windDirection"></div> <p>风向风速(KTS)</p> <div class="waveHeight"></div> <p>浪向浪高(有效浪高)</p> <div class="flowVelocity"></div> <p>流向流速(KTS)</p> </td> </tr> </table> </div> </div>
js代码:
basicInformationBox = layer.open({ type : 1, shade : 0, closeBtn : 1, btnAlign : 'c', resize : false, //move : true, fixed: false, offset : [ '100px', '255px' ], area : '430px', maxmin : false, title : shipObj.shipname, //btn : [ '关闭' ], content : $("#basicInformationBox"), success : function(layerdom, index) { }, end : function() { closeShipLineForCustomShip(shipDetailBoxVM.shipObj.imo); CustomAndSelectedAisShipFeatureLayer && CustomAndSelectedAisShipFeatureLayer.removeSelected(); } });
css代码:
#basicInformationBox .bow{ background-image: url(../../img/index/bow.png); } #basicInformationBox .bow { height: 12px; width: 38px; } #basicInformationBox .windDirection{ background-image: url(../../img/index/wind23-27right.png); } #basicInformationBox .windDirection { height: 28px; width: 38px; } #basicInformationBox .shipTraceDirection{ background-image: url(../../img/index/shipTraceDirection.png); } #basicInformationBox .shipTraceDirection{ height:12px; width:38px; } #basicInformationBox .lonLatPicture{ background-image: url(../../img/index/lonLat.png); } #basicInformationBox .lonLatPicture{ height:258px; width:268px; position:relative; } #basicInformationBox .flowVelocity{ background-image: url(../../img/index/flowVelocity.png); } #basicInformationBox .flowVelocity{ height:28px; width:23px; } #basicInformationBox .waveHeight{ background-image: url(../../img/index/waveHeight.png); } #basicInformationBox .waveHeight{ height:12px; width:38px; } #basicInformationBox .boat{ background-image: url(../../img/index/boat.png); } #basicInformationBox .boat{ height:82px; width:19px; } .lonLatPicture .boat{ position: absolute; left: 50%; top: 50%; margin-left: 3px; margin-top: 5px; transform: rotate(34deg); } .lonLatPicture .bow{ position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: 5px; transform: rotate(50deg); } .lonLatPicture .waveHeight{ position: absolute; left: 65%; top: 26%; transform: rotate(138deg); } .lonLatPicture .flowVelocity{ position: absolute; left: 27%; top: 63%; } #shipDetailPanel1 td{ position: relative; }