.pictureMonitor[data-v-7c3ea26d] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto
}

.pictureMonitor-cameraMain[data-v-7c3ea26d] {
    margin-bottom: .24rem
}

.pictureMonitor-camera[data-v-7c3ea26d] {
    width: 100%;
    height: 5.9rem
}

.cameraMain-container[data-v-7c3ea26d] {
    width: calc(100% - 4.41rem);
    height: 100%;
    background: #002242;
    position: relative;
    overflow: hidden;
    float: left
}

.cameraMain-container img[data-v-7c3ea26d] {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.cameraMain-container .icon-mark[data-v-7c3ea26d] {
    position: absolute;
    top: .1rem;
    right: .1rem;
    display: block;
    width: .52rem;
    height: .36rem;
    z-index: 1
}

.cameraMain-container .title[data-v-7c3ea26d] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .8rem;
    line-height: .64rem;
    font-size: .24rem;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(4, 16, 28, .5);
    color: #fff;
    padding: .16rem .64rem 0 .16rem;
    background: linear-gradient(180deg, rgba(4, 16, 28, 0), rgba(4, 16, 28, .7))
}

.cameraMain-container .time[data-v-7c3ea26d] {
    float: left
}

.cameraMain-container .name[data-v-7c3ea26d] {
    float: left;
    max-width: calc(100% - 5rem)
}

.cameraMain-container .camera[data-v-7c3ea26d] {
    float: left
}

.cameraMain-container span[data-v-7c3ea26d] {
    float: left;
    padding: 0 .16rem
}

.cameraMain-container .triangleDirection-right[data-v-7c3ea26d] {
    position: absolute;
    bottom: .08rem;
    right: .08rem
}

.cameraMain-list[data-v-7c3ea26d] {
    float: right;
    width: 4.33rem;
    height: 100%;
    overflow-y: auto
}

.cameraMain-list .cameraMain-list-pane[data-v-7c3ea26d] {
    float: left;
    background: #002242;
    position: relative
}

.cameraMain-list .cameraMain-list-pane img[data-v-7c3ea26d] {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.cameraMain-list .cameraMain-list-pane[data-v-7c3ea26d]:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(4, 16, 28, .4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

.cameraMain-list .cameraMain-list-pane.active[data-v-7c3ea26d] {
    border: .06rem solid #2df
}

.cameraMain-list .cameraMain-list-pane.active[data-v-7c3ea26d]:before {
    display: none
}

.cameraMain-list .cameral-info[data-v-7c3ea26d] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -.44rem;
    z-index: 1
}

.cameraMain-list .cameral-info label[data-v-7c3ea26d] {
    display: block;
    width: .44rem;
    height: .44rem;
    margin: 0 auto .08rem;
    /*background: url(/img/bottom_icon_camera_32.eb187d6.png) 50% 50%/.32rem .32rem no-repeat;*/
    position: relative
}

.cameraMain-list .cameral-info label[data-v-7c3ea26d]:after, .cameraMain-list .cameral-info label[data-v-7c3ea26d]:before {
    content: "";
    width: .48rem;
    height: 2px;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    margin-top: -1px
}

.cameraMain-list .cameral-info label[data-v-7c3ea26d]:before {
    left: -.48rem;
    background: linear-gradient(270deg, #fff 3%, hsla(0, 0%, 100%, 0));
    box-shadow: 0 2px 6px 0 rgba(4, 16, 28, .5)
}

.cameraMain-list .cameral-info label[data-v-7c3ea26d]:after {
    right: -.48rem;
    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
    box-shadow: 0 2px 6px 0 rgba(4, 16, 28, .5)
}

.cameraMain-list .cameral-info .panoramic[data-v-7c3ea26d] {
    /*background: url(/img/bottom_icon_panoramic_32.dafd23e.png) 50% 50%/.32rem .32rem no-repeat*/
}

.cameraMain-list .cameral-info p[data-v-7c3ea26d] {
    line-height: .24rem;
    font-size: .16rem;
    text-align: center;
    text-shadow: 0 2px 6px rgba(4, 16, 28, .5);
    color: #fff
}

.cameraMain-list .cameral-info .font-number-large-2[data-v-7c3ea26d] {
    font-size: .2rem
}

.cameraMain-list-2 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: 100%;
    height: calc(50% - .04rem);
    margin-bottom: .08rem
}

.cameraMain-list-2 .cameraMain-list-pane[data-v-7c3ea26d]:last-child {
    margin-bottom: 0
}

.cameraMain-list-3 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(50% - .04rem);
    margin-bottom: .08rem
}

.cameraMain-list-3 .cameraMain-list-pane[data-v-7c3ea26d]:first-child {
    margin-right: .08rem
}

.cameraMain-list-3 .cameraMain-list-pane[data-v-7c3ea26d]:last-child {
    width: 100%;
    margin-bottom: 0
}

.cameraMain-list-4 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(50% - .04rem)
}

.cameraMain-list-4 .cameraMain-list-pane[data-v-7c3ea26d]:first-child {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-4 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2) {
    margin-bottom: .08rem
}

