目录功能以及其他功能的完善

bookdetail.html

@@ -73,44 +73,53 @@
 						<div class="text_mulu">目录</div>
 					</div>
 				</div>
+				<div class="btn-model">
+					<div class="model">
+						<div class="icon-yejian" id="icon_model"> </div>
+						<div class="text_yejian">夜间</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-yejian">
-					<div class="yejian">
-						<div class="icon-yejian" id="icon_yejian"> </div>
-						<div class="text_yejian">夜间</div>
+						<div class="text_Aa">设置</div>
 					</div>
 				</div>
 
 				<!--字体功能栏-->
 				<div class="fontPop" id="font_Pop" style="display: none;">
-					<div class="fontSize">
-						<span>字号</span>
-						<button class="btnBig" id="btn_Big">大</button>
-						<button class="btnSmall" id="btn_Small">小</button>
+					<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>
+						</div>
 					</div>
-					<div class="fontBk">
-						<span>背景</span>
-						<div class="bkColor">
-							<div class="bk-container" style="background-color: #f7eee5;">
-								<div id="mb"><span> 米白 </span></div>
+					<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-container" style="background-color: #e9dfc7;">
-								<div id="zz"><span> 纸张 </span></div>
+							<div class="bk-item" id="zz">
+								<div class="bk-container" style="background-color: #e9dfc7;"></div>
+								<span>纸张</span>
 							</div>
-							<div class="bk-container" style="background-color: #a4a4a4;">
-								<div id="qh"><span> 浅灰 </span></div>
+							<div class="bk-item" id="qh">
+								<div class="bk-container" style="background-color: #a4a4a4;"></div>
+								<span>浅灰</span>
 							</div>
-							<div class="bk-container" style="background-color: #cdefce;">
-								<div id="hy"><span> 护眼 </span></div>
+							<div class="bk-item" id="hy">
+								<div class="bk-container" style="background-color: #cdefce;"></div>
+								<span>护眼</span>
 							</div>
-							<div class="bk-container" style="background-color: #283548;">
-								<div id="hl"><span> 海蓝 </span></div>
+							<div class="bk-item" id="hl">
+								<div class="bk-container" style="background-color: #283548;"></div>
+								<span>海蓝</span>
 							</div>
+
 						</div>
 					</div>
 				</div>
@@ -120,10 +129,9 @@
 
 					</div>
 					<div class="muluCons" id="mulu_Cons">
-						<div class="title"
-							style="margin-bottom: 25px;display: flex;justify-content: space-between;align-items: center;">
+						<div class="muluTitle">
 							<div>共<span id="ChapterTotal"></span>章</div>
-							<div>倒叙/正序</div>
+							<!-- <div>倒叙/正序</div> -->
 						</div>
 						<div class="mui-content">
 							<ul id="muluList" class="mui-table-view mui-table-view-chevron">
@@ -155,14 +163,15 @@
 				icon_Aa: $("#icon_Aa"),
 				body: $("body"),
 				win: $(window),
-				icon_yejian: $("#icon_yejian"),
+				icon_model: $("#icon_model"),
 				btn_Big: $("#btn_Big"),
 				btn_Small: $("#btn_Small"),
 				icon_mulu: $("#icon_mulu"),
 				mulu_Box: $("#mulu_Box"),
 				mulu_Mask: $("mulu_Mask"),
 				mulu_Cons: $("#mulu_Cons"),
-				muluList: $("#muluList")
+				muluList: $("#muluList"),
+				bkList: $("#bk-list")
 			}
 			//数据层的初始化
 			var RootContainer = $('.Content');
@@ -180,6 +189,7 @@
 				readerUIFrame(data);
 				ChapterList = mulu;
 				readerMuluFrame(mulu);
+				$("#ChapterTitle").text(data.t);
 			});
 			//业务事件的初始化
 			EventHandler();
@@ -263,14 +273,14 @@
 						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-id="${jsonObj.chapter_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
+								`<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-id="${jsonObj.children[k].chapter_id}" href="#">
+								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-id="${jsonObj.chapter_id}" href="#">${jsonObj.title}
+							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>`;
 						}
 					}
