云台控制界面
<div class="col-sm-3 col-xs-3 col-md-3">
<div>
<%-- <div >--%>
<%-- <a style="margin-left: 15px" id="ytkz" href="javascript:void(0)" title="云台控制"><img--%>
<%-- src="/static/img/ytkz.png" alt=""></a>--%>
<%-- <a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">云台控制</a>--%>
<%-- </div>--%>
<ul class='pie'>
<li class='slice-one slice'><a id="1" href="javascript:void(0)" title="向上"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-two slice'><a id="2" href="javascript:void(0)" title="右上"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-three slice'><a id="3" href="javascript:void(0)" title="向右"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-four slice'><a id="4" href="javascript:void(0)" title="右下"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-five slice'><a id="5" href="javascript:void(0)" title="向下"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-six slice'><a id="6" href="javascript:void(0)" title="左下"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-seven slice'><a id="7" href="javascript:void(0)" title="向左"><img
src="/static/img/icon.png" alt=""></a></li>
<li class='slice-eight slice'><a id="8" href="javascript:void(0)" title="左上"><img
src="/static/img/icon.png" alt=""></a></li>
<%-- <div class="center">--%>
<a class="center" href=""></a>
<%-- </div>--%>
</ul>
</div>
<div class="row">
<a style=" font-size: 20px;color: #0f0f0f ;text-decoration: none;">变倍:</a>
<a style="margin-left: 15px;margin-top: -5px" id="d" href="javascript:void(0)" title="放大"><img
src="/static/img/d.png" alt=""></a>
<a style="margin-left: 15px" id="x" href="javascript:void(0)" title="缩小"><img
src="/static/img/x.png" alt=""></a>
</div>
<div class="row" style="margin-top: 11px">
<a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">焦距:</a>
<a style="margin-left: 15px" id="y" href="javascript:void(0)" title="远焦距"><img
src="/static/img/y.png" alt=""></a>
<a style="margin-left: 15px" id="j" href="javascript:void(0)" title="近焦距"><img
src="/static/img/j.png" alt=""></a>
</div>
<div class="row" style="margin-top: 11px">
<a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">速度:</a>
<a style="margin-left: 15px" id="m" href="javascript:void(0)" title="慢"><img
src="/static/img/m.png" alt=""></a>
<a style="margin-left: 15px" id="z" href="javascript:void(0)" title="中"><img
src="/static/img/z.png" alt=""></a>
<a style="margin-left: 15px" id="k" href="javascript:void(0)" title="快"><img
src="/static/img/k.png" alt=""></a>
</div>
<div class="row" style="margin-top: 11px">
<a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">镜像:</a>
<a style="margin-left: 15px" id="sx" href="javascript:void(0)" title="上下"><img
src="/static/img/sx1.png" alt=""></a>
<a style="margin-left: 15px" id="zx" href="javascript:void(0)" title="中心"><img
src="/static/img/zx1.png" alt=""></a>
<a style="margin-left: 15px" id="zy" href="javascript:void(0)" title="左右"><img
src="/static/img/zy2.png" alt=""></a>
</div>
<div class="row" >
<div>
<a style="margin-left: 15px" id="yzd" href="javascript:void(0)" title="预置点"><img
src="/static/img/ysd.png" alt=""></a>
<a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">预置点</a>
</div>
<div class="table-responsive " style="height: 150px">
<table class="table table-hover">
<%-- <caption>--%>
<%-- <a style="margin-left: 15px" id="yzd" href="javascript:void(0)" title="预置点"><img--%>
<%-- src="/static/img/ysd.png" alt=""></a>--%>
<%-- <a style="font-size: 20px;color: #0f0f0f;;text-decoration: none;">预置点</a>--%>
<%-- </caption>--%>
<thead>
<tr>
<th>序号</th>
<th>预置点名称</th>
<th>操作</th>
</tr>
</thead>
.pie {
position: relative;
margin: 8px auto;
padding: 0;
width: 170px;
height: 170px;
border-radius: 50%;
list-style: none;
overflow: hidden;
background: url('/static/img/bg1.png') no-repeat center center / 100% 100%;
}
.center {
position: absolute;
width: 70px;
height: 70px;
top: 51px;
left: 51px;
border-radius: 50%;
background: url('/static/img/paly1.png') no-repeat center center / 60% 60%;
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
.slice-one {
transform: rotate(329deg) skewY(-45deg);
}
.slice-one img {
transform: skewY(45deg) rotate(31deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-two {
transform: rotate(18deg) skewY(-45deg);
}
.slice-two img {
transform: skewY(45deg) rotate(32deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-three {
transform: rotate(63deg) skewY(-45deg);
}
.slice-three img {
transform: skewY(45deg) rotate(27deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-four {
transform: rotate(104deg) skewY(-45deg);
}
.slice-four img {
transform: skewY(45deg) rotate(31deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-five {
transform: rotate(148deg) skewY(-45deg);
}
.slice-five img {
transform: skewY(45deg) rotate(33deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-six {
transform: rotate(192deg) skewY(-45deg);
}
.slice-six img {
transform: skewY(45deg) rotate(33deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-seven {
transform: rotate(236deg) skewY(-45deg);
}
.slice-seven img {
transform: skewY(45deg) rotate(34deg);
margin-top: 50px;
margin-left: 17px;
}
.slice-eight {
transform: rotate(280deg) skewY(-45deg);
}
.slice-eight img {
transform: skewY(45deg) rotate(32deg);
margin-top: 50px;
margin-left: 17px;
}