family.html.html 4.2 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/blood.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-labelauty.css">
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-labelauty.js"></script>
<script>
$(function(){
	$(':input').labelauty();
});
</script>
<style>
input.labelauty + label{
	width:2.3rem;
	height:0.5rem;
	font-size: 0.26rem;
	}
.dowebok1 input.labelauty + label{
	width:1.8rem;
	font-size: 0.24rem;
	}
.dowebok1{
	margin-top:0.1rem;
	}	
.dowebok1 li {
    width: 1.8rem !important;
	margin:0.05rem  0.05rem!important;
	}
	.sick_list{
		display: flex;
		flex-wrap: wrap;
	}
	.sick_list .active{
		background-color:#D8B25F;
		color: #FFFFFF;
	}
	.sickness_item{
		display: block;
		width: 2rem;
		height: 0.6rem;
		background-color: #EEEEEE;
		margin-left: 0.1rem;
		margin-top: 0.16rem;
		text-align: center;
		line-height: 0.6rem;
		border-radius: 0.05rem;
	}
	.blbut{
		position: absolute;
		bottom: 0;
		margin-top: 0;
	}
</style>
<title>家族史</title>
</head>

<body>
<div style="background-color:#fff;">
<div class="perheader center">
	<div class="left perback"><a href="#" onClick="javascript:history.back(-1);"><img src="images/care_03.jpg"/></a></div>
    <div class="bloodtext">家族史</div>
</div>
</div>

<form action="#">
<div class="fabox">
	<div class="fapart1 center">
    	<div class="fainbox">
        	<div class="fali">
                <div class="fatitle">您的父母或者兄弟姐妹是否患有明确诊断的疾病 ?</div>
                <ul class="dowebok">
                    <li><input type="radio" name="radio" data-labelauty="是"></li>
                    <li><input type="radio" name="radio" data-labelauty="否"></li>
                </ul>
            </div>
            
            <div class="fali">    
                <div class="fatitle">请选择疾病的名称(可多选):</div>
                <div class="sick_list">
                    <span class="sickness_item">高血压高</span>
                    <span class="sickness_item">脑卒中</span>
                    <span class="sickness_item">冠心病</span>
                    <span class="sickness_item">外周血管病</span>
                    <span class="sickness_item">心力衰竭</span>
                    <span class="sickness_item">糖尿病</span>
                    <span class="sickness_item">肥胖症</span>
                    <span class="sickness_item">慢性肾脏疾病</span>
                    <span class="sickness_item">慢性阻塞性肺病</span>
                    <span class="sickness_item">骨质疏松</span>
                    <span class="sickness_item">痛风</span>
                    <span class="sickness_item">恶性肿瘤</span>
                    <span class="sickness_item">风湿免疫性疾病</span>
                    <span class="sickness_item">精神疾病</span>
                    <span class="sickness_item">其他</span>
                </div>
            </div>
            
            <div class="fali">
                <div class="fatitle">您的父亲是否在55岁、母亲在65岁之前患有上述疾病吗  ?</div>
                <ul class="dowebok">
                    <li><input type="radio" name="radio" data-labelauty="是"></li>
                    <li><input type="radio" name="radio" data-labelauty="否"></li>
                </ul>
            </div>
            
        </div>
 	</div>
</div>
    
</div>



<div ><button type="button" class="blbut"/>保存</div>
</form>

<script type="text/javascript">
	$(document).ready(function(){
		$('.sickness_item').click(function(){
			if(!$(this).hasClass('active')){
			$(this).addClass('active')
			} else{
				$(this).removeClass('active')
			}
		})
	})
</script>
</body>