@@ -303,13 +313,13 @@
 						for (let i = 0; i < list.length - 1; i++) {
 							if (!isFinite(Chapter_id) && list[i].type !== 'file') {
 								Chapter_id = list[i].chapter_id;
-								File_id = list[i].file_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
+									File_id = list[i].children[0].file_id;
 								}
 							}
 						}
@@ -318,16 +328,39 @@
 				};
 
 				var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
-					$.get('data/data' + Chapter_id + '.json', function(data) {
-						//todo 获取详细信息之后的回调
-						if (data.result == 0) {
-							// var url=data.jsonp;
-							// Util.getJsonp(url,function(data){
-							callback && callback(data);
-							$("#ChapterTitle").text(data.t);
-							// });//通过url来获取加密信息，并解密
-						}
-					}, 'json');
+					// $.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.t);
+					// 		// });//通过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() { //上一页
@@ -338,28 +371,15 @@
 					Chapter_id -= 1;
 					//调用方法获取 Chapter_id章节信息
 					getCurChaptInfo(Chapter_id, function(data) {
+						// console.log(data, 'data')
 						readerUIFrame(data); //渲染html数据
 					});
 					Util.StorageSetter("ChapterId", Chapter_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
-								break;
-							}
-						} else {
-							if (Chapter_id === item.chapter_id) {
-								File_id = item.file_id
-								break;
-							}
-						}
-					}
-					Util.StorageSetter("FileId", File_id);
+					updateFileId()
 				};
-				var nextChapter = function() { //下一页
 
+				var nextChapter = function() { //下一页
 					Chapter_id = parseInt(Chapter_id);
 					if (Chapter_id == ChapterTotal) {
 						return;
@@ -372,37 +392,41 @@
 					});
 					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);
