Initial commit of secondary development sample code

深度对接设备接口/live.css

@@ -0,0 +1,137 @@
+.main-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+#video-container {
+  width: calc(100% - 310px);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.right-container {
+  width: 300px;
+  height: 100%;
+  overflow: auto;
+}
+
+#video-container .video-box {
+  background-color: #000;
+  position: relative;
+}
+
+#video-container .video-box .tips {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+
+}
+#video-container .video-box .tips .deviceoffline{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+#video-container .video-box canvas {
+  position: absolute;
+}
+
+#video-container.one-video .video-box {
+  width: 100%;
+  height: 100%;
+}
+
+#video-container.four-video .video-box {
+  width: calc(50% - 2px);
+  height: calc(50% - 2px);
+}
+
+#video-container.four-video .video-box:nth-child(1) {
+  margin-bottom: 4px;
+}
+
+#video-container.four-video .video-box:nth-child(1) {
+  margin-bottom: 4px;
+}
+
+.video-box .title-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 40px;
+  background-color: rgb(73 162 238 / 45%);
+  color: #00faff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+.video-box .title-container .alg {
+  width: 300px;
+  position: relative;
+}
+
+.video-box .title-container ul {
+  display: none;
+  background-color: rgb(131 186 233 / 45%);
+}
+
+.video-box .title-container:hover ul {
+  display: block;
+  position: absolute;
+  top: 30px;
+  left: 40px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.video-box .title-container:hover ul li {
+  width: 100%;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 5px;
+  cursor: pointer;
+}
+
+
+/* 加载中 */
+.icon-dot {
+  position: relative;
+  display: block;
+  border-radius: 50%;
+  background-color: #39f;
+  width: 40px;
+  height: 40px;
+  animation: ani-spin-bounce 1s 0s ease-in-out infinite;
+}
+
+@keyframes ani-spin-bounce {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.layui-tree-main{
+  position: relative;
+}