@uni-sw/u-design 2.0.4

package/es/components/UVideo/VideoComponent/PtzControl/PtzControlPanel.less

@@ -0,0 +1,1447 @@
+@import '../../../../style/global.less';
+
+.ptzctr-panel {
+    position: absolute;
+    width: 432px;
+    height: 148px;
+    background: rgba(50, 50, 50, 1);
+    border-radius: 4px;
+    box-shadow: 1px 0px 1px rgba(58, 58, 58, 0.3);
+    z-index: 99;
+
+    //ptzctrPnl标题
+    .ptzctr-panel-title {
+        background: rgba(51, 51, 51, 1);
+        width: 100%;
+        height: 20px;
+        border-radius: 4px 4px 0px 0px;
+        box-shadow: 1px 0px 0px rgba(18, 18, 18, 1);
+        color: white;
+        font-size: 12px;
+        font-style: normal;
+
+        .ptzctr-panel-title-span1 {
+            position: absolute;
+            top: 9px;
+            left: 10px;
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+            color: @u-text-color-white;
+            line-height: 0px;
+        }
+
+        .ptzctr-panel-title-camname {
+            position: absolute;
+            top: 0px;
+            left: 38px;
+            width: 280px;
+            height: 20px;
+
+            .ptzctr-panel-title-span2 {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(171, 171, 171, 1);
+                line-height: 0px;
+                display: inline-block;
+            }
+
+            .ptzctr-panel-title-span3 {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(171, 171, 171, 1);
+                line-height: 0px;
+                padding-top: 7px;
+                height: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: inline-block;
+                max-width: 150px;
+                vertical-align: middle;
+            }
+
+            .ptzctr-panel-title-span4 {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(171, 171, 171, 1);
+                line-height: 0px;
+                display: inline-block;
+            }
+        }
+
+        .ptzctr-panel-title-lockdesc {
+            position: absolute;
+            top: 9px;
+            right: 68px;
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+            color: rgba(171, 171, 171, 1);
+            line-height: 0px;
+        }
+
+        .ptzctr-title-ptzicon {
+            .icon-lock {
+                position: absolute;
+                top: 2px;
+                right: 49px;
+                background: url('../../Images/ptz-icon16.png') no-repeat;
+                width: 16px;
+                height: 16px;
+                background-position: -240px 0px;
+            }
+
+            .icon-lock:hover {
+                background-position: -256px 0px;
+            }
+
+            .icon-lock:active {
+                background-position: -272px 0px;
+            }
+
+            .icon-unlock {
+                position: absolute;
+                top: 2px;
+                right: 49px;
+                background: url('../../Images/ptz-icon16.png') no-repeat;
+                width: 16px;
+                height: 16px;
+                background-position: -96px 0px;
+            }
+
+            .icon-unlock:hover {
+                background-position: -112px 0px;
+            }
+
+            .icon-unlock:active {
+                background-position: -128px 0px;
+            }
+
+            .icon-release {
+                position: absolute;
+                top: 2px;
+                right: 31px;
+                background: url('../../Images/ptz-icon16.png') no-repeat;
+                width: 16px;
+                height: 16px;
+                background-position: -976px 0px;
+            }
+
+            .icon-release:hover {
+                background-position: -992px 0px;
+            }
+
+            .icon-release:active {
+                background-position: -1008px 0px;
+            }
+        }
+
+        .ptzctr-panel-title-split {
+            position: absolute;
+            top: 0px;
+            right: 24px;
+            width: 1px;
+            height: 21px;
+            background: rgba(33, 33, 33, 1);
+        }
+
+        .ptzctr-title-formicon {
+            position: absolute;
+            display: inline-block;
+            right: 3px;
+
+            .icon-fixed {
+                width: 20px;
+                height: 20px;
+            }
+
+            .icon-close {
+                position: absolute;
+                top: 2px;
+                right: 3px;
+                background: url('../../Images/ptz-icon16.png') no-repeat;
+                width: 16px;
+                height: 16px;
+                background-position: -960px 0px;
+            }
+        }
+    }
+
+    .ptzctr-panel-body {
+        display: flex;
+        background-color: #333333;
+        width: 100%;
+        height: 116px;
+        background: rgba(41, 41, 41, 1);
+        border-radius: 4px 4px 0px 0px;
+        box-shadow: 1px 0px 0px rgba(39, 39, 39, 1);
+        border-top: solid 1px #121212;
+        border-bottom: solid 1px #121212;
+
+        .ptzctr-body-left {
+            width: 136px;
+            padding-left: 20px;
+            padding-right: 20px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            //position: relative;
+
+            //完整盘
+            .ptz-operateIcon-ptzpnlcon {
+                position: absolute;
+                top: 22px;
+                left: 14px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 110px;
+                height: 110px;
+                background-position: -880px 0px;
+            }
+
+            //方位图片
+            .ptz-operateIcon-MiddleOnIcon {
+                position: absolute;
+                top: 52px;
+                left: 42px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -768px 0px;
+            }
+
+            .ptz-operateIcon-MiddleOnIcon:active {
+                background-position: -824px 0px;
+            }
+
+            .ptz-operateIcon-TopOnIcon {
+                position: absolute;
+                top: 21px;
+                left: 46px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -240px 0px;
+            }
+
+            .ptz-operateIcon-TopOnIcon:active {
+                background-position: -624px 0px;
+            }
+
+            .ptz-operateIcon-TopRightOnIcon {
+                position: absolute;
+                top: 28px;
+                left: 73px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -336px 0px;
+            }
+
+            .ptz-operateIcon-TopRightOnIcon:active {
+                background-position: -720px 0px;
+            }
+
+            .ptz-operateIcon-RightOnIcon {
+                position: absolute;
+                top: 54px;
+                left: 81px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -432px 0px;
+            }
+
+            .ptz-operateIcon-RightOnIcon:active {
+                background-position: -48px 0px;
+            }
+
+            .ptz-operateIcon-BottomRightOnIcon {
+                position: absolute;
+                top: 81px;
+                left: 73px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 48px;
+                height: 48px;
+                background-position: -528px 0px;
+            }
+
+            .ptz-operateIcon-BottomRightOnIcon:active {
+                background-position: -144px 0px;
+            }
+
+            .ptz-operateIcon-BottomOnIcon {
+                position: absolute;
+                top: 88px;
+                left: 46px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -576px 0px;
+            }
+
+            .ptz-operateIcon-BottomOnIcon:active {
+                background-position: -192px 0px;
+            }
+
+            .ptz-operateIcon-LeftBottomOnIcon {
+                position: absolute;
+                top: 81px;
+                left: 20px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -480px 0px;
+            }
+
+            .ptz-operateIcon-LeftBottomOnIcon:active {
+                background-position: -96px 0px;
+            }
+
+            .ptz-operateIcon-LeftOnIcon {
+                position: absolute;
+                top: 56px;
+                left: 13px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -384px 0px;
+            }
+
+            .ptz-operateIcon-LeftOnIcon:active {
+                background-position: -0px 0px;
+            }
+
+            .ptz-operateIcon-TopLeftOnIcon {
+                position: absolute;
+                top: 29px;
+                left: 20px;
+                background: url('../../Images/ptz-dir-icon.png') no-repeat;
+                width: 50px;
+                height: 50px;
+                background-position: -288px 0px;
+            }
+
+            .ptz-operateIcon-TopLeftOnIcon:active {
+                background-position: -672px 0px;
+            }
+        }
+
+        .ptzctr-body-middle {
+            width: 100px;
+            //width: 67%;
+            position: relative;
+            display: inline-block;
+            line-height: 1;
+
+            //变倍/放大
+            .pzt-operateIcon-ptzZoom {
+                position: absolute;
+                top: 11px;
+                left: 26px;
+                width: 38px;
+                height: 21px;
+                background: rgba(65, 65, 65, 1);
+                box-shadow: 1px 0px 3px rgba(0, 0, 0, 1);
+
+                .pzt-operateIcon-ptzZoom-span1 {
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+
+                .pzt-operateIcon-ptzZoom-span2 {
+                    position: absolute;
+                    top: 11px;
+                    left: 7px;
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(189, 189, 189, 1);
+                    line-height: 0px;
+                }
+
+                .pzt-operateIcon-ptzZoom-span3 {
+                    position: absolute;
+                    top: 0px;
+                    left: 36px;
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+            }
+
+            .pzt-operateIcon-ptzZoomSubtractIcon {
+                position: absolute;
+                top: 6px;
+                left: 0px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1216px 0px;
+            }
+
+            .pzt-operateIcon-ptzZoomSubtractIcon:hover {
+                background-position: -1344px 0px;
+            }
+
+            .pzt-operateIcon-ptzZoomSubtractIcon:active {
+                background-position: -1280px 0px;
+            }
+
+            .pzt-operateIcon-ptzZoomAddIcon {
+                position: absolute;
+                top: 6px;
+                left: 58px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1248px 0px;
+            }
+
+            .pzt-operateIcon-ptzZoomAddIcon:hover {
+                background-position: -1376px 0px;
+            }
+
+            .pzt-operateIcon-ptzZoomAddIcon:active {
+                background-position: -1312px 0px;
+            }
+
+            //聚焦
+            .pzt-operateIcon-ptzForcus {
+                position: absolute;
+                top: 46px;
+                left: 26px;
+                width: 38px;
+                height: 21px;
+                background: rgba(65, 65, 65, 1);
+                box-shadow: 1px 0px 3px rgba(0, 0, 0, 1);
+
+                .pzt-operateIcon-ptzForcus-span1 {
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+
+                .pzt-operateIcon-ptzForcus-span2 {
+                    position: absolute;
+                    top: 11px;
+                    left: 7px;
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(189, 189, 189, 1);
+                    line-height: 0px;
+                }
+
+                .pzt-operateIcon-ptzForcus-span3 {
+                    position: absolute;
+                    top: 0px;
+                    left: 36px;
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+            }
+
+            .pzt-operateIcon-ptzForcusSubtractIcon {
+                position: absolute;
+                top: 41px;
+                left: 0px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1216px 0px;
+            }
+
+            .pzt-operateIcon-ptzForcusSubtractIcon:hover {
+                background-position: -1344px 0px;
+            }
+
+            .pzt-operateIcon-ptzForcusSubtractIcon:active {
+                background-position: -1280px 0px;
+            }
+
+            .pzt-operateIcon-ptzForcusAddIcon {
+                position: absolute;
+                top: 41px;
+                left: 58px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1248px 0px;
+            }
+
+            .pzt-operateIcon-ptzForcusAddIcon:hover {
+                background-position: -1376px 0px;
+            }
+
+            .pzt-operateIcon-ptzForcusAddIcon:active {
+                background-position: -1312px 0px;
+            }
+
+            //光圈
+            .pzt-operateIcon-ptzIris {
+                position: absolute;
+                top: 81px;
+                left: 26px;
+                width: 38px;
+                height: 21px;
+                background: rgba(65, 65, 65, 1);
+                box-shadow: 1px 0px 3px rgba(0, 0, 0, 1);
+
+                .pzt-operateIcon-ptzIris-span1 {
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+
+                .pzt-operateIcon-ptzIris-span2 {
+                    position: absolute;
+                    top: 11px;
+                    left: 7px;
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(189, 189, 189, 1);
+                    line-height: 0px;
+                }
+
+                .pzt-operateIcon-ptzIris-span3 {
+                    position: absolute;
+                    top: 0px;
+                    left: 36px;
+                    width: 1px;
+                    height: 21px;
+                    background: rgba(50, 50, 50, 1);
+                }
+            }
+
+            .pzt-operateIcon-ptzIrisSubtractIcon {
+                position: absolute;
+                top: 76px;
+                left: 0px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1216px 0px;
+            }
+
+            .pzt-operateIcon-ptzIrisSubtractIcon:hover {
+                background-position: -1344px 0px;
+            }
+
+            .pzt-operateIcon-ptzIrisSubtractIcon:active {
+                background-position: -1280px 0px;
+            }
+
+            .pzt-operateIcon-ptzIrisAddIcon {
+                position: absolute;
+                top: 76px;
+                left: 58px;
+                background: url('../../Images/ptz-icon32.png') no-repeat;
+                width: 32px;
+                height: 32px;
+                background-position: -1248px 0px;
+            }
+
+            .pzt-operateIcon-ptzIrisAddIcon:hover {
+                background-position: -1376px 0px;
+            }
+
+            .pzt-operateIcon-ptzIrisAddIcon:active {
+                background-position: -1312px 0px;
+            }
+        }
+
+        .ptzctr-body-right {
+            width: 168px;
+            //width: 67%;
+            //position:relative;
+            display: inline-block;
+            line-height: 1;
+
+            flex: 1;
+            width: calc(100vh - 240px);
+            height: 100%;
+            margin-right: 10px;
+
+            .ptzctr-body-right-tab {
+                height: 100%;
+                width: 168px;
+                color: rgba(189, 189, 189, 1);
+                position: absolute;
+                top: 30px;
+                left: 244px;
+
+                // .@{ud-prefix}-tabs-bar {
+                //     border-bottom: 0px solid #e8e8e8;
+                //     margin-bottom: 13px;
+
+                .@{ud-prefix}-tabs-ink-bar-animated {
+                    width: 0px !important;
+                }
+
+                .@{ud-prefix}-tabs-nav-container-scrolling {
+                    padding-left: 0px;
+                    padding-right: 0px;
+                }
+
+                // }
+
+                .@{ud-prefix}-tabs-nav {
+                    &::before {
+                        border-bottom: none;
+                    }
+
+                    .@{ud-prefix}-tabs-tab {
+                        padding: 1px 11px;
+                        margin: 0px;
+                        font-size: 12px;
+                    }
+                }
+
+                //不明白视觉图上干嘛非要加个椭圆背景，不难看么？？？
+                .@{ud-prefix}-tabs-nav .@{ud-prefix}-tabs-tab-active {
+                    background: #3ca0fe;
+                    border-radius: 12px;
+
+                    .@{ud-prefix}-tabs-tab-btn {
+                        color: @u-text-color-white;
+                    }
+                }
+
+                .@{ud-prefix}-select {
+                    color: #bdbdbd;
+
+                    .@{ud-prefix}-select-selector {
+                        height: 25px;
+                        border-radius: 0px;
+                        border-color: rgba(31, 31, 31, 1);
+                        background-color: #222222;
+
+                        .@{ud-prefix}-select-selection-search-input {
+                            height: 100%;
+                            line-height: 23px;
+                            margin-left: 0px;
+                            margin-right: 0px;
+                        }
+
+                        .@{ud-prefix}-select-selection-item {
+                            display: flex;
+                            align-items: center;
+                        }
+                    }
+
+                    .@{ud-prefix}-select-arrow {
+                        top: 13px;
+                        right: 4px;
+                        color: rgba(189, 189, 189, 1);
+                        box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.21);
+                    }
+                }
+
+                .@{ud-prefix}-select-dropdown {
+                    background-color: red;
+                }
+
+                //看守位
+                .ptz-guard {
+                    padding-top: 5px;
+
+                    .ptz-guard-span1 {
+                        font-size: 12px;
+                    }
+
+                    //Radio.Group
+                    .@{ud-prefix}-radio-group {
+                        vertical-align: text-bottom;
+
+                        .@{ud-prefix}-radio-wrapper {
+                            //font-size: 12px;
+                            line-height: 0px;
+                            margin-right: 0px;
+                            margin-left: 14px;
+                            border-radius: 2px;
+
+                            >span {
+                                padding-left: 0px;
+                                color: rgba(189, 189, 189, 1);
+                                font-size: 12px;
+                            }
+                        }
+                    }
+
+                    .ptz-guard-set {
+                        padding-top: 14px;
+                        font-size: 12px;
+                    }
+                }
+
+                //预置位-跳转
+                .ptzctr-preset-jumptoIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 6px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    background-position: -528px 0px;
+                    width: 16px;
+                    height: 16px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-preset-jumptoIcon:hover {
+                    background-position: -544px 0px;
+                }
+
+                .ptzctr-preset-jumptoIcon:active {
+                    background-position: -560px 0px;
+                }
+
+                //预置位-增加
+                .ptzctr-preset-addIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 24px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    background-position: -672px 0px;
+                    width: 16px;
+                    height: 16px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-preset-addIcon:hover {
+                    background-position: -688px 0px;
+                }
+
+                .ptzctr-preset-addIcon:active {
+                    background-position: -704px 0px;
+                }
+
+                //预置位-同步数据
+                .ptzctr-preset-synchrodataIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 42px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -432px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-preset-synchrodataIcon:hover {
+                    background-position: -448px 0px;
+                }
+
+                .ptzctr-preset-synchrodataIcon:active {
+                    background-position: -464px 0px;
+                }
+
+                //循环动图
+                .ptzctr-preset-synchrodata1Icon {
+                    position: relative;
+                    top: 23px;
+                    left: 50px;
+                    width: 16px;
+                    height: 16px;
+                    transform: translate(-50%, -50%);
+                    background: url('../../Images/ptz-synchro-icon.gif') no-repeat;
+                    display: inline-flex;
+                }
+
+                //预置位-删除
+                .ptzctr-preset-delIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 60px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -576px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-preset-delIcon:hover {
+                    background-position: -592px 0px;
+                }
+
+                .ptzctr-preset-delIcon:active {
+                    background-position: -608px 0px;
+                }
+
+                .ptzctr-preset-setguardIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 80px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -720px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-preset-setguardIcon:hover {
+                    background-position: -736px 0px;
+                }
+
+                .ptzctr-preset-setguardIcon:active {
+                    background-position: -752px 0px;
+                }
+
+                //巡航线-启动
+                .ptzctr-cruisr-startIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 6px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -144px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-cruisr-startIcon:hover {
+                    background-position: -160px 0px;
+                }
+
+                .ptzctr-cruisr-startIcon:active {
+                    background-position: -176px 0px;
+                }
+
+                .ptzctr-cruisr-stopIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 18px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -288px 0px;
+                    display: inline-flex;
+
+                    &:hover {
+                        background-position-x: -304px;
+                    }
+
+                    &:active {
+                        background-position-x: -320px;
+                    }
+                }
+
+                //巡航线-增加
+                .ptzctr-cruisr-addIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 32px;
+                    // left:36px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -672px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-cruisr-addIcon:hover {
+                    background-position: -688px 0px;
+                }
+
+                .ptzctr-cruisr-addIcon:active {
+                    background-position: -704px 0px;
+                }
+
+                //巡航线-录制
+                .ptzctr-cruisr-RecordIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 74px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -480px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-cruisr-RecordIcon:hover {
+                    background-position: -496px 0px;
+                }
+
+                .ptzctr-cruisr-RecordIcon:active {
+                    background-position: -512px 0px;
+                }
+
+                //巡航线-删除
+                .ptzctr-cruisr-delIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 46px;
+                    // left:67px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -576px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-cruisr-delIcon:hover {
+                    background-position: -592px 0px;
+                }
+
+                .ptzctr-cruisr-delIcon:active {
+                    background-position: -608px 0px;
+                }
+
+                //巡航线-编辑
+                .ptzctr-cruisr-editIcon {
+                    position: relative;
+                    top: 15px;
+                    left: 60px;
+                    // left:100px;
+                    background: url('../../Images/ptz-icon16.png') no-repeat;
+                    width: 16px;
+                    height: 16px;
+                    background-position: -192px 0px;
+                    display: inline-flex;
+                }
+
+                .ptzctr-cruisr-editIcon:hover {
+                    background-position: -208px 0px;
+                }
+
+                .ptzctr-cruisr-editIcon:active {
+                    background-position: -224px 0px;
+                }
+
+                .ptzctr-cruisr-editPlanIcon {
+                    //巡航计划编辑
+                    position: relative;
+                    top: 17px;
+                    left: 72px;
+                    background: url('../../Images/cruisePlan.png') no-repeat;
+                    width: 17px;
+                    height: 17px;
+                    display: inline-block;
+                    background-size: auto;
+                    background-position: center;
+
+                    &:hover {
+                        background-color: rgb(95, 141, 184);
+                    }
+
+                    &:active {
+                        background-color: rgb(43, 75, 105);
+                    }
+                }
+            }
+        }
+    }
+
+    //扩展面板
+    .ptzctr-panel-morefunction {
+        background-color: #222222;
+        width: 100%;
+        height: 90px;
+
+        .morefunction-span {
+            position: absolute;
+            top: 155px;
+            left: 71px;
+            font-size: 12px;
+            font-family: SimSun;
+            color: rgba(189, 189, 189, 1);
+            line-height: 0px;
+        }
+
+        //速度
+        .ptzctr-more-speed {
+            display: inline-block;
+            width: 200px;
+            //margin-bottom: 5px;
+            position: absolute;
+            top: 138px;
+            left: 150px;
+
+            .@{ud-prefix}-slider-rail {
+                height: 2px;
+                border-radius: 0px;
+            }
+
+            .@{ud-prefix}-slider-track {
+                height: 2px;
+                border-radius: 2px;
+                background-color: #3ca0fe;
+            }
+
+            .@{ud-prefix}-slider-step {
+                height: 2px;
+
+                .@{ud-prefix}-slider-dot {
+                    border-radius: 2px;
+                    width: 1px;
+                    height: 3px;
+                    top: -7px;
+                    border: 0px solid #e8e8e8;
+                    left: 2%;
+                    color: white;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                }
+
+                .@{ud-prefix}-slider {
+                    .@{ud-prefix}-slider-handle {
+                        width: 9px;
+                        height: 9px;
+                    }
+                }
+
+                .@{ud-prefix}-slider-track {
+                    height: 2px;
+                    background-color: white;
+                }
+            }
+
+            .@{ud-prefix}-slider-handle {
+                width: 11px;
+                height: 11px;
+                margin-top: -5px;
+                border: solid 5px #c9c7c7;
+                transform: translateX(0);
+            }
+
+            //mark
+            .@{ud-prefix}-slider-mark {
+                font-size: 10px;
+                top: 10px;
+
+                .@{ud-prefix}-slider-mark-text {
+                    color: rgba(255, 255, 255, 0.45) !important;
+                }
+            }
+        }
+
+        //光照
+        .pztctr-more-lightIcon {
+            position: absolute;
+            top: 187px;
+            left: 90px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -32px 0px;
+        }
+
+        .pztctr-more-lightIcon:hover {
+            background-position: -64px 0px;
+        }
+
+        .pztctr-more-lightIcon:active {
+            background-position: -96px 0px;
+        }
+
+        .pztctr-more-lightOnIcon {
+            position: absolute;
+            top: 187px;
+            left: 90px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -1152px 0px;
+        }
+
+        .pztctr-more-lightOnIcon:hover {
+            background-position: -1184px 0px;
+        }
+
+        .pztctr-more-lightOnIcon:active {
+            background-position: 0px 0px;
+        }
+
+        //雨刷
+        .pztctr-more-wiperIcon {
+            position: absolute;
+            top: 187px;
+            left: 163px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -224px 0px;
+        }
+
+        .pztctr-more-wiperIcon:hover {
+            background-position: -256px 0px;
+        }
+
+        .pztctr-more-wiperIcon:active {
+            background-position: -288px 0px;
+        }
+
+        .pztctr-more-wiperOnIcon {
+            position: absolute;
+            top: 187px;
+            left: 163px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -128px 0px;
+        }
+
+        .pztctr-more-wiperOnIcon:hover {
+            background-position: -160px 0px;
+        }
+
+        .pztctr-more-wiperOnIcon:active {
+            background-position: -192px 0px;
+        }
+
+        //红外
+        .pztctr-more-infraredIcon {
+            position: absolute;
+            top: 187px;
+            left: 235px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -416px 0px;
+        }
+
+        .pztctr-more-infraredIcon:hover {
+            background-position: -448px 0px;
+        }
+
+        .pztctr-more-infraredIcon:active {
+            background-position: -480px 0px;
+        }
+
+        .pztctr-more-infraredOnIcon {
+            position: absolute;
+            top: 187px;
+            left: 235px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -320px 0px;
+        }
+
+        .pztctr-more-infraredOnIcon:hover {
+            background-position: -352px 0px;
+        }
+
+        .pztctr-more-infraredOnIcon:active {
+            background-position: -384px 0px;
+        }
+
+        //加热
+        .pztctr-more-heatIcon {
+            position: absolute;
+            top: 187px;
+            left: 310px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -608px 0px;
+        }
+
+        .pztctr-more-heatIcon:hover {
+            background-position: -640px 0px;
+        }
+
+        .pztctr-more-heatIcon:active {
+            background-position: -672px 0px;
+        }
+
+        .pztctr-more-heatOnIcon {
+            position: absolute;
+            top: 187px;
+            left: 310px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -512px 0px;
+        }
+
+        .pztctr-more-heatOnIcon:hover {
+            background-position: -544px 0px;
+        }
+
+        .pztctr-more-heatOnIcon:active {
+            background-position: -576px 0px;
+        }
+
+        //除雪
+        .pztctr-more-snowIcon {
+            position: absolute;
+            top: 187px;
+            left: 314px;
+            background: url('../../Images/ptz-icon32.png') no-repeat;
+            width: 32px;
+            height: 32px;
+            background-position: -800px 0px;
+        }
+
+        .pztctr-more-snowIcon:hover {
+            background-position: -832px 0px;
+        }
+
+        .pztctr-more-snowIcon:active {
+            background-position: -864px 0px;
+        }
+    }
+
+    //底部折叠栏
+    .ptzctr-panel-bottom {
+        width: 100%;
+        height: 12px;
+        background: rgba(44, 44, 44, 1);
+        box-shadow: 1px 0px 0px rgba(18, 18, 18, 1);
+        border-top: solid 1px #121212;
+
+        //展开
+        .ptzctr-bottom-spreadIcon {
+            position: absolute;
+            top: 130px;
+            left: 205px;
+            background: url('../../Images/ptz-icon24.png') no-repeat;
+            width: 24px;
+            height: 24px;
+            background-position: -0px 0px;
+        }
+
+        .ptzctr-bottom-spreadIcon:hover {
+            background-position: -24px 0px;
+        }
+
+        .ptzctr-bottom-spreadIcon:active {
+            background-position: -48px 0px;
+        }
+
+        //收起
+        .ptzctr-bottom-retractIcon {
+            position: absolute;
+            top: 220px;
+            left: 205px;
+            background: url('../../Images/ptz-icon24.png') no-repeat;
+            width: 24px;
+            height: 24px;
+            background-position: -72px 0px;
+        }
+
+        .ptzctr-bottom-retractIcon:hover {
+            background-position: -96px 0px;
+        }
+
+        .ptzctr-bottom-retractIcon:active {
+            background-position: -120px 0px;
+        }
+    }
+}
+
+//设置看守位/设置预置位看守时间
+.ptzctr-setguardtime-main {
+    width: 100%;
+    height: 110px;
+
+    .setguardtime-span1 {
+        position: absolute;
+        top: 80px;
+        left: 55px;
+        width: 90px;
+        height: 11px;
+        font-size: 12px;
+    }
+
+    .setguardtime-input {
+        position: absolute;
+        top: 76px;
+        left: 140px;
+        width: 200px;
+        height: 25px;
+        line-height: 25px;
+        border-radius: 2px;
+        font-size: 12px;
+
+        .@{ud-prefix}-input-number-input {
+            width: 100%;
+            height: 23px;
+            border-radius: 2px;
+        }
+    }
+
+    .setguardtime-span2 {
+        position: absolute;
+        top: 80px;
+        left: 350px;
+        width: 90px;
+        height: 11px;
+        font-size: 12px;
+    }
+}
+
+.ptzctr-modal {
+    .@{ud-prefix}-modal-body {
+        display: flex;
+        align-items: center;
+    }
+
+    .@{ud-prefix}-modal-footer {
+        .@{ud-default-prefix}-btn {
+            &:first-child {
+                margin-right: 15px;
+            }
+        }
+    }
+}
+
+.ptzctr-cruisr-modal {
+    .@{ud-prefix}-modal-body {
+        padding: 0 !important;
+    }
+
+    .@{ud-prefix}-modal-footer {
+        .@{ud-default-prefix}-btn {
+            &:first-child {
+                margin-right: 15px;
+            }
+        }
+    }
+}
+
+.ptzctr-modal-prompt {
+    .@{ud-prefix}-modal-body {
+        min-height: auto;
+
+        .ptz-delprompt-main {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            .prompt-img {
+                width: 48px;
+                height: 48px;
+                background: url('../../Images/ptz-icon48.png') no-repeat;
+                width: 48px;
+                height: 48px;
+                background-position: -48px 0px;
+            }
+
+            .prompt-span {
+                width: 192px;
+                margin-bottom: 0;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .@{ud-prefix}-modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        border-top: none;
+        padding-top: 0;
+
+        .@{ud-default-prefix}-btn {
+            &:first-child {
+                margin-right: 15px;
+            }
+        }
+    }
+}
+
+.ptzctr-preset-delete {
+    .@{ud-prefix}-modal-footer {
+        .@{ud-default-prefix}-btn {
+            &:first-child {
+                margin-right: 15px;
+            }
+        }
+    }
+
+    .ptzctr-preset-delete-table {
+        flex: 1 1 auto;
+        overflow: hidden;
+        height: 400px;
+
+        .@{ud-prefix}-spin-nested-loading,
+        .@{ud-prefix}-spin-container,
+        .@{ud-prefix}-table-content,
+        .@{ud-prefix}-table-scroll {
+            height: 100%;
+        }
+
+        &.ptzctr-preset-table-no-source {
+            .@{ud-prefix}-table-body {
+                flex: inherit;
+            }
+
+            .@{ud-prefix}-table-placeholder {
+                flex: 1;
+
+                .@{ud-prefix}-empty {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    margin: 0;
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
+
+        .@{ud-prefix}-table-scroll {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .@{ud-prefix}-table {
+            height: 100%;
+            font-size: 12px;
+            // color: @u-text-color-third;
+        }
+
+        .@{ud-prefix}-table-header,
+        .@{ud-prefix}-table-body {
+            &::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: @u-text-color-scroll;
+                border: 1px solid @u-text-color-white;
+                border-radius: 10px;
+            }
+        }
+
+        .@{ud-prefix}-table-thead {
+            &>tr>th {
+                padding: 12px 16px;
+                background: #f7f8fa;
+                // color: #333333;
+            }
+
+            span {
+                word-break: keep-all;
+            }
+        }
+
+        .@{ud-prefix}-table-body {
+            flex: 1;
+        }
+
+        .@{ud-prefix}-table-tbody {
+            &>tr>td {
+                padding: 11px 16px;
+            }
+        }
+
+        .@{ud-prefix}-pagination {
+            float: none;
+            text-align: center;
+        }
+    }
+}
+
+.select-popup-class-name{
+    .@{ud-prefix}-select-item-empty{
+        .@{ud-prefix}-empty{
+            .@{ud-prefix}-empty-image{
+                .@{ud-prefix}-empty-img-simple{
+                    color: #bdbdbd;
+                }
+            }
+            .@{ud-prefix}-empty-description{
+                color: #bdbdbd;
+            }
+        }
+    }
+}