master

分支 (1)

管理

管理

master

jiujiu
/
视频.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>视频大厅</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/monitor.css">

</head>
<body>
	<div class="main-page">
		<div class="page-body flex">
			<div class="sub-page-container monitor-page">
				<div class="right-content-wrapper">
					<div class="right-content-box">
						<div class="monitor-body">
							<div class="header-section">
								<div class="card-header">
									<span>视频大厅</span>
								</div>
								<ul class="tools flex">
									<li class="has-icon" id="rate4">4</li>
									<li class="has-icon nine active" id="rate9">9</li>
									<li class="has-icon fours" id="rate16">16</li>
									<li class="opts mgr-20 active">视频大厅</li>
									<li class="opts" onclick="javascript:location.href='视频区域.html'">区域</li>
								</ul>
							</div>
							<ul class="video-list rate9">
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">取消上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
								<li>视频区域
									<div class="video-footer">
										<span class="video-wall">东大门</span>
										<span class="video-name">上屏</span>
									</div>
								</li>
							</ul>
							<div class="pagination-section flex">
								<div id="pagination"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/page.js"></script>
	<script>

		var pageObj = function(){
			this.init();
		}

		pageObj.prototype.init = function(){
			this.bindEvent();
			new Footer({
		        el:".main-page",
		        curMenu:"视频大厅",
		        size:4,
		        menus:[
		            {href:"有组织.html",text:"有组织"},
		            {href:"无组织",text:"无组织"},
		            {href:"车辆出入.html",text:"清洁运输"},
		            {href:"视频.html",text:"视频大厅"}
		        ]
		    });

			layui.use(['laypage'], function(){
				let laypage = layui.laypage;

				laypage.render({
				    elem: 'pagination'
				    ,count: 20
				    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
				    ,jump: function(obj){
				      	console.log(obj)
				    }
			  	});

			})
		}

		pageObj.prototype.bindEvent = function(){
			$("body").on("click",".header-section .has-icon",function(e){
				$(".video-list").get(0).className = ("video-list " + e.target.id);
				$(this).addClass("active").siblings("li.has-icon").removeClass("active");
			})
		}


		new pageObj();


	</script>
</body>
</html>