min-height: calc(100vh - 10.07142857rem);
         background: @main_background_color;
         margin: 1.14285714rem;
    }
}
 ._LocalVideo_ {
     padding-top: inherit;
     .play-content{
         width: calc(100% - 17.14285714rem);
         float: left;
         height: 100%;
         .video-content {
             height: calc(100% - 5.71428571rem);
             min-height: calc(77vh - 5.71428571rem);
             background:@btnHoverColorNo2;
             text-align: center;
             padding-top: 20%;
        }
         .touchbar {
             position: relative;
             height: 2.85714286rem;
             line-height: 2.14285714rem;
             padding:0.35714286rem 0;
             background: linear-gradient(#f8f8f6, #cccdcf);
             .touchbar-center {
                 text-align: center;
                 span {
                     margin-left:1.78571429rem;
                }
                 background: rgba(0, 0, 0, 0.1);
            }
             .touchbar-right {
                 text-align: right;
                 span {
                     margin-right: 1.07142857rem;
                }
            }
             .touchbar-btn{
                 button{
                     float: right;
                }
            }
             i{
                 margin-left:1.78571429rem;
            }
        }
    }
}
 ._VideoReplay_ {
     padding-top: inherit;
     padding: 0 1.07142857rem;
     height: calc(100vh - 10.00000000rem);
     background: @contentBgColorNo15;
     .title {
         padding-left: 0.71428571rem;
         line-height: 2.85714286rem;
         border-bottom: 0.07142857rem solid @listBorderColorNo8;
    }
     ._VideoSearch_ {
         float: left;
         width: 16.42857143rem;
         height: 100%;
         min-height: 86vh;
         border-right:0.07142857rem solid @listBorderColorNo8;
         .device-list {
             .channels {
                 width: 16.42857143rem;
                 margin-top: 0.71428571rem;
                 height: 18.57142857rem;
                 border-bottom: 0.07142857rem solid @listBorderColorNo8;
            }
             .channel-list {
                 padding-left: 1.42857143rem;
                 line-height: 2.50000000rem;
            }
             .myicon-boll {
                 font-size: 1.14285714rem;
            }
        }
         .condition {
             padding: 0 0.71428571rem;
             .ant-select, .ant-calendar-picker, .ant-btn {
                 width: 100%;
                 margin-top:0.71428571rem;
            }
        }
    }
     ._VideoList_ {
         float: left;
         width: calc(100% - 16.42857143rem);
         height: 100%;
         overflow-x: hidden;
         .title {
             padding-left: 0.71428571rem;
             line-height: 2.85714286rem;
             border-bottom: 0.07142857rem solid @listBorderColorNo8;
        }
         .ant-btn-link {
             color: @textColorNo5;
        }
    }
     .playbtn {
         position: absolute;
         left: 50%;
         top: 50%;
         margin-top: -3.64285714rem;
         margin-left: -2.50000000rem;
         width: 5.00000000rem;
         height: 5.00000000rem;
         cursor: pointer;
         span {
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -1.07142857rem;
             margin-top: -1.07142857rem;
             display: inline-block;
             width: 2.14285714rem;
             height: 2.14285714rem;
             background: @opaqueBalck;
             border-radius: 50%;
             line-height: 2.14285714rem;
             text-align: center;
             color: #fff;
        }
    }
     .result-list {
         width: 100%;
         height: calc(100% - 10.00000000rem);
         overflow-y: auto;
         .ant-spin {
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -0.71428571rem;
             margin-top: -0.89285714rem;
        }
         .result-item {
             position: relative;
             margin-left: 1.14285714rem;
             margin-top: 1.14285714rem;
             float: left;
             width: calc(14.29% - 1.33214286rem);
             min-width: 9.14285714rem;
             .imgbox {
                 display: inline-block;
                 width: 100%;
                 min-height: 3.57142857rem;
                 box-sizing: border-box;
                 &.selected {
                     outline: 0.14285714rem solid @btnHoverColorNo2;
                }
                 img {
                     width: 100%;
                }
            }
             .type {
                 font-size: @font-size-base;
                 height: 1.50000000rem;
            }
             .playtime {
                 position: absolute;
                 right: 0.71428571rem;
                 top: 5.00000000rem;
                 font-size: 0.85714286rem;
                 color:#fff;
                 label {
                     vertical-align: 0.14285714rem;
                }
            }
             .time {
                 color: @disableColorNo7;
                 font-size: @font-size-base 
            }
             .result-item-checkbox {
                 position: absolute;
                 left: 0.42857143rem;
                 top: 0.21428571rem;
            }
             .ant-checkbox-wrapper + span {
                 padding-right: 0.00000000rem;
                 padding-left: 0.00000000rem;
            }
        }
    }
     .playBack-video {
         height: calc(100% - 5.71428571rem);
         min-height: calc(77vh - 5.71428571rem);
         background:@btnHoverColorNo2;
         text-align: center;
         padding-top: 20%;
    }
     .record-mark {
         margin-right: 0.35714286rem;
         display: inline-block;
         width: 0.57142857rem;
         height: 0.57142857rem;
         border-radius: 50%;
         &.Timing {
             background: #52c41a;
        }
         &.Event {
             background: #fcac15;
        }
         &.AlarmLocal {
             background: #f5222d;
        }
         &.Alarm {
             background: #f5222d;
        }
         &.Manual {
             background: #00FFF7;
        }
    }
     ._VideoPlay_ {
         height: 100%;
         .video-list {
             width: 17.14285714rem;
             height: 100%;
             line-height: 2.14285714rem;
             float: left;
             ul {
                 height: calc(100% - 2.85714286rem);
                 overflow-y: auto;
            }
             li {
                 margin-top: 0.57142857rem;
                 line-height: 1.85714286rem;
                 padding-left: 0.71428571rem;
                 .time {
                     font-size: 0.85714286rem;
                     color: @disableColorNo7;
                     margin-left: 0.85714286rem;
                }
                 &.active, &:hover {
                     background:@secondNavHoverColorNo14;
                     color: @linkColorNo20;
                }
            }
        }
         .play-content{
             width: calc(100% - 17.14285714rem);
             float: left;
             height: 100%;
             .touchbar {
                 position: relative;
                 height: 2.85714286rem;
                 line-height: 2.14285714rem;
                 padding:0.35714286rem 0.71428571rem;
                 background: linear-gradient(#f8f8f6, #cccdcf);
                 .touchbar-left {
                     span {
                         margin-left: 1.07142857rem;
                    }
                }
                 .touchbar-center {
                     text-align: center;
                     span {
                         margin-left:1.78571429rem;
                    }
                     background: rgba(0, 0, 0, 0.1);
                     border-radius: 0.28571429rem;
                }
                 .touchbar-right {
                     text-align: right;
                     span {
                         margin-right: 1.07142857rem;
                    }
                }
                 .voice {
                     display: inline-block;
                     width: 7.85714286rem;
                     margin: 0;
                     margin-left: 1.07142857rem;
                     margin-bottom: 0.07142857rem;
                }
                 .ant-slider-track {
                     background: @linkColorNo20;
                }
                 .touchbar-icon {
                     vertical-align: -0.3em;
                }
                 .anticon{
                     margin-right: 1.14285714rem;
                     font-size: 1.42857143rem;
                     &:hover{
                         color: @btnNormalColorNo1;
                    }
                }
            }
        }
    }
}
 .ant-calendar-markDate{
     position: relative;
     &:after {
         position: absolute;
         bottom: 0.35714286rem;
         content: ' ';
         width: 0.35714286rem;
         height: 0.35714286rem;
         border-radius: 50%;
         background: @btnHoverColorNo2;
         left:50%;
         top: 1.35714286rem;
         margin-left: -0.21428571rem;
    }
}
 .videoSearch-select{
     .record-mark {
         margin-right: 0.35714286rem;
         display: inline-block;
         width: 0.57142857rem;
         height: 0.57142857rem;
         border-radius: 50%;
         &.Timing {
             background: #52c41a;
        }
         &.Event {
             background: #fcac15;
        }
         &.Alarm {
             background: #f5222d;
        }
         &.Manual {
             background: #00FFF7;
        }
    }
     .detail-event{
         padding-left: 2.50000000rem;
    }
}
 ._PluginManage_ {
     padding-left: 20 / @px-unit;
     width: 100%;
     .show-title {
         font-size: 14 / @px-unit;
         font-weight: 700;
         height: 32 / @px-unit;
         line-height: 32 / @px-unit;
    }
     .ant-table {
         border: none;
    }
     .detail-container {
         padding: 16 / @px-unit;
         background-color: @bodyBgColorNo16;
    }
     .detail-bg {
         background-color: @secondNavBgColorNo13;
         height: 294 / @px-unit;
         padding: 24 / @px-unit 32 / @px-unit;
    }
     .detail-title {
         font-weight: 700;
         height: 32 / @px-unit;
         line-height: 32 / @px-unit;
    }
     .detail-content-container {
         margin-top: 12 / @px-unit;
    }
     .detail-text {
         height: 32 / @px-unit;
         line-height: 32 / @px-unit;
         margin-top: 16 / @px-unit;
    }
     .container-title {
         font-weight: 700;
         height: 32 / @px-unit;
         line-height: 32 / @px-unit;
         border-bottom: 0.07142857rem solid @bodyBgColorNo16;
         padding: 0 12 / @px-unit;
    }
     .container-box {
         border: 0.07142857rem solid @bodyBgColorNo16;
    }
     .container {
         padding: 24 / @px-unit 16 / @px-unit 20 / @px-unit;
    }
     .state-color0 {
         color: @successColorNo19;
    }
     .state-color1 {
         color: @errorColorNo17;
    }
     .state-color2 {
         color: @warnColorNo18;
    }
     .state-color3 {
         color: @warnColorNo18;
    }
     .state-color4 {
         color: @errorColorNo17;
    }
     .state-color5 {
         color: @disableColorNo7;
    }
}
 @Length0: 0/@px-unit;
 @Length1: 1/@px-unit;
 @Length2: 2/@px-unit;
 @Length4: 4/@px-unit;
 @Length5: 5/@px-unit;
 @Length8: 8/@px-unit;
 @Length9: 9/@px-unit;
 @Length10: 10/@px-unit;
 @Length11: 11/@px-unit;
 @Length12: 12/@px-unit;
 @Length14: 14/@px-unit;
 @Length16: 16/@px-unit;
 @Length20: 20/@px-unit;
 @Length24: 24/@px-unit;
 @Length25: 25/@px-unit;
 @Length28: 28/@px-unit;
 @Length31: 31/@px-unit;
 @Length32: 32/@px-unit;
 @Length40: 40/@px-unit;
 @Length48: 48/@px-unit;
 @Length54: 54/@px-unit;
 @Length60: 60/@px-unit;
 @Length64: 64/@px-unit;
 @Length68: 68/@px-unit;
 @Length90: 90/@px-unit;
 @Length92: 92/@px-unit;
 @Length100: 100/@px-unit;
 @Length105: 105/@px-unit;
 @Length106: 106/@px-unit;
 @Length110: 110/@px-unit;
 @Length120: 120/@px-unit;
 @Length132: 132/@px-unit;
 @Length150: 150/@px-unit;
 @Length152: 152/@px-unit;
 @Length158: 168/@px-unit;
 @Length160: 160/@px-unit;
 @Length154: 154/@px-unit;
 @Length156: 156/@px-unit;
 @Length157: 157/@px-unit;
 @Length170: 170/@px-unit;
 @Length178: 178/@px-unit;
 @Length183: 183/@px-unit;
 @Length190: 190/@px-unit;
 @Length200: 200/@px-unit;
 @Length207: 207/@px-unit;
 @Length240: 240/@px-unit;
 @Length250: 250/@px-unit;
 @Length281: 281/@px-unit;
 @Length316: 316/@px-unit;
 @Length340: 340/@px-unit;
 @Length356: 356/@px-unit;
 @Length360: 360/@px-unit;
 @Length364: 364/@px-unit;
 @Length372: 372/@px-unit;
 @Length380: 380/@px-unit;
 @Length338: 338/@px-unit;
 @Length440: 440/@px-unit;
 @Length460: 460/@px-unit;
 @Length500: 500/@px-unit;
 @Length507: 507/@px-unit;
 @Length515: 515/@px-unit;
 @Length517: 517/@px-unit;
 @Length519: 519/@px-unit;
 @Length525: 525/@px-unit;
 @Length529: 529/@px-unit;
 @Length830: 830/@px-unit;
 @Length979: 979/@px-unit;
 ._Preview_ {
     padding: 0 @Length10;
     height: calc(100vh - @Length64);
     .flex-row {
         display: flex;
         flex-direction: row;
    }
     .p-top{
         display: flex;
         justify-content: space-between;
         ._TopBar_{
             .active{
                 color: @btnNormalColorNo1;
            }
             .anticon{
                 height: @Length48;
                 font-size: @Length24;
                 display: inline-block;
                 margin-right: 12/@px-unit;
                 padding-top: 3/@px-unit;
                 &:hover{
                     color: @btnNormalColorNo1;
                }
                 &.anticon-down {
                     margin-right: 0;
                     font-size: inherit;
                     padding-top: 18/@px-unit;
                }
            }
        }
    }
     .p-con{
         height: calc(100% - @Length48);
         .p-right{
             position: relative;
             width: 100%;
             height: 100%;
             &[supportleftbar=true] {
                 width: calc(100% - @Length240);
            }
             .videoWrap {
                 width: 100%;
                 height: 100%;
                 background-color: @gravel;
                 &[previewmode=normal] {
                     width: 50%;
                     &[supportquickconfig=false] {
                         width: 40%;
                    }
                     height: 500/@px-unit;
                }
                 &[previewmode=ivs] {
                     width: calc(100% - @Length360);
                     height: calc(100% - @Length240);
                }
                 &[previewmode=ivs2] {
                     position: absolute;
                     left: 0;
                     top: 0;
                     width: 51.8%;
                     height: 59.2%;
                }
                 .video{
                     width: 100%;
                     text-align: center;
                     height: 452/@px-unit;
                     &[previewmode=ivs] {
                         height: calc(100% - @Length48);
                    }
                     &[previewmode=fullView] {
                         height: calc(100% - @Length48);
                    }
                     &[previewmode=ivs2] {
                         height: 100%;
                    }
                }
                 .actionBar{
                     position: relative;
                     box-sizing: border-box;
                     z-index: 2;
                     ._BottomBar_ {
                         padding-left: @Length16;
                         background-color: @gravel;
                         color: white;
                         height: @Length48;
                         &[originsize=true] {
                             width: 100vw;
                        }
                         &[previewmode=ivs2] {
                             height: @Length0;
                        }
                    }
                     .active{
                         color: @btnNormalColorNo1;
                    }
                     .anticon{
                         display: inline-block;
                         font-size: @Length24;
                         line-height: @Length48;
                         margin-right: @Length16;
                         &:hover{
                             color: @btnNormalColorNo1;
                        }
                         &.anticon-fullscreen{
                             margin-right: 0;
                        }
                    }
                     .ai-button {
                         top: 10/@px-unit;
                         margin-right: 16/@px-unit;
                         .anticon{
                             height: 20/@px-unit;
                             margin: 0;
                        }
                         span:nth-child(1) {
                             position: relative;
                             top: -10/@px-unit;
                        }
                         span:nth-child(2) {
                             position: relative;
                             top: -14/@px-unit;
                        }
                    }
                     .itemDetail {
                         color: black;
                         background: @homePageNo1;
                         border-radius: @Length10;
                         padding: 4/@px-unit 12/@px-unit;
                         margin: 0 8/@px-unit 0 -8/@px-unit;
                         max-width: 200/@px-unit;
                         .anticon {
                             position: relative;
                             width: @Length24;
                             cursor: pointer;
                             margin: 0;
                        }
                         span:not(.anticon) {
                             margin-right: 8/@px-unit;
                             cursor: pointer;
                        }
                    }
                     ._AILineBar_ {
                         height: @Length48;
                         font-size: 14/@px-unit;
                         color: #fff;
                    }
                }
            }
        }
    }
     ._TopBar_{
         > div {
             float: right;
        }
         > span {
             float: right;
        }
         .recordWrap {
             > span {
                 float: left;
            }
             > div {
                 float: left;
            }
             margin-right: 0 !important;
        }
         .SnapSwitch {
             > div {
                 float: left;
            }
             margin-right: 10/@px-unit !important;
        }
         & > span:first-child {
             margin-right: 0;
        }
         .anticon:not(.anticon-down){
             font-size: @Length24;
             line-height: @Length48;
        }
         .status-button {
             margin-top: 8/@px-unit;
             margin-right: 8/@px-unit;
        }
    }
     .p-left-collapse{
         position: fixed;
         width: @Length240;
         bottom: 0;
         border-right: none;
         border-left: none;
         .ant-collapse-header{
             padding-left: @Length16;
             .ant-collapse-arrow {
                 right: @Length16;
                 text-align: right;
            }
        }
         .ant-collapse-content-box{
             padding: @Length16;
        }
         button {
             width: 100/@px-unit;
        }
         .min-button {
             width: 60/@px-unit;
             padding: 0;
        }
    }
     .p-channel-collapse {
         .ant-collapse-header {
             border-bottom: 1/@px-unit solid #d9d9d9;
             margin-bottom: 6/@px-unit;
        }
         .ant-collapse-item{
             border: none;
        }
         .ant-collapse-content-box{
             padding: 0;
        }
    }
     .p-zoomFoucs {
         .step{
             text-align: center;
             border: 1/@px-unit solid @dividerColorNo9;
             border-radius: 4/@px-unit;
             cursor: pointer;
             >.ant-col{
                 border-right: 0.07142857rem solid @dividerColorNo9;
                 &:first-child{
                     border-radius: 4/@px-unit 0 0 4/@px-unit;
                }
                 &:last-child{
                     border-radius: 0 4/@px-unit 4/@px-unit 0;
                }
            }
             .active{
                 border: 1/@px-unit solid @linkColorNo20;
                 color: @linkColorNo20;
            }
        }
         .point{
             margin-top: @Length10;
        }
         .plate-check {
             div {
                 margin-bottom: @Length10;
            }
             label {
                 width: 110/@px-unit;
                 text-overflow: ellipsis;
                 text-align: left;
                 display: inline-block;
            }
        }
         .check-tip {
             color: @errorColorNo17;
        }
    }
     .p-channels {
         .stream {
             float: right;
             width: @Length20;
             height: @Length20;
             text-align: center;
             border: 1/@px-unit solid @btnNormalColorNo1;
             color: @btnNormalColorNo1;
             line-height: 18/@px-unit;
             font-size: 12/@px-unit;
             border-radius: 3/@px-unit;
        }
         .channel-item {
             cursor: pointer;
             padding: 5/@px-unit 0;
             &:hover{
                 background-color: @secondNavHoverColorNo14;
                 color: @btnNormalColorNo1;
            }
        }
    }
     ._CarouselPreview_ {
         background-color: @contentBgColorNo15;
         width: calc(100% - @Length372);
         height: @Length240;
         .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
             height: @Length240;
             .m-mr-12;
        }
         .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
             height: @Length240;
             width: @Length160;
             .m-mr-12;
        }
         .tab-style {
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);
             height: @Length240;
             div {
                 width: 100%;
                 height: 30/@px-unit;
                 line-height: 30/@px-unit;
                 text-align: center;
                 .m-mt-12;
            }
             .box-time {
                 width: @Length160;
            }
             .box-Pic {
                 width: @Length160;
                 height: 100/@px-unit;
                 img {
                     width: 100%;
                     height: 100%;
                }
            }
             .box-PicPlate {
                 width: @Length160;
                 height: 60/@px-unit;
                 img {
                     width: 100%;
                     height: 100%;
                }
            }
        }
         .ant-tabs-nav .ant-tabs-tab .anticon {
             margin-right: 0;
        }
         .ant-tabs-nav {
             height: 100%;
        }
         .ant-tabs-tab {
             height: @Length240;
             width: @Length160;
             .m-mr-12;
        }
         .ant-tabs-nav-operations {
             button {
                 display: none;
            }
        }
         .ant-tabs-nav-operations:after {
             width: 14/@px-unit;
             margin: 110/@px-unit 8/@px-unit 0 8/@px-unit;
             content: "...";
        }
    }
     ._CarouselDetail_ {
         position: absolute;
         height: 100%;
         width: @Length360;
         left: calc(100% - @Length360);
         top: 0;
         background-color: @contentBgColorNo15;
         .PanoPic {
             width: 100%;
             height: 180/@px-unit;
             img {
                 width: 100%;
                 height: 100%;
            }
        }
         .info-detail {
             width: 100%;
             height: 80/@px-unit;
        }
         .BlueWhiteColor {
             background: #00f, 
        }
         .Yellow_Color {
             background: #f1cf47, 
        }
         .White_Color {
             background: #fff, 
        }
         .BlackWhiteColor {
             background: #000, 
        }
         .GreenWhiteColor {
             background: #0c0, 
        }
         .linear_gradient {
             background: linear-gradient(to bottom, #fff, #00ff00) 
        }
         .emptyBlackColor {
             background: none, 
        }
    }
     .ant-image {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 100%;
         img {
             width: 80 / @px-unit;
             height: 80 / @px-unit;
        }
         .preview-img {
             transition: all 0.5s;
             width: 100%;
             height: 100%;
             opacity: 1;
        }
         .preview-img-original {
             transition: all 0.5s;
             width: auto;
             height: 100%;
             opacity: 1;
        }
         .preview-img-itse {
             width: 65%;
        }
    }
     .dash-icon-style {
         font-size: 18/@px-unit;
         position: relative;
         top: 2/@px-unit;
         fill:rgba(0, 0, 0, 0.6)!important 
    }
     ._DashBoardDataComponent_ {
         position: absolute;
         height: 60.88%;
         width: 28.1%;
         left: calc( 51.80% );
         padding-left: @Length16;
         top: 0;
         background-color: @bodyBgColorNo16;
         .dashBoard-daily-vehicles-card{
             width: 100%;
             height: 18.65%;
             border-radius: @Length8 !important;
             border: none;
             overflow:hidden;
             background: linear-gradient(to right, white, rgb(28, 121, 244));
             .daily-vehicles-area{
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 98.5%;
                 height: 100%;
                 border-radius: @Length8 0 0 @Length8;
                 background: linear-gradient(to right, rgb(255, 254, 254),rgb(237, 242, 247));
                 display: flex;
                 align-items: center;
                /* 垂直居中 */
                 .daily-vehicles-icon {
                     display: block;
                     margin-left: @Length25;
                     width: 4.57142857rem;
                     height: 4.57142857rem;
                     background: url('/static/media/dailyVehicles.bddec609.png');
                     background-size: cover;
                }
                 .daily-vehicles-text{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-left: @Length16;
                     flex: 42.76;
                     white-space: nowrap;
                }
                 .daily-vehicles-value{
                     font-weight: 700;
                     font-size: @Length54;
                     text-align: right;
                     margin-left: @Length24;
                     flex: 48.19;
                }
                 .daily-vehicles-unit{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-top: @Length20;
                     margin-left: @Length8;
                     flex: 9.04;
                }
            }
        }
         .dashBoard-daily-barrier-card{
             width: 100%;
             height: 18.65%;
             border-radius: @Length8;
             border: none;
             overflow:hidden;
             background: linear-gradient(to right, white, rgb(39, 208, 90));
             .daily-barrier-area{
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 98.5%;
                 height: 100%;
                 border-radius: @Length8 0 0 @Length8;
                 background: linear-gradient(to right,rgb(255, 255, 255), rgb(255, 255, 255),rgb(243, 244, 243));
                 display: flex;
                 align-items: center;
                /* 垂直居中 */
                 .daily-barrier-icon {
                     margin-left: @Length25;
                     display: block;
                     width: @Length64;
                     height: @Length64;
                     background: url('/static/media/dailyBarrierOpenTimes.da379031.png');
                     background-size: cover;
                }
                 .daily-barrier-text{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-left: @Length16;
                     flex: 42.76;
                     white-space: nowrap;
                }
                 .daily-barrier-value{
                     font-weight: 700;
                     font-size: @Length54;
                     text-align: right;
                     margin-left: @Length24;
                     flex: 48.19;
                }
                 .daily-barrier-unit{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-top: @Length20;
                     margin-left: @Length8;
                     flex: 9.04;
                }
            }
        }
         .dashBoard-daily-alarms-card{
             width: 100%;
             height: 18.65%;
             border-radius: @Length8;
             border: none;
             overflow:hidden;
             background: linear-gradient(to right, white, rgb(233, 70, 58));
             .daily-alarms-area{
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 98.5%;
                 height: 100%;
                 border-radius: @Length8 0 0 @Length8;
                 background: linear-gradient(to right,rgb(255, 254, 254), rgb(250, 244, 244));
                 display: flex;
                 align-items: center;
                /* 垂直居中 */
                 .daily-alarms-icon {
                     margin-left: @Length25;
                     display: block;
                     width: @Length64;
                     height: @Length64;
                     background: url('/static/media/alarm.b7ffd77f.png');
                     background-size: cover;
                }
                 .daily-alarms-text{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-left: @Length16;
                     flex: 42.76;
                     white-space: nowrap;
                }
                 .daily-alarms-value{
                     font-weight: 700;
                     font-size: @Length54;
                     text-align: right;
                     margin-left: @Length24;
                     flex: 48.19;
                }
                 .daily-alarms-unit{
                     font-weight: 400;
                     font-size: @Length16;
                     margin-top: @Length20;
                     margin-left: @Length8;
                     flex: 9.04;
                }
            }
        }
         .dashBoard-visit-most-card{
             padding: 0 !important;
             width: 100%;
             height: 35.75%;
             border-radius: @Length8;
             background-color: white;
             .visit-most-area{
                 position: absolute;
                 left: 0;
                 top: 0;
                 height: 100%;
                 width: 100%;
                 margin-top: @Length16;
                 .visit-most-header{
                     height: @Length32;
                     width: 100%;
                     display: flex;
                     margin-left: @Length24;
                     .visit-most-icon {
                         display: block;
                         width: @Length31;
                         height: @Length31;
                         background: url('/static/media/visitor.80d219ac.png');
                         background-size: cover;
                    }
                     .visit-most-title{
                         font-weight: 700;
                         line-height: @Length31;
                         font-size: @Length14;
                         margin-left: @Length8;
                         width: @Length200;
                    }
                }
                 .visit-most-body{
                     height: @Length106;
                     width: 100%;
                     display: flex;
                     margin-left: @Length25;
                     .visit-most-car-icon{
                         display: block;
                         margin-left: @Length32;
                         width: calc(@Length200 * 0.8);
                         height: calc(@Length132 * 0.8);
                         background: url('/static/media/car.fc8a1e0c.png');
                         background-size: cover;
                    }
                     .info-area{
                         margin-left: @Length60;
                         width: @Length178;
                         .plate-area{
                             width: 100%;
                             display: flex;
                             margin-bottom: @Length4;
                             .plate-text{
                                 margin-left: @Length4;
                                 font-weight: 400;
                                 font-size: @Length14;
                            }
                        }
                         .time-area{
                             width: 100%;
                             display: flex;
                             margin-bottom: @Length4;
                             .time-text{
                                 margin-left: @Length4;
                                 font-weight: 400;
                                 font-size: @Length14;
                            }
                        }
                         .user-area{
                             width: 100%;
                             display: flex;
                             margin-bottom: @Length4;
                             .user-text{
                                 margin-left: @Length4;
                                 font-weight: 400;
                                 font-size: @Length14;
                            }
                        }
                         .consume-area{
                             width: 100%;
                             display: flex;
                             margin-bottom: @Length4;
                             .consume-text{
                                 margin-left: @Length4;
                                 font-weight: 400;
                                 font-size: @Length14;
                            }
                        }
                         .count-area{
                             width: 100%;
                             display: flex;
                             margin-bottom: @Length4;
                             .count-text{
                                 margin-left: @Length4;
                                 font-weight: 400;
                                 font-size: @Length14;
                            }
                        }
                         .allow-block-area{
                             margin-left: @Length2;
                        }
                    }
                }
            }
        }
    }
     ._DashBoardChartComponent_ {
         position: relative;
         height: 39.12%;
         width: 79.9%;
         left: 0;
         top: calc( 59.2% );
         background-color: @bodyBgColorNo16;
         display: flex;
         .ant-card-body {
             padding: 0 !important;
        }
         .line-chart{
             margin-top: @Length16;
             width: 64.83%;
             height: 99%;
             border-radius: @Length8;
             margin-right: @Length16 !important;
             margin-bottom: @Length0 !important;
             background-color: white;
             .line-chart-header{
                 margin-top: @Length16;
                 margin-left: @Length24;
                 width: 100%;
                 height: @Length32;
                 display: flex;
                 .label-div-Container{
                     margin-right: @Length16;
                }
                 .line-chart-header-icon{
                     display: block;
                     width: @Length31;
                     height: @Length31;
                     background: url('/static/media/report2.613b8f03.png');
                     background-size: cover;
                }
                 .line-chart-title{
                     font-weight: 700;
                     font-size: @Length14;
                     line-height: @Length31;
                     margin-left: @Length8;
                     width: 70%;
                }
                 .line-chart-select{
                     flex: 1;
                }
            }
             .line-chart-content{
                 width: 100%;
                 height: @Length240;
            }
        }
         .pie-chart{
             margin-top: @Length16;
             width: calc(35.17% - @Length16);
             ;
             height: 99%;
             border-radius: @Length8;
             background-color: white;
             margin-bottom: @Length0 !important;
             .pie-chart-header{
                 margin-top: @Length16;
                 margin-left: @Length24;
                 width: 100%;
                 height: @Length32;
                 display: flex;
                 .label-div-Container{
                     margin-right: @Length8;
                }
                 .pie-chart-header-icon{
                     display: block;
                     width: @Length31;
                     height: @Length31;
                     background: url('/static/media/report1.60adf71b.png');
                     background-size: cover;
                }
                 .pie-chart-title{
                     font-weight: 700;
                     line-height: @Length31;
                     font-size: @Length14;
                     margin-left: @Length8;
                     width: 45%;
                }
            }
             .pie-chart-body{
                 width: 100%;
                 display: flex;
                 .pie-chart-content{
                     width: @Length460;
                     height: @Length240;
                }
                 .pie-chart-select{
                     flex: 1;
                }
            }
        }
    }
     ._DashBoardDetailComponent_ {
         position: absolute;
         height: 100%;
         width: calc(100% - 79.9% - @Length8);
         left: calc(79.9% + @Length8);
         top: 0;
         padding-left: @Length16;
         background-color: @bodyBgColorNo16;
         .carousel-container {
             width: 100%;
             height: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
             .carousel {
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 overflow-y: scroll;
                /* 手动滚动 */
                 .ant-card-body {
                     padding: 0 !important;
                }
                 .blank-carousel{
                     height: 100%;
                     .ant-image{
                         width: 30%;
                         height: auto;
                    }
                     opacity: 1;
                     width: 100%;
                     border-radius: @Length8;
                     background-color: white;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
                     .blank-text{
                         color: rgba(0, 0, 0, 0.4);
                         font-weight: 700;
                         font-size: @Length32;
                    }
                }
                 .detail-card{
                     display: block !important;
                     width: 100%;
                     height:calc( @Length157 + @Length1 / 2);
                     border-radius: @Length8;
                     background-color: white;
                     margin-bottom: @Length10 !important;
                     .card-content{
                         display: flex;
                         .pic-area{
                             margin-top: @Length10;
                             margin-left: @Length10;
                             .car-pic{
                                 width: @Length105;
                                 height: @Length105;
                                 img {
                                     width: 100%;
                                     height: 100%;
                                }
                            }
                             .plate-pic{
                                 margin-top: @Length1;
                                 width: @Length105;
                                 height: @Length28;
                                 img {
                                     width: 100%;
                                     height: 100%;
                                }
                            }
                        }
                         .info-area{
                             margin-top: @Length10;
                             margin-left: @Length12;
                             width: @Length190;
                             .plate-area{
                                 width: 100%;
                                 display: flex;
                                 margin-bottom: @Length5;
                                 .plate-text{
                                     margin-left: @Length4;
                                     font-weight: 400;
                                     font-size: @Length14;
                                }
                            }
                             .time-area{
                                 width: 100%;
                                 display: flex;
                                 margin-bottom: @Length5;
                                 .time-text{
                                     margin-left: @Length4;
                                     font-weight: 400;
                                     font-size: @Length14;
                                }
                            }
                             .user-area{
                                 width: 100%;
                                 display: flex;
                                 margin-bottom: @Length5;
                                 .user-text{
                                     margin-left: @Length4;
                                     font-weight: 400;
                                     font-size: @Length14;
                                }
                            }
                             .consume-area{
                                 width: 100%;
                                 display: flex;
                                 margin-bottom: @Length8;
                                 .consume-text{
                                     margin-left: @Length4;
                                     font-weight: 400;
                                     font-size: @Length14;
                                }
                            }
                             .allow-block-area{
                                 margin-left: @Length4;
                            }
                        }
                    }
                }
            }
        }
    }
     .Top48 {
         height: @Length48;
    }
     .MarginT8 {
         margin-top: @Length8;
    }
     .record-prompt-modal.ant-modal {
         .ant-modal-confirm-btns .ant-btn {
             float: none;
        }
    }
}
 ._CameraLightConifg_ {
     padding-left: 20/@px-unit;
     .err{
         color: @errorColorNo17 
    }
     .hover-top {
         .label-normal-container {
             height: 48/@px-unit !important;
        }
         .ant-checkbox-wrapper {
             position: relative;
             width: 25/@px-unit !important;
             .labelCheckbox-content-wrapper {
                 position: absolute;
                 left: 0.28571429rem;
                 top: -1.28571429rem;
            }
        }
    }
}
 ._RadarComp_ {
     .err{
         color: @errorColorNo17 
    }
     .hover-top {
         .label-normal-container {
             height: 48/@px-unit !important;
        }
         .ant-checkbox-wrapper {
             position: relative;
             width: 25/@px-unit !important;
             .labelCheckbox-content-wrapper {
                 position: absolute;
                 left: 0.28571429rem;
                 top: -1.28571429rem;
            }
        }
    }
     .lane-box{
         display: inline-block;
         width: 32/@px-unit;
         height: 32/@px-unit;
         margin-right: 10/@px-unit;
         text-align: center;
         border: 0.07142857rem solid #f5f5f5;
    }
     .enabled{
         color: @btnNormalColorNo1;
         border-color: @btnNormalColorNo1;
    }
}
 ._CameraPicParams_ {
     padding-left: 20 / @px-unit;
     .err {
         color: @errorColorNo17;
    }
     .inline {
         > div {
             float: left;
             vertical-align: middle;
        }
         .separator {
             float: left;
             margin-left: 0.57142857rem;
             margin-right: 0.57142857rem;
        }
         .label-div-Container {
             float: left !important;
        }
    }
}
 ._external-light-wrap_ {
     .ant-tabs-tab {
         width: 40/@px-unit;
         justify-content: center;
    }
     .ant-tabs-content-holder {
         height: auto !important;
         max-height: none !important;
         .m-p-16;
    }
     .button-width {
         .ant-radio-button-wrapper {
             width: 73/@px-unit;
             text-align: center;
             span[name] {
                 display: inline-block;
                 width: 40/@px-unit;
                 .m-text-ellipsis;
            }
        }
    }
     ._flash-wrap_ {
         display: flex;
         flex-wrap: wrap;
         & > div, & > .label-div-Container {
             width: 450 / @px-unit;
             flex: auto;
        }
    }
}
 ._image-properties-wrap_ {
     .m-p-16;
     .ant-tabs-nav {
         background-color: #fff;
    }
     .ant-tabs-content-holder{
         height: auto !important;
         max-height: none !important;
    }
     .success-button{
         color: @contentBgColorNo15;
         background: @successColorNo19 
    }
}
 ._PreviewConfigTabs_ {
     @Length340: 340/@px-unit;
     @Length300: 300/@px-unit;
     @Length340: 340/@px-unit;
     @Length617: 617/@px-unit;
     background-color: @contentBgColorNo15;
     width: 50%;
     height: @Length340;
     .ant-tabs-content-holder{
         height: @Length300;
         max-height: @Length300;
         overflow-y: auto;
    }
     @media screen and (min-device-width: 142.85714286rem) {
         height: @Length340 * 2;
         .ant-tabs-content-holder{
             height: @Length300 * 2;
             max-height: @Length300 * 2;
        }
    }
     .ant-tabs-nav {
         margin: 0;
         background-color: rgba(0, 0, 0, 0.03);
    }
     .ant-tabs-tab {
         margin-left: 16/@px-unit;
    }
     &.ItsePreview{
         &>.ant-tabs{
             width:100% 
        }
    }
}
 ._InoutBaseConfig_ {
     padding-left: 20/@px-unit;
     .leftFloat {
         float: left;
    }
}
 ._InoutGeneralConfig_ {
     padding: 0 14/@px-unit;
     .ButtonGroup-space {
         .m-width-80;
         .m-text-ellipsis;
         margin-right: 10/@px-unit;
    }
     .important-tip {
         color: @errorColorNo17;
    }
}
 ._InoutLightConfig_ {
     padding-left: 20/@px-unit;
     .leftFloat {
         float: left;
    }
     .status::before{
         content: '';
         display: inline-block;
         margin-bottom: 1/@px-unit;
         margin-right: 4/@px-unit;
         width: 8/@px-unit;
         height: 8/@px-unit;
         background-color: #ffffff;
         border-radius: 5/@px-unit;
    }
     .status.status-normal::before{
         background-color: #71BA05;
    }
     .status.status-offline::before{
         background-color: red;
    }
}
 ._InoutLineConfig_ {
     padding-left: 20/@px-unit;
     .step-button-container {
         display: flex;
         justify-content: flex-end;
         padding-top: 0.14285714rem;
    }
     .step-button {
         display: flex;
         justify-content: center;
         border: 1/@px-unit solid @listBorderColorNo8;
         line-height: 30/@px-unit;
    }
     .step-button-selected {
         border-color: @btnNormalColorNo1;
         color: @btnNormalColorNo1;
    }
}
 ._InoutPeripheralConfig_ {
     padding-left: 20/@px-unit;
}
 ._LensAdjustment_ {
     .step-button-container {
         display: flex;
         justify-content: flex-end;
         padding-top: 0.14285714rem;
    }
     .step-button {
         display: flex;
         justify-content: center;
         border: 1/@px-unit solid @listBorderColorNo8;
         line-height: 30/@px-unit;
    }
     .step-button-selected {
         border-color: @btnNormalColorNo1;
         color: @btnNormalColorNo1;
    }
}
 ._PreviewParkingInfoList_ {
     padding-left: 14/@px-unit;
     .flex {
         display: flex;
         flex-wrap: wrap;
    }
     .m-green {
         color: green;
    }
     .m-red {
         color: red;
    }
     .width33 {
         width: 32%;
         border-radius: 4/@px-unit;
         background-color: rgb(245, 245, 245);
         padding: 0 6/@px-unit 0 12/@px-unit;
         margin-top: 14/@px-unit;
         margin-right: 1%;
    }
     .img-style {
         height: 48/@px-unit;
         width: 120/@px-unit;
    }
}
 ._PreviewParkingSpace_ {
     padding: 14/@px-unit;
     .ant-table {
         margin: 10 / @px-unit 0 !important;
    }
     .ant-divider-horizontal {
         margin: 10 / @px-unit 0;
    }
     tbody {
         .ant-table-cell {
             padding-top: 0 !important;
             padding-bottom: 0 !important;
        }
    }
}
 ._serial-device-wrap_ {
     .m-p-16;
     .device-select-wrap {
         .ant-checkbox-wrapper {
             position: relative;
             width: 25/@px-unit !important;
             .labelCheckbox-content-wrapper {
                 position: absolute;
                 left: 0.28571429rem;
                 top: -1.28571429rem;
            }
        }
    }
     .label-v4-version:has(.bg_color) {
         background-color: #F5F5F5;
    }
}
 ._PtzComp_ {
     padding-left: 20/@px-unit;
     .label-div-Container {
         .label-normal-container .label-normal-wrapper {
             .ant-input-number {
                 width: 100%;
            }
        }
    }
     display: flex;
     flex: 1;
     .wrap-left{
         width: 300/@px-unit;
         margin-right: 20/@px-unit;
    }
     .wrap-wrap{
    }
}
 ._RadarSetting_ {
     position: relative;
     @Width380: 380/@px-unit;
     @Height150: 150/@px-unit;
     @Height780: 780/@px-unit;
     @Height41: 41/@px-unit;
     @Height45: 45/@px-unit;
     @Height12: 12/@px-unit;
     width: 100%;
     &._guide_{
         height: calc(100% - @Height150);
    }
     display: flex;
     flex-wrap: wrap;
     .box-wrap{
         display: inline-block;
         flex: 1;
         height: @Height780;
         min-width: 450/@px-unit;
         .video-box-wrap{
             width: 100%;
             height: 100%;
             &.bottom-style {
                 height: calc(100% - @Height45);
            }
             &.radar-video-box {
                 .video-box {
                     height: 50%;
                }
                 .ant-table-wrapper {
                     margin-top: 10 /@px-unit;
                }
                 .ant-table-thead {
                     height: @Height41 !important;
                }
                 .table1 .ant-table-tbody {
                     height: calc((@Height780 / 2) - @Height12 - @Height41 - @Height45);
                }
                 .table2 .ant-table-tbody {
                     height: calc((@Height780 / 2) - @Height12 - @Height41);
                }
            }
             .video-box {
                 background: #1b1b1b;
                 height: 100%;
            }
             .video-box-bottom {
                 height: @Height45;
                 line-height: @Height45;
                 box-sizing: border-box;
                 position: relative;
                 background-color: #e8eaeb;
                 padding: 0 5/@px-unit;
                 .anticon{
                     margin-right: 16/@px-unit;
                     font-size: 24/@px-unit;
                     &:hover{
                         color: @btnNormalColorNo1;
                    }
                }
                 .active{
                     color: @btnNormalColorNo1;
                }
            }
        }
    }
     .canvas-box{
         width: @Width380;
         height: @Height780;
         background: #e0e0e0;
         border: 1/@px-unit solid #e0e0e0;
         .canvas-content{
             height: 778/@px-unit;
        }
         .canvas-top{
             padding: 0 3/@px-unit;
             background: #fff;
        }
         .canvas-label{
             display: inline;
             margin: 6/@px-unit 0/@px-unit;
             .canvas-label-text{
                 padding: 0 3/@px-unit;
                 font-size: 10/@px-unit;
            }
        }
         .canvas-label-radar{
             display: inline-block;
             width: 16/@px-unit;
             height: 16/@px-unit;
             vertical-align: middle;
             background-color: #ee0000;
             border-radius: 50%;
        }
         .canvas-label-ShortFocus{
             display: inline-block;
             position: relative;
             top: 6/@px-unit;
             width: 24/@px-unit;
             height: 24/@px-unit;
             background-color: #eeff00;
        }
         .canvas-label-LongFocus{
             display: inline-block;
             position: relative;
             top: 6/@px-unit;
             width: 24/@px-unit;
             height: 24/@px-unit;
             background-color: #2718ff;
        }
    }
     .protocolTiltle {
         font-size: 16 / @px-unit;
         font-weight: bold;
    }
     .radar_content {
         width: 500 / @px-unit;
         &[bigSize=true] {
             width: 580 / @px-unit;
        }
         padding-left: 30 / @px-unit;
         .radar-collapse {
             margin-top: 10/ @px-unit;
             .ant-collapse-content-box, .ant-collapse-header {
                 padding: 0;
            }
             .ant-collapse-item:not(:first-child) {
                 margin-top: 15 / @px-unit;
            }
             height: 594/@px-unit;
             overflow: auto;
             .distance-input {
                 .ant-input-number-input-wrap {
                     input {
                         color: @textColorNo5 
                    }
                }
            }
        }
    }
     .radar_status {
         margin-right: 10 / @px-unit;
    }
     .Image_rootClassName{
         margin: 20 /@px-unit;
         .ant-image-preview-img{
             background-color: #fff;
        }
    }
     .ant-drawer-content-wrapper{
         min-width: 500/@px-unit;
         .ant-drawer-content{
             width: 500/@px-unit;
        }
    }
}
 ._GPSCalibration_ {
     padding-left: 20/@px-unit;
     .box-wrap {
         display: inline-block;
         height: 488/@px-unit;
         .video-box{
             width: 720/@px-unit;
             height: 100%;
             background: #1b1b1b;
        }
    }
     .gps_content {
         display: inline-block;
         vertical-align: top;
         .protocolTiltle {
             font-size: 16 / @px-unit;
             font-weight: bold;
        }
         .coord-name {
             .label-normal-container {
                 padding-bottom: 0 !important;
            }
             & + .label-div-Container {
                 .label-normal-container {
                     padding-top: 0 !important;
                }
            }
        }
    }
     .Image_rootClassName{
         margin-top: 20 /@px-unit;
         .ant-image-preview-img{
             background-color: #fff;
        }
    }
}
 ._RadarVideoCalibration_ {
     padding-left: 20/@px-unit;
     @Width380: 380/@px-unit;
     @Height45: 45/@px-unit;
     display: flex;
     flex-wrap: wrap;
     .box-wrap{
         display: inline-block;
         height: 730/@px-unit;
         flex: 1;
         min-width: 450 / @px-unit;
         margin-bottom: 70 / @px-unit;
         .video-box-wrapper {
             width: 100%;
             height: 100%;
             .video-box1{
                 height: calc(100% - @Height45);
                 background: #1b1b1b;
            }
             .video-box2{
                 height: 100%;
                 background: #1b1b1b;
            }
             .video-box-bottom {
                 height: @Height45;
                 line-height: @Height45;
                 box-sizing: border-box;
                 background-color: #e8eaeb;
                 padding: 0 5/@px-unit;
                 width: 100%;
                 .anticon{
                     margin-right: 16/@px-unit;
                     font-size: 24/@px-unit;
                     &:hover{
                         color: @btnNormalColorNo1;
                    }
                }
                 .active{
                     color: @btnNormalColorNo1;
                }
            }
        }
    }
     .canvas-box{
         width: @Width380;
         height: 730/@px-unit;
         background: #e0e0e0;
         border: 1/@px-unit solid #e0e0e0;
         .canvas-content{
             height: 728/@px-unit;
        }
         .canvas-top{
             padding: 0 3/@px-unit;
             background: #fff;
        }
         .canvas-label{
             display: inline;
             margin: 6/@px-unit 0/@px-unit;
             .canvas-label-text{
                 padding: 0 3/@px-unit;
                 font-size: 10/@px-unit;
            }
        }
         .canvas-label-radar{
             display: inline-block;
             width: 16/@px-unit;
             height: 16/@px-unit;
             vertical-align: middle;
             background-color: #ee0000;
             border-radius: 50%;
        }
         .canvas-label-ShortFocus{
             display: inline-block;
             position: relative;
             top: 6/@px-unit;
             width: 24/@px-unit;
             height: 24/@px-unit;
             background-color: #eeff00;
        }
         .canvas-label-LongFocus{
             display: inline-block;
             position: relative;
             top: 6/@px-unit;
             width: 24/@px-unit;
             height: 24/@px-unit;
             background-color: #2718ff;
        }
    }
     .radar_content {
         width: 520 / @px-unit;
         padding-left: 30 / @px-unit;
         .ant-alert {
             min-width: 320 / @px-unit;
             margin-top: 12 / @px-unit;
        }
         .coord-name {
             .label-normal-container {
                 padding-bottom: 0 !important;
            }
             & + .label-div-Container {
                 .label-normal-container {
                     padding-top: 0 !important;
                }
            }
        }
         .calibrate-button {
             height: 38/ @px-unit;
             .label-div-Container {
                 width: 130/ @px-unit !important;
                 .label-normal-wrapper {
                     div {
                         width: 130/ @px-unit !important;
                         .ant-btn formButtonGroup-space {
                             width: 0/ @px-unit !important;
                             height: 0/ @px-unit !important;
                        }
                    }
                }
            }
        }
    }
     .custom-title {
         font-size: 16 / @px-unit;
         font-weight: bold;
    }
}
 @videoWidth: 450/@px-unit;