Home Explore Help
Sign In
zhangm
/
ElectronicReader
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

适配调整，设置触发点修改

duxh 2 years ago
parent
54c7033ce6
commit
cbe995a6b2
11 changed files with 234 additions and 50 deletions
Split View Show Diff Stats
  1. 50 17
      bookdetail.html
  2. 158 23
      css/main.css
  3. 1 0
      data/data33.json
  4. 1 0
      data/data34.json
  5. 5 0
      data/data35.json
  6. 1 0
      data/data37.json
  7. 2 0
      data/data38.json
  8. 13 10
      data/data39.json
  9. 1 0
      data/data41.json
  10. 1 0
      data/data42.json
  11. 1 0
      data/data43.json

+ 50 - 17
bookdetail.html
View File 

@@ -33,9 +33,9 @@
 
 	<body>
 
 		<div>
 
 			<!-- 中间点击层 -->
 
-			<div class="m-artical-action">
 
+			<!-- <div class="m-artical-action">
 
 				<div class="m-artical-action-mid" id="action_mid"></div>
 
-			</div>
 
+			</div> -->
 
 			<!-- 顶部导航 -->
 
 			<div class="nav-top colorStyle bgStyle" id="nav_top" style="display: none;">
 
 				<div class="nav_container">
 
@@ -54,13 +54,15 @@
 
 				</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 id="upperElement" style="height: 100vh;width: 100vw;">
 
+				<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>
 
 			<!-- 底部导航栏 -->
 
@@ -248,14 +250,14 @@
 
 						}
 
 					}
 
 					// 封面-0，扉页-1 不需要展示章节名称
 