+				};
+
+				var updateFileId = function() { //更新目录一级 file_id
 					for (let item of ChapterList) {
-						console.log(item, 'item', Chapter_id)
 						if (item.type === 'file') {
 							let obj = item.children.find(child => child.chapter_id == Chapter_id)
 							if (obj) {
-								File_id = obj.file_id
+								File_id = obj.file_id;
+								$("#ChapterTitle").text(obj.title);
 								break;
 							}
 						} else {
 							if (Chapter_id === item.chapter_id) {
-								File_id = item.file_id
+								File_id = item.file_id;
+								$("#ChapterTitle").text(item.title);
 								break;
 							}
+							Util.StorageSetter("FileId", File_id);
 						}
 					}
-					Util.StorageSetter("FileId", File_id);
-				};
-				var jumpChapter = function() { //跳页
-					Chapter_id = parseInt(Chapter_id);
-					if (Chapter_id == 0) {
-						return;
-					}
-					Chapter_id -= 1;
-					//调用方法获取 Chapter_id章节信息
-					getJumpChapterInfo(Chapter_id, function(data) {
-						//console.log(data);
-						readerUIFrame(data); //渲染html数据
-					});
-					Unit.StorageSetter("ChapterId", Chapter_id);
-					
-				};
+				}
 
 
 				return {
@@ -417,18 +441,20 @@
 				//点击主体中间事件
 				$("#action_mid").click(function() {
 					if (Dom.nav_top.css('display') == "none") {
-						Dom.nav_top.show();
-						Dom.nav_bottom.show();
+						// Dom.nav_top.show();
+						// Dom.nav_bottom.show();
+						actExtraDialog(true)
 					} else {
-						Dom.nav_top.hide();
-						Dom.nav_bottom.hide();
-						Dom.font_Pop.hide();
-						Dom.icon_Aa.css('border', '');
-						Dom.icon_yejian.css('border', '');
-						Dom.mulu_Box.hide();
-						Dom.mulu_Mask.hide();
-						Dom.mulu_Cons.hide();
-						Dom.icon_mulu.css('border', '');
+						actAllDialog(false)
+						// Dom.nav_top.hide();
+						// Dom.nav_bottom.hide();
+						// Dom.font_Pop.hide();
+						// Dom.icon_Aa.css('border', '');
+						// Dom.icon_model.css('border', '');
+						// Dom.mulu_Box.hide();
+						// Dom.mulu_Mask.hide();
+						// Dom.mulu_Cons.hide();
+						// Dom.icon_mulu.css('border', '');
 					}
 				});
 				//点击返回事件
@@ -441,7 +467,7 @@
 				//点击目录事件
 				$(".icon_mulu").click(function() {
 					if (Dom.mulu_Box.css('display') == 'none') {
-						Dom.icon_mulu.css('border', '1px solid #FF7800');
+						// Dom.icon_mulu.css('border', '1px solid #FF7800');
 						Dom.mulu_Box.show();
 						Dom.nav_top.hide();
 						Dom.mulu_Mask.show();
@@ -450,28 +476,52 @@
 						$('#ChapterTotal').text(ChapterTotal)
 						//给当前选中章节高亮
 						let optDom = $(".parentLi")[File_id];
-						$(optDom).addClass("mui-active")
+						$(optDom).addClass("mui-active");
 						$($(optDom).find("a")).each((i, aNode) => {
-							if ($(aNode).data('id') == Chapter_id) {
+							if ($(aNode).data('cid') == Chapter_id) {
 								$(aNode).addClass("highChapter")
 							} else {
 								$(aNode).removeClass("highChapter")
 							}
 						})
 					} else {
-						Dom.icon_mulu.css('border', '');
-						Dom.mulu_Box.hide();
-						Dom.mulu_Mask.hide();
-						Dom.mulu_Cons.hide();
-						muludDelActive();
+						// Dom.icon_mulu.css('border', '');
+						// Dom.mulu_Box.hide();
+						// Dom.mulu_Mask.hide();
+						// Dom.mulu_Cons.hide();
+						muluUpdateActive();
+						actMuluDialog(false);
 					}
 					Dom.icon_Aa.css('border', '');
 					Dom.font_Pop.hide();
 				});
+				//点击目录列表进行指定跳转
+				Dom.muluList.on("click", function(e) {
+					let cid = $(e.target).data('cid');
+					if (!cid) {
+						return
+					}
+					Chapter_id = cid;
+					File_id = $(e.target).data('fid');
+					$("#ChapterTitle").text(e.target.text);
+					muluUpdateActive();
+					readerm.jumpChapter();
+					actAllDialog(false)
+				})
+				 // 点击弹窗内容以外的地方关闭弹窗
+				$("#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.icon_Aa.css('border', '1px solid #FF7800');
+						// Dom.icon_Aa.css('border', '1px solid #FF7800');
 						Dom.font_Pop.show();
 					} else {
 						Dom.icon_Aa.css('border', '');
@@ -482,39 +532,18 @@
 					Dom.mulu_Mask.hide();
 					Dom.mulu_Cons.hide();
 				});
-				//点击夜间事件
-				$(".btn-yejian").click(function() {
-					if (Dom.body.css('background-color') != "rgb(40, 53, 72)") {
-						bkCurrColor = '#283548';
-						//$(".bkColor").find('.bk-container-current')[0].className='';
-						Dom.body.css('background-color', bkCurrColor);
-						Dom.icon_yejian.css('border', '1px #FF7800 solid');
-						$("#hl").addClass('bk-container-current');
-
-					} else {
-						bkCurrColor = '#e9dfc7';
-						Dom.body.css('background-color', bkCurrColor);
-						Dom.icon_yejian.css('border', '');
-						$("#hl").removeClass('bk-container-current');
-						$("#mb").addClass('bk-container-current');
-					}
-					Util.StorageSetter("bkgroundcolor", bkCurrColor);
-
-				});
-
 				//滚动条事件
 				Dom.win.scroll(function() {
-					Dom.nav_top.hide();
-					Dom.nav_bottom.hide();
-					Dom.font_Pop.hide();
-					Dom.mulu_Box.hide();
-					Dom.mulu_Mask.hide();
-					Dom.mulu_Cons.hide();
-					Dom.icon_Aa.css('border', '');
-					Dom.icon_yejian.css('border', '');
-					Dom.icon_mulu.css('border', '');
-
-
+					actAllDialog(false)
+					// Dom.nav_top.hide();
+					// Dom.nav_bottom.hide();
+					// Dom.font_Pop.hide();
+					// Dom.mulu_Box.hide();
+					// Dom.mulu_Mask.hide();
+					// Dom.mulu_Cons.hide();
+					// Dom.icon_Aa.css('border', '');
+					// Dom.icon_model.css('border', '');
+					// Dom.icon_mulu.css('border', '');
 				})
 				//点击 大、小事件
 				Dom.btn_Big.click(function() {
@@ -522,7 +551,6 @@
 						return;
 					}
 					InitFontSize += 1;
-					console.log(InitFontSize);
 					$("p").css('font-size', InitFontSize);
 					Util.StorageSetter("font_size", InitFontSize);
 				});
