master

分支 (1)

管理

管理

master

hospital
/
首页.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>000首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/首页.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header" id="head-high">
        <div class="header_up">
            <h2>YOUR LOGO</h2>
            <label class="header_up_lab"><span class="fa fa-search"></span><input type="text"
                    placeholder="请输入科室名/医生名/疾病名" class="text"></label>
            <input type="text" value="搜索" class="search">
            <p class="adm"><a href=""> <span class="fa fa-user"></span>&nbsp;/ 管理员登录</a></p>
        </div>
    </header>
    <nav>
        <div class="nav_a">
            <a href="首页.html" class="active">首页</a>
            <a href="appointment.html" >预约挂号</a>
            <a href="Onlinevisit.html">在线问诊</a>
            <a href="./personal/index.html">个人中心</a>
            <a href="healthinquiry.html">健康咨询</a>
            <a href="illnessinquiry.html">疾病专题</a>
        </div>
    </nav>
<!-- 第一个轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/7bdea93f2a79_w1300_h420_ 1300×420.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/7bdea93f2a79_w1300_h420_ 1300×420.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/7bdea93f2a79_w1300_h420_ 1300×420.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <!-- <div class="swiper-pagination"></div> -->

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
<!-- 健康咨询 -->
    <div class="middle">
        <div class="middle_pic">
            <div class="middle_pic_up">
                <div class="middle_pic_up_fir">
                    <h4>健康资讯</h4>
                    <p>Health Information</p>
                </div>
                <ul>
                    <li><a href="">冬季养生</a></li>
                    <li><a href="">热点讨论</a></li>
                    <li><a href="">健康科普</a></li>
                    <li><a href="">更多 ></a></li>
                </ul>
            </div>
            <div class="middle_pic_up_center">
                <div class="middle_pic_up_center_fir imgA">
                    <img src="img/melissa-walker-horn-637092-unsplash.jpg" alt="">
                    <img src="img/melissa-walker-horn-637092-unsplash.png" alt="">
                    <p class="fir1">春节打好"保卫战"</p>
                    <p class="fir2">13种养胃食物</p>
                    <span class="fa fa-angle-double-right"></span>
                </div>
                <div class="middle_pic_up_center_sec imgA">
                    <img src="img/matheus-feero-198223-unsplash.png" alt="">
                    <img src="img/matheus-ferrero-198223-unsplash.png" alt="">
                    <p class="fir1">百分之98的热饮含糖超规</p>
                    <p class="fir2">星巴克含糖量惊人</p>
                    <span class="fa fa-angle-double-right"></span>
                </div>
                <div class="middle_pic_up_center_thr imgA">
                    <img src="img/zheng-juan-1236210-unsplash.jpg" alt="">
                    <img src="img/zheng-juan-1236210-unsplash.png" alt="">
                    <p class="fir1">正月十五你正确吃元宵了吗</p>
                    <p class="fir2">元宵节的汤圆你应该这样吃</p>
                    <span class="fa fa-angle-double-right"></span>
                </div>
            </div>
        </div>
        <div class="enter">

            <div><a href="404页面.html"><img src="img/rukou1.png" alt=""></a></div>
            <div><a href="404页面.html"><img src="img/rukou2.png" alt=""></a></div>
            <div><a href="404页面.html"><img src="img/rukou3.png" alt=""></a></div>
            <div><a href="404页面.html"><img src="img/rukou4.png" alt=""></a></div>
        </div>

    </div>
<!-- 第二个轮播图 -->
    <div class="swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/1478756448108 360×380.png" alt="">
                <div class="swiper-slide_con">
                    <p class="swiper-slide_con_fir">
                        <strong>严教授</strong>
                        <p>主治医生</p>
                    </p>
                    <p class="swiper-slide_con_sec">支气管哮喘症，慢性阻塞性肺病，慢性科所，慢性支气管炎，睡眠呼吸暂停综合征，飞溅质纤维化;难治性哮喘的诊治..</p>
                    <p class="swiper-slide_con_thr"><a href="Onlinevisit.html"">在线咨询</a> </p>
                </div>
            </div>
        </div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev1"><img src="img/组 14.png" alt=""></div>
        <div class="swiper-button-next1"><img src="img/组 15.png" alt=""></div>

    </div>
