动态绘制slash表头分割斜线；括号换行语义连贯；js提取

bookdetail.html

@@ -11,13 +11,13 @@
 		<link rel="stylesheet" href="css/reset.css" />
 		<link rel="stylesheet" href="css/main.css" />
 		<style>
-			.m-artical-action-mid {
+			/* .m-artical-action-mid {
 				position: fixed;
 				width: 100%;
 				height: 40%;
 				top: 30%;
 				z-index: 9998;
-			}
+			} */
 
 			#muluList {
 				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
@@ -54,7 +54,7 @@
 				</div>
 				<div class="top_right"></div>
 			</header>
-			<div id="upperElement" style="height: 100vh;width: 100vw;">
+			<div id="upperElement" style="height: 96vh;width: 100vw;">
 				<div class="container">
 					<div class="Content">
 						<!-- 内容动态加载 -->
@@ -141,728 +141,10 @@
 				</div>
 			</div>
 		</div>
-
-
 		<script src="js/mui.min.js"></script>
 		<script type="text/javascript" src="js/jquery.min.js"></script>
 		<script type="text/javascript" src="js/jquery.jsonp.js"></script>
 		<script type="text/javascript" src="js/jquery.base64.js"></script>
-		<script>
-			//移动设备的高度
-			let deviceHeight = document.documentElement.clientHeight;
-			// $('.container').css('height', deviceHeight+'px')
-			//
-			var Dom = {
-				font_Pop: $("#font_Pop"),
-				extra_Pop: $("#extra_Pop"),
-				nav_top: $("#nav_top"),
-				nav_bottom: $("#nav_bottom"),
-				icon_Aa: $("#icon_Aa"),
-				icon_extra: $("#icon_extra"),
-				body: $("body"),
-				win: $(window),
-				slider: $("#slider"),
-				icon_mulu: $("#icon_mulu"),
-				mulu_Box: $("#mulu_Box"),
-				mulu_Dialog: $("#mulu_Dialog"),
-				mulu_Mask: $("mulu_Mask"),
-				mulu_Cons: $("#mulu_Cons"),
-				muluList: $("#muluList"),
-				bkList: $("#bk-list"),
-				header: $("#header"),
-				ChapterDialog: $("#ChapterDialog")
-			}
-			var Util = (function() { //封装的本地存储和json数据解析
-				var prefix = 'function_reader_';
-				var StorageGetter = function(key) {
-					return localStorage.getItem(prefix + key);
-				}
-				var StorageSetter = function(key, val) {
-					return localStorage.setItem(prefix + key, val);
-				}
-				//通过url来获取加密信息，并解密
-				var getJsonp = function(url, callback) {
-					return $.jsonp({
-						url: url,
-						cache: true,
-						callback: 'duokan_fiction_chapter',
-						success: function(result) {
-							//获取加密信息，解码、转json
-							var data = $.base64.decode(result);
-							var json = decodeURIComponent(escape(data));
-							callback(json);
-						}
-					})
-				}
-				return {
-					getJsonp: getJsonp,
-					StorageGetter: StorageGetter,
-					StorageSetter: StorageSetter
-				}
-			})();
-
-			/***** 存储记录 *****/
-			//背景颜色
-			var bgColor = Util.StorageGetter("bgColor") || "rgb(233, 223, 199)"; //默认”纸张“背景颜色
-			//字体颜色
-			var fontColor = bgColor === 'rgb(40, 53, 72)' ? "#f8f8f8" : "#000000"; //默认黑色
-			//字号大小
-			let size = Util.StorageGetter("font_size") ? parseInt(Util.StorageGetter("font_size")) : 18;
-			var fontSize = size / 16;
-
-			//数据层的初始化
-			var readerUIFrame = ReaderBaseFrame($('.Content'));
-			var readerMuluFrame = ReaderMuluFrame($('#muluList'), '初始化')
-
-			var File_id = 0;
-			var Chapter_id = 0;
-			var ChapterTotal = 0;
-			var ChapterList = [];
-
-
-			var readerm = ReaderModel();
-			readerm.init(function(data, mulu) {
-				readerUIFrame(data);
-				ChapterList = mulu;
-				readerMuluFrame(mulu, '2');
-				$("#ChapterTitle").text(data.ct);
-				setHtmlStyle()
-
-			});
-			//业务事件的初始化
-			EventHandler();
-
-			function ReaderBaseFrame(container) { //UI渲染层
-
-				function ParseChapterData(jsonData) { //生成要展示的 html文本
-					let jsonObj = jsonData;
-					let size = Util.StorageGetter("font_size");
-					size = size ? parseInt(size) : 18;
-					fontSize = size / 16;
-					let fontSizeAdd6 = (size + 6) / 16;
-					let fontSizeAdd2 = (size + 2) / 16;
-					let html = "";
-					if (!!jsonObj.introduction && jsonObj.introduction.length > 0) {
-						html += "<br/><br/><br/>";
-						for (let i = 0; i < jsonObj.introduction.length; i++) {
-							html +=
-								`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor}">${jsonObj.introduction[i]}</p>`;
-						}
-					}
-					// 封面-0，扉页-1 不需要展示章节名称
-					if (!['0', '1'].includes(Chapter_id + '')) {
-						html += `<br/><br/><br/>`;
-						if (jsonObj.ct && jsonObj.ct !== jsonObj.t) {
-							html += `<h3 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.ct}</h3><br/>`;
-						}
-						html += `<h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
-					}
-					//正文内容
-					for (let i = 0; i < jsonObj.p.length; i++) {
-						if (Chapter_id == 0) {
-							html += "<div>" + jsonObj.p[i] + "</div>";
-						} else {
-							if (/^##.*/.test(jsonObj.p[i])) {
-								html +=
-									`<h6 class="colorStyle" style="line-height: 2.0625rem; padding: 1.25rem 0 0.3125rem; font-weight: bold; font-size:${fontSize}rem;color:${fontColor}">${jsonObj.p[i].replace('##', '')}</h6>`;
-							} else if (/^#.*/.test(jsonObj.p[i])) {
-								html +=
-									`<h5 class="colorStyle" style="line-height: 2.1875rem; padding: 0.625rem 0; font-weight: bold; font-size:${fontSizeAdd2}rem;color:${fontColor}">${jsonObj.p[i].replace('#', '')}</h5>`;
-							} else if (/^\<img.*/.test(jsonObj.p[i])) {
-								html +=
-									`<div style="margin-bottom:1.25rem;">${jsonObj.p[i]}</div>`;
-							} else if (/^&tableTemp.*/.test(jsonObj.p[i])) {
-								let tableTemp = jsonObj.p[i].split("-")[1];
-								if (!tableTemp) {
-									continue;
-								}
-								if (!jsonObj[tableTemp]) {
-									continue;
-								}
-								let tableObj = jsonObj[tableTemp];
-								if (JSON.stringify(tableObj) === '{}') {
-									continue;
-								}
-								html +=
-									`<table class="table ${tableObj.className||''}" style="${tableObj.style||''}" cellpadding="0" cellspacing="0">`;
-								if (!!tableObj.tableTitle) {
-									html += `<caption class="caption">${tableObj.tableTitle}</caption>`;
-								}
-								if (!!tableObj.cTitle) {
-									html += `<caption class="caption secCaption cTitle">${tableObj.cTitle}</caption>`;
-								}
-								if (tableObj.tableHead.length) {
-									html += `<thead class="thead">`;
-									tableObj.tableHead.map((tr, trIndex) => {
-										html += `<tr class="tr">`;
-										let thList = tr.th;
-										thList.map((item, index) => {
-											html +=
-												`<th class="th ${item instanceof Array ? 'slash-wrap':''}" style="${tr.style && tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">`;
-											if (item instanceof Array) {
-												item.map((itemLi, liIndex) => {
-													if (itemLi === "|") {
-														html += `<span class="slash"></span>`
-													} else {
-														html +=
-															`<span class="${liIndex===0?'left':'right'}" style="${liIndex===0?tr.slash&&tr.slash.leftText||'':tr.slash&&tr.slash.rightText||''}">${itemLi}</span>`
-													}
-												})
-											} else {
-												html += `${item}`;
-											}
-											html += '</th>';
-										})
-										html += `</tr>`;
-									})
-									html += `</thead>`;
-								}
-								if (tableObj.tableBody.length) {
-									html += `<tbody class="tbody">`;
-									tableObj.tableBody.map(tr => {
-										let tdList = tr.td;
-										html += `<tr class="tr">`;
-										tdList.length && tdList.map((liDom, index) => {
-											html +=
-												`<td class="td" style="${tr.style&&tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">${liDom}</td>`;
-										})
-										html += "</tr>"
-									})
-									html += `</tbody>`
-								}
-								html += `</table>`;
-							} else {
-								html +=
-									`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor};text-align:${jsonObj.p[i].substr(0, 6) === 'pStart' ? 'start' : 'justify'}">${jsonObj.p[i].replace("pStart", '')}</p>`;
-							}
-						}
-					}
-
-					html = html.replace("##", )
-					return html;
-				}
-
-				return function(data) { //返回 渲染后的结果data：解密后的json数据
-					container.html(ParseChapterData(data));
-					//设置斜线
-					let hasSlash = $('span').is(".slash");
-					if (!hasSlash) return;
-					//
-					$('.slash-wrap').each((i, ele) => {
-						/* 斜边边长 */
-						/* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
-						let width = $(ele).outerWidth();
-						let height = $(ele).parents('.thead').outerHeight();
-						let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
-						/* 旋转角度计算公式 */
-						/*  Math.atan(height / width) * 180 / Math.PI  */
-						let transformRole = Math.atan(height / width) * 180 / Math.PI;
-						$(ele).find(".slash").css({
-							width: slashWidth,
-							transform: `rotate(${transformRole}deg)`
-						})
-					})
-
-
-				}
-			}
-
-			function ReaderMuluFrame(container, flag) { //目录UI渲染层
-				function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
-					let mulu = '';
-					for (let i = 0; i < jsonData.length; i++) {
-						let jsonObj = jsonData[i];
-						if (jsonObj.children) {
-							mulu +=
-								`<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-fid="${jsonObj.file_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
-							for (let k = 0; k < jsonObj.children.length; k++) {
-								mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.children[k].chapter_id}" data-fid="${jsonObj.children[k].file_id}" href="#">
-									${jsonObj.children[k].title}</a></li>`;
-							}
-							mulu += '</ul></li>';
-						} else {
-							mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-cid="${jsonObj.file_id}" href="#">${jsonObj.title}
-							 	</a></li>`;
-						}
-					}
-					mulu = mulu.replace("##", );
-					return mulu;
-				}
-
-				return function(data) { //返回 渲染后的结果data：解密后的json数据
-					container.html(ParseChapterMuluData(data));
-				}
-			}
-
-			function ReaderModel() { //数据交互层
-				//todo 获取章节信息
-				var init = function(Uicallback) { //初始化 信息
-					getFictionInfo(function(mulu) {
-						getCurChaptInfo(Chapter_id, function(data) {
-							//todo
-							Uicallback && Uicallback(data, mulu);
-						})
-					})
-				};
-
-				var getFictionInfo = function(callback) { //获取所有章节摘要信息
-					$.get('data/chapter.json', function(data) {
-						//todo 获取章节信息之后的回调
-						Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
-						File_id = parseInt(Util.StorageGetter("FileId"));
-						//选择是否从头阅读
-						if (Chapter_id !== 0) {
-							if (confirm('您要继续上次的阅读么？')) {} else {
-								Chapter_id = 0;
-							}
-						}
-						let list = data.chapters;
-						for (let i = 0; i < list.length; i++) {
-							if (!isFinite(Chapter_id) && list[i].type !== 'file') {
-								Chapter_id = list[i].chapter_id;
-								File_id = list[i].file_id;
-							}
-							if (list[i].children) {
-								ChapterTotal += list[i].children.length;
-								if (!isFinite(Chapter_id)) {
-									Chapter_id = list[i].children[0].chapter_id;
-									File_id = list[i].children[0].file_id;
-								}
-							} else if (list[i].type === 'chapter') {
-								ChapterTotal += 1;
-							}
-						}
-						callback && callback(list);
-					}, 'json');
-				};
-
-				var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
-					// $.get('data/data' + Chapter_id + '.json', function(data,status) {
-					// 	//todo 获取详细信息之后的回调
-					// 	console.log(status,'status')
-					// 	if (data.result == 0) {
-					// 		// var url=data.jsonp;
-					// 		// Util.getJsonp(url,function(data){
-					// 		callback && callback(data);
-					// 		$("#ChapterTitle").text(data.ct);
-					// 		// });//通过url来获取加密信息，并解密
-					// 	}
-					// }, 'json');
-					$.getJSON('data/data' + Chapter_id + '.json')
-						.done(function(data) {
-							// 请求成功，文件存在
-							// console.log("文件存在", data);
-							if (data.result == 0) {
-								callback && callback(data);
-							}
-						})
-						.fail(function(jqXHR, textStatus, errorThrown) {
-							// console.log("文件不存在",jqXHR);
-							callback && callback({
-								p: [],
-								t: "",
-								result: 0
-							});
-							// 请求出错，文件不存在
-							// if (jqXHR.status === 404) {
-							//   console.log("文件不存在");
-							// } else {
-							//   console.log("请求出错");
-							// }
-						});
-				};
-
-				var prveChapter = function() { //上一页
-					Chapter_id = parseInt(Chapter_id);
-					if (Chapter_id == 0) {
-						return;
-					}
-					Chapter_id -= 1;
-					//调用方法获取 Chapter_id章节信息
-					getCurChaptInfo(Chapter_id, function(data) {
-						readerUIFrame(data); //渲染html数据
-					});
-					Util.StorageSetter("ChapterId", Chapter_id);
-					//
-					updateFileId()
-				};
-
-				var nextChapter = function() { //下一页
-					Chapter_id = parseInt(Chapter_id);
-					if (Chapter_id == ChapterTotal - 1) {
-						return;
-					}
-					Chapter_id += 1;
-					//调用方法获取 Chapter_id章节信息
-					getCurChaptInfo(Chapter_id, function(data) {
-						readerUIFrame(data);
-					});
-					Util.StorageSetter("ChapterId", Chapter_id);
-					//
-					updateFileId()
-
-				};
-
-				var jumpChapter = function() { //跳页
-					Chapter_id = parseInt(Chapter_id);
-					File_id = parseInt(File_id);
-					//调用方法获取 Chapter_id章节信息
-					getCurChaptInfo(Chapter_id, function(data) {
-						readerUIFrame(data); //渲染html数据
-					});
-					Util.StorageSetter("ChapterId", Chapter_id);
-					updateFileId()
-				};
-
-				var updateFileId = function() { //更新目录一级 file_id
-					for (let item of ChapterList) {
-						if (item.type === 'file') {
-							let obj = item.children.find(child => child.chapter_id == Chapter_id);
-							if (obj) {
-								File_id = obj.file_id;
-								$("#ChapterTitle").text(obj.cTitle);
-								break;
-							}
-							continue;
-						}
-						if (Chapter_id === item.chapter_id) {
-							File_id = item.file_id;
-							$("#ChapterTitle").text(item.cTitle);
-							break;
-						}
-					}
-					Util.StorageSetter("FileId", File_id);
-				}
-
-
-				return {
-					init: init,
-					prveChapter: prveChapter,
-					nextChapter: nextChapter,
-					jumpChapter: jumpChapter,
-				}
-			}
-
-			function EventHandler() { //业务事件处理层
-				//点击主体中间事件
-				// $("#action_mid").click(function() {
-				// 	if (Dom.nav_top.css('display') == "none") {
-				// 		actNavDialog(true)
-				// 	} else {
-				// 		actAllDialog(false)
-				// 	}
-				// });
-
-				//=============
-				let upperElement = document.getElementById('upperElement')
-				upperElement.addEventListener('click', function(event) {
-					var target = event.target;
-					if (['btn_next', 'btn_prev'].includes(target.id)) {
-
-					} else {
-						if (Dom.nav_top.css('display') == "none") {
-							actNavDialog(true)
-						} else {
-							actAllDialog(false)
-						}
-					}
-
-					// 判断事件触发的源元素是上层元素还是下层元素
-					// if (target.id === 'lowerElement') {
-					//   // 如果是下层元素，则触发下层元素的事件
-					//   console.log('下层元素的事件被触发');
-					//   // 实现下层元素的事件处理逻辑
-					// } else {
-					//   // 如果是上层元素，则触发上层元素的事件
-					//   console.log('上层元素的事件被触发');
-					//   // 实现上层元素的事件处理逻辑
-					// }
-				});
-
-
-
-
-				//=============
-				//点击返回事件
-				$(".nav_back_book").click(function() {
-					Chapter_id = parseInt(Chapter_id);
-					if (Chapter_id == 0) {
-						return;
-					}
-					if (Dom.nav_top.css('display') == "none") {
-						return;
-					}
-					Chapter_id = 0;
-					readerm.jumpChapter();
-				});
-				//点击目录事件--顶部浮窗
-				$("#topMulu").click(function() {
-					muluShow("top")
-				});
-				//点击目录事件--底部导航
-				$("#icon_mulu").click(function() {
-					muluShow()
-				});
-				var muluShow = function(type) {
-					Dom.icon_extra.removeClass("act");
-					if (Dom.mulu_Box.css('display') == 'none') {
-						$('body,html').addClass('notScroll');
-						Dom.mulu_Box.show();
-						if (type === 'top') {
-							Dom.mulu_Box.css("bottom", 0)
-						} else {
-							Dom.mulu_Box.css("bottom", 70)
-						}
-
-						Dom.nav_top.hide();
-						Dom.mulu_Mask.show();
-						Dom.mulu_Cons.show();
-						//章节总数赋值
-						$('#ChapterTotal').text(ChapterTotal)
-						//给当前选中章节高亮
-						$(".mui-active").removeClass("mui-active");
-						$(".highChapter").removeClass("highChapter");
-						let optDom = $(".parentLi")[File_id];
-						$(optDom).addClass("mui-active");
-						$($(optDom).find("a")).each((i, aNode) => {
-							if ($(aNode).data('cid') == Chapter_id) {
-								$(aNode).addClass("highChapter")
-							}
-						})
-					} else {
-						muluUpdateActive();
-						actMuluDialog(false);
-					}
-					$("#muluList,#muluList .mui-table-view,.list-li-a,.mui-table-view-cell>a:not(.mui-btn).mui-active").css(
-						'background-color', bgColor);
-					actFontDialog(false)
-					actExtraDialog(false);
-				}
-				//点击目录列表进行指定跳转
-				Dom.muluList.on("click", function(e) {
-					let cid = $(e.target).data('cid');
-					if (cid === undefined || cid === null || cid === "") {
-						return
-					}
-					Chapter_id = cid;
-					File_id = $(e.target).data('fid');
-					let cSpan = $(e.target).parent().parent("ul").prev();
-					let cTitle = cSpan[0] ? cSpan[0].text : e.target.text;
-					$("#ChapterTitle").text(cTitle);
-					muluUpdateActive();
-					readerm.jumpChapter();
-					actAllDialog(false)
-					window.scrollTo(0, 0);
-				})
-				// 点击弹窗内容以外的地方关闭弹窗
-				$("#mulu_Mask").on('click', function(e) {
-					// if ($(e.target).closest('#mui-content').length > 0) {
-					//   console.log('弹出框内部被点击了');
-					// } else {
-					//   console.log('弹出框以外的部分被点击了');
-					// 关闭弹框
-					actAllDialog(false)
-
-					// }
-				});
-				//点击字号事件
-				$(".btn_Aa").click(function() {
-					Dom.icon_extra.removeClass("act");
-					if (Dom.font_Pop.css('display') == 'none') {
-						Dom.font_Pop.show();
-						Dom.slider.val(fontSize);
-					} else {
-						Dom.font_Pop.hide();
-					}
-					actMuluDialog(false);
-					actExtraDialog(false);
-				});
-				//滚动条事件
-				Dom.win.scroll(function() {
-					actAllDialog(false)
-				})
-				//点击字体大小事件
-				Dom.slider.change(function() {
-					let NowFontSize = Number($(this).val());
-					if (NowFontSize > 24 || NowFontSize < 16) {
-						return;
-					}
-					$("p").css('font-size', NowFontSize / 16 + 'rem');
-					$("h6").css('font-size', NowFontSize / 16 + 'rem');
-					$("h4").css('font-size', (NowFontSize + 6) / 16 + 'rem');
-					$("h5").css('font-size', (NowFontSize + 2) / 16 + 'rem');
-					Util.StorageSetter("font_size", NowFontSize);
-				});
-				//点击其他事件
-				$(".btn-extra").click(function() {
-					Dom.icon_extra.addClass("act");
-					if (Dom.extra_Pop.css('display') == 'none') {
-						Dom.extra_Pop.show();
-						if (bgColor) {
-							$(".bk-item").each((i, liDom) => {
-								let nodeSpan = $($(liDom).find(".bk-container"));
-								nodeSpan.removeClass("bk-container-current")
-								let itembg = nodeSpan[0].style.backgroundColor;
-								if (itembg === bgColor) {
-									nodeSpan.addClass("bk-container-current")
-								}
-							})
-						}
-
-					} else {
-						Dom.extra_Pop.hide();
-					}
-					actMuluDialog(false);
-					actFontDialog(false);
-				});
-				//点击背景颜色切换
-				Dom.bkList.on("click", function(e) {
-					if (!$(e.target).hasClass("bk-container")) {
-						return
-					}
-					bgColor = $(e.target)[0].style.backgroundColor;
-					updateBgColor($(e.target), "bgCheck")
-
-				})
-				//更新颜色设置的选中效果
-				var updateBgColor = function(target, type) {
-					$(target).addClass("bk-container-current");
-					let optDom = $(target).parent(".bk-item").siblings();
-					$(optDom).each((i, liDom) => {
-						$($(liDom).find(".bk-container")).removeClass("bk-container-current")
-					})
-					let isDark = bgColor === 'rgb(40, 53, 72)';
-					fontColor = isDark ? "#f8f8f8" : "#000000";
-					setHtmlStyle();
-					Util.StorageSetter("bgColor", bgColor);
-					//更新图标
-					Dom.icon_extra.removeClass().addClass(
-						`bottom-icon act ${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
-					Dom.icon_Aa.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
-					Dom.icon_mulu.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
-				}
-
-
-				$("#btn_prev").click(function() {
-					window.scrollTo(0, 0);
-					readerm.prveChapter();
-				});
-
-				$("#btn_next").click(function() {
-					window.scrollTo(0, 0);
-					readerm.nextChapter();
-				});
-			}
-
-			//设置文本样式
-			function setHtmlStyle() {
-				Dom.body.css({
-					'background-color': bgColor,
-					'color': fontColor
-				});
-				$(".bgStyle").css('background-color', bgColor);
-				$(".colorStyle").css('color', fontColor);
-				let isDark = bgColor === 'rgb(40, 53, 72)';
-				$("#topLeftIcon").removeClass().addClass(`top_left_icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
-				$("#nav_icon").removeClass().addClass(
-					`nav_return nav_back_book ${isDark ? "dark-icon-navleft" : "light-icon-navleft"}`);
-			}
-
-			//整体弹窗 展示控制
-			function actAllDialog(flag) {
-				actLightDialog(flag);
-				actFontDialog(flag);
-				actMuluDialog(flag);
-				actNavDialog(flag);
-				actExtraDialog(flag);
-
-			}
-			//光亮设置 展示控制
-			function actLightDialog(flag) {
-				//展示
-				if (flag) {
-					return
-				}
-				//隐藏
-
-			}
-			//字号设置 展示控制
-			function actFontDialog(flag) {
-				//展示
-				if (flag) {
-					let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-Aa" : "light-icon-Aa";
-					Dom.icon_Aa.addClass(iconClass);
-					return
-				}
-				//隐藏
-				Dom.font_Pop.hide();
-
-			}
-			//目录设置 展示控制
-			function actMuluDialog(flag) {
-				//展示
-				if (flag) {
-					let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-mulu" : "light-icon-mulu";
-					Dom.icon_mulu.addClass(iconClass);
-					return
-				}
-				//隐藏
-				Dom.mulu_Box.hide();
-				Dom.mulu_Mask.hide();
-				Dom.mulu_Cons.hide();
-				$('body,html').removeClass('notScroll');
-
-			}
-			//其他设置 展示控制
-			function actExtraDialog(flag) {
-				//展示
-				if (flag) {
-					return
-				}
-				//隐藏
-				Dom.extra_Pop.hide();
-
-			}
-			//顶部导航+底部导航 展示控制
-			function actNavDialog(flag) {
-				//展示
-				if (flag) {
-					Dom.nav_top.show();
-					Dom.nav_bottom.show();
-					let isDark = bgColor === 'rgb(40, 53, 72)';
-					Dom.icon_extra.addClass(`${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
-					Dom.icon_Aa.addClass(`${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
-					Dom.icon_mulu.addClass(`${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
-					return
-				}
-				//隐藏
-				Dom.nav_top.hide();
-				Dom.nav_bottom.hide();
-				Dom.icon_extra.removeClass().addClass("bottom-icon");
-				Dom.icon_Aa.removeClass().addClass("bottom-icon");
-				Dom.icon_mulu.removeClass().addClass("bottom-icon");
-
-			}
-			//给当前选中章节高亮，去掉其他
-			function muluUpdateActive() {
-				$(".parentLi").each((i, liDom) => {
-					$($(liDom).find("a")).each((i, aNode) => {
-						if ($(aNode).data('fid') == File_id) {
-							$(liDom).addClass("mui-active")
-						} else {
-							$(liDom).removeClass("mui-active")
-						}
-						if ($(aNode).data('cid') == Chapter_id) {
-							$(aNode).addClass("highChapter")
-						} else {
-							$(aNode).removeClass("highChapter")
-						}
-					})
-
-				})
-
-			}
-		</script>
+		<script type="text/javascript" src="js/bookdetail.js"></script>
 	</body>
-
 </html>

css/main.css

@@ -230,6 +230,7 @@ p {
 	padding: 0.8rem 0.5rem;
 	line-height: 1.875rem;
 	word-wrap: break-word;
+	word-break: keep-all;
 }
 
 .table th {

data/data11.json

@@ -6,7 +6,7 @@
     "#【董事会】",
     "周强",
     "董事长 | 党委书记",
-    "<img class=\"my-img\", src=\"./img/data/zzjg/1.png\" /><br/>",
+    "<img class=\"my-img\", src=\"./img/data/zzjg/1.jpg\" /><br/>",
     "申兆军",
     "董事 | 总经理 | 党委副书记",
     "<img class=\"my-img\", src=\"./img/data/zzjg/2.png\" /><br/>",
@@ -31,7 +31,7 @@
     "#【领导成员】",
     "周强",
     "董事长 | 党委书记",
-    "<img class=\"my-img\", src=\"./img/data/zzjg/9.png\" /><br/>",
+    "<img class=\"my-img\", src=\"./img/data/zzjg/1.jpg\" /><br/>",
     "申兆军",
     "董事 | 总经理 | 党委副书记",
     "<img class=\"my-img\", src=\"./img/data/zzjg/10.png\" /><br/>",

data/data47.json

@@ -34,9 +34,9 @@
 					"1",
 					"中国航空油料集团有限公司章程",
 					"一级",
-					"中国航油发〔 2018 〕212号",
+					"中国航油发〔2018〕212号",
 					"2018/8/6",
-					"办公室(董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -44,7 +44,7 @@
 					"2",
 					"中国航空油料集团公司董事会工作制度",
 					"一级",
-					"中国航油发〔 2012 〕181号",
+					"中国航油发〔2012〕181号",
 					"2012/6/6",
 					"办公室(董事会办公室)"
 				]
@@ -54,7 +54,7 @@
 					"3",
 					"中国航空油料集团公司董事会专门委员会议事规则",
 					"一级",
-					"中国航油发〔 2016 〕24号",
+					"中国航油发〔2016〕24号",
 					"2016/1/18",
 					"办公室(董事会办公室)"
 				]
@@ -64,7 +64,7 @@
 					"4",
 					"中国航空油料集团公司董事会秘书工作制度]",
 					"一级",
-					"中国航油发〔 2012 〕181号",
+					"中国航油发〔2012〕181号",
 					"2012/6/6",
 					"办公室(董事会办公室)"
 				]
@@ -74,7 +74,7 @@
 					"5",
 					"中国航空油料集团有限公司总经理工作制度",
 					"一级",
-					"中国航油发〔 2018 〕102号",
+					"中国航油发〔2018〕102号",
 					"2018/5/3",
 					"办公室(董事会办公室)"
 				]
@@ -84,7 +84,7 @@
 					"6",
 					"中国航空油料集团有限公司“三重一大”民主决策实施办法",
 					"二级",
-					"中国航油党发〔 2018 〕33号",
+					"中国航油党发〔2018〕33号",
 					"2018/4/3",
 					"办公室(董事会办公室)"
 				]