@@ -531,41 +559,66 @@
 						return;
 					}
 					InitFontSize -= 1;
-					console.log(InitFontSize);
 					$("p").css('font-size', InitFontSize);
 					Util.StorageSetter("font_size", InitFontSize);
 				});
-				//点击背景颜色切换
-				$(".bk-container").bind('click', function() {
-					if ($(".bkColor").find('.bk-container-current').length > 0) {
-						$(".bkColor").find('.bk-container-current')[0].className = '';
+				//点击夜间&日间 切换模式
+				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"))
+					}
 
+				});
+
+				//点击背景颜色切换
+				Dom.bkList.on("click", function(e) {
+					if (!$(e.target).hasClass("bk-container")) {
+						return
 					}
-					var id = this.firstElementChild.id;
-					$("#" + id).addClass('bk-container-current');
-
-					switch (id) {
-						case 'mb':
-							Dom.body.css('background-color', '#f7eee5');
-							break;
-						case 'zz':
-							Dom.body.css('background-color', '#e9dfc7');
-							break;
-						case 'qh':
-							Dom.body.css('background-color', '#a4a4a4');
-							break;
-						case 'hy':
-							Dom.body.css('background-color', '#cdefce');
-							break;
-						case 'hl':
-							Dom.body.css('background-color', '#283548');
-							break;
-						default:
-							break;
+					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);
+					//更新日夜模式	
+					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("夜间");
+						}
 					}
-					Util.StorageSetter("bkgroundcolor", Dom.body.css('background-color'));
-				});
+					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() {
 					readerm.prveChapter();
@@ -575,15 +628,79 @@
 					readerm.nextChapter();
 				});
 			}
+			//整体弹窗 展示控制
+			function actAllDialog(flag) {
+				actLightDialog(flag);
+				actFontDialog(flag);
+				actMuluDialog(flag);
+				actExtraDialog(flag);
+
+			}
+
+			//光亮设置 展示控制
+			function actLightDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+				Dom.icon_model.css('border', '');
+
+			}
+			//字体设置 展示控制
+			function actFontDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+				Dom.font_Pop.hide();
+				Dom.icon_Aa.css('border', '');
+
+			}
+			//目录设置 展示控制
+			function actMuluDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+				Dom.mulu_Box.hide();
+				Dom.mulu_Mask.hide();
+				Dom.mulu_Cons.hide();
+				Dom.icon_mulu.css('border', '');
+
+			}
+
+			//其他设置 展示控制
+			function actExtraDialog(flag) {
+				//展示
+				if (flag) {
+					Dom.nav_top.show();
+					Dom.nav_bottom.show();
+					return
+				}
+				//隐藏
+				Dom.nav_top.hide();
+				Dom.nav_bottom.hide();
 
-			function muludDelActive() {
-				$(".parentLi").each((i, liNode) => {
-					console.log(liNode, 'li')
-					$(liNode).removeClass("mui-active")
-					$($(liNode).find("a")).each((k, aNode) => {
-						console.log(aNode, 'aNode', )
-						$(aNode).removeClass("highChapter")
+			}
+			//给当前选中章节高亮，去掉其他
+			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")
+						}
 					})
+
 				})
 
 			}