<!-- 时间轴线 -->
    <div class="last">
        <div class="last_one">
            <h3>疾病专题</h3>
            <p>Special topics on disease</p>
        </div>
    </div>
    <div class="last_total">
        <div class="last_total_fir col">
            <div class="roud"></div>
            <img src="img/1478778348501 330×140.png" alt="">
            <div class="last_total_fir_one">
                <span>12-19</span>
                <p>2018</p>
            </div>
        </div>
        <div class="last_total_sec col">
            <div class="roud"></div><!-- 小圆点 -->
            <div class="last_total_sec_one">
                <p id="on-p">2018/12 世卫组织使用转基因文字新技术， 组织塞卡病毒传播</p>
                <p>据英国媒体报道,世界卫生组织表明,尽管使用转基因蚊子这一技术受到争议,其仍将用于组织塞卡病毒的塞卡病毒是一种..</p>
            </div>
        </div>
        <div class="last_total_thr col">
            <div class="roud"></div><!-- 小圆点 -->
            <img src="img/1478778348501 330×140.png" alt="">
            <div class="last_total_thr_one">
                <span>12-21</span>
                <p>2018</p>
            </div>

        </div>
        <div class="last_total_for col">
            <div class="roud"></div><!-- 小圆点 -->
            <div class="last_total_for_one">
                <p id="on-p">2018/12 世卫组织使用转基因文字新技术， 组织塞卡病毒传播</p>
                <p>据英国媒体报道,世界卫生组织表明,尽管使用转基因蚊子这一技术受到争议,其仍将用于组织塞卡病毒的塞卡病毒是一种..</p>
            </div>
        </div>
        <div class="last_total_fiv col">
            <div class="last_total_fiv_one">
                <p id="on-p">2018/12 世卫组织使用转基因文字新技术， 组织塞卡病毒传播</p>
                <p>据英国媒体报道,世界卫生组织表明,尽管使用转基因蚊子这一技术受到争议,其仍将用于组织塞卡病毒的塞卡病毒是一种..</p>
            </div>
        </div>
        <div class="last_total_six col">

            <div class="last_total_six_one">
             <img src="img/1478778348501 330×140.png" alt="">
             <div class="date">
                <span>12-20</span>
                <p>2018</p>
            </div>
            </div>
        </div>
        <div class="last_total_seven col">
            <div class="last_total_seven_one">
                <p id="on-p">2018/12 世卫组织使用转基因文字新技术， 组织塞卡病毒传播</p>
                <p>据英国媒体报道,世界卫生组织表明,尽管使用转基因蚊子这一技术受到争议,其仍将用于组织塞卡病毒的塞卡病毒是一种..</p>
            </div>
        </div>
        <div class="last_total_eig col">

            <div class="last_total_eig_one">
               <img src="img/1478778348501 330×140.png" alt="">
               <div class="date">
                    <span>12-22</span>
                    <p>2018</p>
            </div>
            </div>
        </div>
    </div>
    <div class="last_total_ending">
        <a href="illnessinquiry.html"><span class="fa fa-angle-double-right"></span></a>
    </div>
    <!-- 公共尾部 -->
    <footer>
        <div class="footer_up">
            <div class="footer_up_con">
                <div class="footer_up_con_fir">
                    <p class="footer_up_con_fir1">
                        <a href="">联系我们</a>
                        <span>Content us</span>
                    </p>
                    <p class="footer_up_con_fir2">关注</p>
                    <p class="footer_up_con_fir3">您身边的家庭医生</p>
                </div>
                <div class="footer_up_con_two">
                    <div class="footer_up_con_two_img">
                        <span><img src="img/weibo.png" alt=""></span>
                        <span><img src="img/weixin.png" alt=""></span>
                        <span><img src="img/qq.png" alt=""></span>
                    </div>
                    <div class="footer_up_con_two_adress">
                        <p>地址: 北京市朝阳区国贸写字楼B座</p>
                        <p>电话: 400612358</p>
                        <p>邮箱: infor@abgj.com</p>
                    </div>
                    <div class="footer_up_con_two_phone">
                        <p>邮编: 400160</p>
                        <p>手机: 138466066</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="footer_end">
            <p>京公网安备11010125610012号京ICP证150277号京ICP备15002532号</p>
        </div>
    </footer>
</body>

</html>
<!-- 轮播 -->
<script src="js/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        autoplay: 3000,//可选选项，自动滑动
        speed: 300,
        loop: true,
        // 如果需要分页器
        // pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
    });
    var mySwiper2 = new Swiper('.swiper-container2', {
        direction: 'horizontal',
        autoplay: 3000,//可选选项，自动滑动
        speed: 300,
        loop: true,
        // 如果需要分页器
        // pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next1',
        prevButton: '.swiper-button-prev1',
    });
</script>

<script>
    var oimgA = document.getElementsByClassName('imgA');
    var ocol = document.getElementsByClassName('col');
    var oLastTotal = document.getElementsByClassName('last_total')[0];
    var oImg = oLastTotal.getElementsByTagName('img');
    var oP = oLastTotal.getElementsByTagName('p');
    // 健康咨询
    for (var i = 0; i < oimgA.length; i++) {
        oimgA[i].index = i;
        oimgA[i].onmouseover = function () {
            var oimg = oimgA[this.index].getElementsByTagName("img");
            oimg[0].style.display = 'none';
            oimg[1].style.display = 'block';
            this.style.background = 'linear-gradient(0deg,#57caef,#57f499)';
        }
        oimgA[i].onmouseout = function () {
            var oimg = oimgA[this.index].getElementsByTagName("img");
            oimg[0].style.display = 'block';
            oimg[1].style.display = 'none';
            this.style.background = '';
        }
    }
    // 时间轴线
    for (var i = 0; i < 4; i++) {
        ocol[i].index = i;
        ocol[i].onmouseover = function () {
            this.style.background = '#57c7f6';
            ocol[this.index + 4].style.background = '#57c7f6';
            switch (this.index) {
                case 0:
                    oImg[0].style.width = '60%';
                    oP[0].style.textAlign = 'right';
                    break;
                case 1:
                    oImg[2].style.width = '60%';
                    oP[8].style.textAlign = 'right';
                    break;
                case 2:
                    oImg[1].style.width = '60%';
                    oP[3].style.textAlign = 'right';
                    break;
                case 3:
                    oImg[3].style.width= '60%';
                    oP[11].style.textAlign = 'right';
                    break;

                default:
                    break;
            }
        }
        ocol[i].onmouseout = function () {
            this.style.background = '';
            ocol[this.index + 4].style.background = '';
            switch (this.index) {
                case 0:
                    oImg[0].style.width = '0px';
                    oP[0].style.textAlign = 'left';
                    break;
                case 1:
                    oImg[2].style.width = '0px';
                    oP[8].style.textAlign = 'left';
                    break;
                case 2:
                    oImg[1].style.width = '0px';
                    oP[3].style.textAlign = 'left';
                    break;
                case 3:
                    oImg[3].style.width = '0px';
                    oP[11].style.textAlign = 'left';
                    break;

                default:
                    break;
            }
        }
    }
</script>