云台控制界面

云台控制界面

<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;
}