inl-ui 0.1.47 → 0.1.49

package/README.md

@@ -1,49 +1,49 @@
-# 工业PC ui库
-
-前端通用库，包括组件、hooks、utils等。
-
-### 运行
-
-+ 开发模式 yarn dev
-+ 生产打包 yarn build
-+ 生成文档 yarn build:docs
-+ 打包图扑工具 yarn buildtp
-
-### 使用方法
-
-```javascript
-import inl from 'inl-ui';
-import 'inl-ui/dist/style.css';
-
-vue.use(inl)
-```
-
-
-
-### 激活主题
-
-**vite.config.ts**
-
-```javascript
-const additionalData = require("inl-ui/dist/theme").default;
-
-...
-
-css: {
-  preprocessorOptions: {
-    less: {
-      javascriptEnabled: true,
-      additionalData,
-    },
-  },
-},
-```
-
-### 文档链接
-
-##### [组件文档](./src/components/README.md)
-
-##### [hooks文档](./src/hooks/README.md)
-
-##### [Utils文档](./src/utils/README.md)
-
+# 工业PC ui库
+
+前端通用库，包括组件、hooks、utils等。
+
+### 运行
+
++ 开发模式 yarn dev
++ 生产打包 yarn build
++ 生成文档 yarn build:docs
++ 打包图扑工具 yarn buildtp
+
+### 使用方法
+
+```javascript
+import inl from 'inl-ui';
+import 'inl-ui/dist/style.css';
+
+vue.use(inl)
+```
+
+
+
+### 激活主题
+
+**vite.config.ts**
+
+```javascript
+const additionalData = require("inl-ui/dist/theme").default;
+
+...
+
+css: {
+  preprocessorOptions: {
+    less: {
+      javascriptEnabled: true,
+      additionalData,
+    },
+  },
+},
+```
+
+### 文档链接
+
+##### [组件文档](./src/components/README.md)
+
+##### [hooks文档](./src/hooks/README.md)
+
+##### [Utils文档](./src/utils/README.md)
+

package/dist/components/index.cjs