@@ -94,7 +94,7 @@
 					"7",
 					"中国航空油料集团有限公司董事会授权管理规定(试行 )",
 					"一级",
-					"中国航油党发〔 2022 〕307号",
+					"中国航油党发〔2022〕307号",
 					"2021/12/31",
 					"办公室(董事会办公室)"
 				]
@@ -104,7 +104,7 @@
 					"8",
 					"中国航空油料集团有限公司外部董事履职保障工作管理办法",
 					"一级",
-					"中国航油党发〔 2022 〕308号",
+					"中国航油党发〔2022〕308号",
 					"2021/12/31",
 					"办公室(董事会办公室)"
 				]
@@ -116,7 +116,7 @@
 					"二级",
 					"中国航油发〔2010〕443号",
 					"2010/11/19",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -126,7 +126,7 @@
 					"二级",
 					"中国航油发〔2020〕97号",
 					"2020/4/30",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -136,7 +136,7 @@
 					"二级",
 					"中国航油发〔2019〕223号",
 					"2019/9/3",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -146,7 +146,7 @@
 					"二级",
 					"中国航油发〔2019〕20号",
 					"2019/1/23",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -156,7 +156,7 @@
 					"二级",
 					"中国航油发〔2019〕19号",
 					"2019/1/23",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -166,7 +166,7 @@
 					"二级",
 					"中国航油发〔2010〕1号",
 					"2010/1/5",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -176,7 +176,7 @@
 					"二级",
 					"中国航油发〔2018〕107号",
 					"2018/5/7",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -186,7 +186,7 @@
 					"二级",
 					"中国航油发〔2020〕136号",
 					"2020/6/14",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -196,7 +196,7 @@
 					"二级",
 					"中国航油发〔2013〕234号",
 					"2013/7/15",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -206,7 +206,7 @@
 					"二级",
 					"中国航油发〔2012〕453号",
 					"2012/12/31",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -216,7 +216,7 @@
 					"二级",
 					"中国航油发〔2011〕87号",
 					"2011/3/15",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -226,7 +226,7 @@
 					"二级",
 					"中国航油发〔2011〕87号",
 					"2011/3/15",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -236,7 +236,7 @@
 					"二级",
 					"中国航油发〔2021〕35号",
 					"2021/2/1",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -246,7 +246,7 @@
 					"三级",
 					"中国航油发〔2018〕241号",
 					"2018/8/29",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -256,7 +256,7 @@
 					"三级",
 					"中国航油发〔2011〕388号",
 					"2011/10/31",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -266,7 +266,7 @@
 					"三级",
 					"中国航油发〔2011〕387号",
 					"2011/10/31",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -276,7 +276,7 @@
 					"三级",
 					"中国航油发〔2008〕145号",
 					"2008/4/30",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -286,7 +286,7 @@
 					"三级",
 					"中国航油发〔2008〕145号",
 					"2008/4/30",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -296,7 +296,7 @@
 					"二级",
 					"中国航油发〔2022〕10号",
 					"2022/1/12",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -306,7 +306,7 @@
 					"三级",
 					"中国航油发〔2008〕427号",
 					"2008/12/23",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -316,7 +316,7 @@
 					"三级",
 					"中国航油发〔2016〕160号",
 					"2016/6/3",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -326,7 +326,7 @@
 					"三级",
 					"中国航油发〔2016〕160号",
 					"2016/6/3",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -336,7 +336,7 @@
 					"三级",
 					"中国航油发〔2015〕335号",
 					"2015/12/21",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -346,7 +346,7 @@
 					"三级",
 					"中国航油发〔2021〕249号",
 					"2021/11/17",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -356,7 +356,7 @@
 					"二级",
 					"中国航油发〔2021〕117号",
 					"2021/6/1",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -366,7 +366,7 @@
 					"三级",
 					"中国航油发〔2023〕53号",
 					"2023/3/13",
