inl-ui 0.1.50 → 0.1.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -49
- package/dist/components/index.cjs +13 -24
- package/dist/components/index.d.ts +3 -3
- package/dist/components/index.js +13 -24
- package/dist/components/style.css +1 -1
- package/dist/iconfont.js +1 -1
- package/dist/index.cjs +14 -25
- package/dist/index.d.ts +4 -4
- package/dist/index.js +14 -25
- package/dist/style.css +2 -2
- package/dist/theme/index.js +70 -70
- package/dist/theme/scripts/dark-vars.js +21 -21
- package/dist/theme/scripts/default-vars.js +25 -25
- package/dist/theme/scripts/light-vars.js +22 -22
- package/dist/theme/style/color/bezierEasing.less +110 -110
- package/dist/theme/style/color/colorPalette.less +81 -81
- package/dist/theme/style/color/colors.less +162 -162
- package/dist/theme/style/color/tinyColor.less +1184 -1184
- package/dist/theme/style/compact.less +4 -4
- package/dist/theme/style/dark.less +4 -4
- package/dist/theme/style/default.less +4 -4
- package/dist/theme/style/index.less +2 -2
- package/dist/theme/style/index.tsx +2 -2
- package/dist/theme/style/themes/compact.less +295 -295
- package/dist/theme/style/themes/dark.less +790 -790
- package/dist/theme/style/themes/default.less +1067 -1067
- package/dist/theme/style/themes/index.less +7 -7
- package/dist/theme/style/themes/var-dark.less +343 -343
- package/dist/theme/style/themes/var-default.less +184 -184
- package/dist/theme/style/themes/variable.less +1122 -1122
- package/dist/theme/style/variable.less +4 -4
- package/dist/video/style.css +1 -1
- package/dist/videoMobile/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
# 工业PC ui库
|
|
2
|
-
|
|
3
|
-
前端通用库,包括组件、hooks、utils等。
|
|
4
|
-
|
|
5
|
-
### 运行
|
|
6
|
-
|
|
7
|
-
+ 开发模式 yarn dev
|
|
8
|
-
+ 生产打包 yarn build
|
|
9
|
-
+ 生成文档 yarn build:docs
|
|
10
|
-
+ 打包图扑工具 yarn buildtp
|
|
11
|
-
|
|
12
|
-
### 使用方法
|
|
13
|
-
|
|
14
|
-
```javascript
|
|
15
|
-
import inl from 'inl-ui';
|
|
16
|
-
import 'inl-ui/dist/style.css';
|
|
17
|
-
|
|
18
|
-
vue.use(inl)
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### 激活主题
|
|
24
|
-
|
|
25
|
-
**vite.config.ts**
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
-
|
|
30
|
-
...
|
|
31
|
-
|
|
32
|
-
css: {
|
|
33
|
-
preprocessorOptions: {
|
|
34
|
-
less: {
|
|
35
|
-
javascriptEnabled: true,
|
|
36
|
-
additionalData,
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### 文档链接
|
|
43
|
-
|
|
44
|
-
##### [组件文档](./src/components/README.md)
|
|
45
|
-
|
|
46
|
-
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
-
|
|
48
|
-
##### [Utils文档](./src/utils/README.md)
|
|
49
|
-
|
|
1
|
+
# 工业PC ui库
|
|
2
|
+
|
|
3
|
+
前端通用库,包括组件、hooks、utils等。
|
|
4
|
+
|
|
5
|
+
### 运行
|
|
6
|
+
|
|
7
|
+
+ 开发模式 yarn dev
|
|
8
|
+
+ 生产打包 yarn build
|
|
9
|
+
+ 生成文档 yarn build:docs
|
|
10
|
+
+ 打包图扑工具 yarn buildtp
|
|
11
|
+
|
|
12
|
+
### 使用方法
|
|
13
|
+
|
|
14
|
+
```javascript
|
|
15
|
+
import inl from 'inl-ui';
|
|
16
|
+
import 'inl-ui/dist/style.css';
|
|
17
|
+
|
|
18
|
+
vue.use(inl)
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### 激活主题
|
|
24
|
+
|
|
25
|
+
**vite.config.ts**
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
+
|
|
30
|
+
...
|
|
31
|
+
|
|
32
|
+
css: {
|
|
33
|
+
preprocessorOptions: {
|
|
34
|
+
less: {
|
|
35
|
+
javascriptEnabled: true,
|
|
36
|
+
additionalData,
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 文档链接
|
|
43
|
+
|
|
44
|
+
##### [组件文档](./src/components/README.md)
|
|
45
|
+
|
|
46
|
+
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
+
|
|
48
|
+
##### [Utils文档](./src/utils/README.md)
|
|
49
|
+
|
|
@@ -6461,20 +6461,15 @@ function useMicroApp(appList) {
|
|
|
6461
6461
|
entry: microAppDefine.entry,
|
|
6462
6462
|
container: `#${domId}`
|
|
6463
6463
|
});
|
|
6464
|
-
const microApp =
|
|
6464
|
+
const microApp = {
|
|
6465
6465
|
name: microAppName,
|
|
6466
6466
|
domId,
|
|
6467
6467
|
app,
|
|
6468
|
-
mounted: true
|
|
6469
|
-
|
|
6470
|
-
|
|
6471
|
-
|
|
6472
|
-
|
|
6473
|
-
try {
|
|
6474
|
-
await app.mountPromise;
|
|
6475
|
-
} finally {
|
|
6476
|
-
microApp.value.loading = false;
|
|
6477
|
-
}
|
|
6468
|
+
mounted: true
|
|
6469
|
+
};
|
|
6470
|
+
loadAppList.value.push(microApp);
|
|
6471
|
+
loadedApp.set(microAppName, microApp);
|
|
6472
|
+
await app.mountPromise;
|
|
6478
6473
|
}, 10);
|
|
6479
6474
|
}, 100);
|
|
6480
6475
|
vue.watch(route, handleRouteChange, {
|
|
@@ -7175,16 +7170,10 @@ const PageContent = vue.defineComponent({
|
|
|
7175
7170
|
fullscreen: isFullscreen.value
|
|
7176
7171
|
}],
|
|
7177
7172
|
"ref": props.pageContainerRef
|
|
7178
|
-
}, [appDomList.value.map(item => {
|
|
7179
|
-
|
|
7180
|
-
|
|
7181
|
-
|
|
7182
|
-
"id": item.id,
|
|
7183
|
-
"class": {
|
|
7184
|
-
loading: microApp && microApp.loading
|
|
7185
|
-
}
|
|
7186
|
-
}, null), [[vue.vShow, item.name === activeAppName.value]]);
|
|
7187
|
-
}), iframeList.value.map(item => {
|
|
7173
|
+
}, [appDomList.value.map(item => vue.withDirectives(vue.createVNode("div", {
|
|
7174
|
+
"key": item.id,
|
|
7175
|
+
"id": item.id
|
|
7176
|
+
}, null), [[vue.vShow, item.name === activeAppName.value]])), iframeList.value.map(item => {
|
|
7188
7177
|
const show = item.id === activeKey.value;
|
|
7189
7178
|
if (item.reqCode === 200 || item.reqCode === void 0) {
|
|
7190
7179
|
return vue.createVNode("iframe", {
|
|
@@ -8317,7 +8306,6 @@ const ChildHeader = vue.defineComponent({
|
|
|
8317
8306
|
});
|
|
8318
8307
|
|
|
8319
8308
|
const isIndependentApp = query => !!query.token && !!query.onlyPage;
|
|
8320
|
-
const isDev = undefined.DEV;
|
|
8321
8309
|
const loginFun = new Login$1();
|
|
8322
8310
|
const requestLogo = async () => {
|
|
8323
8311
|
const res = await fetch("/api/common/v1/sysconfig/searchImage?imgType=4&editImg=1&clientType=web");
|
|
@@ -8383,7 +8371,7 @@ const DefaultLayout = vue.defineComponent({
|
|
|
8383
8371
|
default: () => []
|
|
8384
8372
|
},
|
|
8385
8373
|
// 打包成调试版本
|
|
8386
|
-
|
|
8374
|
+
devMode: {
|
|
8387
8375
|
type: Boolean,
|
|
8388
8376
|
default: false
|
|
8389
8377
|
}
|
|
@@ -8391,6 +8379,7 @@ const DefaultLayout = vue.defineComponent({
|
|
|
8391
8379
|
setup(props) {
|
|
8392
8380
|
const route = vueRouter.useRoute();
|
|
8393
8381
|
const router = vueRouter.useRouter();
|
|
8382
|
+
const isDev = undefined.DEV || props.devMode;
|
|
8394
8383
|
const [isFold, toggleFold] = core.useToggle(false);
|
|
8395
8384
|
const userInfo = core.useSessionStorage("userinfo", {});
|
|
8396
8385
|
const logo = vue.ref();
|
|
@@ -8481,7 +8470,7 @@ const DefaultLayout = vue.defineComponent({
|
|
|
8481
8470
|
}
|
|
8482
8471
|
});
|
|
8483
8472
|
}
|
|
8484
|
-
if (isIndependent
|
|
8473
|
+
if (isIndependent) {
|
|
8485
8474
|
return vue.createVNode("div", {
|
|
8486
8475
|
"class": "independent-container"
|
|
8487
8476
|
}, [vue.createVNode(vue.resolveComponent("router-view"), null, null)]);
|
|
@@ -209,7 +209,7 @@ declare const _default$f: vue.DefineComponent<{
|
|
|
209
209
|
type: PropType<string[]>;
|
|
210
210
|
default: () => never[];
|
|
211
211
|
};
|
|
212
|
-
|
|
212
|
+
devMode: {
|
|
213
213
|
type: BooleanConstructor;
|
|
214
214
|
default: boolean;
|
|
215
215
|
};
|
|
@@ -222,14 +222,14 @@ declare const _default$f: vue.DefineComponent<{
|
|
|
222
222
|
type: PropType<string[]>;
|
|
223
223
|
default: () => never[];
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
devMode: {
|
|
226
226
|
type: BooleanConstructor;
|
|
227
227
|
default: boolean;
|
|
228
228
|
};
|
|
229
229
|
}>>, {
|
|
230
230
|
withHeader: boolean;
|
|
231
231
|
noCacheNames: string[];
|
|
232
|
-
|
|
232
|
+
devMode: boolean;
|
|
233
233
|
}, {}>;
|
|
234
234
|
|
|
235
235
|
/**
|
package/dist/components/index.js
CHANGED
|
@@ -6450,20 +6450,15 @@ function useMicroApp(appList) {
|
|
|
6450
6450
|
entry: microAppDefine.entry,
|
|
6451
6451
|
container: `#${domId}`
|
|
6452
6452
|
});
|
|
6453
|
-
const microApp =
|
|
6453
|
+
const microApp = {
|
|
6454
6454
|
name: microAppName,
|
|
6455
6455
|
domId,
|
|
6456
6456
|
app,
|
|
6457
|
-
mounted: true
|
|
6458
|
-
|
|
6459
|
-
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
try {
|
|
6463
|
-
await app.mountPromise;
|
|
6464
|
-
} finally {
|
|
6465
|
-
microApp.value.loading = false;
|
|
6466
|
-
}
|
|
6457
|
+
mounted: true
|
|
6458
|
+
};
|
|
6459
|
+
loadAppList.value.push(microApp);
|
|
6460
|
+
loadedApp.set(microAppName, microApp);
|
|
6461
|
+
await app.mountPromise;
|
|
6467
6462
|
}, 10);
|
|
6468
6463
|
}, 100);
|
|
6469
6464
|
watch(route, handleRouteChange, {
|
|
@@ -7164,16 +7159,10 @@ const PageContent = defineComponent({
|
|
|
7164
7159
|
fullscreen: isFullscreen.value
|
|
7165
7160
|
}],
|
|
7166
7161
|
"ref": props.pageContainerRef
|
|
7167
|
-
}, [appDomList.value.map(item => {
|
|
7168
|
-
|
|
7169
|
-
|
|
7170
|
-
|
|
7171
|
-
"id": item.id,
|
|
7172
|
-
"class": {
|
|
7173
|
-
loading: microApp && microApp.loading
|
|
7174
|
-
}
|
|
7175
|
-
}, null), [[vShow, item.name === activeAppName.value]]);
|
|
7176
|
-
}), iframeList.value.map(item => {
|
|
7162
|
+
}, [appDomList.value.map(item => withDirectives(createVNode("div", {
|
|
7163
|
+
"key": item.id,
|
|
7164
|
+
"id": item.id
|
|
7165
|
+
}, null), [[vShow, item.name === activeAppName.value]])), iframeList.value.map(item => {
|
|
7177
7166
|
const show = item.id === activeKey.value;
|
|
7178
7167
|
if (item.reqCode === 200 || item.reqCode === void 0) {
|
|
7179
7168
|
return createVNode("iframe", {
|
|
@@ -8306,7 +8295,6 @@ const ChildHeader = defineComponent({
|
|
|
8306
8295
|
});
|
|
8307
8296
|
|
|
8308
8297
|
const isIndependentApp = query => !!query.token && !!query.onlyPage;
|
|
8309
|
-
const isDev = import.meta.env.DEV;
|
|
8310
8298
|
const loginFun = new Login$1();
|
|
8311
8299
|
const requestLogo = async () => {
|
|
8312
8300
|
const res = await fetch("/api/common/v1/sysconfig/searchImage?imgType=4&editImg=1&clientType=web");
|
|
@@ -8372,7 +8360,7 @@ const DefaultLayout = defineComponent({
|
|
|
8372
8360
|
default: () => []
|
|
8373
8361
|
},
|
|
8374
8362
|
// 打包成调试版本
|
|
8375
|
-
|
|
8363
|
+
devMode: {
|
|
8376
8364
|
type: Boolean,
|
|
8377
8365
|
default: false
|
|
8378
8366
|
}
|
|
@@ -8380,6 +8368,7 @@ const DefaultLayout = defineComponent({
|
|
|
8380
8368
|
setup(props) {
|
|
8381
8369
|
const route = useRoute();
|
|
8382
8370
|
const router = useRouter();
|
|
8371
|
+
const isDev = import.meta.env.DEV || props.devMode;
|
|
8383
8372
|
const [isFold, toggleFold] = useToggle(false);
|
|
8384
8373
|
const userInfo = useSessionStorage("userinfo", {});
|
|
8385
8374
|
const logo = ref();
|
|
@@ -8470,7 +8459,7 @@ const DefaultLayout = defineComponent({
|
|
|
8470
8459
|
}
|
|
8471
8460
|
});
|
|
8472
8461
|
}
|
|
8473
|
-
if (isIndependent
|
|
8462
|
+
if (isIndependent) {
|
|
8474
8463
|
return createVNode("div", {
|
|
8475
8464
|
"class": "independent-container"
|
|
8476
8465
|
}, [createVNode(resolveComponent("router-view"), null, null)]);
|
|
@@ -1,3 +1,3 @@
|
|
|
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%;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}
|
|
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%;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;overflow:auto}
|
|
2
2
|
.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}
|
|
3
3
|
.cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}
|