Sfoglia il codice sorgente

颜色切换动态样式设置,图标状态切换

duxiaohong 2 anni fa
parent
commit
48de48c665
18 ha cambiato i file con 771 aggiunte e 872 eliminazioni
  1. 695 742
      bookdetail.html
  2. 76 130
      css/main.css
  3. BIN
      img/Aa.png
  4. BIN
      img/Aa2.png
  5. BIN
      img/Aa_n.png
  6. BIN
      img/left.png
  7. BIN
      img/leftNav.png
  8. BIN
      img/left_round.png
  9. BIN
      img/left_round_n.png
  10. BIN
      img/mulu.png
  11. BIN
      img/mulu2.png
  12. BIN
      img/mulu_n.png
  13. BIN
      img/rijian.png
  14. BIN
      img/set1.png
  15. BIN
      img/set1_n.png
  16. BIN
      img/setup.png
  17. BIN
      img/setup_n.png
  18. BIN
      img/yejian.png

+ 695 - 742
bookdetail.html

@@ -1,820 +1,773 @@
 <!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;
-		}
-
-		#muluList,
-		#muluList .mui-table-view,
-		.list-li-a,
-		.mui-table-view-cell>a:not(.mui-btn).mui-active {
-			background-color: #e9dfc7;
-		}
-
-		.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" id="nav_top" style="display: none;">
-			<div class="nav_container">
-				<div class="nav_return nav_back_book"></div>
-				<div class="nav_text nav_back_book" id="nav_text">返回首页</div>
-			</div>
-		</div>
-		<!--主体内容-->
-		<header id="header" class="top_mulu_box">
-			<div class="top_left" style="cursor: pointer;">
-				<div class="top_left_icon"></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">
+	<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="page_btn">
-				<button class="btn-prev" id="btn_prev">上一章</button>
-				<button class="btn-next" id="btn_next">下一章</button>
+			<!-- 顶部导航 -->
+			<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>
-		</div>
-
-		<!--底部导航栏    -->
-		<div class="nav-bottom" id="nav_bottom" style="display: none;">
-			<div class="btn-mulu">
-				<div class="mulu">
-					<div class="icon_mulu" id="icon_mulu"> </div>
-					<div class="text_mulu">目录</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="btn-model">
-					<div class="model">
-						<div class="icon-yejian" id="icon_model"> </div>
-						<div class="text_yejian">夜间</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="icon-Aa" id="icon_Aa"> </div>
-					<div class="text_Aa">字号</div>
 				</div>
-			</div>
-			<div class="btn-extra">
-				<div class="extra">
-					<div class="icon-extra" id="icon_extra"> </div>
-					<div class="text_extra">其他</div>
+				<div class="btn_Aa">
+					<div class="Aa">
+						<div class="bottom-icon" id="icon_Aa"> </div>
+						<div class="text_Aa">字号</div>
+					</div>
 				</div>
