diff --git a/css/index/index.css b/css/index/index.css
index 33d0a51..205f63c 100644
--- a/css/index/index.css
+++ b/css/index/index.css
@@ -23,6 +23,8 @@ body {
#left-box {
width: 49%;
height: 100%;
+ padding-top: 0.85%;
+ box-sizing: border-box;
}
#pro-introduct {
@@ -58,6 +60,8 @@ body {
height: 100%;
flex-direction: column;
justify-content: space-between;
+ padding-top: 0.85%;
+ box-sizing: border-box;
}
#real-time-monitor {
diff --git a/css/video/video.css b/css/video/video.css
index fd77e68..cea8d4d 100644
--- a/css/video/video.css
+++ b/css/video/video.css
@@ -14,4 +14,324 @@ body {
display: flex;
align-items: center;
justify-content: center;
-}
\ No newline at end of file
+}
+
+#main-box {
+ width: 100%;
+ height: 100%;
+ justify-content: space-evenly;
+}
+
+/* 左侧样式 start */
+#left-box,
+#right-box {
+ width: 21.3%;
+ height: 100%;
+ box-sizing: border-box;
+ flex-direction: column;
+ justify-content: space-between;
+ padding-top: 0.85%;
+}
+
+#left-top {
+ width: 100%;
+ height: 39%;
+ background: url("../../img/video/ytkz.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ flex-direction: column;
+ justify-content: space-evenly;
+}
+
+#left-top p {
+ font-size: 14px;
+ margin-top: 5px;
+}
+
+#left-top-one {
+ width: 100%;
+ height: 70%;
+ justify-content: space-evenly;
+}
+
+#one-child,
+#three-child {
+ width: 20%;
+ height: 100%;
+}
+
+#two-child {
+ width: 52%;
+ height: 100%;
+ padding-top: 10%;
+ box-sizing: border-box;
+}
+
+#yclx,
+#bdlx,
+#yczp,
+#bdzp {
+ width: 100%;
+ height: 50%;
+ flex-direction: column;
+ padding-top: 50%;
+ box-sizing: border-box;
+}
+
+/* 远程录像 */
+#yclx button {
+ width: 48px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/yclx_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ border: none;
+ cursor: pointer;
+
+}
+
+/* 本地录像 */
+#bdlx button {
+ width: 48px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/bdlx_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ border: none;
+ cursor: pointer;
+
+}
+
+/* 远程抓拍 */
+#yczp button {
+ width: 48px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ border: none;
+ cursor: pointer;
+}
+
+/* 本地抓拍 */
+#bdzp button {
+ width: 48px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ border: none;
+ cursor: pointer;
+}
+
+#yt {
+ width: 204px;
+ height: 204px;
+ background: url("../../img/video/ptz_nocheck/yt_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+ border: none;
+}
+
+#yt-left,
+#yt-center,
+#yt-right {
+ width: 30%;
+ height: 100%;
+}
+
+#yt-center {
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+#yt button,
+#left-top-two button {
+ width: 48px;
+ height: 48px;
+ background-color: transparent;
+ cursor: pointer;
+ border: none;
+}
+
+#yt-center button:nth-child(1) {
+ margin-top: -31%;
+}
+
+#yt-center button:nth-child(2) {
+ margin-bottom: -31%;
+}
+
+#left-top-two {
+ width: 100%;
+ height: 26%;
+ justify-content: space-evenly;
+}
+
+#jj-box,
+#sf-box,
+#gq-box {
+ width: 30%;
+ height: 100%;
+ flex-direction: column;
+}
+
+#jj {
+ width: 98px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/jj_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+}
+
+#sf {
+ width: 98px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/sf_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+}
+
+#gq {
+ width: 98px;
+ height: 48px;
+ background: url("../../img/video/ptz_nocheck/gq_nocheck.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+}
+
+#left-bottom {
+ width: 100%;
+ height: 57.8%;
+ background: url("../../img/video/ball_list.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+}
+
+#search-box {
+ width: 100%;
+ height: 50px;
+ margin-top: 12%;
+}
+
+.layui-form .layui-input {
+ width: 80%;
+ margin: 0 10% 0 10%;
+}
+
+#search-img {
+ position: relative;
+ left: -17%;
+ cursor: pointer;
+}
+
+#device-online-box {
+ width: 100%;
+ height: 32px;
+ justify-content: space-evenly;
+}
+
+#device-online-box .device-status {
+ width: 25%;
+ height: 100%;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 19px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+}
+
+#device-online-box .device-status:nth-child(1) {
+ background: rgba(217, 217, 217, 0.01);
+ box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
+ border-radius: 2px 2px 2px 2px;
+ border: 1px solid #79FFFF;
+ color: #79FFFF;
+}
+
+#device-online-box .device-status:nth-child(2) {
+ background: rgba(217, 217, 217, 0.01);
+ box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
+ border-radius: 2px 2px 2px 2px;
+ border: 1px solid #79FFFF;
+ color: #79FFFF;
+ opacity: 0.6;
+}
+
+#device-online-box .device-status:nth-child(3) {
+ background: rgba(217, 217, 217, 0.01);
+ box-shadow: inset 2px 2px 4px 0px rgba(255, 84, 61, 0.5);
+ border-radius: 2px 2px 2px 2px;
+ border: 1px solid #FF543D;
+ opacity: 0.6;
+ color: #FF543DFF;
+}
+
+#device-tree {
+ width: 100%;
+ height: calc(88% - 82px);
+}
+
+/* 左侧样式 end */
+
+/* 中侧样式 start */
+#center-box {
+ width: 54%;
+ height: 100%;
+ box-sizing: border-box;
+ padding-top: 0.85%;
+}
+
+#video-box {
+ width: 100%;
+ height: 100%;
+ background: url("../../img/video/spjk.png") no-repeat 0 0 / 100% 100%;
+ background-position: center center !important;
+}
+
+/* 中侧样式 start */
+
+/* 右侧样式 start */
+
+#voi-photo-box {
+ width: 100%;
+ height: 100%;
+ background: url("../../img/video/wzzp.png") no-repeat 0 0 / 100% 100%;
+}
+
+#voi-null {
+ width: 100%;
+ height: 5%;
+}
+
+#voi-photo {
+ width: 100%;
+ height: 95%;
+ box-sizing: border-box;
+ overflow-y: auto;
+}
+
+.voi-item {
+ width: 100%;
+ height: 250px;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+ padding: 3%;
+ font-size: 15px;
+}
+
+.voi-item>img {
+ object-fit: cover;
+ width: 100%;
+ height: 80%;
+
+}
+
+.voi-item .voi-info {
+ width: 100%;
+ height: 20%;
+}
+
+.voi-time,
+.voi-content {
+ width: 50%;
+ height: 100%;
+ justify-content: space-between;
+}
+
+.voi-content {
+ justify-content: end;
+}
+
+/* 右侧样式 start */
\ No newline at end of file
diff --git a/img/video/voi_photo.png b/img/video/voi_photo.png
new file mode 100644
index 0000000..2b85eaa
Binary files /dev/null and b/img/video/voi_photo.png differ
diff --git a/js/pages/video/video.js b/js/pages/video/video.js
index e69de29..6a44459 100644
--- a/js/pages/video/video.js
+++ b/js/pages/video/video.js
@@ -0,0 +1,8 @@
+let layer, form;
+layui.use(['layer', 'form'], function () {
+ form = layui.form;
+ layer = layui.layer;
+ $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+ $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+ console.log("选中的标段编码：" + parent.$('#bidPro').val())
+});
diff --git a/pages/video/video.html b/pages/video/video.html
index ccafbbe..662a76b 100644
--- a/pages/video/video.html
+++ b/pages/video/video.html
@@ -1,5 +1,6 @@
+
@@ -13,10 +14,153 @@
+
视频监控
+
-
+
+
+
+
+
+
+
+
+
全部（100）
+
在线（20）
+
离线（80）
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2024-03-30 12:00:00
+
+
+
+
+
+
+
+
+
+
2024-03-30 12:00:00
+
+
+
+
+
+
+
+
+
+
2024-03-30 12:00:00
+
+
+
+
+
+
+
+
+
+
2024-03-30 12:00:00
+
+
+
+
+
+
+
+