-					if(!['0','1'].includes(Chapter_id+'')){
 
+					if (!['0', '1'].includes(Chapter_id + '')) {
 
 						html += `<br/><br/><br/>`;
 
 						if (jsonObj.ct && jsonObj.ct !== jsonObj.t) {
 
 							html += `<h3 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.ct}</h3><br/>`;
 
 						}
 
 						html += `<h4 style=font-size:${fontSizeAdd6};color:${fontColor}">${jsonObj.t}</h4>`;
 
 					}
 
-				    //正文内容
 
+					//正文内容
 
 					for (let i = 0; i < jsonObj.p.length; i++) {
 
 						if (Chapter_id == 0) {
 
 							html += "<div>" + jsonObj.p[i] + "</div>";
 
@@ -271,10 +273,10 @@
 
 									`<div style="margin-bottom:1.25rem;">${jsonObj.p[i]}</div>`;
 
 							} else if (/^&tableTemp.*/.test(jsonObj.p[i])) {
 
 								let tableTemp = jsonObj.p[i].split("-")[1];
 
-								if(!tableTemp){
 
+								if (!tableTemp) {
 
 									continue;
 
 								}
 
-								if(!jsonObj[tableTemp]){
 
+								if (!jsonObj[tableTemp]) {
 
 									continue;
 
 								}
 
 								let tableObj = jsonObj[tableTemp];
 
@@ -543,13 +545,44 @@
 
 
 			function EventHandler() { //业务事件处理层
 
 				//点击主体中间事件
 
-				$("#action_mid").click(function() {
 
-					if (Dom.nav_top.css('display') == "none") {
 
-						actNavDialog(true)
 
+				// $("#action_mid").click(function() {
 
+				// 	if (Dom.nav_top.css('display') == "none") {
 
+				// 		actNavDialog(true)
 
+				// 	} else {
 
+				// 		actAllDialog(false)
 
+				// 	}
 
+				// });
 
+
 
+				//=============
 
+				let upperElement = document.getElementById('upperElement')
 
+				upperElement.addEventListener('click', function(event) {
 
+					var target = event.target;
 
+					if (['btn_next', 'btn_prev'].includes(target.id)) {
 
+
 
 					} else {
 
-						actAllDialog(false)
 
+						if (Dom.nav_top.css('display') == "none") {
 
+							actNavDialog(true)
 
+						} else {
 
+							actAllDialog(false)
 
+						}
 
 					}
 
+
 
+					// 判断事件触发的源元素是上层元素还是下层元素
 
+					// if (target.id === 'lowerElement') {
 
+					//   // 如果是下层元素，则触发下层元素的事件
 
+					//   console.log('下层元素的事件被触发');
 
+					//   // 实现下层元素的事件处理逻辑
 
+					// } else {
 
+					//   // 如果是上层元素，则触发上层元素的事件
 
+					//   console.log('上层元素的事件被触发');
 
+					//   // 实现上层元素的事件处理逻辑
 
+					// }
 
 				});
 
+
 
+
 
+
 
+
 
+				//=============
 
 				//点击返回事件
 
 				$(".nav_back_book").click(function() {
 
 					Chapter_id = parseInt(Chapter_id);

+ 158 - 23
css/main.css
View File 

@@ -1,7 +1,7 @@
 
 /*-----------主体内容-----------*/
 
 
 .container {
 
-	padding: 2em 1em 1.5em;
 
+	padding: 2rem 1rem 1.5rem;
 
 }
 
 
 .Content h3 {
 
@@ -39,12 +39,13 @@ p {
 
 .page_btn {
 
 	width: 80%;
 
 	margin: 0 auto;
 
-	padding-top: 1em;
 
-	padding-bottom: 3em;
 
+	padding-top: 1rem;
 
+	/* padding-bottom: 3em; */
 
 	position: relative;
 
 	z-index: 9999;
 
 }
 
 
+
 
 .btn-prev,
 
 .btn-next {
 
 	width: 49%;
 
@@ -65,6 +66,135 @@ p {
 
 	text-align: center;
 
 }
 
 
+@media screen and (max-width:767px) {
 
+	.table {
 
+		width: 100% !important
 
+	}
 
+
 
+	.table.table38_1 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table.table38_2 {
 
+		width: 60% !important
 
+	}
 
+
 
+	.table.table39_1 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table.table41_1 {
 
+		width: 80% !important
 
+	}
 
+
 
+	.table.table42_1 {
 
+		width: 70% !important
 
+	}
 
+}
 
+
 
+@media screen and (min-width:768px) and (max-width:959px) {
 
+	.table33_1 {
 
+		width: 60% !important
 
+	}
 
+
 
+	.table34_1 {
 
+		width: 65% !important
 
+	}
 
+
 
+	.table35_1 {
 
+		width: 100% !important
 
+	}
 
+
 
+	.table35_2 {
 
+		width: 85% !important
 
+	}
 
+
 
+	.table35_3 {
 
+		width: 75% !important
 
+	}
 
+
 
+	.table35_4 {
 
+		width: 85% !important
 
+	}
 
+
 
+	.table38_1 {
 
+		width: 45% !important
 
+	}
 
+
 
+	.table38_2 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table39_1 {
 
+		width: 45% !important
 
+	}
 
+
 
+	.table39_2 {
 
+		width: 90% !important
 
+	}
 
+
 
+	.table42_1 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table43_1 {
 
+		width: 98% !important
 
+	}
 
+}
 
+
 
+@media screen and (min-width:960px) and (max-width:1199px) {
 
+	.table33_1 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table34_1 {
 
+		width: 50% !important
 
+	}
 
+
 
+	.table35_1 {
 
+		width: 92% !important
 
+	}
 
+
 
+	.table35_2 {
 
+		width: 70% !important
 
+	}
 
+
 
+	.table35_3 {
 
+		width: 65% !important
 
+	}
 
+
 
+	.table35_4 {
 
+		width: 70% !important
 
+	}
 
+
 
+	.table38_2 {
 
+		width: 42% !important
 
+	}
 
+
 
+	.table39_2 {
 
+		width: 80% !important
 
+	}
 
+
 
+	.table42_1 {
 
+		width: 45% !important
 
+	}
 
+}
 
+
 
+@media screen and (min-width:1200px) {
 
+	.table33_1 {
 
+		width: 40% !important
 
+	}
 
+
 
+	.table38_1 {
 
+		width: 25% !important
 
+	}
 
+
 
+	.table39_1 {
 
+		width: 25% !important
 
+	}
 
+
 
+}
 
+
 
 .td,
 
 .th {
 
 	margin: 0;
 
@@ -73,7 +203,8 @@ p {
 
 	text-align: center;
 
 }
 
 
-.caption, .secCaption {
 
+.caption,
 
+.secCaption {
 
 	font-size: 1.25rem;
 
 	border-bottom: none;
 
 	box-sizing: border-box;
 
@@ -81,7 +212,7 @@ p {
 
 	font-weight: bold;
 
 }
 
 
-.caption{
 
+.caption {
 
 	text-align: center;
 
 }
 
 
@@ -98,6 +229,7 @@ p {
 
 	box-sizing: border-box;
 
 	padding: 0.8rem 0.5rem;
 
 	line-height: 1.875rem;
 
+	word-wrap: break-word;
 
 }
 
 
 .table th {
 
@@ -168,7 +300,7 @@ p {
 
 }
 
 
 /* 规则制度table 特殊样式*/
 
-.rule.table td{
 
+.rule.table td {
 
 	border-left: 0;
 
 	border-right: 0;
 
 }
 
@@ -193,7 +325,7 @@ p {
 
 	text-align: left;
 
 }
 
 
-.rule .caption{
 
+.rule .caption {
 
 	border-bottom: 0.0625rem solid #444444;
 
 	text-align: right;
 
 }
 
@@ -204,23 +336,23 @@ p {
 
 	position: fixed;
 
 	top: 0px;
 
 	width: 100%;
 
-	height: 2.8125rem;
 
+	height: 4em;
 
 	z-index: 100;
 
 }
 
 
 .nav_container {
 
 	width: 9.375rem;
 
-	margin-left: 0.5rem;
 
+	margin-left: 0.3rem;
 
 	height: 100%;
 
 	display: flex;
 
 	align-items: center;
 
-
 
+	font-size: 1.5rem;
 
 }
 
 
 .nav_return {
 
-	width: 1.45rem;
 
-	height: 1.45rem;
 
-	margin-right: 0.375rem;
 
+	width: 1.8rem;
 
+	height: 1.8rem;
 
+	margin-right: 0.175rem;
 
 }
 
 
 .dark-icon-navleft {
 
@@ -244,7 +376,7 @@ p {
 
 	right: 0;
 
 	left: 0;
 
 	width: 100%;
 
-	height: 2em;
 
+	height: 4em;
 
 	padding: 0 0.625rem;
 
 	border-bottom: 0;
 
 	display: flex;
 
@@ -263,32 +395,32 @@ p {
 
 
 .top_left {
 
 	justify-content: flex-start;
 
-	width: 3.75rem;
 
+	width: 4.5rem;
 
 }
 
 
 .top_right {
 
 	justify-content: flex-end;
 
+	width: 4.5rem;
 
 }
 
 
 .top_center {
 
 	justify-content: center;
 
-	width: calc(100% - 3.75rem);
 
+	width: calc(100% - 4.5rem * 2);
 
 }
 
 
 .top_left_icon {
 
-	line-height: 2em;
 
 	margin-left: -0.5rem;
 
-	font-size: 0.875rem;
 
-	width: 1.25rem;
 
-	height: 1.25rem;
 
+	font-size: 0.975rem;
 
+	width: 1.8rem;
 
+	height: 1.8rem;
 
 }
 
 
 .top_left_text {
 
-	font-size: 1rem;
 
+	font-size: 1.5rem;
 
 }
 
 
 .top_center_text {
 
-	font-size: 1rem;
 
+	font-size: 1.5rem;
 
 	display: inline-block;
 
 	white-space: nowrap;
 
 	overflow: hidden;
 
@@ -457,6 +589,7 @@ p {
 
 	margin: 0 auto;
 
 	display: block;
 
 }
 
+
 
 .fy-div {
 
 	width: 100%;
 
 	height: 70vh;
 
@@ -464,13 +597,15 @@ p {
 
 	display: flex;
 
 	justify-content: center;
 
 	align-items: center;
 
-	
+
 
 }
 
+
 
 .fy-img {
 
 	width: 28.75rem;
 
 	height: 9.8125rem;
 
 	display: block;
 
 }
 
+
 
 /*-----------图片样式 end----------*/
 
 /*-----------底部导航的目录栏 start-----------*/
 
 .muluBox {

+ 1 - 0
data/data33.json
View File 

@@ -145,6 +145,7 @@
 
 	"introduction": [],
 
 	"table1": {
 
 		"tableTitle": "",
 
+		"className":"table33_1",
 
 		"style": "width:35%",
 
 		"tableHead": [{
 
 			"th": [

+ 1 - 0
data/data34.json
View File 

@@ -126,6 +126,7 @@
 
 	"table1": {
 
 		"tableTitle": "石油公司2022年经营情况表",
 
 		"cTitle": "单位：亿元",
 
+		"className":"table34_1",
 
 		"style": "width:40%",
 
 		"tableHead": [{
 
 			"th": [

+ 5 - 0
data/data35.json
View File 

@@ -161,6 +161,8 @@
 
 	"table1": {
 
 		"tableTitle": "物流公司运输能力汇总",
 
 		"cTitle": "",
 
+		"className": "table35_1",
 
+		"style": "width:50%",
 
 		"tableHead": [{
 
 			"th": [
 
 				["时间", "|", "运力"],
 
@@ -218,6 +220,7 @@
 
 	"table2": {
 
 		"tableTitle": "物流公司业务情况汇总",
 
 		"cTitle": "",
 
+		"className":"table35_2",
 
 		"style": "width:50%",
 
 		"tableHead": [{
 
 				"th": [
 
@@ -288,6 +291,7 @@
 
 	"table3": {
 
 		"tableTitle": "物流公司2022年经营情况表",
 
 		"cTitle": "单位：万元",
 
+		"className":"table35_3",
 
 		"style": "width:55%",
 
 		"tableHead": [{
 
 			"th": [
 
@@ -364,6 +368,7 @@
 
 	"table4": {
 
 		"tableTitle": "物流公司人员构成",
 
 		"cTitle": "",
 
+		"className":"table35_4",
 
 		"style": "width:65%",
 
 		"tableHead": [{
 
 			"th": [

+ 1 - 0
data/data37.json
View File 

@@ -118,6 +118,7 @@
 
 	"introduction": [],
 
 	"table1": {
 
 		"tableTitle": "国际控股公司人员构成表",
 
+		"className": "table37_1",
 
 		"style": "width:60%",
 
 		"tableHead": [{
 
 			"th": [

+ 2 - 0
data/data38.json
View File 

@@ -107,6 +107,7 @@
 
 	"table1": {
 
 		"tableTitle": "通航公司2022年经营情况表",
 
 		"cTitle": "单位：万元",
 
+		"className": "table38_1",
 
 		"style": "width:30%",
 
 		"tableHead": [{
 
 			"th": [
 
@@ -157,6 +158,7 @@
 
 	"table2": {
 
 		"tableTitle": "通航公司人员构成表",
 
 		"cTitle": "",
 
+		"className": "table38_2",
 
 		"style": "width:35%",
 
 		"tableHead": [{
 
 			"th": [

+ 13 - 10
data/data39.json
View File 

@@ -94,8 +94,9 @@
 
 	"introduction": [],
 
 	"table1": {
 
 		"tableTitle": "财务公司2022年经营情况表",
 
-		"cTitle":"",
 
-		"style":"width:30%",
 
+		"cTitle": "",
 
+		"className": "table39_1",
 
+		"style": "width:30%",
 
 		"tableHead": [{
 
 			"th": [
 
 				"项目",
 
@@ -111,7 +112,7 @@
 
 					"资产总额",
 
 					"111.70亿元"
 
 				]
 
-	
+
 
 			},
 
 			{
 
 				"td": [
 
@@ -121,28 +122,28 @@
 
 			},
 
 			{
 
 				"td": [
 
-	
+
 
 					"所有者权益",
 
 					"15.26亿元"
 
 				]
 
 			},
 
 			{
 
 				"td": [
 
-	
+
 
 					"营业收入",
 
 					"1.81亿元"
 
 				]
 
 			},
 
 			{
 
 				"td": [
 
-	
+
 
 					"利润总额",
 
 					"9 552万元"
 
 				]
 
 			},
 
 			{
 
 				"td": [
 
-	
+
 
 					"净利润",
 
 					"7 428万元"
 
 				]
 
@@ -151,10 +152,12 @@
 
 	},
 
 	"table2": {
 
 		"tableTitle": "",
 
-		"cTitle":"",
 
+		"cTitle": "",
 
+		"className": "table39_2",
 
+		"style": "width:70%",
 
 		"tableHead": [{
 
 			"th": [
 
-				["年龄","|","全日制学历"],
 
+				["年龄", "|", "全日制学历"],
 
 				"大学本科<br/>及以下",
 
 				"硕士研究生",
 
 				"初级职称",
 
@@ -179,7 +182,7 @@
 
 					"4人",
 
 					"0人"
 
 				]
 
-	
+
 
 			},
 
 			{
 
 				"td": [

+ 1 - 0
data/data41.json
View File 

@@ -127,6 +127,7 @@
 
 	"table1": {
 
 		"tableTitle": "石化管道公司2022年度经营情况表",
 
 		"cTitle":"",
 
+		"className": "table41_1",
 
 		"tableHead": [{
 
 			"th": [
 
 				["项目","|","数额"],

+ 1 - 0
data/data42.json
View File 

@@ -114,6 +114,7 @@
 
 	"table1": {
 
 		"tableTitle": "2022年承远公司经营数据汇总",
 
 		"cTitle": "单位：万元",
 
+		"className": "table42_1",
 
 		"style": "width:35%",
 
 		"tableHead": [{
 
 			"th": [

+ 1 - 0
data/data43.json
View File 

@@ -82,6 +82,7 @@
 
 	"table1": {
 
 		"tableTitle": "",
 
 		"cTitle": "",
 
+		"className": "table43_1",
 
 		"style": "width:85%",
 
 		"tableHead": [{
 
 			"th": [