-			</div>
-			<!-- 其他功能栏 -->
-			<div class="extraPop" 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: #f7eee5;"></div>
-							<span>米白</span>
-						</div>
-						<div class="bk-item" id="zz">
-							<div class="bk-container" style="background-color: #e9dfc7;"></div>
-							<span>纸张</span>
-						</div>
-						<div class="bk-item" id="qh">
-							<div class="bk-container" style="background-color: #a4a4a4;"></div>
-							<span>浅灰</span>
-						</div>
-						<div class="bk-item" id="hy">
-							<div class="bk-container" style="background-color: #cdefce;"></div>
-							<span>护眼</span>
-						</div>
-						<div class="bk-item" id="hl">
-							<div class="bk-container" style="background-color: #283548;"></div>
-							<span>海蓝</span>
+				<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="fontPop" id="font_Pop" style="display: none;">
-				<div class="fontItem">
-					<span class="fontItemTitle">字号</span>
-					<div class="fontItemCons">
-						<!--							<button class="btn_Big" id="btn_Big">大</button>
-							<button class="btn_Small" id="btn_Small">小</button>-->
-						小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min=16 max=24
-							step="1">大
+			<!-- 目录 -->
+			<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>
 
 
-		<!-- 目录 -->
-		<div class="muluBox" id="mulu_Box" style="display: none;">
-			<div class="muluMask" id="mulu_Mask">
-
-			</div>
-			<div class="muluCons" id="mulu_Cons">
-				<div class="muluTitle">
-					<div>共<span id="ChapterTotal"></span>章</div>
-					<!-- <div>倒叙/正序</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),
-			icon_model: $("#icon_model"),
-			btn_Big: $("#btn_Big"),
-			slider: $("#slider"),
-			btn_Small: $("#btn_Small"),
-			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 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);
-		});
-		//业务事件的初始化
-		EventHandler();
-
-
-		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
+		<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 bkgroundcolor = Util.StorageGetter("bkgroundcolor");
-		var bkCurrColor = Util.StorageGetter("bkgroundcolor");
-		var txtCurrColor = Util.StorageGetter("txtcolor");
-		Dom.body.css('background-color', bkgroundcolor);
-		Dom.header.css('background-color', bkCurrColor);
-		//字号大小 设置存储记录
-		var InitFontSize;
-		InitFontSize = Util.StorageGetter("font_size");
-		InitFontSize = parseInt(InitFontSize);
-		if (!InitFontSize) {
-			InitFontSize = 18;
-		}
-		$("p").css('font-size', InitFontSize);
-		$("h4").css('font-size', InitFontSize + 6);
-		$("h5").css('font-size', InitFontSize + 2);
-		Dom.slider.val(InitFontSize);
-
-		function ReaderBaseFrame(container) { //UI渲染层
-
-			function ParseChapterData(jsonData) { //生成要展示的 html文本
-				let jsonObj = jsonData;
-				CurrFontSize = Util.StorageGetter("font_size");
-				CurrFontSize = parseInt(CurrFontSize);
-				if (!CurrFontSize) {
-					CurrFontSize = 18;
+			var Util = (function() { //封装的本地存储和json数据解析
+				var prefix = 'function_reader_';
+				var StorageGetter = function(key) {
+					return localStorage.getItem(prefix + key);
 				}
-				let TitleFontSize = CurrFontSize + 6;
-				let RedFontSize = CurrFontSize + 2;
-				let html = "";
-				if (!!jsonObj.introduction && jsonObj.introduction.length > 0) {
-					html += "<br/><br/><br/>";
-					for (let i = 0; i < jsonObj.introduction.length; i++) {
-						html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.introduction[i] + "</p>";
-					}
+				var StorageSetter = function(key, val) {
+					return localStorage.setItem(prefix + key, val);
 				}
-				html += "<br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + 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>`;
+				//通过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>`;
+						}
 					}
-					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 += `<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>"
-						})
-						html += `</tbody>`
+							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 style='color: #000; line-height: 33px; padding: 20px 0 5px; font-weight: bold; font-size: " + CurrFontSize + "px'>" + jsonObj.p[i]
-									.replace('##', '') + "</h6>";
-							} else if (/^#.*/.test(jsonObj.p[i])) {
-								html += "<h5 style='color: #000; line-height: 35px; padding: 10px 0; font-weight: bold; font-size: " + RedFontSize + "px'>" + jsonObj.p[i]
-									.replace('#', '') + "</h5>";
-							} else if (/^\<img.*/.test(jsonObj.p[i])) {
-								html += "<div style='margin-bottom:20px'>" + jsonObj.p[i] + "</div>";
+						}
+						html += `</table>`;
+					} else {
+						for (let i = 0; i < jsonObj.p.length; i++) {
+							if (Chapter_id == 0) {
+								html += "<div>" + jsonObj.p[i] + "</div>";
 							} else {
-								html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.p[i] + "</p>";
+								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;
 				}
-				html = html.replace("##",)
-				return html;
-			}
 
-			return function (data) { //返回 渲染后的结果data:解密后的json数据
-				container.html(ParseChapterData(data));
+				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="#">
+
+			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}
+							}
+							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;
 				}
-				mulu = mulu.replace("##",);
-				return mulu;
-			}
 
-			return function (data) { //返回 渲染后的结果data:解密后的json数据
-				container.html(ParseChapterMuluData(data));
+				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);
+
+			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;
+				};
+
+				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;
 							}
 						}
-					}
-					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);
+						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;
+								}
+							}
 						}
-					})
-					.fail(function (jqXHR, textStatus, errorThrown) {
-						// console.log("文件不存在",jqXHR);
-						callback && callback({
-							p: [],
-							t: "",
-							result: 0
+						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("请求出错");
+							// }
 						});
-						// 请求出错,文件不存在
-						// 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);
+						}
+					}
+				}
 
-			var prveChapter = function () { //上一页
-				Chapter_id = parseInt(Chapter_id);
-				if (Chapter_id == 0) {
-					return;
+
+				return {
+					init: init,
+					prveChapter: prveChapter,
+					nextChapter: nextChapter,
+					jumpChapter: jumpChapter,
 				}
-				Chapter_id -= 1;
-				//调用方法获取 Chapter_id章节信息
-				getCurChaptInfo(Chapter_id, function (data) {
-					readerUIFrame(data); //渲染html数据
+			}
+
+			function EventHandler() { //业务事件处理层
+				//点击主体中间事件
+				$("#action_mid").click(function() {
+					if (Dom.nav_top.css('display') == "none") {
+						actNavDialog(true)
+					} else {
+						actAllDialog(false)
+					}
 				});
-				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);
+				//点击返回事件
+				$(".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();
 				});
-				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数据
+				//点击目录事件--顶部浮窗
+				$("#topMulu").click(function() {
+					muluShow("top")
 				});
-				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;
+				//点击目录事件--底部导航
+				$("#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 {
-						if (Chapter_id === item.chapter_id) {
-							File_id = item.file_id;
-							$("#ChapterTitle").text(item.cTitle);
-							break;
-						}
-						Util.StorageSetter("FileId", File_id);
+						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)
 
-			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 {
+					// }
+				});
+				//点击字号事件
+				$(".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)
-				}
-			});
-			//点击返回事件
-			$(".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) {
-				if (Dom.mulu_Box.css('display') == 'none') {
-					$('body,html').addClass('notScroll');
-					Dom.mulu_Box.show();
-					if (type === 'top') {
-						Dom.mulu_Box.css("bottom", 0)
+				})
+				//点击字体大小事件
+				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.mulu_Box.css("bottom", 70)
+						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")
 
-					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")
-						}
+				})
+				//更新颜色设置的选中效果
+				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")
 					})
-				} else {
-					muluUpdateActive();
-					actMuluDialog(false);
-				}
-				actFontDialog(false)
-				actExtraDialog(false);
+					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"}`);
 			}
-			//点击目录列表进行指定跳转
-			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 () {
-				if (Dom.font_Pop.css('display') == 'none') {
-					Dom.font_Pop.show();
-				} else {
-					Dom.font_Pop.hide();
-				}
-				actMuluDialog(false);
-				actExtraDialog(false);
-			});
-			//滚动条事件
-			Dom.win.scroll(function () {
-				actAllDialog(false)
-			})
-			//点击 大、小事件
-			Dom.slider.change(function () {
-				let NowFontSize = $(this).val();
-				if (NowFontSize > 24 || NowFontSize < 16) {
-					return;
-				}
-				$("p").css('font-size', Number(NowFontSize));
-				$("h4").css('font-size', Number(NowFontSize) + 6);
-				$("h5").css('font-size', Number(NowFontSize) + 2);
-				Util.StorageSetter("font_size", Number(NowFontSize));
-			});
-			Dom.btn_Big.click(function () {
-				if (InitFontSize >= 24) {
-					return;
-				}
-				InitFontSize += 1;
-				$("p").css('font-size', InitFontSize);
-				$("h4").css('font-size', InitFontSize);
-				Util.StorageSetter("font_size", InitFontSize);
-			});
-			Dom.btn_Small.click(function () {
-				if (InitFontSize <= 16) {
-					return;
-				}
-				InitFontSize -= 1;
-				$("p").css('font-size', InitFontSize);
-				$("h4").css('font-size', InitFontSize);
-				Util.StorageSetter("font_size", InitFontSize);
-			});
-			//点击夜间&日间 切换模式
-			// Dom.icon_model.click((e) => {
-			// 	if ($(e.target).hasClass("icon-yejian")) {
-			// 		//日间模式转夜间模式
-			// 		Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
-			// 		Dom.icon_model.siblings().text("日间");
-			// 		bkCurrColor = '#283548';
-			// 		updateBgColor($("#hl").find(".bk-container"))
-
-			// 	} else {
-			// 		//夜间模式转日间模式
-			// 		Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
-			// 		Dom.icon_model.siblings().text("夜间");
-			// 		bkCurrColor = Util.StorageGetter("bkHistory");
-			// 		model = Util.StorageGetter("model") || "zz";
-			// 		updateBgColor($("#" + model).find(".bk-container"))
-			// 	}
-
-			// });
-
-			//点击其他事件
-			$(".btn-extra").click(function () {
-				if (Dom.extra_Pop.css('display') == 'none') {
-					Dom.extra_Pop.show();
-				} else {
-					Dom.extra_Pop.hide();
-				}
-				actMuluDialog(false);
-				actFontDialog(false);
-			});
 
-			//点击背景颜色切换
-			Dom.bkList.on("click", function (e) {
-				if (!$(e.target).hasClass("bk-container")) {
-					return
-				}
-				bkCurrColor = $(e.target)[0].style.backgroundColor;
-				updateBgColor($(e.target), "bgCheck")
-			})
-			//
-			var updateBgColor = function (target, type) {
-				$(target).addClass("bk-container-current");
-				Dom.body.css('background-color', bkCurrColor);
-				Dom.header.css('background-color', bkCurrColor);
-				//更新日夜模式
-				// let model = $(target).parent(".bk-item")[0].id;
-				// if (model === 'hl') {
-				// 	//记录夜间模式前的背景颜色和模式
-				// 	Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
-				// 	if (type === "bgCheck") {
-				// 		//点击的背景颜色选择,需要更新模式  转为日间显示
-				// 		Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
-				// 		Dom.icon_model.siblings().text("日间");
-				// 	}
-				// } else {
-				// 	Util.StorageSetter("model", model);
-				// 	if (type === "bgCheck") {
-				// 		//点击的背景颜色选择,需要更新模式  转为夜间显示
-				// 		Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
-				// 		Dom.icon_model.siblings().text("夜间");
-				// 	}
-				// }
-				let optDom = $(target).parent(".bk-item").siblings();
-				$(optDom).each((i, liDom) => {
-					$($(liDom).find(".bk-container")).removeClass("bk-container-current")
-				})
-				Util.StorageSetter("bkgroundcolor", bkCurrColor);
+
+				$("#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"}`);
+			}
 
-			$("#btn_prev").click(function () {
-				window.scrollTo(0, 0);
-				readerm.prveChapter();
-			});
+			//整体弹窗 展示控制
+			function actAllDialog(flag) {
+				actLightDialog(flag);
+				actFontDialog(flag);
+				actMuluDialog(flag);
+				actNavDialog(flag);
+				actExtraDialog(flag);
 
-			$("#btn_next").click(function () {
-				window.scrollTo(0, 0);
-				readerm.nextChapter();
-			});
-		}
-		//整体弹窗 展示控制
-		function actAllDialog(flag) {
-			actLightDialog(flag);
-			actFontDialog(flag);
-			actMuluDialog(flag);
-			actNavDialog(flag);
-			actExtraDialog(flag);
-
-		}
-
-		//光亮设置 展示控制
-		function actLightDialog(flag) {
-			//展示
-			if (flag) {
-				return
 			}
-			//隐藏
-
-		}
-		//字号设置 展示控制
-		function actFontDialog(flag) {
-			//展示
-			if (flag) {
-				return
+			//光亮设置 展示控制
+			function actLightDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+
 			}
-			//隐藏
-			Dom.font_Pop.hide();
-
-		}
-		//目录设置 展示控制
-		function actMuluDialog(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();
+
 			}
-			//隐藏
-			Dom.mulu_Box.hide();
-			Dom.mulu_Mask.hide();
-			Dom.mulu_Cons.hide();
-			$('body,html').removeClass('notScroll');
-
-		}
-		//其他设置 展示控制
-		function actExtraDialog(flag) {
-			//展示
-			if (flag) {
-				return
+			//目录设置 展示控制
+			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');
+
 			}
-			//隐藏
-			Dom.extra_Pop.hide();
-
-		}
-
-		//顶部导航+底部导航 展示控制
-		function actNavDialog(flag) {
-			//展示
-			if (flag) {
-				Dom.nav_top.show();
-				Dom.nav_bottom.show();
-				return
+			//其他设置 展示控制
+			function actExtraDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+				Dom.extra_Pop.hide();
+
 			}
-			//隐藏
-			Dom.nav_top.hide();
-			Dom.nav_bottom.hide();
-
-		}
-		//给当前选中章节高亮,去掉其他
-		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 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>
+				})
+
+			}
+		</script>
+	</body>
 
 </html>

+ 76 - 130
css/main.css

@@ -1,27 +1,22 @@
 /*-----------主体内容-----------*/
-body {
-	background-color: #e9dfc7;
-}
 
 .container {
 	padding: 2em 1em 1.5em;
 }
 
 .Content h4 {
-	font-size: 24px;
+	font-size: 1.5rem;
 	margin: 0 0 1em 0;
-	padding-bottom: 5px;
-	letter-spacing: 2px;
-	color: #000;
+	padding-bottom: 0.3125rem;
+	letter-spacing: 0.125rem;
 }
 
 p {
 	text-indent: 2em;
-	font-size: 18px;
+	font-size: 1.125rem;
 	text-align: justify;
-	line-height: 33px;
-	padding-bottom: 5px;
-	color: #000;
+	line-height: 2.0625rem;
+	padding-bottom: 0.3125rem;
 }
 
 .page_btn {
@@ -37,27 +32,24 @@ p {
 .btn-next {
 	width: 49%;
 	text-align: center;
-	height: 40px;
-	background: #000;
-	color: #F8F8F8;
-	border-radius: 8px;
-	margin-bottom: 20px;
+	height: 2.5rem;
+	border-radius: 0.5rem;
+	margin-bottom: 1.25rem;
 }
 
 /* 主体为表格的样式 */
 .table {
-	background-color: transparent;
+	/* background-color: transparent; */
 	border: none;
-	color: #565;
-	font-size: 12px;
+	font-size: 0.75rem;
 }
 
 .caption {
-	font-size: 16px;
-	border-bottom: 1px solid #444444;
+	font-size: 1rem;
+	border-bottom: 0.0625rem solid #444444;
 	text-align: right;
 	box-sizing: border-box;
-	padding-bottom: 10px;
+	padding-bottom: 0.625rem;
 }
 
 .table,
@@ -71,10 +63,10 @@ p {
 
 .tbody .td,
 .tbody .th {
-	background-color: transparent;
-	border-bottom: 1px solid #444444;
-	border-top: 1px solid #444444;
-	padding: 9px;
+	/* background-color: transparent; */
+	border-bottom: 0.0625rem solid #444444;
+	border-top: 0.0625rem solid #444444;
+	padding: 0.5625rem;
 	box-sizing: border-box;
 }
 
@@ -86,24 +78,24 @@ p {
 .tfoot .td,
 .tfoot .th {
 	font-weight: bold;
-	padding: 4px 8px 6px 9px;
+	padding: 0.25rem 0.5rem 0.375rem 0.5625rem;
 	text-align: center;
 }
 
 .thead .th {
-	font-size: 14px;
+	font-size: 0.875rem;
 	font-weight: bold;
-	line-height: 19px;
-	padding: 0 8px 2px;
+	line-height: 1.1875rem;
+	padding: 0 0.5rem 0.125rem;
 	text-align: center;
 }
 
 .thead .th:nth-of-type(1) {
-	max-width: 50px;
+	max-width: 3.125rem;
 }
 
 .thead .th:nth-of-type(4) {
-	max-width: 180px;
+	max-width: 11.25rem;
 }
 
 /*-----------主体内容 end-----------*/
@@ -112,31 +104,31 @@ p {
 	position: fixed;
 	top: 0px;
 	width: 100%;
-	height: 45px;
-	background-color: #000000;
+	height: 2.8125rem;
 	z-index: 100;
 }
 
 .nav_container {
-	width: 150px;
-	position: relative;
-	margin-left: 8px;
-	line-height: 50px;
+	width: 9.375rem;
+	margin-left: 0.5rem;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	
 }
 
 .nav_return {
-	position: absolute;
-	top: 10px;
-	width: 30px;
-	height: 30px;
-	background: url(../img/left.png);
+	width: 1.45rem;
+	height: 1.45rem;
+	margin-right: 0.375rem;
+}
+.dark-icon-navleft{
+	background: url(../img/left_round.png);
 	background-size: contain;
 }
-
-.nav_text {
-	position: relative;
-	left: 33px;
-	color: #d5d5d6;
+.light-icon-navleft{
+	background: url(../img/left_round_n.png);
+	background-size: contain;
 }
 
 /*-----------顶部nav  end-----------*/
@@ -151,13 +143,11 @@ p {
 	left: 0;
 	width: 100%;
 	height: 2em;
-	padding-right: 10px;
-	padding-left: 10px;
+	padding: 0 0.625rem;
 	border-bottom: 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: #e9dfc7;
 }
 
 .top_left,
@@ -166,6 +156,7 @@ p {
 	height: 100%;
 	display: flex;
 	align-items: center;
+
 }
 
 .top_left {
@@ -182,35 +173,20 @@ p {
 	width: calc(100% - 3.75rem);
 }
 
-.top_back_icon {
-	line-height: 2em;
-	margin-left: -0.5rem;
-	margin-right: -0.125rem;
-	font-size: 14px;
-	width: 1.875rem;
-	height: 1.875rem;
-	background: url(../img/leftNav.png);
-	background-size: contain;
-}
-
 .top_left_icon {
 	line-height: 2em;
 	margin-left: -0.5rem;
-	font-size: 14px;
-	width: 1.275rem;
-	height: 1.275rem;
-	background: url(../img/mulu2.png);
-	background-size: contain;
+	font-size: 0.875rem;
+	width: 1.25rem;
+	height: 1.25rem;
 }
 
 .top_left_text {
-	color: #1f200e;
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 .top_center_text {
-	color: #1f200e;
-	font-size: 16px;
+	font-size: 1rem;
 	display: inline-block;
 	white-space: nowrap;
 	overflow: hidden;
@@ -223,9 +199,7 @@ p {
 	position: fixed;
 	bottom: 0;
 	width: 100%;
-	height: 70px;
-	background-color: #000000;
-	/* opacity: 0.9; */
+	height: 4.375rem;
 	text-align: center;
 	margin: 0 auto;
 	z-index: 9999;
@@ -233,78 +207,74 @@ p {
 
 .btn-mulu,
 .btn_Aa,
-.btn-model,
 .btn-extra {
 	width: 32%;
 	display: inline-block;
-	color: #F8F8F8;
 }
 
 .mulu,
 .Aa,
-.model,
 .extra {
-	width: 32px;
+	width: 2rem;
 	margin: 0 auto;
 	text-align: center;
 	position: relative;
 }
 
-.icon_mulu {
+.bottom-icon {
 	position: absolute;
-	width: 20px;
-	height: 20px;
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+.dark-icon-mulu {
 	background: url(../img/mulu.png);
 	background-size: contain;
 }
 
-.icon-Aa {
-	position: absolute;
-	width: 20px;
-	height: 20px;
+.light-icon-mulu {
+	background: url(../img/mulu_n.png);
+	background-size: contain;
+}
+
+.dark-icon-Aa {
 	background: url(../img/Aa.png);
 	background-size: contain;
 }
 
-.icon-extra {
-	position: absolute;
-	width: 20px;
-	height: 20px;
+.light-icon-Aa {
+	background: url(../img/Aa_n.png);
+	background-size: contain;
+}
+
+.dark-icon-extra {
 	background: url(../img/set.png);
 	background-size: contain;
 }
 
-.icon-extra.act {
-	position: absolute;
-	width: 20px;
-	height: 20px;
+.dark-icon-extra.act {
 	background: url(../img/set_n.png);
 	background-size: contain;
 }
 
-.icon-yejian {
-	position: absolute;
-	width: 20px;
-	height: 20px;
-	background: url(../img/yejian.png);
+.light-icon-extra {
+	background: url(../img/set1.png);
 	background-size: contain;
 }
 
-.icon-rijian {
-	position: absolute;
-	width: 20px;
-	height: 20px;
-	background: url(../img/rijian.png);
+.light-icon-extra.act {
+	background: url(../img/set1_n.png);
 	background-size: contain;
 }
 
+
+
 .text_mulu,
 .text_Aa,
-.text_yejian,
 .text_extra {
 	position: absolute;
-	top: 23px;
-	font-size: 11px;
+	top: 1.375rem;
+	font-size: 0.75rem;
 }
 
 /*-----------底部导航 end-----------*/
@@ -320,8 +290,6 @@ p {
 	bottom: 4.375rem;
 	width: 100%;
 	height: 5.125rem;
-	background-color: #000000;
-	color: #F8F8F8;
 	font-size: 0.9375rem;
 	z-index: 10005;
 	display: flex;
@@ -330,7 +298,6 @@ p {
 	align-items: center;
 }
 
-
 .fontItem {
 	height: 3.125rem;
 	width: 100%;
@@ -353,25 +320,7 @@ p {
 	padding-right: 1.25rem;
 }
 
-.btn_Big,
-.btn_Small {
-	width: 7.625rem;
-	height: 1.5625rem;
-	background: none;
-	border: 0.0625rem #8c8c8c solid;
-	color: #F8F8F8;
-	border-radius: 0.9375rem;
-	line-height: 0.625rem;
-	box-sizing: border-box;
-
-}
-
-.btn_Big {
-	margin-right: 0.625rem;
-}
-
 .bk-item {
-	/* margin-right: 0.625rem; */
 	width: 1.875rem;
 	height: 100%;
 	display: flex;
@@ -405,14 +354,12 @@ p {
 	width: 100%;
 	margin: 0 auto;
 	display: block;
-	/* border: 0.125rem #00A5F6 solid; */
 }
 
 /*-----------图片样式 end----------*/
 /*-----------底部导航的目录栏 start-----------*/
 .muluBox {
 	position: fixed;
-	/* bottom: 70px; */
 	width: 100%;
 	height: 100%;
 	z-index: 99999;
@@ -431,7 +378,6 @@ p {
 .muluCons {
 	width: 100%;
 	height: 80%;
-	background: #e9dfc7;
 	position: absolute;
 	bottom: 0;
 	overflow-y: auto;

BIN
img/Aa.png


BIN
img/Aa2.png


BIN
img/Aa_n.png


BIN
img/left.png


BIN
img/leftNav.png


BIN
img/left_round.png


BIN
img/left_round_n.png


BIN
img/mulu.png


BIN
img/mulu2.png


BIN
img/mulu_n.png


BIN
img/rijian.png


BIN
img/set1.png


BIN
img/set1_n.png


BIN
img/setup.png


BIN
img/setup_n.png


BIN
img/yejian.png