-					"办公室（董事会办公室）"
+					"办公室(董事会办公室)"
 				]
 			},
 			{
@@ -2036,7 +2036,7 @@
 					"一级",
 					"中国航油发〔2013〕354号",
 					"2013/11/4",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2046,7 +2046,7 @@
 					"一级",
 					"中国航油发〔2014〕66号",
 					"2014/3/25",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2066,7 +2066,7 @@
 					"一级",
 					"中国航油发〔2020〕279号",
 					"2020/11/10",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2076,7 +2076,7 @@
 					"一级",
 					"中国航油发〔2020〕278号",
 					"2020/11/10",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2086,7 +2086,7 @@
 					"二级",
 					"中国航油党发〔2017〕106号",
 					"2017/9/29",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2096,7 +2096,7 @@
 					"二级",
 					"中国航油发〔2013〕420号",
 					"2013/12/23",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2106,7 +2106,7 @@
 					"二级",
 					"中国航油发〔2013〕430号",
 					"2013/12/24",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2116,7 +2116,7 @@
 					"二级",
 					"中国航油发〔2020〕210号",
 					"2020/9/11",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2126,7 +2126,7 @@
 					"二级",
 					"中国航油发〔2013〕358号",
 					"2013/11/6",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2136,7 +2136,7 @@
 					"二级",
 					"中国航油发〔2013〕359号",
 					"2013/11/6",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2146,7 +2146,7 @@
 					"二级",
 					"中国航油发〔2019〕278号",
 					"2019/10/28",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2156,7 +2156,7 @@
 					"二级",
 					"中国航油发〔2013〕419号",
 					"2013/12/23",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2166,7 +2166,7 @@
 					"二级",
 					"中国航油发〔2016〕387号",
 					"2016/12/21",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2176,7 +2176,7 @@
 					"二级",
 					"中国航油发〔2011〕142号",
 					"2011/5/4",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2186,7 +2186,7 @@
 					"二级",
 					"中国航油发〔2020〕142号",
 					"2020/6/24",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2196,7 +2196,7 @@
 					"二级",
 					"中国航油发〔2019〕271号",
 					"2019/10/23",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2206,7 +2206,7 @@
 					"二级",
 					"中国航油发〔2014〕326号",
 					"2014/12/9",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2216,7 +2216,7 @@
 					"三级",
 					"中国航油发〔2016〕391号",
 					"2016/12/23",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2226,7 +2226,7 @@
 					"三级",
 					"中国航油发〔2015〕53号",
 					"2015/3/5",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2236,7 +2236,7 @@
 					"三级",
 					"中国航油发〔2020〕250号",
 					"2020/10/21",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2246,7 +2246,7 @@
 					"三级",
 					"中国航油发〔2020〕210号",
 					"2020/9/11",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2256,7 +2256,7 @@
 					"三级",
 					"中国航油发〔2016〕388号",
 					"2016/12/21",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2266,7 +2266,7 @@
 					"三级",
 					"中国航油发〔2011〕24号",
 					"2011/1/20",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2276,7 +2276,7 @@
 					"三级",
 					"中国航油发〔2013〕447号",
 					"2013/12/30",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2286,7 +2286,7 @@
 					"三级",
 					"中国航油发〔2013〕406号",
 					"2013/12/10",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2296,7 +2296,7 @@
 					"三级",
 					"中国航油发〔2019〕298号",
 					"2019/11/25",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2306,7 +2306,7 @@
 					"三级",
 					"中国航油发〔2019〕298号",
 					"2019/11/25",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2316,7 +2316,7 @@
 					"三级",
 					"中国航油发〔2020〕332号",
 					"2020/12/18",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2326,7 +2326,7 @@
 					"三级",
 					"中国航油发〔2019〕298号",
 					"2019/11/25",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{
@@ -2336,7 +2336,7 @@
 					"三级",
 					"中国航油发〔2021〕257号",
 					"2021/11/22",
-					"法律与风险管控部"
+					"法律与<br />风险管控部"
 				]
 			},
 			{

js/bookdetail.js

@@ -0,0 +1,747 @@
+let beginWid = window.innerWidth;
+//移动设备的高度
+// let deviceHeight = document.documentElement.clientHeight;
+// $('.container').css('height', deviceHeight+'px')
+var Dom = {
+	font_Pop: $("#font_Pop"),
+	extra_Pop: $("#extra_Pop"),
+	nav_top: $("#nav_top"),
+	nav_bottom: $("#nav_bottom"),
+	icon_Aa: $("#icon_Aa"),
+	icon_extra: $("#icon_extra"),
+	body: $("body"),
+	win: $(window),
+	slider: $("#slider"),
+	icon_mulu: $("#icon_mulu"),
+	mulu_Box: $("#mulu_Box"),
+	mulu_Dialog: $("#mulu_Dialog"),
+	mulu_Mask: $("mulu_Mask"),
+	mulu_Cons: $("#mulu_Cons"),
+	muluList: $("#muluList"),
+	bkList: $("#bk-list"),
+	header: $("#header"),
+	ChapterDialog: $("#ChapterDialog")
+}
+var Util = (function() { //封装的本地存储和json数据解析
+	var prefix = 'function_reader_';
+	var StorageGetter = function(key) {
+		return localStorage.getItem(prefix + key);
+	}
+	var StorageSetter = function(key, val) {
+		return localStorage.setItem(prefix + key, val);
+	}
+	//通过url来获取加密信息，并解密
+	var getJsonp = function(url, callback) {
+		return $.jsonp({
+			url: url,
+			cache: true,
+			callback: 'duokan_fiction_chapter',
+			success: function(result) {
+				//获取加密信息，解码、转json
+				var data = $.base64.decode(result);
+				var json = decodeURIComponent(escape(data));
+				callback(json);
+			}
+		})
+	}
+	return {
+		getJsonp: getJsonp,
+		StorageGetter: StorageGetter,
+		StorageSetter: StorageSetter
+	}
+})();
+
+/***** 存储记录 *****/
+//背景颜色
+var bgColor = Util.StorageGetter("bgColor") || "rgb(233, 223, 199)"; //默认”纸张“背景颜色
+//字体颜色
+var fontColor = bgColor === 'rgb(40, 53, 72)' ? "#f8f8f8" : "#000000"; //默认黑色
+//字号大小
+let size = Util.StorageGetter("font_size") ? parseInt(Util.StorageGetter("font_size")) : 18;
+var fontSize = size / 16;
+
+//数据层的初始化
+var readerUIFrame = ReaderBaseFrame($('.Content'));
+var readerMuluFrame = ReaderMuluFrame($('#muluList'), '初始化')
+
+var File_id = 0;
+var Chapter_id = 0;
+var ChapterTotal = 0;
+var ChapterList = [];
+
+
+var readerm = ReaderModel();
+readerm.init(function(data, mulu) {
+	readerUIFrame(data);
+	ChapterList = mulu;
+	readerMuluFrame(mulu, '2');
+	$("#ChapterTitle").text(data.ct);
+	setHtmlStyle()
+
+});
+//业务事件的初始化
+EventHandler();
+
+function ReaderBaseFrame(container) { //UI渲染层
+
+	function ParseChapterData(jsonData) { //生成要展示的 html文本
+		let jsonObj = jsonData;
+		let size = Util.StorageGetter("font_size");
+		size = size ? parseInt(size) : 18;
+		fontSize = size / 16;
+		let fontSizeAdd6 = (size + 6) / 16;
+		let fontSizeAdd2 = (size + 2) / 16;
+		let html = "";
+		if (!!jsonObj.introduction && jsonObj.introduction.length > 0) {
+			html += "<br/><br/><br/>";
+			for (let i = 0; i < jsonObj.introduction.length; i++) {
+				html +=
+					`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor}">${jsonObj.introduction[i]}</p>`;
+			}
+		}
+		// 封面-0，扉页-1 不需要展示章节名称
+		if (!['0', '1'].includes(Chapter_id + '')) {
+			html += `<br/><br/><br/>`;
+			if (jsonObj.ct && jsonObj.ct !== jsonObj.t) {
+				html += `<h3 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.ct}</h3><br/>`;
+			}
+			html += `<h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
+		}
+		//正文内容
+		for (let i = 0; i < jsonObj.p.length; i++) {
+			if (Chapter_id == 0) {
+				html += "<div>" + jsonObj.p[i] + "</div>";
+			} else {
+				if (/^##.*/.test(jsonObj.p[i])) {
+					html +=
+						`<h6 class="colorStyle" style="line-height: 2.0625rem; padding: 1.25rem 0 0.3125rem; font-weight: bold; font-size:${fontSize}rem;color:${fontColor}">${jsonObj.p[i].replace('##', '')}</h6>`;
+				} else if (/^#.*/.test(jsonObj.p[i])) {
+					html +=
+						`<h5 class="colorStyle" style="line-height: 2.1875rem; padding: 0.625rem 0; font-weight: bold; font-size:${fontSizeAdd2}rem;color:${fontColor}">${jsonObj.p[i].replace('#', '')}</h5>`;
+				} else if (/^\<img.*/.test(jsonObj.p[i])) {
+					html +=
+						`<div style="margin-bottom:1.25rem;">${jsonObj.p[i]}</div>`;
+				} else if (/^&tableTemp.*/.test(jsonObj.p[i])) {
+					let tableTemp = jsonObj.p[i].split("-")[1];
+					if (!tableTemp) {
+						continue;
+					}
+					if (!jsonObj[tableTemp]) {
+						continue;
+					}
+					let tableObj = jsonObj[tableTemp];
+					if (JSON.stringify(tableObj) === '{}') {
+						continue;
+					}
+					html +=
+						`<table class="table ${tableObj.className||''}" style="${tableObj.style||''}" cellpadding="0" cellspacing="0">`;
+					if (!!tableObj.tableTitle) {
+						html += `<caption class="caption">${tableObj.tableTitle}</caption>`;
+					}
+					if (!!tableObj.cTitle) {
+						html += `<caption class="caption secCaption cTitle">${tableObj.cTitle}</caption>`;
+					}
+					if (tableObj.tableHead.length) {
+						html += `<thead class="thead">`;
+						tableObj.tableHead.map((tr, trIndex) => {
+							html += `<tr class="tr">`;
+							let thList = tr.th;
+							thList.map((item, index) => {
+								html +=
+									`<th class="th ${item instanceof Array ? 'slash-wrap':''}" style="${tr.style && tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">`;
+								if (item instanceof Array) {
+									item.map((itemLi, liIndex) => {
+										if (itemLi === "|") {
+											html += `<span class="slash"></span>`
+										} else {
+											html +=
+												`<span class="${liIndex===0?'left':'right'}" style="${liIndex===0?tr.slash&&tr.slash.leftText||'':tr.slash&&tr.slash.rightText||''}">${itemLi}</span>`
+										}
+									})
+								} else {
+									html += `${item}`;
+								}
+								html += '</th>';
+							})
+							html += `</tr>`;
+						})
+						html += `</thead>`;
+					}
+					if (tableObj.tableBody.length) {
+						html += `<tbody class="tbody">`;
+						tableObj.tableBody.map(tr => {
+							let tdList = tr.td;
+							html += `<tr class="tr">`;
+							tdList.length && tdList.map((liDom, index) => {
+								html +=
+									`<td class="td" style="${tr.style&&tr.style[index]||''}" colspan="${tr.colSpan&&tr.colSpan[index]||1}" rowspan="${tr.rowSpan&&tr.rowSpan[index]||1}">${liDom}</td>`;
+							})
+							html += "</tr>"
+						})
+						html += `</tbody>`
+					}
+					html += `</table>`;
+				} else {
+					html +=
+						`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor};text-align:${jsonObj.p[i].substr(0, 6) === 'pStart' ? 'start' : 'justify'}">${jsonObj.p[i].replace("pStart", '')}</p>`;
+				}
+			}
+		}
+
+		html = html.replace("##", )
+		return html;
+	}
+
+	return function(data) { //返回 渲染后的结果data：解密后的json数据
+		container.html(ParseChapterData(data));
+		//设置斜线
+		setSlash()
+	}
+}
+
+function ReaderMuluFrame(container, flag) { //目录UI渲染层
+	function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
+		let mulu = '';
+		for (let i = 0; i < jsonData.length; i++) {
+			let jsonObj = jsonData[i];
+			if (jsonObj.children) {
+				mulu +=
+					`<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-fid="${jsonObj.file_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
+				for (let k = 0; k < jsonObj.children.length; k++) {
+					mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.children[k].chapter_id}" data-fid="${jsonObj.children[k].file_id}" href="#">
+									${jsonObj.children[k].title}</a></li>`;
+				}
+				mulu += '</ul></li>';
+			} else {
+				mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-cid="${jsonObj.file_id}" href="#">${jsonObj.title}
+							 	</a></li>`;
+			}
+		}
+		mulu = mulu.replace("##", );
+		return mulu;
+	}
+
+	return function(data) { //返回 渲染后的结果data：解密后的json数据
+		container.html(ParseChapterMuluData(data));
+	}
+}
+
+function ReaderModel() { //数据交互层
+	//todo 获取章节信息
+	var init = function(Uicallback) { //初始化 信息
+		getFictionInfo(function(mulu) {
+			getCurChaptInfo(Chapter_id, function(data) {
+				//todo
+				Uicallback && Uicallback(data, mulu);
+			})
+		})
+	};
+
+	var getFictionInfo = function(callback) { //获取所有章节摘要信息
+		$.get('data/chapter.json', function(data) {
+			//todo 获取章节信息之后的回调
+			Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
+			File_id = parseInt(Util.StorageGetter("FileId"));
+			//选择是否从头阅读
+			if (Chapter_id !== 0) {
+				if (confirm('您要继续上次的阅读么？')) {} else {
+					Chapter_id = 0;
+				}
+			}
+			let list = data.chapters;
+			for (let i = 0; i < list.length; i++) {
+				if (!isFinite(Chapter_id) && list[i].type !== 'file') {
+					Chapter_id = list[i].chapter_id;
+					File_id = list[i].file_id;
+				}
+				if (list[i].children) {
+					ChapterTotal += list[i].children.length;
+					if (!isFinite(Chapter_id)) {
+						Chapter_id = list[i].children[0].chapter_id;
+						File_id = list[i].children[0].file_id;
+					}
+				} else if (list[i].type === 'chapter') {
+					ChapterTotal += 1;
+				}
+			}
+			callback && callback(list);
+		}, 'json');
+	};
+
+	var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
+		// $.get('data/data' + Chapter_id + '.json', function(data,status) {
+		// 	//todo 获取详细信息之后的回调
+		// 	console.log(status,'status')
+		// 	if (data.result == 0) {
+		// 		// var url=data.jsonp;
+		// 		// Util.getJsonp(url,function(data){
+		// 		callback && callback(data);
+		// 		$("#ChapterTitle").text(data.ct);
+		// 		// });//通过url来获取加密信息，并解密
+		// 	}
+		// }, 'json');
+		$.getJSON('data/data' + Chapter_id + '.json')
+			.done(function(data) {
+				// 请求成功，文件存在
+				// console.log("文件存在", data);
+				if (data.result == 0) {
+					callback && callback(data);
+				}
+			})
+			.fail(function(jqXHR, textStatus, errorThrown) {
+				// console.log("文件不存在",jqXHR);
+				callback && callback({
+					p: [],
+					t: "",
+					result: 0
+				});
+				// 请求出错，文件不存在
+				// if (jqXHR.status === 404) {
+				//   console.log("文件不存在");
+				// } else {
+				//   console.log("请求出错");
+				// }
+			});
+	};
+
+	var prveChapter = function() { //上一页
+		Chapter_id = parseInt(Chapter_id);
+		if (Chapter_id == 0) {
+			return;
+		}
+		Chapter_id -= 1;
+		//调用方法获取 Chapter_id章节信息
+		getCurChaptInfo(Chapter_id, function(data) {
+			readerUIFrame(data); //渲染html数据
+		});
+		Util.StorageSetter("ChapterId", Chapter_id);
+		//
+		updateFileId()
+	};
+
+	var nextChapter = function() { //下一页
+		Chapter_id = parseInt(Chapter_id);
+		if (Chapter_id == ChapterTotal - 1) {
+			return;
+		}
+		Chapter_id += 1;
+		//调用方法获取 Chapter_id章节信息
+		getCurChaptInfo(Chapter_id, function(data) {
+			readerUIFrame(data);
+		});
+		Util.StorageSetter("ChapterId", Chapter_id);
+		//
+		updateFileId()
+
+	};
+
+	var jumpChapter = function() { //跳页
+		Chapter_id = parseInt(Chapter_id);
+		File_id = parseInt(File_id);
+		//调用方法获取 Chapter_id章节信息
+		getCurChaptInfo(Chapter_id, function(data) {
+			readerUIFrame(data); //渲染html数据
+		});
+		Util.StorageSetter("ChapterId", Chapter_id);
+		updateFileId()
+	};
+
+	var updateFileId = function() { //更新目录一级 file_id
+		for (let item of ChapterList) {
+			if (item.type === 'file') {
+				let obj = item.children.find(child => child.chapter_id == Chapter_id);
+				if (obj) {
+					File_id = obj.file_id;
+					$("#ChapterTitle").text(obj.cTitle);
+					break;
+				}
+				continue;
+			}
+			if (Chapter_id === item.chapter_id) {
+				File_id = item.file_id;
+				$("#ChapterTitle").text(item.cTitle);
+				break;
+			}
+		}
+		Util.StorageSetter("FileId", File_id);
+	}
+
+
+	return {
+		init: init,
+		prveChapter: prveChapter,
+		nextChapter: nextChapter,
+		jumpChapter: jumpChapter,
+	}
+}
+
+function EventHandler() { //业务事件处理层
+	//点击主体中间事件
+	// $("#action_mid").click(function() {
+	// 	if (Dom.nav_top.css('display') == "none") {
+	// 		actNavDialog(true)
+	// 	} else {
+	// 		actAllDialog(false)
+	// 	}
+	// });
+
+	//=============
+	let upperElement = document.getElementById('upperElement')
+	upperElement.addEventListener('click', function(event) {
+		var target = event.target;
+		if (['btn_next', 'btn_prev'].includes(target.id)) {
+
+		} else {
+			if (Dom.nav_top.css('display') == "none") {
+				actNavDialog(true)
+			} else {
+				actAllDialog(false)
+			}
+		}
+
+		// 判断事件触发的源元素是上层元素还是下层元素
+		// if (target.id === 'lowerElement') {
+		//   // 如果是下层元素，则触发下层元素的事件
+		//   console.log('下层元素的事件被触发');
+		//   // 实现下层元素的事件处理逻辑
+		// } else {
+		//   // 如果是上层元素，则触发上层元素的事件
+		//   console.log('上层元素的事件被触发');
+		//   // 实现上层元素的事件处理逻辑
+		// }
+	});
+
+
+
+
+	//=============
+	//点击返回事件
+	$(".nav_back_book").click(function() {
+		Chapter_id = parseInt(Chapter_id);
+		if (Chapter_id == 0) {
+			return;
+		}
+		if (Dom.nav_top.css('display') == "none") {
+			return;
+		}
+		Chapter_id = 0;
+		readerm.jumpChapter();
+	});
+	//点击目录事件--顶部浮窗
+	$("#topMulu").click(function() {
+		muluShow("top")
+	});
+	//点击目录事件--底部导航
+	$("#icon_mulu").click(function() {
+		muluShow()
+	});
+	var muluShow = function(type) {
+		Dom.icon_extra.removeClass("act");
+		if (Dom.mulu_Box.css('display') == 'none') {
+			$('body,html').addClass('notScroll');
+			Dom.mulu_Box.show();
+			if (type === 'top') {
+				Dom.mulu_Box.css("bottom", 0)
+			} else {
+				Dom.mulu_Box.css("bottom", 70)
+			}
+
+			Dom.nav_top.hide();
+			Dom.mulu_Mask.show();
+			Dom.mulu_Cons.show();
+			//章节总数赋值
+			$('#ChapterTotal').text(ChapterTotal)
+			//给当前选中章节高亮
+			$(".mui-active").removeClass("mui-active");
+			$(".highChapter").removeClass("highChapter");
+			let optDom = $(".parentLi")[File_id];
+			$(optDom).addClass("mui-active");
+			$($(optDom).find("a")).each((i, aNode) => {
+				if ($(aNode).data('cid') == Chapter_id) {
+					$(aNode).addClass("highChapter")
+				}
+			})
+		} else {
+			muluUpdateActive();
+			actMuluDialog(false);
+		}
+		$("#muluList,#muluList .mui-table-view,.list-li-a,.mui-table-view-cell>a:not(.mui-btn).mui-active").css(
+			'background-color', bgColor);
+		actFontDialog(false)
+		actExtraDialog(false);
+	}
+	//点击目录列表进行指定跳转
+	Dom.muluList.on("click", function(e) {
+		let cid = $(e.target).data('cid');
+		if (cid === undefined || cid === null || cid === "") {
+			return
+		}
+		Chapter_id = cid;
+		File_id = $(e.target).data('fid');
+		let cSpan = $(e.target).parent().parent("ul").prev();
+		let cTitle = cSpan[0] ? cSpan[0].text : e.target.text;
+		$("#ChapterTitle").text(cTitle);
+		muluUpdateActive();
+		readerm.jumpChapter();
+		actAllDialog(false)
+		window.scrollTo(0, 0);
+	})
+	// 点击弹窗内容以外的地方关闭弹窗
+	$("#mulu_Mask").on('click', function(e) {
+		// if ($(e.target).closest('#mui-content').length > 0) {
+		//   console.log('弹出框内部被点击了');
+		// } else {
+		//   console.log('弹出框以外的部分被点击了');
+		// 关闭弹框
+		actAllDialog(false)
+
+		// }
+	});
+	//点击字号事件
+	$(".btn_Aa").click(function() {
+		Dom.icon_extra.removeClass("act");
+		if (Dom.font_Pop.css('display') == 'none') {
+			Dom.font_Pop.show();
+			Dom.slider.val(fontSize);
+		} else {
+			Dom.font_Pop.hide();
+		}
+		actMuluDialog(false);
+		actExtraDialog(false);
+	});
+	//滚动条事件
+	Dom.win.scroll(function() {
+		actAllDialog(false)
+	})
+	//点击字体大小事件
+	Dom.slider.change(function() {
+		let NowFontSize = Number($(this).val());
+		if (NowFontSize > 24 || NowFontSize < 16) {
+			return;
+		}
+		$("p").css('font-size', NowFontSize / 16 + 'rem');
+		$("h6").css('font-size', NowFontSize / 16 + 'rem');
+		$("h4").css('font-size', (NowFontSize + 6) / 16 + 'rem');
+		$("h5").css('font-size', (NowFontSize + 2) / 16 + 'rem');
+		Util.StorageSetter("font_size", NowFontSize);
+	});
+	//点击其他事件
+	$(".btn-extra").click(function() {
+		Dom.icon_extra.addClass("act");
+		if (Dom.extra_Pop.css('display') == 'none') {
+			Dom.extra_Pop.show();
+			if (bgColor) {
+				$(".bk-item").each((i, liDom) => {
+					let nodeSpan = $($(liDom).find(".bk-container"));
+					nodeSpan.removeClass("bk-container-current")
+					let itembg = nodeSpan[0].style.backgroundColor;
+					if (itembg === bgColor) {
+						nodeSpan.addClass("bk-container-current")
+					}
+				})
+			}
+
+		} else {
+			Dom.extra_Pop.hide();
+		}
+		actMuluDialog(false);
+		actFontDialog(false);
+	});
+	//点击背景颜色切换
+	Dom.bkList.on("click", function(e) {
+		if (!$(e.target).hasClass("bk-container")) {
+			return
+		}
+		bgColor = $(e.target)[0].style.backgroundColor;
+		updateBgColor($(e.target), "bgCheck")
+
+	})
+	//更新颜色设置的选中效果
+	var updateBgColor = function(target, type) {
+		$(target).addClass("bk-container-current");
+		let optDom = $(target).parent(".bk-item").siblings();
+		$(optDom).each((i, liDom) => {
+			$($(liDom).find(".bk-container")).removeClass("bk-container-current")
+		})
+		let isDark = bgColor === 'rgb(40, 53, 72)';
+		fontColor = isDark ? "#f8f8f8" : "#000000";
+		setHtmlStyle();
+		Util.StorageSetter("bgColor", bgColor);
+		//更新图标
+		Dom.icon_extra.removeClass().addClass(
+			`bottom-icon act ${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
+		Dom.icon_Aa.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
+		Dom.icon_mulu.removeClass().addClass(`bottom-icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
+	}
+
+
+	$("#btn_prev").click(function() {
+		window.scrollTo(0, 0);
+		readerm.prveChapter();
+	});
+
+	$("#btn_next").click(function() {
+		window.scrollTo(0, 0);
+		readerm.nextChapter();
+	});
+}
+
+//设置文本样式
+function setHtmlStyle() {
+	Dom.body.css({
+		'background-color': bgColor,
+		'color': fontColor
+	});
+	$(".bgStyle").css('background-color', bgColor);
+	$(".colorStyle").css('color', fontColor);
+	let isDark = bgColor === 'rgb(40, 53, 72)';
+	$("#topLeftIcon").removeClass().addClass(`top_left_icon ${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
+	$("#nav_icon").removeClass().addClass(
+		`nav_return nav_back_book ${isDark ? "dark-icon-navleft" : "light-icon-navleft"}`);
+}
+
+//整体弹窗 展示控制
+function actAllDialog(flag) {
+	actLightDialog(flag);
+	actFontDialog(flag);
+	actMuluDialog(flag);
+	actNavDialog(flag);
+	actExtraDialog(flag);
+
+}
+//光亮设置 展示控制
+function actLightDialog(flag) {
+	//展示
+	if (flag) {
+		return
+	}
+	//隐藏
+
+}
+//字号设置 展示控制
+function actFontDialog(flag) {
+	//展示
+	if (flag) {
+		let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-Aa" : "light-icon-Aa";
+		Dom.icon_Aa.addClass(iconClass);
+		return
+	}
+	//隐藏
+	Dom.font_Pop.hide();
+
+}
+//目录设置 展示控制
+function actMuluDialog(flag) {
+	//展示
+	if (flag) {
+		let iconClass = bgColor === 'rgb(40, 53, 72)' ? "dark-icon-mulu" : "light-icon-mulu";
+		Dom.icon_mulu.addClass(iconClass);
+		return
+	}
+	//隐藏
+	Dom.mulu_Box.hide();
+	Dom.mulu_Mask.hide();
+	Dom.mulu_Cons.hide();
+	$('body,html').removeClass('notScroll');
+
+}
+//其他设置 展示控制
+function actExtraDialog(flag) {
+	//展示
+	if (flag) {
+		return
+	}
+	//隐藏
+	Dom.extra_Pop.hide();
+
+}
+//顶部导航+底部导航 展示控制
+function actNavDialog(flag) {
+	//展示
+	if (flag) {
+		Dom.nav_top.show();
+		Dom.nav_bottom.show();
+		let isDark = bgColor === 'rgb(40, 53, 72)';
+		Dom.icon_extra.addClass(`${isDark ? "dark-icon-extra" : "light-icon-extra"}`);
+		Dom.icon_Aa.addClass(`${isDark ? "dark-icon-Aa" : "light-icon-Aa"}`);
+		Dom.icon_mulu.addClass(`${isDark ? "dark-icon-mulu" : "light-icon-mulu"}`);
+		return
+	}
+	//隐藏
+	Dom.nav_top.hide();
+	Dom.nav_bottom.hide();
+	Dom.icon_extra.removeClass().addClass("bottom-icon");
+	Dom.icon_Aa.removeClass().addClass("bottom-icon");
+	Dom.icon_mulu.removeClass().addClass("bottom-icon");
+
+}
+//给当前选中章节高亮，去掉其他
+function muluUpdateActive() {
+	$(".parentLi").each((i, liDom) => {
+		$($(liDom).find("a")).each((i, aNode) => {
+			if ($(aNode).data('fid') == File_id) {
+				$(liDom).addClass("mui-active")
+			} else {
+				$(liDom).removeClass("mui-active")
+			}
+			if ($(aNode).data('cid') == Chapter_id) {
+				$(aNode).addClass("highChapter")
+			} else {
+				$(aNode).removeClass("highChapter")
+			}
+		})
+
+	})
+
+}
+
+
+//设置斜线
+function setSlash() {
+	let hasSlash = $('span').is(".slash");
+	if (!hasSlash) return;
+	//
+	$('.slash-wrap').each((i, ele) => {
+		/* 斜边边长 */
+		/* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
+		let width = $(ele).outerWidth();
+		let height = $(ele).parents('.thead').outerHeight();
+		let slashWidth = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+		/* 旋转角度计算公式 */
+		/*  Math.atan(height / width) * 180 / Math.PI  */
+		let transformRole = Math.atan(height / width) * 180 / Math.PI;
+		$(ele).find(".slash").css({
+			width: slashWidth,
+			transform: `rotate(${transformRole}deg)`
+		})
+	})
+}
+
+
+//监听屏幕宽度
+
+const getWindowInfo = () => {
+	const windowInfo = {
+		width: window.innerWidth,
+		hight: window.innerHeight
+	}
+	// console.log(windowInfo,'===========上次的',beginWid);
+	if (windowInfo.width !== beginWid) {
+		setSlash()
+	}
+};
+//防抖
+const debounce = (fn, delay) => {
+	let timer;
+	return function() {
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = setTimeout(() => {
+			fn();
+		}, delay);
+	}
+};
+const cancalDebounce = debounce(getWindowInfo, 500);
+
+window.addEventListener('resize', cancalDebounce);