@@ -102,9 +102,6 @@ class ApiInstance {
       ...config$1
     });
     this.instance.interceptors.request.use(config2 => {
-      getUserinfo();
-      getToken();
-      getCorpId();
       if (_.isPlainObject(config2.data)) {
         for (const key in config2.data) {
           if (config2.data[key] === void 0) {
@@ -119,7 +116,7 @@ class ApiInstance {
       const commonHeaders = getCommonHeaders();
       for (const key in commonHeaders) {
         if (key !== "Content-Type") {
-          config2.headers[key] = commonHeaders[key];
+          config2.headers[key] = commonHeaders[key] || void 0;
         }
       }
       return config2;
@@ -6464,15 +6461,20 @@ function useMicroApp(appList) {
         entry: microAppDefine.entry,
         container: `#${domId}`
       });
-      const microApp = {
+      const microApp = vue.ref({
         name: microAppName,
         domId,
         app,
-        mounted: true
-      };
-      loadAppList.value.push(microApp);
-      loadedApp.set(microAppName, microApp);
-      await app.mountPromise;
+        mounted: true,
+        loading: true
+      });
+      loadAppList.value.push(microApp.value);
+      loadedApp.set(microAppName, microApp.value);
+      try {
+        await app.mountPromise;
+      } finally {
+        microApp.value.loading = false;
+      }
     }, 10);
   }, 100);
   vue.watch(route, handleRouteChange, {
@@ -7173,10 +7175,16 @@ const PageContent = vue.defineComponent({
         fullscreen: isFullscreen.value
       }],
       "ref": props.pageContainerRef
-    }, [appDomList.value.map(item => vue.withDirectives(vue.createVNode("div", {
-      "key": item.id,
-      "id": item.id
-    }, null), [[vue.vShow, item.name === activeAppName.value]])), iframeList.value.map(item => {
+    }, [appDomList.value.map(item => {
+      const microApp = loadAppList.value.find(a => a.domId === item.id);
+      return vue.withDirectives(vue.createVNode("div", {
+        "key": item.id,
+        "id": item.id,
+        "class": {
+          loading: microApp && microApp.loading
+        }
+      }, null), [[vue.vShow, item.name === activeAppName.value]]);
+    }), iframeList.value.map(item => {
       const show = item.id === activeKey.value;
       if (item.reqCode === 200 || item.reqCode === void 0) {
         return vue.createVNode("iframe", {
@@ -7936,7 +7944,8 @@ const Login = vue.defineComponent({
     bg: {
       default: "",
       type: String
-    }
+    },
+    loginFn: Function
   },
   setup(prop, {
     emit
@@ -7953,14 +7962,20 @@ const Login = vue.defineComponent({
     vue.provide("platformLogo", prop.systemLogo);
     const handleSubmit = async e => {
       const LoginFun = new Login$1();
-      const res = await LoginFun.getTokenByCode({
+      const params = {
         username: e.username,
         password: e.password
-      });
-      if (res.data) {
-        antDesignVue.message.success("\u767B\u5F55\u6210\u529F");
-        emit("login");
+      };
+      if (prop.loginFn) {
+        await prop.loginFn(params);
+      } else {
+        const res = await LoginFun.getTokenByCode(params);
+        if (!res.data) {
+          throw new Error("\u767B\u9646\u5931\u8D25");
+        }
       }
+      antDesignVue.message.success("\u767B\u5F55\u6210\u529F");
+      emit("login");
       await vue.nextTick();
       router.push("/");
     };
@@ -7982,7 +7997,8 @@ const Login = vue.defineComponent({
       "alt": ""
     }, null)]) : vue.createVNode(leftImg, null, null), vue.createVNode(loginBox, {
       "onSubmit": handleSubmit,
-      "autoMsg": true
+      "autoMsg": true,
+      "loginFn": prop.loginFn
     }, null)]), vue.createVNode("p", {
       "class": "copyright-information"
     }, [prop.copyright])]);
@@ -9713,6 +9729,7 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const showChangeDialog = vue.ref(false);
     const checkChange = res => {
+      camera.value = void 0;
       showChangeDialog.value = false;
       setNewCamera(res[0].uuid);
       _context.emit("change", res[0].uuid);
@@ -9720,16 +9737,19 @@ const VideoBoxV2 = vue.defineComponent({
     const renderChangeCamera = () => {
       return vue.createVNode(vue.resolveComponent("a-modal"), {
         "title": "\u66F4\u6362\u6444\u50CF\u5934",
+        "class": "",
         "visible": showChangeDialog.value,
         "footer": null,
         "onCancel": () => {
           showChangeDialog.value = false;
         }
       }, {
-        default: () => [showChangeDialog.value ? vue.createVNode(Tree, {
+        default: () => [vue.createVNode("div", {
+          "class": "changeCameraDialog"
+        }, [showChangeDialog.value ? vue.createVNode(Tree, {
           "checkable": true,
           "onCheckChange": checkChange
-        }, null) : ""]
+        }, null) : ""])]
       });
     };
     return () => vue.createVNode("div", {

package/dist/components/index.d.ts

@@ -154,6 +154,7 @@ declare const _default$h: vue.DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    loginFn: FunctionConstructor;
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "login"[], "login", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     isClould: {
         default: boolean;
@@ -180,6 +181,7 @@ declare const _default$h: vue.DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    loginFn: FunctionConstructor;
 }>> & {
     onLogin?: ((...args: any[]) => any) | undefined;
 }, {

package/dist/components/index.js

@@ -91,9 +91,6 @@ class ApiInstance {
       ...config$1
     });
     this.instance.interceptors.request.use(config2 => {
-      getUserinfo();
-      getToken();
-      getCorpId();
       if (isPlainObject$1(config2.data)) {
         for (const key in config2.data) {
           if (config2.data[key] === void 0) {
@@ -108,7 +105,7 @@ class ApiInstance {
       const commonHeaders = getCommonHeaders();
       for (const key in commonHeaders) {
         if (key !== "Content-Type") {
-          config2.headers[key] = commonHeaders[key];
+          config2.headers[key] = commonHeaders[key] || void 0;
         }
       }
       return config2;
@@ -6453,15 +6450,20 @@ function useMicroApp(appList) {
         entry: microAppDefine.entry,
         container: `#${domId}`
       });
-      const microApp = {
+      const microApp = ref({
         name: microAppName,
         domId,
         app,
-        mounted: true
-      };
-      loadAppList.value.push(microApp);
-      loadedApp.set(microAppName, microApp);
-      await app.mountPromise;
+        mounted: true,
+        loading: true
+      });
+      loadAppList.value.push(microApp.value);
+      loadedApp.set(microAppName, microApp.value);
+      try {
+        await app.mountPromise;
+      } finally {
+        microApp.value.loading = false;
+      }
     }, 10);
   }, 100);
   watch(route, handleRouteChange, {
@@ -7162,10 +7164,16 @@ const PageContent = defineComponent({
         fullscreen: isFullscreen.value
       }],
       "ref": props.pageContainerRef
-    }, [appDomList.value.map(item => withDirectives(createVNode("div", {
-      "key": item.id,
-      "id": item.id
-    }, null), [[vShow, item.name === activeAppName.value]])), iframeList.value.map(item => {
+    }, [appDomList.value.map(item => {
+      const microApp = loadAppList.value.find(a => a.domId === item.id);
+      return withDirectives(createVNode("div", {
+        "key": item.id,
+        "id": item.id,
+        "class": {
+          loading: microApp && microApp.loading
+        }
+      }, null), [[vShow, item.name === activeAppName.value]]);
+    }), iframeList.value.map(item => {
       const show = item.id === activeKey.value;
       if (item.reqCode === 200 || item.reqCode === void 0) {
         return createVNode("iframe", {
@@ -7925,7 +7933,8 @@ const Login = defineComponent({
     bg: {
       default: "",
       type: String
-    }
+    },
+    loginFn: Function
   },
   setup(prop, {
     emit
@@ -7942,14 +7951,20 @@ const Login = defineComponent({
     provide("platformLogo", prop.systemLogo);
     const handleSubmit = async e => {
       const LoginFun = new Login$1();
-      const res = await LoginFun.getTokenByCode({
+      const params = {
         username: e.username,
         password: e.password
-      });
-      if (res.data) {
-        message.success("\u767B\u5F55\u6210\u529F");
-        emit("login");
+      };
+      if (prop.loginFn) {
+        await prop.loginFn(params);
+      } else {
+        const res = await LoginFun.getTokenByCode(params);
+        if (!res.data) {
+          throw new Error("\u767B\u9646\u5931\u8D25");
+        }
       }
+      message.success("\u767B\u5F55\u6210\u529F");
+      emit("login");
       await nextTick();
       router.push("/");
     };
@@ -7971,7 +7986,8 @@ const Login = defineComponent({
       "alt": ""
     }, null)]) : createVNode(leftImg, null, null), createVNode(loginBox, {
       "onSubmit": handleSubmit,
-      "autoMsg": true
+      "autoMsg": true,
+      "loginFn": prop.loginFn
     }, null)]), createVNode("p", {
       "class": "copyright-information"
     }, [prop.copyright])]);
@@ -9702,6 +9718,7 @@ const VideoBoxV2 = defineComponent({
     };
     const showChangeDialog = ref(false);
     const checkChange = res => {
+      camera.value = void 0;
       showChangeDialog.value = false;
       setNewCamera(res[0].uuid);
       _context.emit("change", res[0].uuid);
@@ -9709,16 +9726,19 @@ const VideoBoxV2 = defineComponent({
     const renderChangeCamera = () => {
       return createVNode(resolveComponent("a-modal"), {
         "title": "\u66F4\u6362\u6444\u50CF\u5934",
+        "class": "",
         "visible": showChangeDialog.value,
         "footer": null,
         "onCancel": () => {
           showChangeDialog.value = false;
         }
       }, {
-        default: () => [showChangeDialog.value ? createVNode(Tree, {
+        default: () => [createVNode("div", {
+          "class": "changeCameraDialog"
+        }, [showChangeDialog.value ? createVNode(Tree, {
           "checkable": true,
           "onCheckChange": checkChange
-        }, null) : ""]
+        }, null) : ""])]
       });
     };
     return () => createVNode("div", {

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%;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{display:block}.videoBox:hover .footer-min .tool{display:flex}.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:3px 8px;width:20px}.videoBox .footer-min .tool .imgOut{align-items:center;border-radius:20%;cursor:pointer;display:flex;height:28px;justify-content:center;margin:0 3px;width:28px}.videoBox .footer-min .tool .active{background-color:hsla(0,0%,100%,.3)}.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{display:block}.videoBox:hover .footer-min .tool{display:flex}.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:3px 8px;width:20px}.videoBox .footer-min .tool .imgOut{align-items:center;border-radius:20%;cursor:pointer;display:flex;height:28px;justify-content:center;margin:0 3px;width:28px}.videoBox .footer-min .tool .active{background-color:hsla(0,0%,100%,.3)}.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}.changeCameraDialog{height:600px}
 .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}