<!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" class="mommyboby">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>接种记录</title>

    <style>

        body {
            background-color: #E7E7E7;
        }
        .container {
            min-width: 200px;
            width: 100%;
            margin-top: 10px;
        }
        .container .title {
            height: 25px;
            background-color: #A3D1EA;
            padding-left: 15px;
            padding-bottom: 15px;
            padding-top: 20px;
            border-radius:3px 3px 0px 0px;
            color: #FFFFFF;
        }


        .container .title .t_left {
            float: left;
            font-size: 23px;
        }
        .container .title .t_right {
            float: right;
        }


        .container .body {
            clear: both;
        }

        .container .body ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        .container .body ul li{
            border-bottom: #e7e5df 1px solid;
        }

        .container .body ul li.header {
            background-color: #fffef2;
            height: 40px;
            line-height: 40px;;
        }

        .container .body ul li.content {
            background-color: #ffffff;
        }

        .container .body ul li.header span{
            font-size: 12px;
            line-height: 40px;
            padding-left: 15px;
            display: inline-block;
            width: 45%;
            color: #434343;
        }

        .container .body ul li.header span.half:first-child{
            border-right: #e7e5df 1px solid;
            float: left;
        }

        .container .body ul li.content span {
            line-height: 40px;
            padding-left: 15px;
            display: inline-block;
            width: 45%;
            color: #979797;
            font-size: 14px;
        }

        .container .body ul li.content span.text {
            width: 95%;
            line-height: 30px;;
            padding-top:10px;
            padding-bottom: 10px;;
        }

        .container .body ul li.content span.line {
            width: 95%;
            line-height: 30px;
        }

        .container .body .lookMore {
            height: 40px;
            line-height: 40px;
            background-color: #f5f5f5;
            color: #BABABA;
            font-size: 12px;
            text-align: center;
            border-radius: 0 0 3px 3px;
        }
        .container .body .lookMore img {
            height: 16px;
            width: 16px;
            margin-top:-3px;
            vertical-align: middle;
        }
        .container .body ul.moreInfo {
            margin-top: 10px;
            display: none;
        }
        .container .body ul.moreInfo li:first-child {
            border-radius: 3px 3px 0 0;
        }
        .container .body ul.moreInfo li:last-child{
            border-radius: 0 0 3px 3px;
        }
    </style>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
</head>




<body">

<div class="container">

        <div class="title">
            <div class="t_left">
                乙肝疫苗
            </div>
        </div>
        <div class="body">
            <ul>
                <li class="header">
                    <span>接种单位</span>
                </li>
                <li class="content">
                    <span>东半壁店卫生院</span>
                </li>
                <li class="header">
                    <span class="half">接种时间</span>
                    <span>接种医生</span>
                </li>
                <li class="content">
                    <span class="half">2016年5月12日</span>
                    <span>王医生</span>
                </li>
                <li class="header">
                    <span class="half">接种部位</span>
                    <span>接种剂次</span>
                </li>
                <li class="content">
                    <span class="half">左上臂</span>
                    <span>第1/2次</span>
                </li>
                <li class="header">
                    <span class="half">疫苗生产企业</span>
                    <span>疫苗批号</span>
                </li>
                <li class="content">
                    <span class="half">华尔顿</span>
                    <span>1324235123</span>
                </li>
            </ul>
            <div class="lookMore" onclick="lookMore(this)">
                <span>查看疫苗详情</span>
                <img id="moreImg" src="../image/small_arrow_down.png">
            </div>
            <ul id="moreInfo" class="moreInfo">
                <li class="header">
                    <span>接种预防疾病</span>
                </li>
                <li class="content">
                    <span>乙肝肝炎</span>
                </li>
                <li class="header">
                    <span>接种时间</span>
                </li>
                <li class="content">
                    <span>3月龄(1/2)， 6月龄(2/2)</span>
                </li>
                <li class="header">
                    <span>接种部位</span>
                </li>
                <li class="content">
                    <span>上臂三角肌(注射)</span>
                </li>
                <li class="header">
                    <span>接种效果</span>
                </li>
                <li class="content">
                <span class="text">
                凡按照规定程序注射3针乙肝疫苗的人，95%能产生保护作用，可以生产抗体乙肝病毒的抗体，但有5%的注射3针后任不产生抗体，出现免疫无应答或低应答状态。
                </span>
                </li>
                <li class="header">
                    <span>接种禁忌</span>
                </li>
                <li class="content">
                    <span class="line">1.发热或暂缓注射</span>
                    <span class="line">2.对疫苗已知的任何成分过敏者</span>
                    <span class="line">3.患有急性或慢性严重疾病者</span>
                </li>
                <li class="header">
                    <span>不良反应</span>
                </li>
                <li class="content">
                <span class="text">
                注射部位局部反应-疼痛、红斑(皮肤发红)、硬结、中度、过敏性的发热。
                </span>
                </li>
            </ul>
        </div>

</div>

</body>

<script type="text/javascript">
    function lookMore(target) {
        var element = target.nextElementSibling;
        if("display:none" == element.getAttribute("style")) {
            element.setAttribute("style", "display:block");
        } else {
            element.setAttribute("style", "display:none");
        }

        var element2 = target.getElementsByTagName("img")[0];
        if("up" == element2.getAttribute("class")) {
            element2.setAttribute("class", "");
        } else {
            element2.setAttribute("class", "up");
        }
    }

</script>


</html>