zhangm
/
ElectronicReader


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="bookmark" href="favicon.ico" type="image/x-icon" />
		<title>2023年中国航油-管理年鉴</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
			.m-artical-action-mid {
				position: fixed;
				width: 100%;
				height: 40%;
				top: 30%;
				z-index: 9998;
			}

			#muluList {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}

			.highChapter {
				color: red !important;
			}
		</style>
	</head>

	<body>
		<div>
			<!-- 中间点击层 -->
			<div class="m-artical-action">
				<div class="m-artical-action-mid" id="action_mid"></div>
			</div>
			<!-- 顶部导航 -->
			<div class="nav-top colorStyle bgStyle" id="nav_top" style="display: none;">
				<div class="nav_container">
					<div class="nav_return nav_back_book" id="nav_icon"></div>
					<div class="nav_text nav_back_book" id="nav_text">返回首页</div>
				</div>
			</div>
			<!-- 主体内容 -->
			<header id="header" class="top_mulu_box colorStyle bgStyle">
				<div class="top_left" style="cursor: pointer;">
					<div class="top_left_icon" id="topLeftIcon"></div>
					<div class="top_left_text" id="topMulu">目录</div>
				</div>
				<div class="top_center">
					<div class="top_center_text" id="ChapterTitle"></div>
				</div>
				<div class="top_right"></div>
			</header>
			<div class="container">
				<div class="Content">
					<!-- 内容动态加载 -->
				</div>
				<div class="page_btn">
					<button class="btn-prev colorStyle bgStyle" id="btn_prev">上一章</button>
					<button class="btn-next colorStyle bgStyle" id="btn_next">下一章</button>
				</div>
			</div>
			<!-- 底部导航栏 -->
			<div class="nav-bottom colorStyle bgStyle" id="nav_bottom" style="display: none;">
				<div class="btn-mulu">
					<div class="mulu">
						<div class="bottom-icon" id="icon_mulu"> </div>
						<div class="text_mulu">目录</div>
					</div>
				</div>
				<div class="btn_Aa">
					<div class="Aa">
						<div class="bottom-icon" id="icon_Aa"> </div>
						<div class="text_Aa">字号</div>
					</div>
				</div>
				<div class="btn-extra">
					<div class="extra">
						<div class="bottom-icon" id="icon_extra"> </div>
						<div class="text_extra">其他</div>
					</div>
				</div>
				<!-- 其他功能栏 -->
				<div class="extraPop colorStyle bgStyle" id="extra_Pop" style="display: none;">
					<div class="fontItem">
						<span class="fontItemTitle">背景</span>
						<div class="fontItemCons" id="bk-list">
							<div class="bk-item" id="mb">
								<div class="bk-container" style="background-color: rgb(247, 238, 229);"></div>
								<span>米白</span>
							</div>
							<div class="bk-item" id="zz">
								<div class="bk-container" style="background-color: rgb(233, 223, 199);"></div>
								<span>纸张</span>
							</div>
							<div class="bk-item" id="qh">
								<div class="bk-container" style="background-color: rgb(164, 164, 164);"></div>
								<span>浅灰</span>
							</div>
							<div class="bk-item" id="hy">
								<div class="bk-container" style="background-color: rgb(205, 239, 206);"></div>
								<span>护眼</span>
							</div>
							<div class="bk-item" id="hl">
								<div class="bk-container" style="background-color: rgb(40, 53, 72);"></div>
								<span>海蓝</span>
							</div>

						</div>
					</div>

				</div>
				<!-- 字号功能栏 -->
				<div class="fontPop colorStyle bgStyle" id="font_Pop" style="display: none;">
					<div class="fontItem">
						<span class="fontItemTitle">字号</span>
						<div class="fontItemCons">
							小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min="16"
								max="24" step="1">大
						</div>
					</div>
				</div>
			</div>
			<!-- 目录 -->
			<div class="muluBox colorStyle" id="mulu_Box" style="display: none;">
				<div class="muluMask" id="mulu_Mask"></div>
				<div class="muluCons bgStyle" id="mulu_Cons">
					<div class="muluTitle">
						<div>共<span id="ChapterTotal"></span>章</div>
					</div>
					<div class="mui-content">
						<ul id="muluList" class="mui-table-view mui-table-view-chevron">
							<!-- 目录动态加载 -->
						</ul>
					</div>
				</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 RootContainer = $('.Content');
			var readerUIFrame = ReaderBaseFrame(RootContainer);
			var readerMuluFrame = ReaderMuluFrame(Dom.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);
				$("#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}">${jsonObj.introduction[i]}</p>`;
						}
					}
					html += `<br/><br/><br/><h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
					if (jsonObj.textType === 'table') {
						html +=
							'<table class="table" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed;">';
						if (!!jsonObj.tableTitle) {
							html += `<caption class="caption">${jsonObj.tableTitle}</caption>`;
						}
						if (jsonObj.tableHead.length) {
							html += `<thead class="thead"><tr class="tr">`;
							jsonObj.tableHead.map((item, index) => {
								html += `<th class="th">${item}</th>`;
							})
							html += `</tr></thead>`;
						}
						if (jsonObj.tableBody.length) {
							html += `<tbody class="tbody">`
							jsonObj.tableBody.map(item => {
								html += `<tr class="tr">`;
								item.length && item.map((liDom, index) => {
									html += `<td class="td">${liDom}</td>`;
								})
								html += "</tr>"
							})
							html += `</tbody>`

						}
						html += `</table>`;
					} else {
						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 {
									html +=
										`<p class="colorStyle" style="font-size:${fontSize}rem;color:${fontColor}">${jsonObj.p[i]}</p>`;
								}
							}
						}
					}
					html = html.replace("##", )
					return html;
				}

				return function(data) { //返回 渲染后的结果data：解密后的json数据
					container.html(ParseChapterData(data));
				}
			}

			function ReaderMuluFrame(container) { //目录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;
								}
							}
						}
						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) {
						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) {
						//console.log(data);
						readerUIFrame(data); //渲染html数据
					});
					Util.StorageSetter("ChapterId", Chapter_id);
					Util.StorageSetter("FileId", File_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;
							}
						} else {
							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)
					}
				});
				//点击返回事件
				$(".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)
						//给当前选中章节高亮
						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 {
								$(aNode).removeClass("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>
	</body>

</html>