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">
							<ul class="tags">
								<li>有组织</li>
								<li>&gt;</li>
								<li>视频区域</li>
							</ul>
							<div class="header-section">
								<div class="card-header">
									<span>视频区域</span>
								</div>
								<ul class="tools flex region">
									<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" onclick="javascript:location.href='视频.html'">视频大厅</li>
									<li class="opts active">区域</li>
								</ul>
							</div>
							<ul class="video-list rate9 video-region">
								<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();
		}

		// 渲染左侧菜单树
		new LeftSiderMenu({
		    el:".sub-page-container",
		    size:10,
		    curMenu:"煤棚",
		    menus:[
		        {
		        	href:"煤棚.html",
		        	text:"煤棚",
		        	children:[
		        		{href:"煤棚1.html",text:"煤棚1"},
		        		{href:"煤棚2.html",text:"煤棚2"},
		        		{href:"煤棚3.html",text:"煤棚3"}
		        	]
		    	},
		        {href:"厂区道路.html",text:"厂区道路"},
		        {href:"厂界.html",text:"厂界"},
		        {href:"焦煤棚.html",text:"焦煤棚"},
				{href:"皮带通廊.html",text:"皮带通廊"}
		    ]
		});


		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-region video-list " + e.target.id);
				$(this).addClass("active").siblings("li.has-icon").removeClass("active");
			})
		}

		new pageObj();


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