.cameraMain-list-4 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(3) {
    margin-right: .08rem
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d]:first-child {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2) {
    margin-bottom: .08rem
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(3) {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(4) {
    margin-bottom: .08rem
}

.cameraMain-list-5 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(5) {
    width: 100%;
    height: calc(50% - .04rem)
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:first-child {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2) {
    margin-bottom: .08rem
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(3) {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(4) {
    margin-bottom: .08rem
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(5) {
    margin-right: .08rem;
    width: calc(50% - .04rem);
    height: calc(50% - .04rem)
}

.cameraMain-list-6 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(6) {
    width: calc(50% - .04rem);
    height: calc(50% - .04rem)
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:first-child {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2) {
    margin-bottom: .08rem
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(3) {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(4) {
    margin-bottom: .08rem
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(5) {
    margin-right: .08rem
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(5), .cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(6) {
    margin-bottom: .08rem;
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-7 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(7) {
    width: 100%;
    height: calc(25% - .06rem)
}

.cameraMain-list-8 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-8 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(odd) {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-8 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2n) {
    margin-bottom: .08rem
}

.cameraMain-list-8 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(7), .cameraMain-list-8 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(8) {
    margin-bottom: 0
}

.cameraMain-list-9 .cameraMain-list-pane[data-v-7c3ea26d] {
    width: calc(50% - .04rem);
    height: calc(25% - .06rem)
}

.cameraMain-list-9 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(odd) {
    margin-right: .08rem;
    margin-bottom: .08rem
}

.cameraMain-list-9 .cameraMain-list-pane[data-v-7c3ea26d]:nth-child(2n) {
    margin-bottom: .08rem
}

.cameraMain-list-9.cameraMain-list-single .cameraMain-list-pane[data-v-7c3ea26d]:nth-last-child {
    width: 100%;
    margin-bottom: .08rem
}

.cameraMain-list-9.cameraMain-list-double .cameraMain-list-pane[data-v-7c3ea26d]:last-child, .cameraMain-list-9.cameraMain-list-double .cameraMain-list-pane[data-v-7c3ea26d]:nth-last-child(2) {
    margin-bottom: .08rem
}

.cameraMain-unilateral .cameraMain-container[data-v-7c3ea26d] {
    width: 100%
}

.pictureMonitor-picture-nav[data-v-7c3ea26d] {
    width: 100%;
    padding-top: .24rem;
    height: .72rem;
    font-size: .18rem;
    font-weight: 700;
    color: #2df;
    line-height: .32rem
}

.pictureMonitor-picture-content[data-v-7c3ea26d] {
    width: 100%;
    padding-bottom: .16rem
}

.pictureMonitor-picture-pane[data-v-7c3ea26d] {
    width: calc(20% - .064rem);
    height: 1.6rem;
    float: left;
    margin-bottom: .08rem;
    margin-right: .08rem;
    background: #002242;
    position: relative
}

.pictureMonitor-picture-pane .icon-mark[data-v-7c3ea26d] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: .52rem;
    height: .36rem;
    z-index: 1
}

.pictureMonitor-picture-pane img[data-v-7c3ea26d] {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.pictureMonitor-picture-pane[data-v-7c3ea26d]:nth-child(5n) {
    margin-right: 0
}

.pictureMonitor-floatBox[data-v-7c3ea26d] {
    width: 100%;
    height: .48rem;
    font-size: .18rem;
    font-weight: 700;
    color: #2df;
    line-height: .32rem;
    background: #04101c;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.pictureMonitor-modeBtn[data-v-7c3ea26d] {
    float: right;
    padding-right: 3px
}

.pictureMonitor-modeBtn button[data-v-7c3ea26d] {
    display: block;
    float: left;
    border: 1px solid #2df;
    padding: 0 .12rem;
    margin: 0;
    height: .32rem;
    line-height: .32rem;
    font-size: .14rem;
    color: #2df;
    background: none;
    transform: skew(-8deg)
}

.pictureMonitor-modeBtn button span[data-v-7c3ea26d] {
    transform: skew(8deg)
}

.pictureMonitor-modeBtn button[data-v-7c3ea26d]:hover {
    opacity: .8
}

.pictureMonitor-modeBtn button[data-v-7c3ea26d]:last-child {
    margin-left: -1px
}

.pictureMonitor-modeBtn .active[data-v-7c3ea26d] {
    background: #2df;
    color: #002242
}

.pictureMonitor-modeBtn .active[data-v-7c3ea26d]:hover {
    opacity: 1
}

.pictureMonitor-picture-noData button[data-v-7c3ea26d] {
    display: block;
    width: 2.26rem;
    height: .64rem;
    text-align: center;
    line-height: .64rem;
    font-size: .16rem;
    color: #2df;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(4, 16, 28, .5);
    border: 0;
    margin: .24rem auto 0;
    /*background: url(/img/default_button_226x64.83afb38.png) 50% 50%/100% 100% no-repeat*/
}

.pictureMonitor-picture-noData button[data-v-7c3ea26d]:hover {
    opacity: .8
}