css/main.css

@@ -121,7 +121,7 @@ p {
 
 .btn-mulu,
 .btn_Aa,
-.btn-yejian {
+.btn-model {
 	width: 32%;
 	display: inline-block;
 	color: #F8F8F8;
@@ -129,7 +129,7 @@ p {
 
 .mulu,
 .Aa,
-.yejian {
+.model {
 	width: 32px;
 	margin: 0 auto;
 	text-align: center;
@@ -160,6 +160,14 @@ p {
 	background-size: contain;
 }
 
+.icon-rijian {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	background: url(../img/rijian.png);
+	background-size: contain;
+}
+
 .text_mulu,
 .text_Aa,
 .text_yejian {
@@ -172,81 +180,93 @@ p {
 /*-----------字体功能栏-----------*/
 .fontPop {
 	position: fixed;
-	bottom: 70px;
+	bottom: 4.375rem;
 	width: 100%;
-	height: 130px;
+	height: 8.125rem;
 	background-color: #000000;
-
 	color: #F8F8F8;
-	font-size: 15px;
+	font-size: 0.9375rem;
 	z-index: 10005;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
 }
 
-.fontSize,
-.fontBk {
-	position: relative;
-	height: 55px;
-	line-height: 55px;
 
+.fontItem {
+	height: 3.125rem;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.fontItemTitle {
+	width: 6.625rem;
+	text-align: center;
 }
 
-.btnBig,
-.btnSmall {
-	width: 90px;
-	height: 25px;
-	margin: 0 15px;
+.fontItemCons {
+	width: calc(100% - 6.625rem);
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-right: 1.25rem;
+}
+
+.btn_Big,
+.btn_Small {
+	width: 7.625rem;
+	height: 1.5625rem;
 	background: none;
-	border: 1px #8c8c8c solid;
+	border: 0.0625rem #8c8c8c solid;
 	color: #F8F8F8;
-	border-radius: 15px;
-	z-index: 10006;
+	border-radius: 0.9375rem;
+	line-height: 0.625rem;
+	box-sizing: border-box;
+
 }
 
-.bkColor {
-	position: relative;
-	display: inline-block;
-	margin: 0 20px;
-	top: 8px;
+.btn_Big {
+	margin-right: 0.625rem;
+}
+.bk-item{
+	/* margin-right: 0.625rem; */
+	width: 1.875rem;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	font-size: 0.75rem;
 }
 
 .bk-container {
-	display: inline-block;
-	margin: 0 5px;
 	background-size: contain;
-	width: 25px;
-	height: 25px;
-	border: 1px #8C8C8C solid;
-	border-radius: 15px;
+	width: 1.5625rem;
+	height: 1.5625rem;
+	border: 0.0625rem #8C8C8C solid;
+	border-radius: 0.9375rem;
+	box-sizing: border-box;
 }
 
 .bk-container-current {
-	position: relative;
-	top: -3px;
-	left: -2px;
-	width: 25px;
-	height: 25px;
-	border: 2px #00A5F6 solid;
-	border-radius: 15px;
-	z-index: 10000;
-}
-
-.bk-container span {
-	display: none;
-	position: absolute;
-	top: 15px;
-	font-size: 12px;
+	border: 0.125rem #00A5F6 solid;
 }
 
 /*-----------字体功能栏   end-----------*/
-.index-img{
+.index-img {
 	width: 100%;
-	height:100%;
+	height: 100%;
 }
+
 /*-----------图片样式 start----------*/
 .my-img {
 	width: 100%;
 	margin: 0 auto;
-	border: 2px #00A5F6 solid;
+	border: 0.125rem #00A5F6 solid;
 }
 
 /*-----------图片样式 end----------*/
@@ -275,8 +295,17 @@ p {
 	background: #e9dfc7;
 	position: absolute;
 	bottom: 0;
+    overflow-y: auto;
 }
-.list-li-a{
+.muluTitle{
+	height:1.875rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding:0 0.9375rem;
+}
+
+.list-li-a {
 	text-align: left;
 }