最终效果
index.html 首页
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" href="css/base.css" type="text/css">
<link rel="stylesheet" href="css/ui.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">
欢迎来到城市医院预约挂号统一平台 请 
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<div id="header" class="header">
<div class="wrap clearfix">
<a href="#" class="logo">
<img src="img/logo.png">
</a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#12">科室</a>
<a href="#12">疾病</a>
<a href="#12">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜所内容" />
<a href="#13" class="ui-search-submit"> </a>
</div>
</div>
</div>
<div id="nav" class="nav">
<div class="link menu">全部科室
<div class="menu-list" ui-menu>
<div class="ui-menu-item clearfix">
<a href="#13" class="ui-menu-item-department">内科</a>
<a href="#13" class="ui-menu-item-disease">胃炎</a>
<a href="#13" class="ui-menu-item-disease">高血压</a>
<a href="#13" class="ui-menu-item-disease">冠心病</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
内科
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
<div class="ui-menu-item-detail-group-caption">
内科常见疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item clearfix">
<a href="#13" class="ui-menu-item-department">外科</a>
<a href="#13" class="ui-menu-item-disease">肾结石</a>
<a href="#13" class="ui-menu-item-disease">脑外伤</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
外科
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
<div class="ui-menu-item-detail-group-caption">
外科常见疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item clearfix">
<a href="#13" class="ui-menu-item-department">妇产科</a>
<a href="#13" class="ui-menu-item-disease">阴道炎</a>
<a href="#13" class="ui-menu-item-disease">不孕不育</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
妇产科
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
<div class="ui-menu-item-detail-group-caption">
妇产科常见疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href=#"14">心脑血管科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">内分泌科</a>
<a href="#14">过敏反应科</a>
<a href="#14">心血管内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">肾病内科</a>
<a href="#14">心脑血管科</a>
<a href="#14">感染内科</a>
<a href="#14">神经内科</a>
<a href="#14">内分泌科</a>
<a href="#14">血液科</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="link">按医院挂号</a>
<a href="#" class="link">按科室挂号</a>
<a href="#" class="link">按疾病挂号</a>
<a href="#" class="link">最新公告</a>
<a href="#" class="link right">社会知名医院</a>
</div>
<div id="banner" class="banner clearfix">
<div class="banner-slider ui-slider">
<div class="ui-slider-wrap clearfix">
<a href="#21" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
<a href="#22" class="item"><img src="img/banner_2.jpg" alt="banner-2"></a>
<a href="#23" class="item"><img src="img/banner_3.jpg" alt="banner-3"></a>
<!-- <!--↑↑↑真正的最后一张-->
<!-- <a href="#21" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a> -->
<!--↑↑↑缓冲图-->
</div>
<div class="ui-slider-arrow">
<a href="#l" class="item left"> </a>
<a href="#r" class="item right"> </a>
</div>
<div class="ui-slider-process">
<a href="#24" class="item item_focus"> </a>
<a href="#25" class="item "> </a>
<a href="#26" class="item "> </a>
</div>
</div><!--幻灯片-->
<div class="banner-search clearfix">
<div class="caption"><span class="text">快速预约</span></div>
<div class="form ui-casccading">
<div class="line">
<select name="area" data-search="getDistinctArea" data-where=""><option value="">医院地区</option></select>
</div>
<div class="line">
<select name="level" data-search="getLevelByArea" data-where=""><option value="">医院等级</option></select>
</div>
<div class="line">
<select name="name" data-search="getNameByAreaAndLevel" data-where=""><option value="">医院名称</option></select>
</div>
<div class="line">
<select name="department" data-search="getDepartmentArrByHospitalName" data-where="">
<option value="">医院科室</option>
</select>
</div>
</div>
<div class="submit"><input type="button" class="button" value="快速查询"></div>
</div><!--联动-->
<div class="banner-help clearfix">
<div class="caption"><span class="text">帮助中心</span></div>
<div class="list">
<a href="#7" class="link">账号指南</a>
<a href="#7" class="link">预约指南</a>
<a href="#7" class="link">账号找回</a>
<a href="#7" class="link">常见问题</a>
</div>
</div><!--help-->
</div>
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab">
<div class="caption">
<a href="#5" class="item item_focus">医院</a>
<a href="#4" class="item">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="#6" class="block-caption-item block-caption-item_focus">全部</a>
<a href="#6" class="block-caption-item">东城区</a>
<a href="#6" class="block-caption-item">西城区</a>
<a href="#6" class="block-caption-item">朝阳区</a>
<a href="#6" class="block-caption-item">丰台区</a>
<a href="#6" class="block-caption-item">石景山区</a>
<a href="#6" class="block-caption-item">海淀区</a>
<a href="#6" class="block-caption-item">门头沟区</a>
<a href="#6" class="block-caption-item">房山区</a>
<a href="#6" class="block-caption-item">其他</a>
</div>
<div class="block-wrap">
<div class="block-content">
<div class="block-list clearfix">
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院"/>
<div class="item-name"><a href="#33">北京协和医院</a><span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">电话： [东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-2.jpg" alt="xx医院"/>
<div class="item-name"><a href="#33">北京协和医院</a><span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">电话： [东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-3.jpg" alt="xx医院"/>
<div class="item-name"><a href="#33">北京协和医院</a><span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">电话： [东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
<div class="item">
<img src="img/hospital-4.jpg" alt="xx医院"/>
<div class="item-name"><a href="#33">北京协和医院</a><span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">电话： [东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...
</div>
</div>
</div>
<div class="block-text-list clearfix">
<a href="#11" class="item">北京大学第三医院
<span class="level">【三级甲等】</span>
</a>
<a href="#11" class="item">中国医学科学院肿瘤医院
<span class="level">【三级甲等】</span>
</a>
<a href="#11" class="item">中国医学科学院阜外医院
<span class="level">【三级甲等】</span>
</a>
<a href="#11" class="item">首都医科大学附属北京天坛医院
<span class="level">【三级甲等】</span>
</a>
<a href="#11" class="item">首都医科大学附属北京安贞医院
<span class="level">【三级甲等】</span>
</a>
<a href="#11" class="item">首都医科大学宣武医院
<span class="level">【三级甲等】</span>
</a>
</div>
<div class="block-more">更多医院</div>
</div>
</div>
<div class="block-wrap" style="display: none;">
其他城区内容
</div>
</div>
<div class="item">
<div class="item" style="display: none;">科室内容</div>
</div>
</div>
</div><!--切换-->
<div class="content-news">
<div class="caption">最新公告<a href="#8" class="more">更多</a></div>
<div class="list">
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
</div>
</div><!--公告-->
<div class="content-close">
<div class="caption">停诊公告<a href="#8" class="more">更多</a></div>
<div class="list">
<a href="#3" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#3" class="link">首都医科大学附属北京安贞医院妇</a>
<a href="#3" class="link">北京安贞医院妇</a>
<a href="#3" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#3" class="link">首都医科大学附属北京安贞医院妇</a>
<a href="#3" class="link">北京安贞医院妇</a>
</div>
</div><!--停止公告-->
</div>
</div>
<div id="footer" class="footer">
<div class="wrap">Copyright ©2019Pandora版权所有
</div>
<a class="ui-backTop" href="#0"></a>
</div>
<script src="js/ui.js" type="text/javascript"></script>
</body>
</html>
ui.css 首页样式
.ui-search{
background: url('../img/ui-search.jpg') center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;/*text-indent 属性规定文本块中首行文本的缩进*/
}
.ui-search-select-list{
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
left: 2px;
top: 36px;
}
.ui-search-select-list a{
text-align: center;
display: block;
color: #a5a2a2;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
left: 71px;
line-height: 26px;
top: 5px;
font-size: 13px;
color: #a5a2a2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}
select,input{
border: none;
outline: none;
}
/* ui-menu 分类菜单 */
.ui-menu{
}
.ui-menu-item{
height: 22px;
line-height: 22px;
margin-left: 2px;
padding: 8px 5px 9px 6px;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left: 30px;
font-size: 13px;
color: #fff;
background-position: -22px 0px;
}
.ui-menu-item-disease{
font-size: 12px;
padding-left: 5px;
color: #d7f3ff;
float: right;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #333;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item:hover.ui-menu-item-department:before{
background-position-x: 0;
}
.ui-menu-item-department:before{
content :' ' ;
display: block;
width: 22px;
height: 21px;
position: absolute;
left: 0;
top: 1px;
background: url('../img/icon-menu.jpg') 0 0 no-repeat;
}
.ui-menu-item-detail{
display: none;
/* display: block; */
position: absolute;
width: 500px;
height: 392px;
background: #fff url('../img/bg-menu.jpg') center no-repeat;
padding: 20px 10px 10px 29px;
background-color: #fff;
top: 0;
left: 190px;
box-shadow: 5px 5px 2px rgba(0, 0, 0, .1)
}
.ui-menu-item-detail-group{
padding-bottom: 20px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
width: 100%;
display: block;
height: 34px;
line-height: 34px;
font-size: 16px;
font-weight: bold;
color: #666;
font-size: 14px;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color: #868686;
margin-right: 12px;
margin-bottom: 5px;
font-size: 12px;
}
.ui-menu-item-detail-group-list a:after{
content: '|';
color: #ddd;
padding-left: 12px;
}
.ui-menu-item-:nth-child(2) .ui-menu-item-department:before{
background-position: -22px;
}
/* .ui-backTop{
display: none;
position: fixed;
right: 2px;
z-index: 9;
width: 40px;
button: 2px;
height: 40px;
background: rgba(102, 102, 102,.9) url('../img/icon-go-up.png')center no-repeat;
color: #fff;
} */
.ui-backTop{
display: block;
position: fixed;
right: 2px;
bottom: 2px;
z-index: 9;
width: 40px;
height: 40px;
color: #fff;
background: rgb(102, 102, 102) url('../img/icon-go-up.png') center no-repeat;
}
.ui-backTop:hover {
background: rgb(102, 102, 102);
}
.ui-backTop:hover::after {
content: '回到顶部';
font-size: 15px;
display: block;
line-height: 20px;
text-align: center;
}
/* 幻灯片组件ui-slider */
.ui-slider{
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap{
width: 3000px;
height: 414px;
position: absolute;
left: 0;
right: 0;
transition: all .5s;
}
.ui-slider-wrap .item{
display: block;
float: left;
width: 544px;
height: 414px;
}
.ui-slider-arrow{
width: 544px;
height: 40px;
margin-top: -20px;
top: 50%;
/* color: red; */
position: absolute;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
/* left: 0; */
background: url('../img/ui-slider-arrow.png') no-repeat;
}
.ui-slider-arrow .left{
left: 0;
}
.ui-slider-arrow .right{
right: 0;
background-position: -40px 0;
}
.ui-slider-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slider-process .item{
display: inline-block;
width: 16px;
height: 16px;
background: url('../img/ui-slider-process.png') no-repeat;
}
.ui-slider-process .item:hover{
background-position: -23px 0;
}
.ui-slider-process .item_focus{
display: inline-block;
width: 16px;
height: 16px;
background-position: -23px 0;
}
layout.css 页面基本样式
body{
margin: 0;
padding: 0;
background-color: #fff;
font-size: 12px;
font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑","宋体",Arial,Verdana,sans-serif;
color: #333;
}
a{
text-decoration: none;
}
.clearfix:after{
/* 清除浮动 通用方法,伪类*/
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
}
.top{
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 802px;
margin: 0 auto;
height: 414px;
padding: 9px 0 0 198px;
}
.banner-slider{
float: left;
width: 544px;
height: 414px;
background-color: #8edff3;
}
.banner-search{
float: right;
width: 250px;
height: 255px;
background-color: #fafafa;
}
.banner-help{
float: right;
width: 250px;
height: 146px;
background-color: #fafafa;
margin-top: 12px;
}
.content{
padding: 10px 0 39px 0;
}
.content-tab{
float: left;
width: 742px;
height: 490px;
}
.content-news{
float: left;
width: 238px;
height: 236px;
border: 1px solid #ccc;
margin: 0 0 0 8px;
}
.content-close{
float: left;
width: 238px;
height: 236px;
margin: 12px 0 0 8px;
border: 1px solid #aaa;
}
.footer{
text-align: center;
height: 70px;
padding: 25px 0;
line-height: 70px;
background-color: #eceef2;
}
base.css 基本样式
p{
margin: -0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
}
/* top模块内样式 */
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url('../img/icon-call.png') no-repeat center left;
}
.top .welcome {
float: right;
}
.top a{
color: #2da5e1;
padding-left: 10px;
}
/* header模块内样式 */
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0;
top: 29px;
/* background-color: orange; */
}
/* #nav 模块内样式 */
.nav .link{
display: inline-block;
width: 100px;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav a:hover{
color: #d7f3ff;
}
.nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
}
.menu{
margin-left: 174px;
}
.nav .menu .menu-list{
background-color: #1fa4f0;
width: 100%;
height: 423px;
position: absolute;
left: 0;
top: 36px;
}
/* #banner 模块内样式 */
.bannner-search{
background-color: #fafafa;
}
.banner-search .caption{
height: 22px;
padding: 15px 0;
text-align: center;
}
.banner-help .caption .text,
.banner-search .caption .text{
display: inline-block;
height: 22px;
line-height: 22px;
padding-left: 28px;
color: #fec009;
font-size: 16px;
background: url('../img/icon-help.png') 0 0 no-repeat;
}
.banner-search .form{
height: 150px;
}
.banner-search .form .line{
padding-bottom: 9px;
text-align: center;
}
.banner-search .form .line select{
width: 170px;
font-size: 12px;
z-index: 0;
border: 1px solid #dcdddd;
height: 26px;
line-height: 26px;
padding: 2px 0;
color: #666;
}
.banner-search .submit{
height: 32px;
text-align: center;
}
.banner-search .submit .button{
width: 108px;
height: 33px;
background-color: #fecd09;
font-size: 14px;
color: #fff;
border-radius: 3px;
}
.banner-help{
background-color: #fafafa;
}
.banner-help .caption{
text-align: center;
margin: 12px 0 12px 0;
}
.banner-help .caption .text{
color: #00B3EA;
background-position: 0 -23px;
}
.banner-help .link{
color: #00B3EA;
display: inline-block;
width: 86px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
padding: 0 0 8px 26px;
/*float: left;*/
}
/* content 模块样式 */
.content-news , .content-close{
background-color: #fff;
border: 1px solid #f4f6fa;
}
.content-close .more,
.content-news .more{
float: right;
padding-right: 22px;
font-size: 12px;
color: #868686;
}
.content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
background-color: #f4f6fa;
text-indent: 20px;
color: #fec009;
font-size: 15px;
}
.content-close .list,
.content-news .list{
padding: 15px 20px 13px 35px;
line-height: 29px;
background: url('../img/list-yellow.jpg') 17px 20px no-repeat;
}
.content-close .list .link,
.content-news .list .link{
display: block;
color: #969696;
height: 29px;
line-height: 29px;
font-size: 11px;
}
.content-close .caption{
color: #4ab4ed;
}
.content-close .list{
background: url('../img/list-blue.jpg') 17px 20px no-repeat;
}
.content-tab .caption{
height: 34px;
line-height: 34px;
background-color: #f5f6fa;
}
.content-tab .caption .item{
display: block;
width: 112px;
height: 34px;
text-align: center;
float: left;
color: #00b3ea;
}
.content-tab .caption .item_focus,
.block-caption-item_focus{
background-color: #606ff2;
color: #fff;
}
.content-tab .block{
border: 1px solid #f4f6fa;
height: 452px;
}
.content-tab .block-caption{
height: 26px;
padding: 8px;
border-bottom: 1px solid #f4f6fa;
}
.content-tab .block-caption-item{
display: inline-block;
padding: 0 10px;
font-size: 12px;
line-height: 26px;
color: #4c4948;
}
.content-tab .block-content{
padding: 16px 12px;
}
.content-tab .block-content .block-more{
display: block;
line-height: 55px;
text-align: center;
color: #5084c4;
font-size: 14px;
}
.content-tab .block-content .block-list{}
.content-tab .block-content .block-list .item{
float: left;
width: 216px;
height: 102px;
padding: 0 20px 10px 120px;
position: relative;
font-size: 12px;
}
.content-tab .block-content .block-list .item img{
width: 110px;
height: 98px;
position: absolute;
left: 0;
top: 0;
}
.content-tab .block-content .block-list .item-name{
padding-top: 13px;
color: #036EB7;
font-size: 14px;
line-height: 21px;
}
.content-tab .block-content .block-list .item-level{
float: right;
font-size: 12px;
color: #979797;
}
.content-tab .block-content .block-list .item-address,
.content-tab .block-content .block-list .item-phone{
line-height: 18px;
padding-bottom: 4px;
color: #666;
}
/* 医院文案列表 - 容器 */
.content-tab .block-content .block-text-list{}
.content-tab .block-content .block-text-list .item{
display: block;
width: 351px;
height: 27px;
padding-top: 8px;
float: left;
border-bottom: 1px dashed #dcdddd;
float: left;
color: #666;
font-size: 12px;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left: 13px;
}
.content-tab .block-content .block-text-list .level {
float: right;
color: #979797;
font-size: 12px;
}
.footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
ui.js
//UI-search定义
$.fn.uiSearch = function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
});
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected',ui).text($(this).text());
$('.ui-search-select-list',ui).hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
});
$('.ui-search-select-list').hide();
$('.ui-search-input').show();
$('.ui-search-input',ui).on('click',function(){
$('.ui-search-input',ui).hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-input').show();
});
};
//ui-tab
/**
* @param {string} header TAB组件,所有选项卡,里面有若干个 .item
* @param {string} content TAB组件的,所有选项卡,里面有若干个 .item
* @param {string} focus_prefix 选项卡高亮式前缀，可选
*/
$.fn.uiTab = function(header,content,focus_prefix){
var ui=$(this);
var tabs=$(header,ui);
var cons=$(content,ui);
var focus_prefix=focus_prefix ||'';
tabs.on('click',function(){
// debugger;
var index = $(this).index();
tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
cons.hide().eq(index).show();
return false;
});
}
//ui-backTop
$.fn.uiBackTop=function(){
var ui=$(this);
var el=$('<a class="ui-backTop" href="#0">up</a>');
ui.append( el );
var windowHeight =$(window).height();
$(window).on('scroll',function(){
var top =$('body').scrollTop();
if(top> windowHeight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
});
}
/*
根据已有的DOM结构
.ui-slider <----- 最外层框架
.ui-slider-wrap <----- 内容框架
.item <----- 每个内容
.ui-slider-arrow <----- 控制箭头
.item.left
.item.right
.ui-slider-process <----- 和内容一一对应
.item
*/
$.fn.uiSlider = function(){
var wrap = $('.ui-slider-wrap',this);
var size = $('.item',wrap).size-1;
var goPrev = $('.ui-slider-arrow .left',this);
var goNext = $('.ui-slider-arrow .right',this);
var items = $('.item',wrap);
var tips = $('.ui-slider-process .item',this);
var width = items.eq(0).width();
var currentIndex = 0;
var autoMove = true;
// 1.基本事件
wrap
.on('resetFocus',function(evt,isAutoMove){
// if(autoMove === true &&)
tips.removeClass('item_focus').eq(currentIndex).addClass('item_focus');
// wrap.animate({left:currentIndex*width*-1});
wrap.css('left',currentIndex*width*-1);
})
.on('nextFocus',function(){
currentIndex = currentIndex+1 > size ? 0 : currentIndex+1;
$(this).triggerHandler('resetFocus');
// 4. 链式调用
return $(this);
})
.on('prevFocus',function(){
currentIndex = currentIndex-1 < 0 ? size : currentIndex-1;
$(this).triggerHandler('resetFocus');
})
.on('autoMove',function(){
// 2. 自动处理
if(autoMove == true){
setTimeout(function(){
// 3. 闭包 && 链式调用
wrap.triggerHandler('nextFocus').triggerHandler('autoMove');
},5000);
}
}).triggerHandler('autoMove');
goPrev.on('click',function(){
wrap.triggerHandler('prevFocus');
return false;
});
goNext.on('click',function(){
wrap.triggerHandler('nextFocus');
return false;
});
// 5.任务 BUG 排除（定时器BUG ）
tips.on('click',function(){
var currentIndex = $(this).currentIndex();
wrap.triggerHandler('resetFocus',currentIndex);
});
}
//ui-slider
//1、左右箭头要可以控制翻页
//2、翻页时，进度点要联动
//3、翻到第三页时，下一页为第一页；翻到第一页时同理；
//4、进度点点击时需要切换到对应页面；
//5、没有点击时会自动滑动。
//6、自动滚动时屏蔽其他操作
//7、高级无缝滚动
// $.fn.uiSlider = function(){
// var ui = $(this);
// var wrap = $('.ui-slider-wrap',ui);
// var btn_prev = $('.ui-slider-arrow .left',ui);
// var btn_next = $('.ui-slider-arrow .right',ui);
// var items = $('.ui-slider-wrap .item',ui);
// var tips = $('.ui-slider-process .item',ui);
// //预定义
// var current = 0;
// var size = items.size();
// var width = items.eq(0).width();
// //具体操作
// wrap
// .on('move_prev',function(){
// if(current <= 0){
// current = size;
// }
// current = current-1;
// wrap.triggerHandler('move_to',current);
// });
// .on('move_next',function(evt,index){
// if(current >= size-1){
// current = -1;
// }
// current = current + 1;
// wrap.triggerHandler('move_to',current);
// });
// .on('move_to',function(evt,index){
// wrap.css('left',index*width*-1);
// tips.removeClass('item_focus').eq(index).addClass('item_focus');
// });
// //事件
// btn_prev.on('click',function(){
// wrap.triggerHandler('move_prev');
// });
// btn_next.on('click',function(){
// wrap.triggerHandler('move_next');
// });
// tips.on('click',function(){
// var index = $(this).index();
// wrap.triggerHandler('move_to',index);
// });
// }
// 从远程获得数据（一般在后台处理）
var getData = function(k,v){
// 初始化获取所有城区
if( k === undefined){
return [{id:1,name:'东城区'},{id:2,name:'西城区'}];
}
// 根据城区获得下面的等级（不同城区相同等级的 id 不一样）
if( k === 'area' ){
var levelData = {
1:[ {id:11,name:'一级医院'},{ id:12,name:'二级医院'} ],
2:[ {id:22,name:'二级医院'} ]
}
return levelData[v] || [];
}
// 根据等级获取医院
if( k === 'level'){
var hospital = {
11 : [ {id:1,name:'A1医院'},{id:2,name:'A2医院'} ],
12 : [ {id:3,name:'B1医院'} ],
22 : [ {id:4,name:'C1医院'},{id:5,name:'C2医院'} ]
}
return hospital[v] || [];
}
// 根据名称获取科室（科室都是依附在医院下面的）
if( k === 'name'){
var department = {
1 : [ {id:1,name:'骨科'},{id:2,name:'内科'} ],
2 : [ {id:3,name:'儿科'} ],
3 : [ {id:4,name:'骨科'},{id:5,name:'内科'} ],
4 : [ {id:6,name:'儿科'} ],
5 : [ {id:7,name:'骨科'},{id:8,name:'内科'} ]
}
return department[v] || [];
}
return [];
}
$.fn.uiCascading = function(){
// 每个select更新，就清理后面所有 select 为初始化状态
// 并且根据当前 select 的值，获得下一个 select 的数据，并且更新
var ui = $(this);
var selects = $('select',this);
// 每个select
selects
.on('updateOptions',function(evt,ajax){
var select = $(this);
select.find('option[value!=-1]').remove();
if(ajax.data.length<1){
return true;
}
for(var i=0,j=ajax.data.length;i<j;i++){
var k = ajax.data[i].id;
var v = ajax.data[i].name;
select.append( $('<option>').attr('value',k).text(v) );
}
return true;
})
.on('change',function(){
var changeIndex = selects.index(this);
var k = $(this).attr('name');
var v = $(this).val();
var data = getData(k,v);
selects.eq(changeIndex+1).triggerHandler('updateOptions',{ data:data });
ui.find('select:gt('+(changeIndex+1)+')').each(function(){
$(this).triggerHandler('updateOptions',{ data:[] });
})
})
// 初始化
selects.find('option:first').attr('value','-1'); // 特殊初始值标记
selects.eq(0).triggerHandler('updateOptions',{ data:getData() }); // apply 传参
}
//页面脚本逻辑
$(function () {
$('.ui-search').uiSearch();
$('.content-tab').uiTab('.caption >.item','.block > .item');
$('.content-tab .block .item').uiTab('.block-caption > a','.block-wrap','block-caption-');
$('.body').uiBackTop();
$('.ui-slider').uiSlider();
$('.ui-cascading').uiCascading();
});
data.js
var storage = {};
storage.hospital = [];
storage..department = [];
var AjaxRemoteGetData = {};
AjaxRemoteGetData.getDistinctArea = function(){
}
AjaxRemoteGetData.getLevelByArea = function( area ){
var map={};
var arr=['医院等级']；
for(i=1,j=storage.hospital.length ; i<j ; i++){
var _area = storage.hospital[i][0];
var level = atorage.hospital[i][1];
if(area == _area){
map[level] = 1;
}
}
for(k in map){
arr.push(k);
}
return arr;
}
AjaxRemoteGetData.getNameByAreaAndLevel = function( area ,level ){
}
AjaxRemoteGetData.getDepartmentArrByHospitalName = function( area ,level,hospitalName){
}
这些代码仅供参考哈
需要源码的在下方评论留邮箱。