zhangm
/
ElectronicBooks


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-off-canvas-left {
				color: #fff;
			}
			.title {
				margin: 35px 15px 10px;
			}
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			input {
				color: #000;
			}
		</style>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title">航油电子年鉴</div>
						<div class="content">
							2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里...
							<!-- <p style="margin: 10px 15px;">
								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
							</p> -->

						</div>
						<div class="title" style="margin-bottom: 25px;display: flex;justify-content: space-between;align-items: center;">
							<div>共xxx章</div>
							<div>倒叙/正序</div>
							</div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									封页
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									前言
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									综述
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									组织架构
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									企业文化
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									党建工作
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									企业管理
								</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
					<h1 class="mui-title">航油电子年鉴</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll" style="overflow-y: auto;height: 100%;">
						<div class="mui-input-group" style="margin-bottom: 15px">
							<h3>中国航油荣获金蜜蜂2022优秀企业社会责任报告榜“长青一星”级：</h3>
							<div class="content">
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
								2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆2022年12月，“金蜜蜂2022优秀企业社会责任报告榜”发布，中国航油2021企业社会责任报告荣获“长青一星”级。中国航油2021年社会责任报告以“加”为主线，系统介绍了中国航油积极履责的实践和成效，展现中国航油不负光荣使命，彰显了“飞机飞到哪里，中国航油就加到哪里”的庄严承诺和责任担当。主办方表示，获得长青星级荣誉的企业，表明已建立起高水平、稳定的社会责任报告披露机制，可作为我国企业编制社会责任报告的参考典范和标杆
							</div>
							<div style="margin: 10px auto;width: 100%;text-align: center;">
								<img class="mui-media-object" src="../images/test.png" >
								
							</div>
							
							</div>
					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init();
			 //侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			 //主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			 //菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if (!mui.os.android) {
				document.getElementById("move-togger").classList.remove('mui-hidden');
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			 //变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					offCanvasSide.classList.remove('mui-transitioning');
					offCanvasSide.setAttribute('style', '');
					classList.remove('mui-slide-in');
					classList.remove('mui-scalable');
					classList.add('mui-slide-in');
					offCanvasWrapper.offCanvas().refresh();
				}
			});
			 //主界面‘显示侧滑菜单’按钮的点击事件
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');
			});
			 //菜单界面，‘关闭侧滑菜单’按钮的点击事件
			document.getElementById('offCanvasHide').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			 //实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		</script>
	</body>

</html>