inl-ui 0.1.38 → 0.1.39

package/dist/components/index.cjs

@@ -9153,7 +9153,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9176,6 +9176,7 @@ const VideoBoxV2 = vue.defineComponent({
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -9284,6 +9285,74 @@ const VideoBoxV2 = vue.defineComponent({
     let timeout;
     vue.ref(true);
     vue.onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -9325,7 +9394,24 @@ const VideoBoxV2 = vue.defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? vue.createVNode("div", {
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), vue.createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9387,6 +9473,14 @@ const VideoBoxV2 = vue.defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return vue.createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return vue.createVNode(vue.resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/components/index.js

@@ -9142,7 +9142,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9165,6 +9165,7 @@ const VideoBoxV2 = defineComponent({
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -9273,6 +9274,74 @@ const VideoBoxV2 = defineComponent({
     let timeout;
     ref(true);
     onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -9314,7 +9383,24 @@ const VideoBoxV2 = defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? createVNode("div", {
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9376,6 +9462,14 @@ const VideoBoxV2 = defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return createVNode(resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/components/style.css

@@ -1,3 +1,3 @@
-.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
 .videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
 .cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}

package/dist/index.cjs

@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var EZUIKit__default = /*#__PURE__*/_interopDefaultLegacy(EZUIKit);
 
-var version = "0.1.37";
+var version = "0.1.38";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10156,7 +10156,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -10179,6 +10179,7 @@ const VideoBoxV2 = vue.defineComponent({
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -10287,6 +10288,74 @@ const VideoBoxV2 = vue.defineComponent({
     let timeout;
     vue.ref(true);
     vue.onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -10328,7 +10397,24 @@ const VideoBoxV2 = vue.defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? vue.createVNode("div", {
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), vue.createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -10390,6 +10476,14 @@ const VideoBoxV2 = vue.defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return vue.createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return vue.createVNode(vue.resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
 
-var version = "0.1.37";
+var version = "0.1.38";
 
 declare const _default$p: {
     set(theme: string): void;

package/dist/index.js

@@ -14,7 +14,7 @@ import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
 import { marked } from 'marked';
 import '@sszj-temp/mobile/style.css';
 
-var version = "0.1.37";
+var version = "0.1.38";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10125,7 +10125,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -10148,6 +10148,7 @@ const VideoBoxV2 = defineComponent({
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -10256,6 +10257,74 @@ const VideoBoxV2 = defineComponent({
     let timeout;
     ref(true);
     onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -10297,7 +10366,24 @@ const VideoBoxV2 = defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? createVNode("div", {
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -10359,6 +10445,14 @@ const VideoBoxV2 = defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return createVNode(resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/style.css

@@ -1,4 +1,4 @@
-.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
 .videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
 .cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}
-.scrollbarDef ::-webkit-scrollbar-track-piece{background-color:#f8f8f8}.scrollbarDef ::-webkit-scrollbar{height:5px;width:5px}.scrollbarDef ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#ddd;min-height:28px}.scrollbarDef ::-webkit-scrollbar-thumb:hover{background-color:#bbb}.scrollbarBlack::-webkit-scrollbar-track-piece{background-color:transparent}.scrollbarBlack::-webkit-scrollbar{height:5px;width:0}.scrollbarBlack::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#3d4456;min-height:28px}@font-face{font-family:YouSheBiaoTiHei;src:url(/micro-assets/font/youshebiaotihei.TTF)}@font-face{font-family:DINPro-Light;src:url(/micro-assets/font/DINPro-Light.otf)}@font-face{font-family:DINPro-Regular;src:url(/micro-assets/font/DINPro-Regular.otf)}@font-face{font-family:DINPro-Medium;src:url(/micro-assets/font/DINPro-Medium.otf)}@font-face{font-family:DINPro-Bold;src:url(/micro-assets/font/DINPro-Bold.otf)}@font-face{font-family:DINPro-Black;src:url(/micro-assets/font/DINPro-Black.otf)}@font-face{font-family:Alibaba-PuHuiTi-Light;src:url(/micro-assets/font/Alibaba-PuHuiTi-Light.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Regular;src:url(/micro-assets/font/Alibaba-PuHuiTi-Regular.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Medium;src:url(/micro-assets/font/Alibaba-PuHuiTi-Medium.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Bold;src:url(/micro-assets/font/Alibaba-PuHuiTi-Bold.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Heavy;src:url(/micro-assets/font/Alibaba-PuHuiTi-Heavy.ttf)}@font-face{font-family:SourceHanSansCN-ExtraLight;src:url(/micro-assets/font/SourceHanSansCN-ExtraLight.otf)}@font-face{font-family:SourceHanSansCN-Light;src:url(/micro-assets/font/SourceHanSansCN-Light.otf)}@font-face{font-family:SourceHanSansCN-Regular;src:url(/micro-assets/font/SourceHanSansCN-Regular.otf)}@font-face{font-family:SourceHanSansCN-Normal;src:url(/micro-assets/font/SourceHanSansCN-Normal.otf)}@font-face{font-family:SourceHanSansCN-Medium;src:url(/micro-assets/font/SourceHanSansCN-Medium.otf)}@font-face{font-family:SourceHanSansCN-Bold;src:url(/micro-assets/font/SourceHanSansCN-Bold.otf)}@font-face{font-family:SourceHanSansCN-Heavy;src:url(/micro-assets/font/SourceHanSansCN-Heavy.otf)}body .ant-form-inline.table-query-form{margin-bottom:8px}body .ant-form-inline.table-query-form>.ant-row:not(.ant-form-item){width:100%}body .ant-form-inline.table-query-form .ant-form-item{margin-bottom:16px}body .ant-form-inline.table-query-form .ant-form-item .ant-input,body .ant-form-inline.table-query-form .ant-form-item .ant-select{width:200px}::-webkit-scrollbar-track-piece{background-color:#f8f8f8}::-webkit-scrollbar{height:5px;width:5px}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#ddd;min-height:28px}::-webkit-scrollbar-thumb:hover{background-color:#bbb}.flex{display:flex}.flex-center{align-items:center;display:flex}.flex1{flex:1}.flex2{flex:2}.flex3{flex:3}.flex4{flex:4}.flex5{flex:5}.flex6{flex:6}.flex7{flex:7}.flex8{flex:8}.flex9{flex:9}.flex10{flex:10}.flex11{flex:11}.flex12{flex:12}.Demo{color:red}.ant-layout .inl-layout-sider.ant-layout-sider{background:#1b2c55}.ant-layout .inl-layout-sider.ant-layout-sider .ant-layout-sider-children{display:flex;flex-direction:column}.ant-layout .inl-layout-sider.ant-layout-sider .folder{color:#fff;cursor:pointer;font-size:20px;height:38px;line-height:38px;opacity:.8;padding:0 16px;text-align:right;transition:opacity .3s ease-in-out}.ant-layout .inl-layout-sider.ant-layout-sider .folder:hover{opacity:1}.ant-layout .inl-layout-sider.ant-layout-sider .folder.isFold{text-align:center}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu{background-color:transparent;border-right:0!important;flex:1;font-size:14px;overflow-x:hidden;overflow-y:auto}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar-track-piece{background-color:transparent}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar{height:5px;width:0}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#3d4456;min-height:28px}.ant-layout .inl-layout-sider.ant-layout-sider .copyright{color:#b9c2d5;font-size:12px;opacity:.3;padding:8px;text-align:center}.ant-layout .inl-layout-sider.ant-layout-sider.ant-layout-sider-collapsed .copyright{display:none}body[data-theme=light] .inl-layout-sider.ant-layout-sider{background:#fff}body[data-theme=light] .inl-layout-sider.ant-layout-sider .folder{color:#000}body[data-theme=light] .inl-layout-sider.ant-layout-sider.ant-layout-sider-collapsed .folder{text-align:center}body[data-theme=light] .inl-layout-sider.ant-layout-sider .copyright{color:#000}.inl-layout .layout-mask{background:#000;bottom:0;clip-path:polygon(0 0,0 100%,210px 100%,210px 92px,calc(100% - 10px) 92px,calc(100% - 10px) calc(100% - 10px),210px calc(100% - 10px),210px 100%,100% 100%,100% 0);left:0;opacity:.5;position:absolute;right:0;top:0;z-index:1000}.inl-layout .ant-layout{height:100%}.inl-layout .ant-layout .ant-layout-header{background-color:#132041;height:50px;line-height:50px;padding:0}.inl-layout .ant-layout .ant-layout-header .header{align-items:center;display:flex;padding-right:20px}.inl-layout .ant-layout .ant-layout-header .header .logo{align-items:center;display:flex;justify-content:center;width:200px}.inl-layout .ant-layout .ant-layout-header .header .logo img{width:140px}.inl-layout .ant-layout .ant-layout-header .header .menu{background-color:transparent;border-bottom:0;flex:auto;font-size:14px;overflow:hidden}.inl-layout .ant-layout .ant-layout-header .header .menu .ant-menu-item-selected{background:linear-gradient(180deg,rgba(58,117,205,0),rgba(58,117,205,0) 0,rgba(71,98,226,.6))!important}.inl-layout .ant-layout .ant-layout-header .header .menu .ant-menu-item:after{content:unset!important}.inl-layout .ant-layout .ant-layout-header .header .search{background:transparent;border-color:rgba(185,194,213,.3);box-shadow:unset;color:rgba(185,194,213,.3);width:200px}.inl-layout .ant-layout .ant-layout-header .header .search input{background:transparent;color:#fff}.inl-layout .ant-layout .ant-layout-header .header .user-info{align-items:center;display:flex;margin:0 20px}.inl-layout .ant-layout .ant-layout-header .header .user-info .avatar{margin-right:8px}.inl-layout .ant-layout .ant-layout-header .header .user-info .username{align-items:center;color:#fff;display:flex}.inl-layout .ant-layout .ant-layout-header .header .logout{color:#fff;font-size:20px}.inl-layout .ant-layout .ant-layout-header .header .logout .anticon{position:relative;top:2px}.inl-layout .ant-layout .inl-layout-sider .ant-menu-item,.inl-layout .ant-layout .inl-layout-sider .ant-menu-submenu-title{margin:0}.inl-layout .ant-layout .ant-layout-content{display:flex;flex-direction:column;padding:10px}.inl-layout .ant-layout .ant-layout-content.only-page{padding:0}.inl-layout .ant-layout .ant-layout-content .tab-list{align-items:center;display:flex}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container{display:flex;flex:1;flex-wrap:nowrap;height:100%;overflow:hidden;padding:0 8px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab{align-items:center;border-radius:5px 5px 0 0;color:#2c3e50;cursor:pointer;display:flex;flex:1 1 30px;max-width:160px;padding:4px 12px 6px;position:relative;transition:all .15s;user-select:none;width:0}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:after{background:#81878c;content:"";height:60%;position:absolute;right:0;top:20%;transition:background-color .3s;width:1px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.hide-border:after,.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:hover:after{background:transparent}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .icon{margin-right:4px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tab-name{flex:1 1 0;font-size:12px;overflow:hidden;white-space:nowrap}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close{align-items:center;border-radius:50%;display:flex;font-size:12px;height:16px;justify-content:center;margin-left:6px;width:16px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close:hover{background:#e8eaed;color:#000}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-after,.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-before{fill:#fff;bottom:0;bottom:-1px;font-size:10px;position:absolute;z-index:1}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-before{left:-9px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-after{right:-10px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:hover{background-color:#f2f3f5}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.active{background-color:#fff}.inl-layout .ant-layout .ant-layout-content .tab-list .ant-select{margin-right:13px}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:0 6px;transition:all .25s;width:24px}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger:hover{background:#d2d4d8}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger .anticon{font-size:12px!important}.inl-layout .ant-layout .ant-layout-content .page-content{display:flex;flex:1;flex-direction:column;overflow:hidden}.inl-layout .ant-layout .ant-layout-content .page-content .page-container{background-color:#fff;display:inline-flex;flex:1;flex-direction:column;overflow:auto;position:relative}.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_],.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_]>[id^=__qiankun_microapp_wrapper]{background-color:#fff;display:flex;flex:1;flex-direction:column;height:100%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_] #app,.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_]>[id^=__qiankun_microapp_wrapper] #app{flex:1;overflow:auto}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .menu-iframe{height:100%;position:absolute;width:100%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .iframe-fallback{padding-top:20px;text-align:center}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .iframe-fallback img{width:30%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding{padding:24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding [id^=microApp_]{margin:-24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding #app{padding:24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding .menu-iframe{height:calc(100% - 48px);width:calc(100% - 48px)}body[data-theme=light] .inl-layout .ant-layout-header{background:linear-gradient(90deg,#3297ff,#286be6)!important}body[data-theme=light] .inl-layout .ant-layout-header .menu{background:transparent!important;color:#fff}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-item:hover{background:linear-gradient(180deg,#56a3ff,#3e7eff)!important;color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-submenu:hover{color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-item-selected{background:linear-gradient(180deg,#56a3ff,#3e7eff)!important;color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .search{background-color:hsla(0,0%,100%,.1)!important;margin-right:36px;width:300px}body[data-theme=light] .inl-layout .ant-layout-header .search input{color:#000!important}body[data-theme=light] .inl-layout .ant-layout-header .search input::placeholder{color:hsla(0,0%,100%,.7)!important}body[data-theme=light] .inl-layout .ant-layout-header .search .btn-search{font-size:26px}body[data-theme=light] .inl-layout .ant-menu-sub{background:transparent!important}body[data-theme=light] .inl-layout .ant-menu-inline .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical-left .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical-right .ant-menu-item:after{background:#3e7eff;left:0;right:unset}body[data-theme=light] .inl-layout .ant-menu-item-selected{background:#eff4ff}[data-doc-theme=light] .ant-menu-light .ant-menu-submenu-title:hover{color:#3e7eff!important}.person-operation-dropdown{top:50px!important}.person-operation-dropdown .ant-dropdown-menu-item{color:#5c667d}.person-operation-dropdown .ant-dropdown-menu-item .ant-dropdown-menu-item-icon{font-size:16px}.tab-title-tooltip{padding-top:0!important}.tab-title-tooltip .ant-tooltip-arrow{display:none}.tab-title-tooltip .ant-tooltip-inner{background-color:#f0f2f5;border:1px solid #dce2ed;box-shadow:unset;color:#354052;font-size:12px;line-height:1.2;min-height:0;padding:5px 10px}.login{background-origin:content-box;background-size:cover;display:flex;flex-direction:column;font-family:PingFangSC-Ultralight,sans-serif;height:100vh;overflow:auto;overflow-y:auto;position:relative;width:100vw}.login .topTitle{left:0;margin:60px;position:absolute;top:0;z-index:2}.login .topTitle img{height:54px;width:452px}.login .content_login{display:flex;flex:1;height:700px;justify-content:space-between;padding:0 150px}.login .content_login.system{align-items:center;justify-content:center}.login .content_login.system .left,.login .content_login.system .login_box{height:600px;width:600px}.login .content_login.system .left.left,.login .content_login.system .login_box.left{align-items:center;backdrop-filter:blur(20px);background-color:hsla(0,0%,100%,.1);border-radius:6px 0 0 6px;display:flex;flex-direction:column;padding-top:54px}.login .content_login.system .left.left>div,.login .content_login.system .login_box.left>div{margin-bottom:20px}.login .content_login.system .left.left img,.login .content_login.system .login_box.left img{height:300px;margin-bottom:35px;width:425px}.login .content_login.system .left.left h3,.login .content_login.system .left.left p,.login .content_login.system .login_box.left h3,.login .content_login.system .login_box.left p{color:#fff}.login .content_login.system .left.left h3,.login .content_login.system .login_box.left h3{font-size:24px;font-weight:600;line-height:33px;text-align:center}.login .content_login.system .left.left p,.login .content_login.system .login_box.left p{font-size:14px;font-weight:0;line-height:26px;padding:0 60px}.login .content_login.system .left.login_box,.login .content_login.system .login_box.login_box{backdrop-filter:blur(20px);background-color:hsla(0,0%,100%,.15);border:none;border-radius:0 6px 6px 0}.login .content_login.platform{align-items:center;display:flex;height:100vh;left:0;overflow-y:auto;padding:0;position:absolute;top:0;width:100vw}.login .content_login.platform .login_center_box{align-items:center;display:flex;flex:1;justify-content:flex-start}.login .content_login.platform .left{align-items:center;display:flex;flex:2;justify-content:center;padding-top:54px}.login .content_login.platform .left .left_img{height:700px;width:920px}.login .content_login .login_box{background:linear-gradient(180deg,hsla(0,0%,100%,.07),hsla(0,0%,100%,0));display:flex;flex-direction:column;flex-shrink:0;height:540px;position:relative;right:0;width:440px}.login .content_login .login_box>div{border:3px solid;border-image:linear-gradient(rgba(229,235,255,.09),hsla(0,0%,100%,0)) 80 30}.login .content_login .login_box>div .ant-input-affix-wrapper:before{content:unset!important}.login .content_login .login_box .ant-form{flex:1}.login .content_login .login_box .ant-form .ant-form-item{flex:1;margin-bottom:24px}.login .content_login .login_box .ant-form .ant-form-item.mB64{margin-bottom:64px}.login .content_login .login_box .ant-form .ant-form-item .ant-form-item-label{padding-bottom:16px}.login .content_login .login_box .ant-form .ant-form-item .ant-form-item-label label{font-size:16px}.login .copyright-information{bottom:30px;color:#7b8492;font-family:PingFangSC-Regular,PingFang SC;font-size:14px;font-weight:400;left:0;line-height:30px;margin:0;position:absolute;right:0;text-align:center}.login-messsage-notice .ant-message-notice-content{background:transparent;padding:0}.login_slider .ant-modal-body{padding:0}.login_slider .imgBox{height:268px;position:relative;width:432px}.login_slider .imgBox .anticon{color:#fff;position:absolute;right:10px;top:10px;z-index:3}.login_slider .imgBox img{position:absolute;z-index:2}.login_slider .imgBox .bgImg{height:268px;width:432px;z-index:1}.login_slider .modal-box{box-sizing:content-box}.login_slider .ant-slider{background-color:#f4f6f8;height:44px;margin:24px 0 0;padding:0}.login_slider .ant-slider .ant-slider-rail,.login_slider .ant-slider .ant-slider-step,.login_slider .ant-slider .ant-slider-track{height:44px;padding:0;top:0}.login_slider .ant-slider .ant-slider-track,.login_slider .ant-slider:hover .ant-slider-track{background-color:#22cc83}.login_slider .ant-slider .ant-slider-handle{background-color:#fff;border:1px solid #ccc;border-radius:2px;height:54px;top:0;transform:translateX(-2%)!important;width:54px}.login_slider .ant-slider .ant-slider-handle:after{content:">>";line-height:54px;position:absolute;text-align:center;width:100%}.login_slider .ant-slider .ant-slider-rail{background-color:#f4f6f8;position:relative}.login_slider .ant-slider .ant-slider-rail:before{content:"向右滑动完成拼图";line-height:44px;position:absolute;text-align:center;width:100%}.login_box{display:flex;flex-direction:column}.login_box>div .ant-input{color:#fff!important}.login_box input{color:#fff;height:44px}.login_box input:-internal-autofill-previewed,.login_box input:-internal-autofill-selected{-webkit-text-fill-color:#fff;color:#fff!important;transition:background-color 9999s ease-out .1s}.login_box .ant-input-password span span svg{color:#fff}.login_box .ant-form{padding:0 67px}.login_box .ant-form-item{margin-bottom:44px}.login_box .ant-form-item .ant-input-password,.login_box .ant-form-item input{background:none;background-color:hsla(0,0%,100%,.2);font-size:16px;height:44px;line-height:0px}.login_box .ant-form-item .ant-input-password input,.login_box .ant-form-item input input{background:none;height:auto}.login_box .ant-form-item .ant-input-password .ant-input-suffix,.login_box .ant-form-item input .ant-input-suffix{font-size:14px}.login_box .ant-form-item .ant-btn{border:none;border-radius:0;font-size:18px;height:43px;line-height:0px}.login_box .ant-form-item .ant-form-item-control-input-content .ant-input-password,.login_box .ant-form-item .ant-form-item-control-input-content>.ant-input{border:1px solid #5e657f;border-radius:0}.login_box .titleBox{display:flex;justify-content:center;margin:44px 0}.login_box .titleBox img{height:36px}.login_box .titleBox .title{color:#fff;font-family:YouSheBiaoTiHei;font-size:28px;font-weight:600;height:40px;line-height:40px;padding:0}.login_box .ant-form label{color:#fff;font-family:PingFangSC-Medium,PingFang SC;font-size:16px;font-weight:500;height:22px;line-height:22px}.login_box .login_tab{display:flex;height:3rem}.login_box .login_tab .item{background:#ebf8ff;cursor:pointer;flex:1;line-height:2.8rem;opacity:.5;text-align:center;transition:all .3s ease}.login_box .login_tab .item.active,.login_box .login_tab .item:hover{background:linear-gradient(90deg,#2eb2ff,#6d71ff);color:#fff;opacity:.8}body[data-theme=light] .login_box>div .ant-input{color:#fff!important}body[data-theme=light] .login_box input:-internal-autofill-previewed,body[data-theme=light] .login_box input:-internal-autofill-selected{transition:background-color 9999s ease-out .1s}body[data-theme=light] input:-internal-autofill-previewed,body[data-theme=light] input:-internal-autofill-selected{transition:background-color 9999s ease-out .1s}.ant-select-item-option-content .color{background-color:#3e7eff;display:inline-block;height:10px;margin-right:3px;width:10px}.ant-select-item-option-content .dark{background-color:#1d33a2}.theme-select .color{background-color:#3e7eff;display:inline-block;height:10px;margin-right:3px;width:10px}.theme-select .dark{background-color:#1d33a2}.inl-layout-table-box{display:flex;flex-direction:column}.inl-layout-table-box .inl-layout-table-option{display:flex;justify-content:space-between;margin-bottom:16px}.icon-item-class{align-items:center;background:#eff2f6;border:1px solid transparent;cursor:pointer;display:flex;justify-content:center;padding:7px 8px;transition:all .2s ease-in-out}.icon-item-class-img{color:#333;font-size:24px;margin-right:8px}.icon-item-class-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-item-class:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.icon-item-class.active{background:var(--primary-color);color:#fff}.icon-item-class.active .icon-img{color:#fff}.inl-iconfonts,.inl-iconfonts .icon{align-items:center;display:flex}.inl-iconfonts .icon{background:#eff2f6;border:1px solid transparent;cursor:pointer;justify-content:center;margin-right:16px;padding:7px 8px;transition:all .2s ease-in-out}.inl-iconfonts .icon-img{color:#333;font-size:24px;margin-right:8px}.inl-iconfonts .icon-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inl-iconfonts .icon:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.inl-iconfonts .icon.active{background:var(--primary-color);color:#fff}.inl-iconfonts .icon.active .icon-img{color:#fff}.inl-select-icon-modal .ant-modal-body{height:70vh;overflow:auto}.inl-select-icon-modal .ant-modal-body .search{margin-bottom:24px;width:200PX}.inl-select-icon-modal .ant-modal-body .icon{align-items:center;background:#eff2f6;border:1px solid transparent;cursor:pointer;display:flex;justify-content:center;padding:7px 8px;transition:all .2s ease-in-out}.inl-select-icon-modal .ant-modal-body .icon-img{color:#333;font-size:24px;margin-right:8px}.inl-select-icon-modal .ant-modal-body .icon-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inl-select-icon-modal .ant-modal-body .icon:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.inl-select-icon-modal .ant-modal-body .icon.active{background:var(--primary-color);color:#fff}.inl-select-icon-modal .ant-modal-body .icon.active .icon-img{color:#fff}.inl-header-menu{background-color:#132041;width:100%}.inl-header-menu-item{background:linear-gradient(180deg,rgba(76,146,230,0),rgba(13,95,201,.5));cursor:pointer;opacity:.5;padding:5px 40px}.inl-header-menu-item>span{color:#fff}.inl-header-menu-item.inl-header-menu-item-active,.inl-header-menu-item:hover{background:linear-gradient(180deg,rgba(58,117,205,0),rgba(58,117,205,0) 0,rgba(79,115,228,.3) 71%,rgba(81,115,230,.6) 91%,rgba(71,98,226,.9));border-bottom:1px solid;border-image:linear-gradient(180deg,rgba(156,194,247,0),#628fec) 1 1;opacity:1}.inl-header-menu-title{align-items:center;display:flex;padding:5px 0}.inl-header-menu-title-text{color:#fff;font-size:30px;text-align:center;text-shadow:0 0 9px #389aff}.inl-header-menu-center-title{background:url(/micro-assets/device/titleCenter.png) no-repeat;background-size:100% 100%;justify-content:center;width:25%}.inl-header-menu-left-title{background:url(/micro-assets/device/titleLeft.png) no-repeat;background-size:contain;padding-left:30px;width:40%}.inl-header-menu-content,.inl-header-menu-content-left{align-items:center;display:flex}.inl-header-menu-content-left{background:url(/micro-assets/device/menuLeft.png) no-repeat;background-position:0 100%;background-size:contain;flex:1;justify-content:space-between;padding:5px 0}.inl-header-menu-content-left-right{display:flex;justify-content:flex-end}.inl-header-menu-content-left-right .inl-header-menu-item{clip-path:polygon(0 0,80% 0,100% 100%,20% 100%)}.inl-header-menu-content-right{align-items:center;background:url(/micro-assets/device/menuRight.png) no-repeat;background-position:0 100%;background-size:contain;display:flex;flex:1;justify-content:space-between;padding:5px 0}.inl-header-menu-content-right-left{display:flex;justify-content:flex-start}.inl-header-menu-content-right-left .inl-header-menu-item{clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.inl-header-menu-left .inl-header-menu-content-right{background:none;justify-content:flex-end}.inl-child-layout{height:100%}.inl-child-layout .sider{background:#fff}.inl-child-layout .sider .sideMenu{display:flex;flex-direction:column;height:100%;overflow:auto}.inl-child-layout .sider .sideMenu .ant-menu{flex:1}.inl-child-layout .ant-layout-header.header-container{background-color:#132041;height:50px;line-height:50px;padding:0 20px 0 0}.inl-child-layout .child-header{display:flex;justify-content:space-between}.inl-child-layout .child-header .logo{align-items:center;display:flex;justify-content:center;width:200px}.inl-child-layout .child-header .logo img{width:140px}.inl-child-layout .child-header .user-info{margin:0 20px}.inl-child-layout .child-header .user-info .avatar{margin-right:8px}.inl-child-layout .child-header .user-info .username{color:#fff}.inl-child-layout .child-header-dev{color:#fff;display:flex;justify-content:space-between;margin:0 0 0 20px}.inl-child-layout .child-header-dev .desc{display:flex}.inl-child-layout .child-header-dev .desc .label{color:#ccc;margin-right:8px;user-select:none}.inl-child-layout .child-header-dev .desc .label:after{content:":"}.inl-child-layout .child-header-dev .desc .value{font-size:16px;font-weight:600}.inl-child-layout .layout-content{display:flex;flex-direction:column;overflow:auto;padding:20px}.inl-child-layout .layout-content .content-inner{background:#fff;display:flex;flex:1 1 100%;flex-direction:column;padding:20px}.inl-child-layout .layout-content .content-inner>*{flex:1 1 0}[data-doc-theme=light] .inl-child-layout .ant-layout-header.header-container{background:linear-gradient(90deg,#3297ff,#286be6)!important}.independent-container{height:100%;overflow:auto;padding:20px}.people-select-cpn-modal .container{display:flex;height:50vh}.people-select-cpn-modal .container .left,.people-select-cpn-modal .container .right{display:flex;flex:1;flex-direction:column;overflow:hidden}.people-select-cpn-modal .container .left .title,.people-select-cpn-modal .container .right .title{color:#31363c;font-size:14px;font-weight:600;margin-bottom:0}.people-select-cpn-modal .container .left{margin-right:16px}.people-select-cpn-modal .container .left .dep-breadcrumb,.people-select-cpn-modal .container .left .search-people-input{margin-bottom:16px;width:100%}.people-select-cpn-modal .container .left .dep-breadcrumb .ant-breadcrumb:nth-child(n - 1),.people-select-cpn-modal .container .left .search-people-input .ant-breadcrumb:nth-child(n - 1){color:var(--primary-color);cursor:pointer}.people-select-cpn-modal .container .left .tree{flex:1;overflow:auto}.people-select-cpn-modal .container .left .tree .ant-tree-node-content-wrapper{overflow:hidden}.people-select-cpn-modal .container .left .tree .ant-tree-switcher-noop{display:none}.people-select-cpn-modal .container .left .tree .node-title{display:flex;justify-content:space-between}.people-select-cpn-modal .container .left .tree .node-title .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-select-cpn-modal .container .left .tree .node-title .count{color:#aaa}.people-select-cpn-modal .container .right .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.people-select-cpn-modal .container .right .header .select-text{font-weight:400}.people-select-cpn-modal .container .right .header .select-text em{color:var(--primary-color);font-style:normal;margin:0 4px}.people-select-cpn-modal .container .right .selected-container{align-content:flex-start;display:flex;flex:1;flex-wrap:wrap;overflow-y:auto}.people-select-cpn-modal .container .right .selected-container .ant-tag{margin-bottom:10px}.inl-param-manager{flex-direction:column;overflow:hidden}.inl-param-manager .ant-tabs{position:relative}.inl-param-manager .ant-tabs .ant-tabs-content-holder{overflow:auto}.inl-param-manager .tab-item .operation{text-align:right}.inl-param-manager .tab-item .operation>.ant-space{position:absolute;right:0;top:0}.inl-param-manager .tab-item .group-container .group-item-title{font-size:14px;font-weight:600}.inl-param-manager .tab-item .group-container .ant-form{overflow:hidden}.inl-param-manager .tab-item .group-container .collapse-container{margin:16px 0}.inl-param-manager .tab-item .group-container .collapse-container .header{align-items:center;display:flex;line-height:1;padding-left:16px;position:relative}.inl-param-manager .tab-item .group-container .collapse-container .header .container-title{font-size:14px;font-weight:600}.inl-param-manager .tab-item .group-container .collapse-container .header:before{background-color:#4b7ff7;bottom:0;content:" ";left:0;position:absolute;top:0;width:2px}.inl-param-manager-v2{display:flex;height:100%}.inl-param-manager-v2 .menu{height:100%;overflow-y:auto;width:200px}.inl-param-manager-v2 .menu .ant-menu{background-color:#fff;color:#31363c;min-height:100%}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item{margin:0!important}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item-selected,.inl-param-manager-v2 .menu .ant-menu .ant-menu-item:hover{color:var(--primary-color)}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item.ant-menu-item-selected{background:#eff4ff}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item.ant-menu-item-selected .ant-menu-title-content{font-weight:600}.inl-param-manager-v2 .menu .ant-menu.ant-menu-inline .ant-menu-item-selected:after{border-right-color:var(--primary-color)}.inl-param-manager-v2 .right{flex:1 1 0;margin-left:16px}.inl-param-manager-v2 .right .ant-tabs{height:100%;position:relative}.inl-param-manager-v2 .right .ant-tabs .ant-tabs-content-holder{overflow:auto;padding:0 8PX}.inl-param-manager-v2 .right .ant-tabs .tab-level .operation{position:absolute;right:0;top:0}.inl-param-manager-v2 .right .ant-tabs .cell-title{font-weight:500;margin-bottom:8px}.inl-param-manager-v2 .right .ant-tabs .param-item-input:not(.ant-switch){width:100%}.detail.fill{height:100%;overflow:hidden}.detail.fill>.detail-inner{height:100%}.inl-collapse-title__header{align-items:center;display:flex;margin-bottom:16px;padding-left:10px;position:relative}.inl-collapse-title__header:before{background-color:var(--primary-color);bottom:10%;content:"";left:0;position:absolute;top:10%;width:4px}.inl-collapse-title__header .title{font-weight:600}.inl-collapse-title__header .btn-toggle{margin-left:8px}.ssz-comment .comment{background-color:#f4f5f8;border-radius:4px;color:#1f2329;font-size:13px;margin:12px;padding:8px;text-align:center}.ssz-comment .comment .anticon{margin-right:4px}.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}.cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}.videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.inl-chat-box-origin{background:linear-gradient(180deg,#e9f0ff,#d6e3ff);display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;position:relative}.inl-chat-box-origin .qa-context{flex:auto;overflow:auto}.inl-chat-box-origin .qa-context::-webkit-scrollbar{display:none}.inl-chat-box-origin .bottom{padding-top:12px}.inl-chat-box-origin .bottom .tips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.inl-chat-box-origin .bottom .tips .tip{background-color:#fff;border-radius:12px;color:#20242b;font-size:12px;padding:4px 12px}.inl-chat-box-origin .bottom .chat-box-input{align-items:center;background-color:#fff;border:2px solid transparent;border-radius:8px;display:flex;height:44px;padding:0 16px;transition:all .2s ease-in-out}.inl-chat-box-origin .bottom .chat-box-input.focus{border-color:#a0f7fd}.inl-chat-box-origin .bottom .chat-box-input .btn-abort,.inl-chat-box-origin .bottom .chat-box-input .img-mic,.inl-chat-box-origin .bottom .chat-box-input .img-send{align-items:center;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.inl-chat-box-origin .bottom .chat-box-input .ant-input{flex:1}.inl-chat-box-origin .bottom .chat-box-input .anticon{color:#3e7eff;font-size:22px}.inl-chat-box-origin .bottom .exemption{color:#a6b2e8;font-size:12px;margin-top:16px;text-align:center}.inl-chat-box-origin .bubble{border-radius:12px;max-width:calc(100% - 32px);overflow:hidden;padding:8px 16px;width:max-content}.inl-chat-box-origin .bubble.answer{background:#fff;border-top-left-radius:0;margin-left:32px}.inl-chat-box-origin .bubble.question{background:#3e7eff;border-top-right-radius:0;color:#fff;margin-left:auto;margin-right:32px}.inl-chat-box-origin .chat-bubble{margin-bottom:24px}.inl-chat-box-origin .chat-bubble .suggestion-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-width:calc(100% - 32px)}.inl-chat-box-origin .chat-bubble .suggestion-list .suggestion-item{background:#fff;border:1px solid #dce2ff;border-radius:16px;color:#9f9fa2;max-width:100%;padding:4px 12px;width:max-content;word-break:break-all}.inl-chat-box-origin .chat-bubble.answer-bubble .suggestion-list{margin-left:32px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates{display:flex;gap:16px;margin-top:12px;padding-left:32px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item{align-items:center;background-repeat:no-repeat;background-size:contain;color:#b6c2ff;cursor:pointer;display:flex;height:18px;width:18px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.operate-nav{width:max-content}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item .nav.disabled{color:rgba(211,216,245,.526);cursor:not-allowed}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete{background-image:url(/micro-assets/largeLanguageModel/delete.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete:hover{background-image:url(/micro-assets/largeLanguageModel/delete-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete.active{background-image:url(/micro-assets/largeLanguageModel/delete-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate{background-image:url(/micro-assets/largeLanguageModel/regenerate.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate:hover{background-image:url(/micro-assets/largeLanguageModel/regenerate-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate.active{background-image:url(/micro-assets/largeLanguageModel/regenerate-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment{background-image:url(/micro-assets/largeLanguageModel/comment.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment:hover{background-image:url(/micro-assets/largeLanguageModel/comment-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment.active{background-image:url(/micro-assets/largeLanguageModel/comment-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike{background-image:url(/micro-assets/largeLanguageModel/dislike.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike:hover{background-image:url(/micro-assets/largeLanguageModel/dislike-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike.active{background-image:url(/micro-assets/largeLanguageModel/dislike-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like{background-image:url(/micro-assets/largeLanguageModel/like.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like:hover{background-image:url(/micro-assets/largeLanguageModel/like-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like.active{background-image:url(/micro-assets/largeLanguageModel/like-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy{background-image:url(/micro-assets/largeLanguageModel/copy.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy:hover{background-image:url(/micro-assets/largeLanguageModel/copy-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy.active{background-image:url(/micro-assets/largeLanguageModel/copy-active.png)}.inl-chat-box-origin .chat-avatar{align-items:center;display:flex;gap:8px}.inl-chat-box-origin .chat-avatar .avatar{width:32px}.inl-chat-box-origin .chat-avatar .chat-avatar-name{color:#20242b;font-weight:600}.inl-chat-box-origin .chat-avatar.chat-avatar-reverse{flex-flow:row-reverse}.inl-chat-box-origin .qa-context .time-line{color:#606f91;text-align:center}.inl-chat-box-origin .speech-recognition{background-color:#1a3468;bottom:0;left:0;position:absolute;right:0;top:0}.inl-chat-box-origin .speech-recognition-inner{align-items:center;bottom:0;color:#fff;display:flex;flex-direction:column;height:260px;justify-content:space-around;left:0;position:absolute;right:0}.inl-chat-box-origin .speech-recognition-inner:before{background:linear-gradient(180deg,#287eff,#8f20ff);bottom:0;clip-path:ellipse(100% 52% at 50% 59%);content:"";display:block;left:0;position:absolute;right:0;top:0}.inl-chat-box-origin .speech-recognition-inner>*{z-index:1}.inl-chat-box-origin .speech-recognition-inner .img-bot{height:100px;object-fit:contain;position:absolute;top:-60px;transform:rotate(-13deg);width:80px}.inl-chat-box-origin .speech-recognition-inner .current-text{font-size:16px}.inl-chat-box-origin .speech-recognition-inner .btn-container{display:flex}.inl-chat-box-origin .speech-recognition-inner .btn-container .btn{border:1px solid #fff;border-radius:12px;cursor:pointer;font-size:12px;line-height:1;padding:6px 0;text-align:center;user-select:none;width:85px}.inl-chat-box-origin .speech-recognition-inner .tips{color:#b6c2ff;font-size:12px}.inl-chat-box-origin .speech-recognition-inner .btn-close{align-items:center;cursor:pointer;display:flex;font-size:30px;font-weight:300;justify-content:center;line-height:1;position:absolute;right:10px;top:10px;transform:rotate(45deg)}.inl-chat-box-origin.inl-chat-box-origin-dark{background-color:#1a3468;background-image:none}.inl-chat-box-origin.inl-chat-box-origin-dark .bottom .tips .tip{border:1px solid #75d8e6;color:#75d8e6}.inl-chat-box-origin.inl-chat-box-origin-dark .bottom .chat-box-input .btn-abord{color:#354052;cursor:pointer;font-size:20px}.inl-chat-box-origin.inl-chat-box-origin-dark .chat-avatar .chat-avatar-name{color:#fff}.inl-chat-box-origin.inl-chat-box-origin-dark .bubble.answer{background:linear-gradient(180deg,#287eff,#8f20ff)}.inl-chat-box-origin.inl-chat-box-origin-dark .bubble.question{background:linear-gradient(180deg,#d1fff8,#78f8ff);color:#20242b}.inl-chat-box-origin.inl-chat-box-origin-dark .chat-bubble .suggestion-item{background:#2a399a;border:1px solid #899cfd;color:#fff}:root{--primary-color:#1d33a2;--primary-color-rgb:29,51,162}:root[data-doc-theme=light]{--primary-color:#3e7eff;--primary-color-rgb:62,126,255}
+.scrollbarDef ::-webkit-scrollbar-track-piece{background-color:#f8f8f8}.scrollbarDef ::-webkit-scrollbar{height:5px;width:5px}.scrollbarDef ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#ddd;min-height:28px}.scrollbarDef ::-webkit-scrollbar-thumb:hover{background-color:#bbb}.scrollbarBlack::-webkit-scrollbar-track-piece{background-color:transparent}.scrollbarBlack::-webkit-scrollbar{height:5px;width:0}.scrollbarBlack::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#3d4456;min-height:28px}@font-face{font-family:YouSheBiaoTiHei;src:url(/micro-assets/font/youshebiaotihei.TTF)}@font-face{font-family:DINPro-Light;src:url(/micro-assets/font/DINPro-Light.otf)}@font-face{font-family:DINPro-Regular;src:url(/micro-assets/font/DINPro-Regular.otf)}@font-face{font-family:DINPro-Medium;src:url(/micro-assets/font/DINPro-Medium.otf)}@font-face{font-family:DINPro-Bold;src:url(/micro-assets/font/DINPro-Bold.otf)}@font-face{font-family:DINPro-Black;src:url(/micro-assets/font/DINPro-Black.otf)}@font-face{font-family:Alibaba-PuHuiTi-Light;src:url(/micro-assets/font/Alibaba-PuHuiTi-Light.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Regular;src:url(/micro-assets/font/Alibaba-PuHuiTi-Regular.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Medium;src:url(/micro-assets/font/Alibaba-PuHuiTi-Medium.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Bold;src:url(/micro-assets/font/Alibaba-PuHuiTi-Bold.ttf)}@font-face{font-family:Alibaba-PuHuiTi-Heavy;src:url(/micro-assets/font/Alibaba-PuHuiTi-Heavy.ttf)}@font-face{font-family:SourceHanSansCN-ExtraLight;src:url(/micro-assets/font/SourceHanSansCN-ExtraLight.otf)}@font-face{font-family:SourceHanSansCN-Light;src:url(/micro-assets/font/SourceHanSansCN-Light.otf)}@font-face{font-family:SourceHanSansCN-Regular;src:url(/micro-assets/font/SourceHanSansCN-Regular.otf)}@font-face{font-family:SourceHanSansCN-Normal;src:url(/micro-assets/font/SourceHanSansCN-Normal.otf)}@font-face{font-family:SourceHanSansCN-Medium;src:url(/micro-assets/font/SourceHanSansCN-Medium.otf)}@font-face{font-family:SourceHanSansCN-Bold;src:url(/micro-assets/font/SourceHanSansCN-Bold.otf)}@font-face{font-family:SourceHanSansCN-Heavy;src:url(/micro-assets/font/SourceHanSansCN-Heavy.otf)}body .ant-form-inline.table-query-form{margin-bottom:8px}body .ant-form-inline.table-query-form>.ant-row:not(.ant-form-item){width:100%}body .ant-form-inline.table-query-form .ant-form-item{margin-bottom:16px}body .ant-form-inline.table-query-form .ant-form-item .ant-input,body .ant-form-inline.table-query-form .ant-form-item .ant-select{width:200px}::-webkit-scrollbar-track-piece{background-color:#f8f8f8}::-webkit-scrollbar{height:5px;width:5px}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#ddd;min-height:28px}::-webkit-scrollbar-thumb:hover{background-color:#bbb}.flex{display:flex}.flex-center{align-items:center;display:flex}.flex1{flex:1}.flex2{flex:2}.flex3{flex:3}.flex4{flex:4}.flex5{flex:5}.flex6{flex:6}.flex7{flex:7}.flex8{flex:8}.flex9{flex:9}.flex10{flex:10}.flex11{flex:11}.flex12{flex:12}.Demo{color:red}.ant-layout .inl-layout-sider.ant-layout-sider{background:#1b2c55}.ant-layout .inl-layout-sider.ant-layout-sider .ant-layout-sider-children{display:flex;flex-direction:column}.ant-layout .inl-layout-sider.ant-layout-sider .folder{color:#fff;cursor:pointer;font-size:20px;height:38px;line-height:38px;opacity:.8;padding:0 16px;text-align:right;transition:opacity .3s ease-in-out}.ant-layout .inl-layout-sider.ant-layout-sider .folder:hover{opacity:1}.ant-layout .inl-layout-sider.ant-layout-sider .folder.isFold{text-align:center}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu{background-color:transparent;border-right:0!important;flex:1;font-size:14px;overflow-x:hidden;overflow-y:auto}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar-track-piece{background-color:transparent}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar{height:5px;width:0}.ant-layout .inl-layout-sider.ant-layout-sider .ant-menu::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#3d4456;min-height:28px}.ant-layout .inl-layout-sider.ant-layout-sider .copyright{color:#b9c2d5;font-size:12px;opacity:.3;padding:8px;text-align:center}.ant-layout .inl-layout-sider.ant-layout-sider.ant-layout-sider-collapsed .copyright{display:none}body[data-theme=light] .inl-layout-sider.ant-layout-sider{background:#fff}body[data-theme=light] .inl-layout-sider.ant-layout-sider .folder{color:#000}body[data-theme=light] .inl-layout-sider.ant-layout-sider.ant-layout-sider-collapsed .folder{text-align:center}body[data-theme=light] .inl-layout-sider.ant-layout-sider .copyright{color:#000}.inl-layout .layout-mask{background:#000;bottom:0;clip-path:polygon(0 0,0 100%,210px 100%,210px 92px,calc(100% - 10px) 92px,calc(100% - 10px) calc(100% - 10px),210px calc(100% - 10px),210px 100%,100% 100%,100% 0);left:0;opacity:.5;position:absolute;right:0;top:0;z-index:1000}.inl-layout .ant-layout{height:100%}.inl-layout .ant-layout .ant-layout-header{background-color:#132041;height:50px;line-height:50px;padding:0}.inl-layout .ant-layout .ant-layout-header .header{align-items:center;display:flex;padding-right:20px}.inl-layout .ant-layout .ant-layout-header .header .logo{align-items:center;display:flex;justify-content:center;width:200px}.inl-layout .ant-layout .ant-layout-header .header .logo img{width:140px}.inl-layout .ant-layout .ant-layout-header .header .menu{background-color:transparent;border-bottom:0;flex:auto;font-size:14px;overflow:hidden}.inl-layout .ant-layout .ant-layout-header .header .menu .ant-menu-item-selected{background:linear-gradient(180deg,rgba(58,117,205,0),rgba(58,117,205,0) 0,rgba(71,98,226,.6))!important}.inl-layout .ant-layout .ant-layout-header .header .menu .ant-menu-item:after{content:unset!important}.inl-layout .ant-layout .ant-layout-header .header .search{background:transparent;border-color:rgba(185,194,213,.3);box-shadow:unset;color:rgba(185,194,213,.3);width:200px}.inl-layout .ant-layout .ant-layout-header .header .search input{background:transparent;color:#fff}.inl-layout .ant-layout .ant-layout-header .header .user-info{align-items:center;display:flex;margin:0 20px}.inl-layout .ant-layout .ant-layout-header .header .user-info .avatar{margin-right:8px}.inl-layout .ant-layout .ant-layout-header .header .user-info .username{align-items:center;color:#fff;display:flex}.inl-layout .ant-layout .ant-layout-header .header .logout{color:#fff;font-size:20px}.inl-layout .ant-layout .ant-layout-header .header .logout .anticon{position:relative;top:2px}.inl-layout .ant-layout .inl-layout-sider .ant-menu-item,.inl-layout .ant-layout .inl-layout-sider .ant-menu-submenu-title{margin:0}.inl-layout .ant-layout .ant-layout-content{display:flex;flex-direction:column;padding:10px}.inl-layout .ant-layout .ant-layout-content.only-page{padding:0}.inl-layout .ant-layout .ant-layout-content .tab-list{align-items:center;display:flex}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container{display:flex;flex:1;flex-wrap:nowrap;height:100%;overflow:hidden;padding:0 8px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab{align-items:center;border-radius:5px 5px 0 0;color:#2c3e50;cursor:pointer;display:flex;flex:1 1 30px;max-width:160px;padding:4px 12px 6px;position:relative;transition:all .15s;user-select:none;width:0}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:after{background:#81878c;content:"";height:60%;position:absolute;right:0;top:20%;transition:background-color .3s;width:1px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.hide-border:after,.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:hover:after{background:transparent}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .icon{margin-right:4px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tab-name{flex:1 1 0;font-size:12px;overflow:hidden;white-space:nowrap}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close{align-items:center;border-radius:50%;display:flex;font-size:12px;height:16px;justify-content:center;margin-left:6px;width:16px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close:hover{background:#e8eaed;color:#000}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-after,.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-before{fill:#fff;bottom:0;bottom:-1px;font-size:10px;position:absolute;z-index:1}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-before{left:-9px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tabs-background-after{right:-10px}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab:hover{background-color:#f2f3f5}.inl-layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.active{background-color:#fff}.inl-layout .ant-layout .ant-layout-content .tab-list .ant-select{margin-right:13px}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:0 6px;transition:all .25s;width:24px}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger:hover{background:#d2d4d8}.inl-layout .ant-layout .ant-layout-content .tab-list .show-all-trigger .anticon{font-size:12px!important}.inl-layout .ant-layout .ant-layout-content .page-content{display:flex;flex:1;flex-direction:column;overflow:hidden}.inl-layout .ant-layout .ant-layout-content .page-content .page-container{background-color:#fff;display:inline-flex;flex:1;flex-direction:column;overflow:auto;position:relative}.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_],.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_]>[id^=__qiankun_microapp_wrapper]{background-color:#fff;display:flex;flex:1;flex-direction:column;height:100%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_] #app,.inl-layout .ant-layout .ant-layout-content .page-content .page-container>[id^=microApp_]>[id^=__qiankun_microapp_wrapper] #app{flex:1;overflow:auto}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .menu-iframe{height:100%;position:absolute;width:100%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .iframe-fallback{padding-top:20px;text-align:center}.inl-layout .ant-layout .ant-layout-content .page-content .page-container .iframe-fallback img{width:30%}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding{padding:24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding [id^=microApp_]{margin:-24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding #app{padding:24px}.inl-layout .ant-layout .ant-layout-content .page-content .page-container.padding .menu-iframe{height:calc(100% - 48px);width:calc(100% - 48px)}body[data-theme=light] .inl-layout .ant-layout-header{background:linear-gradient(90deg,#3297ff,#286be6)!important}body[data-theme=light] .inl-layout .ant-layout-header .menu{background:transparent!important;color:#fff}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-item:hover{background:linear-gradient(180deg,#56a3ff,#3e7eff)!important;color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-submenu:hover{color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .menu .ant-menu-item-selected{background:linear-gradient(180deg,#56a3ff,#3e7eff)!important;color:#fff!important}body[data-theme=light] .inl-layout .ant-layout-header .search{background-color:hsla(0,0%,100%,.1)!important;margin-right:36px;width:300px}body[data-theme=light] .inl-layout .ant-layout-header .search input{color:#000!important}body[data-theme=light] .inl-layout .ant-layout-header .search input::placeholder{color:hsla(0,0%,100%,.7)!important}body[data-theme=light] .inl-layout .ant-layout-header .search .btn-search{font-size:26px}body[data-theme=light] .inl-layout .ant-menu-sub{background:transparent!important}body[data-theme=light] .inl-layout .ant-menu-inline .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical-left .ant-menu-item:after,body[data-theme=light] .inl-layout .ant-menu-vertical-right .ant-menu-item:after{background:#3e7eff;left:0;right:unset}body[data-theme=light] .inl-layout .ant-menu-item-selected{background:#eff4ff}[data-doc-theme=light] .ant-menu-light .ant-menu-submenu-title:hover{color:#3e7eff!important}.person-operation-dropdown{top:50px!important}.person-operation-dropdown .ant-dropdown-menu-item{color:#5c667d}.person-operation-dropdown .ant-dropdown-menu-item .ant-dropdown-menu-item-icon{font-size:16px}.tab-title-tooltip{padding-top:0!important}.tab-title-tooltip .ant-tooltip-arrow{display:none}.tab-title-tooltip .ant-tooltip-inner{background-color:#f0f2f5;border:1px solid #dce2ed;box-shadow:unset;color:#354052;font-size:12px;line-height:1.2;min-height:0;padding:5px 10px}.login{background-origin:content-box;background-size:cover;display:flex;flex-direction:column;font-family:PingFangSC-Ultralight,sans-serif;height:100vh;overflow:auto;overflow-y:auto;position:relative;width:100vw}.login .topTitle{left:0;margin:60px;position:absolute;top:0;z-index:2}.login .topTitle img{height:54px;width:452px}.login .content_login{display:flex;flex:1;height:700px;justify-content:space-between;padding:0 150px}.login .content_login.system{align-items:center;justify-content:center}.login .content_login.system .left,.login .content_login.system .login_box{height:600px;width:600px}.login .content_login.system .left.left,.login .content_login.system .login_box.left{align-items:center;backdrop-filter:blur(20px);background-color:hsla(0,0%,100%,.1);border-radius:6px 0 0 6px;display:flex;flex-direction:column;padding-top:54px}.login .content_login.system .left.left>div,.login .content_login.system .login_box.left>div{margin-bottom:20px}.login .content_login.system .left.left img,.login .content_login.system .login_box.left img{height:300px;margin-bottom:35px;width:425px}.login .content_login.system .left.left h3,.login .content_login.system .left.left p,.login .content_login.system .login_box.left h3,.login .content_login.system .login_box.left p{color:#fff}.login .content_login.system .left.left h3,.login .content_login.system .login_box.left h3{font-size:24px;font-weight:600;line-height:33px;text-align:center}.login .content_login.system .left.left p,.login .content_login.system .login_box.left p{font-size:14px;font-weight:0;line-height:26px;padding:0 60px}.login .content_login.system .left.login_box,.login .content_login.system .login_box.login_box{backdrop-filter:blur(20px);background-color:hsla(0,0%,100%,.15);border:none;border-radius:0 6px 6px 0}.login .content_login.platform{align-items:center;display:flex;height:100vh;left:0;overflow-y:auto;padding:0;position:absolute;top:0;width:100vw}.login .content_login.platform .login_center_box{align-items:center;display:flex;flex:1;justify-content:flex-start}.login .content_login.platform .left{align-items:center;display:flex;flex:2;justify-content:center;padding-top:54px}.login .content_login.platform .left .left_img{height:700px;width:920px}.login .content_login .login_box{background:linear-gradient(180deg,hsla(0,0%,100%,.07),hsla(0,0%,100%,0));display:flex;flex-direction:column;flex-shrink:0;height:540px;position:relative;right:0;width:440px}.login .content_login .login_box>div{border:3px solid;border-image:linear-gradient(rgba(229,235,255,.09),hsla(0,0%,100%,0)) 80 30}.login .content_login .login_box>div .ant-input-affix-wrapper:before{content:unset!important}.login .content_login .login_box .ant-form{flex:1}.login .content_login .login_box .ant-form .ant-form-item{flex:1;margin-bottom:24px}.login .content_login .login_box .ant-form .ant-form-item.mB64{margin-bottom:64px}.login .content_login .login_box .ant-form .ant-form-item .ant-form-item-label{padding-bottom:16px}.login .content_login .login_box .ant-form .ant-form-item .ant-form-item-label label{font-size:16px}.login .copyright-information{bottom:30px;color:#7b8492;font-family:PingFangSC-Regular,PingFang SC;font-size:14px;font-weight:400;left:0;line-height:30px;margin:0;position:absolute;right:0;text-align:center}.login-messsage-notice .ant-message-notice-content{background:transparent;padding:0}.login_slider .ant-modal-body{padding:0}.login_slider .imgBox{height:268px;position:relative;width:432px}.login_slider .imgBox .anticon{color:#fff;position:absolute;right:10px;top:10px;z-index:3}.login_slider .imgBox img{position:absolute;z-index:2}.login_slider .imgBox .bgImg{height:268px;width:432px;z-index:1}.login_slider .modal-box{box-sizing:content-box}.login_slider .ant-slider{background-color:#f4f6f8;height:44px;margin:24px 0 0;padding:0}.login_slider .ant-slider .ant-slider-rail,.login_slider .ant-slider .ant-slider-step,.login_slider .ant-slider .ant-slider-track{height:44px;padding:0;top:0}.login_slider .ant-slider .ant-slider-track,.login_slider .ant-slider:hover .ant-slider-track{background-color:#22cc83}.login_slider .ant-slider .ant-slider-handle{background-color:#fff;border:1px solid #ccc;border-radius:2px;height:54px;top:0;transform:translateX(-2%)!important;width:54px}.login_slider .ant-slider .ant-slider-handle:after{content:">>";line-height:54px;position:absolute;text-align:center;width:100%}.login_slider .ant-slider .ant-slider-rail{background-color:#f4f6f8;position:relative}.login_slider .ant-slider .ant-slider-rail:before{content:"向右滑动完成拼图";line-height:44px;position:absolute;text-align:center;width:100%}.login_box{display:flex;flex-direction:column}.login_box>div .ant-input{color:#fff!important}.login_box input{color:#fff;height:44px}.login_box input:-internal-autofill-previewed,.login_box input:-internal-autofill-selected{-webkit-text-fill-color:#fff;color:#fff!important;transition:background-color 9999s ease-out .1s}.login_box .ant-input-password span span svg{color:#fff}.login_box .ant-form{padding:0 67px}.login_box .ant-form-item{margin-bottom:44px}.login_box .ant-form-item .ant-input-password,.login_box .ant-form-item input{background:none;background-color:hsla(0,0%,100%,.2);font-size:16px;height:44px;line-height:0px}.login_box .ant-form-item .ant-input-password input,.login_box .ant-form-item input input{background:none;height:auto}.login_box .ant-form-item .ant-input-password .ant-input-suffix,.login_box .ant-form-item input .ant-input-suffix{font-size:14px}.login_box .ant-form-item .ant-btn{border:none;border-radius:0;font-size:18px;height:43px;line-height:0px}.login_box .ant-form-item .ant-form-item-control-input-content .ant-input-password,.login_box .ant-form-item .ant-form-item-control-input-content>.ant-input{border:1px solid #5e657f;border-radius:0}.login_box .titleBox{display:flex;justify-content:center;margin:44px 0}.login_box .titleBox img{height:36px}.login_box .titleBox .title{color:#fff;font-family:YouSheBiaoTiHei;font-size:28px;font-weight:600;height:40px;line-height:40px;padding:0}.login_box .ant-form label{color:#fff;font-family:PingFangSC-Medium,PingFang SC;font-size:16px;font-weight:500;height:22px;line-height:22px}.login_box .login_tab{display:flex;height:3rem}.login_box .login_tab .item{background:#ebf8ff;cursor:pointer;flex:1;line-height:2.8rem;opacity:.5;text-align:center;transition:all .3s ease}.login_box .login_tab .item.active,.login_box .login_tab .item:hover{background:linear-gradient(90deg,#2eb2ff,#6d71ff);color:#fff;opacity:.8}body[data-theme=light] .login_box>div .ant-input{color:#fff!important}body[data-theme=light] .login_box input:-internal-autofill-previewed,body[data-theme=light] .login_box input:-internal-autofill-selected{transition:background-color 9999s ease-out .1s}body[data-theme=light] input:-internal-autofill-previewed,body[data-theme=light] input:-internal-autofill-selected{transition:background-color 9999s ease-out .1s}.ant-select-item-option-content .color{background-color:#3e7eff;display:inline-block;height:10px;margin-right:3px;width:10px}.ant-select-item-option-content .dark{background-color:#1d33a2}.theme-select .color{background-color:#3e7eff;display:inline-block;height:10px;margin-right:3px;width:10px}.theme-select .dark{background-color:#1d33a2}.inl-layout-table-box{display:flex;flex-direction:column}.inl-layout-table-box .inl-layout-table-option{display:flex;justify-content:space-between;margin-bottom:16px}.icon-item-class{align-items:center;background:#eff2f6;border:1px solid transparent;cursor:pointer;display:flex;justify-content:center;padding:7px 8px;transition:all .2s ease-in-out}.icon-item-class-img{color:#333;font-size:24px;margin-right:8px}.icon-item-class-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-item-class:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.icon-item-class.active{background:var(--primary-color);color:#fff}.icon-item-class.active .icon-img{color:#fff}.inl-iconfonts,.inl-iconfonts .icon{align-items:center;display:flex}.inl-iconfonts .icon{background:#eff2f6;border:1px solid transparent;cursor:pointer;justify-content:center;margin-right:16px;padding:7px 8px;transition:all .2s ease-in-out}.inl-iconfonts .icon-img{color:#333;font-size:24px;margin-right:8px}.inl-iconfonts .icon-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inl-iconfonts .icon:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.inl-iconfonts .icon.active{background:var(--primary-color);color:#fff}.inl-iconfonts .icon.active .icon-img{color:#fff}.inl-select-icon-modal .ant-modal-body{height:70vh;overflow:auto}.inl-select-icon-modal .ant-modal-body .search{margin-bottom:24px;width:200PX}.inl-select-icon-modal .ant-modal-body .icon{align-items:center;background:#eff2f6;border:1px solid transparent;cursor:pointer;display:flex;justify-content:center;padding:7px 8px;transition:all .2s ease-in-out}.inl-select-icon-modal .ant-modal-body .icon-img{color:#333;font-size:24px;margin-right:8px}.inl-select-icon-modal .ant-modal-body .icon-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inl-select-icon-modal .ant-modal-body .icon:hover{background:rgba(var(--primary-color-rgb),.2);border-color:var(--primary-color)}.inl-select-icon-modal .ant-modal-body .icon.active{background:var(--primary-color);color:#fff}.inl-select-icon-modal .ant-modal-body .icon.active .icon-img{color:#fff}.inl-header-menu{background-color:#132041;width:100%}.inl-header-menu-item{background:linear-gradient(180deg,rgba(76,146,230,0),rgba(13,95,201,.5));cursor:pointer;opacity:.5;padding:5px 40px}.inl-header-menu-item>span{color:#fff}.inl-header-menu-item.inl-header-menu-item-active,.inl-header-menu-item:hover{background:linear-gradient(180deg,rgba(58,117,205,0),rgba(58,117,205,0) 0,rgba(79,115,228,.3) 71%,rgba(81,115,230,.6) 91%,rgba(71,98,226,.9));border-bottom:1px solid;border-image:linear-gradient(180deg,rgba(156,194,247,0),#628fec) 1 1;opacity:1}.inl-header-menu-title{align-items:center;display:flex;padding:5px 0}.inl-header-menu-title-text{color:#fff;font-size:30px;text-align:center;text-shadow:0 0 9px #389aff}.inl-header-menu-center-title{background:url(/micro-assets/device/titleCenter.png) no-repeat;background-size:100% 100%;justify-content:center;width:25%}.inl-header-menu-left-title{background:url(/micro-assets/device/titleLeft.png) no-repeat;background-size:contain;padding-left:30px;width:40%}.inl-header-menu-content,.inl-header-menu-content-left{align-items:center;display:flex}.inl-header-menu-content-left{background:url(/micro-assets/device/menuLeft.png) no-repeat;background-position:0 100%;background-size:contain;flex:1;justify-content:space-between;padding:5px 0}.inl-header-menu-content-left-right{display:flex;justify-content:flex-end}.inl-header-menu-content-left-right .inl-header-menu-item{clip-path:polygon(0 0,80% 0,100% 100%,20% 100%)}.inl-header-menu-content-right{align-items:center;background:url(/micro-assets/device/menuRight.png) no-repeat;background-position:0 100%;background-size:contain;display:flex;flex:1;justify-content:space-between;padding:5px 0}.inl-header-menu-content-right-left{display:flex;justify-content:flex-start}.inl-header-menu-content-right-left .inl-header-menu-item{clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.inl-header-menu-left .inl-header-menu-content-right{background:none;justify-content:flex-end}.inl-child-layout{height:100%}.inl-child-layout .sider{background:#fff}.inl-child-layout .sider .sideMenu{display:flex;flex-direction:column;height:100%;overflow:auto}.inl-child-layout .sider .sideMenu .ant-menu{flex:1}.inl-child-layout .ant-layout-header.header-container{background-color:#132041;height:50px;line-height:50px;padding:0 20px 0 0}.inl-child-layout .child-header{display:flex;justify-content:space-between}.inl-child-layout .child-header .logo{align-items:center;display:flex;justify-content:center;width:200px}.inl-child-layout .child-header .logo img{width:140px}.inl-child-layout .child-header .user-info{margin:0 20px}.inl-child-layout .child-header .user-info .avatar{margin-right:8px}.inl-child-layout .child-header .user-info .username{color:#fff}.inl-child-layout .child-header-dev{color:#fff;display:flex;justify-content:space-between;margin:0 0 0 20px}.inl-child-layout .child-header-dev .desc{display:flex}.inl-child-layout .child-header-dev .desc .label{color:#ccc;margin-right:8px;user-select:none}.inl-child-layout .child-header-dev .desc .label:after{content:":"}.inl-child-layout .child-header-dev .desc .value{font-size:16px;font-weight:600}.inl-child-layout .layout-content{display:flex;flex-direction:column;overflow:auto;padding:20px}.inl-child-layout .layout-content .content-inner{background:#fff;display:flex;flex:1 1 100%;flex-direction:column;padding:20px}.inl-child-layout .layout-content .content-inner>*{flex:1 1 0}[data-doc-theme=light] .inl-child-layout .ant-layout-header.header-container{background:linear-gradient(90deg,#3297ff,#286be6)!important}.independent-container{height:100%;overflow:auto;padding:20px}.people-select-cpn-modal .container{display:flex;height:50vh}.people-select-cpn-modal .container .left,.people-select-cpn-modal .container .right{display:flex;flex:1;flex-direction:column;overflow:hidden}.people-select-cpn-modal .container .left .title,.people-select-cpn-modal .container .right .title{color:#31363c;font-size:14px;font-weight:600;margin-bottom:0}.people-select-cpn-modal .container .left{margin-right:16px}.people-select-cpn-modal .container .left .dep-breadcrumb,.people-select-cpn-modal .container .left .search-people-input{margin-bottom:16px;width:100%}.people-select-cpn-modal .container .left .dep-breadcrumb .ant-breadcrumb:nth-child(n - 1),.people-select-cpn-modal .container .left .search-people-input .ant-breadcrumb:nth-child(n - 1){color:var(--primary-color);cursor:pointer}.people-select-cpn-modal .container .left .tree{flex:1;overflow:auto}.people-select-cpn-modal .container .left .tree .ant-tree-node-content-wrapper{overflow:hidden}.people-select-cpn-modal .container .left .tree .ant-tree-switcher-noop{display:none}.people-select-cpn-modal .container .left .tree .node-title{display:flex;justify-content:space-between}.people-select-cpn-modal .container .left .tree .node-title .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-select-cpn-modal .container .left .tree .node-title .count{color:#aaa}.people-select-cpn-modal .container .right .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.people-select-cpn-modal .container .right .header .select-text{font-weight:400}.people-select-cpn-modal .container .right .header .select-text em{color:var(--primary-color);font-style:normal;margin:0 4px}.people-select-cpn-modal .container .right .selected-container{align-content:flex-start;display:flex;flex:1;flex-wrap:wrap;overflow-y:auto}.people-select-cpn-modal .container .right .selected-container .ant-tag{margin-bottom:10px}.inl-param-manager{flex-direction:column;overflow:hidden}.inl-param-manager .ant-tabs{position:relative}.inl-param-manager .ant-tabs .ant-tabs-content-holder{overflow:auto}.inl-param-manager .tab-item .operation{text-align:right}.inl-param-manager .tab-item .operation>.ant-space{position:absolute;right:0;top:0}.inl-param-manager .tab-item .group-container .group-item-title{font-size:14px;font-weight:600}.inl-param-manager .tab-item .group-container .ant-form{overflow:hidden}.inl-param-manager .tab-item .group-container .collapse-container{margin:16px 0}.inl-param-manager .tab-item .group-container .collapse-container .header{align-items:center;display:flex;line-height:1;padding-left:16px;position:relative}.inl-param-manager .tab-item .group-container .collapse-container .header .container-title{font-size:14px;font-weight:600}.inl-param-manager .tab-item .group-container .collapse-container .header:before{background-color:#4b7ff7;bottom:0;content:" ";left:0;position:absolute;top:0;width:2px}.inl-param-manager-v2{display:flex;height:100%}.inl-param-manager-v2 .menu{height:100%;overflow-y:auto;width:200px}.inl-param-manager-v2 .menu .ant-menu{background-color:#fff;color:#31363c;min-height:100%}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item{margin:0!important}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item-selected,.inl-param-manager-v2 .menu .ant-menu .ant-menu-item:hover{color:var(--primary-color)}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item.ant-menu-item-selected{background:#eff4ff}.inl-param-manager-v2 .menu .ant-menu .ant-menu-item.ant-menu-item-selected .ant-menu-title-content{font-weight:600}.inl-param-manager-v2 .menu .ant-menu.ant-menu-inline .ant-menu-item-selected:after{border-right-color:var(--primary-color)}.inl-param-manager-v2 .right{flex:1 1 0;margin-left:16px}.inl-param-manager-v2 .right .ant-tabs{height:100%;position:relative}.inl-param-manager-v2 .right .ant-tabs .ant-tabs-content-holder{overflow:auto;padding:0 8PX}.inl-param-manager-v2 .right .ant-tabs .tab-level .operation{position:absolute;right:0;top:0}.inl-param-manager-v2 .right .ant-tabs .cell-title{font-weight:500;margin-bottom:8px}.inl-param-manager-v2 .right .ant-tabs .param-item-input:not(.ant-switch){width:100%}.detail.fill{height:100%;overflow:hidden}.detail.fill>.detail-inner{height:100%}.inl-collapse-title__header{align-items:center;display:flex;margin-bottom:16px;padding-left:10px;position:relative}.inl-collapse-title__header:before{background-color:var(--primary-color);bottom:10%;content:"";left:0;position:absolute;top:10%;width:4px}.inl-collapse-title__header .title{font-weight:600}.inl-collapse-title__header .btn-toggle{margin-left:8px}.ssz-comment .comment{background-color:#f4f5f8;border-radius:4px;color:#1f2329;font-size:13px;margin:12px;padding:8px;text-align:center}.ssz-comment .comment .anticon{margin-right:4px}.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}.cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}.videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.inl-chat-box-origin{background:linear-gradient(180deg,#e9f0ff,#d6e3ff);display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;position:relative}.inl-chat-box-origin .qa-context{flex:auto;overflow:auto}.inl-chat-box-origin .qa-context::-webkit-scrollbar{display:none}.inl-chat-box-origin .bottom{padding-top:12px}.inl-chat-box-origin .bottom .tips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.inl-chat-box-origin .bottom .tips .tip{background-color:#fff;border-radius:12px;color:#20242b;font-size:12px;padding:4px 12px}.inl-chat-box-origin .bottom .chat-box-input{align-items:center;background-color:#fff;border:2px solid transparent;border-radius:8px;display:flex;height:44px;padding:0 16px;transition:all .2s ease-in-out}.inl-chat-box-origin .bottom .chat-box-input.focus{border-color:#a0f7fd}.inl-chat-box-origin .bottom .chat-box-input .btn-abort,.inl-chat-box-origin .bottom .chat-box-input .img-mic,.inl-chat-box-origin .bottom .chat-box-input .img-send{align-items:center;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.inl-chat-box-origin .bottom .chat-box-input .ant-input{flex:1}.inl-chat-box-origin .bottom .chat-box-input .anticon{color:#3e7eff;font-size:22px}.inl-chat-box-origin .bottom .exemption{color:#a6b2e8;font-size:12px;margin-top:16px;text-align:center}.inl-chat-box-origin .bubble{border-radius:12px;max-width:calc(100% - 32px);overflow:hidden;padding:8px 16px;width:max-content}.inl-chat-box-origin .bubble.answer{background:#fff;border-top-left-radius:0;margin-left:32px}.inl-chat-box-origin .bubble.question{background:#3e7eff;border-top-right-radius:0;color:#fff;margin-left:auto;margin-right:32px}.inl-chat-box-origin .chat-bubble{margin-bottom:24px}.inl-chat-box-origin .chat-bubble .suggestion-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-width:calc(100% - 32px)}.inl-chat-box-origin .chat-bubble .suggestion-list .suggestion-item{background:#fff;border:1px solid #dce2ff;border-radius:16px;color:#9f9fa2;max-width:100%;padding:4px 12px;width:max-content;word-break:break-all}.inl-chat-box-origin .chat-bubble.answer-bubble .suggestion-list{margin-left:32px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates{display:flex;gap:16px;margin-top:12px;padding-left:32px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item{align-items:center;background-repeat:no-repeat;background-size:contain;color:#b6c2ff;cursor:pointer;display:flex;height:18px;width:18px}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.operate-nav{width:max-content}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item .nav.disabled{color:rgba(211,216,245,.526);cursor:not-allowed}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete{background-image:url(/micro-assets/largeLanguageModel/delete.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete:hover{background-image:url(/micro-assets/largeLanguageModel/delete-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.delete.active{background-image:url(/micro-assets/largeLanguageModel/delete-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate{background-image:url(/micro-assets/largeLanguageModel/regenerate.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate:hover{background-image:url(/micro-assets/largeLanguageModel/regenerate-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.regenerate.active{background-image:url(/micro-assets/largeLanguageModel/regenerate-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment{background-image:url(/micro-assets/largeLanguageModel/comment.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment:hover{background-image:url(/micro-assets/largeLanguageModel/comment-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.comment.active{background-image:url(/micro-assets/largeLanguageModel/comment-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike{background-image:url(/micro-assets/largeLanguageModel/dislike.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike:hover{background-image:url(/micro-assets/largeLanguageModel/dislike-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.dislike.active{background-image:url(/micro-assets/largeLanguageModel/dislike-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like{background-image:url(/micro-assets/largeLanguageModel/like.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like:hover{background-image:url(/micro-assets/largeLanguageModel/like-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.like.active{background-image:url(/micro-assets/largeLanguageModel/like-active.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy{background-image:url(/micro-assets/largeLanguageModel/copy.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy:hover{background-image:url(/micro-assets/largeLanguageModel/copy-hover.png)}.inl-chat-box-origin .chat-bubble.answer-bubble .operates .operate-item.copy.active{background-image:url(/micro-assets/largeLanguageModel/copy-active.png)}.inl-chat-box-origin .chat-avatar{align-items:center;display:flex;gap:8px}.inl-chat-box-origin .chat-avatar .avatar{width:32px}.inl-chat-box-origin .chat-avatar .chat-avatar-name{color:#20242b;font-weight:600}.inl-chat-box-origin .chat-avatar.chat-avatar-reverse{flex-flow:row-reverse}.inl-chat-box-origin .qa-context .time-line{color:#606f91;text-align:center}.inl-chat-box-origin .speech-recognition{background-color:#1a3468;bottom:0;left:0;position:absolute;right:0;top:0}.inl-chat-box-origin .speech-recognition-inner{align-items:center;bottom:0;color:#fff;display:flex;flex-direction:column;height:260px;justify-content:space-around;left:0;position:absolute;right:0}.inl-chat-box-origin .speech-recognition-inner:before{background:linear-gradient(180deg,#287eff,#8f20ff);bottom:0;clip-path:ellipse(100% 52% at 50% 59%);content:"";display:block;left:0;position:absolute;right:0;top:0}.inl-chat-box-origin .speech-recognition-inner>*{z-index:1}.inl-chat-box-origin .speech-recognition-inner .img-bot{height:100px;object-fit:contain;position:absolute;top:-60px;transform:rotate(-13deg);width:80px}.inl-chat-box-origin .speech-recognition-inner .current-text{font-size:16px}.inl-chat-box-origin .speech-recognition-inner .btn-container{display:flex}.inl-chat-box-origin .speech-recognition-inner .btn-container .btn{border:1px solid #fff;border-radius:12px;cursor:pointer;font-size:12px;line-height:1;padding:6px 0;text-align:center;user-select:none;width:85px}.inl-chat-box-origin .speech-recognition-inner .tips{color:#b6c2ff;font-size:12px}.inl-chat-box-origin .speech-recognition-inner .btn-close{align-items:center;cursor:pointer;display:flex;font-size:30px;font-weight:300;justify-content:center;line-height:1;position:absolute;right:10px;top:10px;transform:rotate(45deg)}.inl-chat-box-origin.inl-chat-box-origin-dark{background-color:#1a3468;background-image:none}.inl-chat-box-origin.inl-chat-box-origin-dark .bottom .tips .tip{border:1px solid #75d8e6;color:#75d8e6}.inl-chat-box-origin.inl-chat-box-origin-dark .bottom .chat-box-input .btn-abord{color:#354052;cursor:pointer;font-size:20px}.inl-chat-box-origin.inl-chat-box-origin-dark .chat-avatar .chat-avatar-name{color:#fff}.inl-chat-box-origin.inl-chat-box-origin-dark .bubble.answer{background:linear-gradient(180deg,#287eff,#8f20ff)}.inl-chat-box-origin.inl-chat-box-origin-dark .bubble.question{background:linear-gradient(180deg,#d1fff8,#78f8ff);color:#20242b}.inl-chat-box-origin.inl-chat-box-origin-dark .chat-bubble .suggestion-item{background:#2a399a;border:1px solid #899cfd;color:#fff}:root{--primary-color:#1d33a2;--primary-color-rgb:29,51,162}:root[data-doc-theme=light]{--primary-color:#3e7eff;--primary-color-rgb:62,126,255}

package/dist/video/index.cjs

@@ -6344,7 +6344,7 @@ const props$3 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -6367,6 +6367,7 @@ const VideoBoxV2 = vue.defineComponent({
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -6475,6 +6476,74 @@ const VideoBoxV2 = vue.defineComponent({
     let timeout;
     vue.ref(true);
     vue.onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -6516,7 +6585,24 @@ const VideoBoxV2 = vue.defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? vue.createVNode("div", {
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), vue.createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -6578,6 +6664,14 @@ const VideoBoxV2 = vue.defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return vue.createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return vue.createVNode(vue.resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/video/index.js

@@ -6335,7 +6335,7 @@ const props$3 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -6358,6 +6358,7 @@ const VideoBoxV2 = defineComponent({
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -6466,6 +6467,74 @@ const VideoBoxV2 = defineComponent({
     let timeout;
     ref(true);
     onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
@@ -6507,7 +6576,24 @@ const VideoBoxV2 = defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? createVNode("div", {
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null), createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -6569,6 +6655,14 @@ const VideoBoxV2 = defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return createVNode(resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",

package/dist/video/style.css

@@ -1,3 +1,3 @@
-.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
 .videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
 .cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}

package/dist/videoMobile/style.css

@@ -1 +1 @@
-.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",