提交

src/css/staticInfo.less

@@ -528,11 +528,11 @@
 	margin-left:79px;
 	margin-top:35px;
 	.cgs_top{
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
+		width:100%;
+		margin:0 auto;
+		text-align:center;
 		.l_content{
-			
+			display:inline-block;
 			height: 85px;
 		}
 		.d_inpt{
@@ -542,7 +542,7 @@
 		}
 		.yz{
 			position: absolute;
-			top:50px;
+			top:35px;
 			left:14px;
 			width: 150px;
 		}
@@ -575,24 +575,32 @@
 			color: #F45454 !important;
 		}
 		.r_content{
+			display:inline-block;
 			margin-left: 200px;
 			position: relative;
 			height: 85px;
 		}
+		.clearfix:after {
+		  content: "";
+		  display: block;
+		  height: 0;
+		  overflow: hidden;
+		  clear: both;
+		}
 		.c_end{
 			width: 100%;
-			display: flex;
-			justify-content: flex-end;
 			.c_btn{
+				float:right;
+				display:inline-block;
 				cursor: pointer;
 				width: 94px;
 				height: 34px;
 				background: #FFFFFF;
 				border-radius: 8px;
 				border: 1px solid #2A9BD5;
-				display: flex;
-				align-items: center;
-				justify-content: center;
+				text-align:center;
+				line-height:34px;
+				// box-sizing:border-box;
 				color: #2A9BD5;
 			}
 		}
@@ -606,6 +614,8 @@
 				width: 30%;
 				margin-top: 20px;
 				margin-bottom: 20px;
+				padding-top: 20px;
+				padding-bottom: 20px;
 				word-break: break-word;
 			}
 			.m_auto{
@@ -645,11 +655,14 @@
 				width: 100%;
 				display: flex;
 				justify-content: center;
-				margin-left: 0px;
+				margin-left: 0px ;
 			}
 			.yz{
 				left:0px;
 			}
 		}
 	}
+	.computedgs .cgs_top .r_content{
+		margin-left: 0px !important;
+	}
 }

src/js/staticInfo.js

@@ -122,16 +122,13 @@ function renderContent(list, contentWrapClassName) {
 }
 //计算公式写死
 function renderCalculate(){
-
-	let gongGao='';
-	let pregnant='';
 	let str;
 	str=`<div class='computedgs'>
 			<div class='cgs_top'>
 				<div class='l_content'>
 					<label class='gs_x'>*</label><label class="gs_wz gs_wzs">宫高</label>
 					<div class='d_inpt'>
-						<input type="text" name="username" placeholder="请输入" class="gs_ipt" id='ipt1' maxlength='5'>
+						<input type="text"  name="username" placeholder="请输入" class="gs_ipt" autocomplete="off"  id='ipt1'  maxlength='5'>
 						<label class='yz l_yz' style="color:red;display:none;">格式错误，请输入数字</label>
 					</div>
 					<label class="gs_wz  gs_wzl">cm</label>
@@ -140,12 +137,12 @@ function renderCalculate(){
 				<div class='r_content'>
 					<label class='gs_x'>*</label><label class="gs_wz gs_wzs">孕月</label>
 					<div class='d_inpt'>
-						<input type="text" name="username" placeholder="请输入" class="gs_ipt" id='ipt2' maxlength='3'>
+						<input type="text" name="username" placeholder="请输入" class="gs_ipt" id='ipt2' autocomplete="off" maxlength='3'>
 						<label class='yz r_yz' style="color:red;display:none;">格式错误，请输入数字</label>
 					</div>
 					<label class="gs_wz  gs_wzl">月</label>
 				</div>
-				<div class='c_end'>
+				<div class='c_end clearfix'>
 					<span class="c_btn">结果</span>
 				</div>
 				<div class='b_content'>
@@ -157,13 +154,13 @@ function renderCalculate(){
 				<div>
 			</div>	
 		</div>`;
-	$('.infos-box').append(str);
-	let inpt1='';
-	let inpt2='';
-	let flag1=false;
-	let flag2=false;
-	let endNum='';
 	
+	let gongGao='';   //宫高
+	let pregnant='';  //孕月
+	let flagGongGao=false;  // 判断宫高是否有值
+	let flagPregnant=false; //判断宫高孕月是否有值
+	let endNum='';    //结果
+	$('.infos-box').append(str);
 	// 输入判断是否为数字
 	function numCheck(val,node1,node2,flag){
 		let regs = new RegExp("^[0-9]*$");
@@ -179,48 +176,44 @@ function renderCalculate(){
 			return flag
 		}
 	}
-	
-	$(document).ready(function(){
-		// 输入数字
-		$('#ipt1').blur(function(){
-			let val=this.value
-			inpt1=val
-			flag1=numCheck(val,'.l_yz','#ipt1',flag1)
-			console.log(flag1)
-		})
-		$('#ipt2').blur(function(){
-			let val=this.value
-			inpt2=val
-			flag2=numCheck(val,'.r_yz','#ipt2',flag2)
-			
-		})
-		// 点击结果
-		$('.c_btn').click(function(){
-			if(flag1&&flag2){
-				endNum=inpt1-3*(inpt2*1+1);
-				// 将值显示在页面上
-				let str1=`<span class="end_child"><span>结果：胎儿发育指数</span><span class='end_ys'>${endNum}</span></span>`
-				$('.b_end').text('')
-				$('.b_end').append(str1)
-				// 颜色区分正常和不正常
-				// if(endNum<-3 ||endNum>3){
-				// 	$('.end_ys').css({
-				// 		color:'#F45454'
-				// 	})
-				// }else{
-				// 	$('.end_ys').css({
-				// 		color:'#333'
-				// 	})
-				// }
-			}else{
-				// 移除
-				if($('.end_child').length>0){
-					$('.end_child').remove()
-					$('.b_end').text('结果：')
-				}
+	// 宫高输入验证
+	$('#ipt1').blur(function(){
+		let val=this.value
+		gongGao=val
+		flagGongGao=numCheck(val,'.l_yz','#ipt1',flagGongGao)
+	})
+	// 孕月输入验证
+	$('#ipt2').blur(function(){
+		let val=this.value
+		pregnant=val
+		flagPregnant=numCheck(val,'.r_yz','#ipt2',flagPregnant)
+	})
+	// 点击结果
+	$('.c_btn').click(function(){
+		if(flagPregnant&&flagPregnant){
+			endNum=gongGao-3*(pregnant*1+1); //结果计算
+			// 将值显示在页面上
+			let str1=`<span class="end_child"><span>结果：胎儿发育指数</span><span class='end_ys'>${endNum}</span></span>`
+			$('.b_end').text('')
+			$('.b_end').append(str1)
+			// 颜色区分正常和不正常
+			// if(endNum<-3 ||endNum>3){
+			// 	$('.end_ys').css({
+			// 		color:'#F45454'
+			// 	})
+			// }else{
+			// 	$('.end_ys').css({
+			// 		color:'#333'
+			// 	})
+			// }
+		}else{
+			// 移除
+			if($('.end_child').length>0){
+				$('.end_child').remove()
+				$('.b_end').text('结果：')
 			}
-		})
-	});
+		}
+	})	
 	
 	
 }