科室排班应该怎么做呢
<!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>Document</title>
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/ui.css">
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div 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 class="header">
<div class="wrap">
<a class="logo" href="index.html"><img src="./img/logo.png" alt="logo"></a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
<div class="nav">
<div class="wrap clearfix">
<a href="#2" class="link">首页</a>
<a href="#2" class="link">按医院挂号</a>
<a href="#2" class="link">按科室挂号</a>
<a href="#2" class="link">按疾病挂号</a>
<a href="#2" class="link">最新公告</a>
<a href="#2" class="link right">社会知名医院</a>
</div>
</div>
<div class="hospital_main">
<div class="wrap all clearfix">
<div class="caption clearfix">
<div class="item-name">北京协和医院<span class="item-name-dd">关注医院</span></div>
<div class="item-info">
<span class="info-item">等级：</span>三级甲等
<span class="info-item">区域：</span>东城区
<span class="info-item">分类：</span>中国医科院所属医院
</div>
</div>
<div class="main-content">
<img class="main-content-left" src="./img/hospital-1.jpg" alt="">
<div class="main-content-center">
<div class="item">[东院]北京市东城区帅园府一号 [西院]北京市西城区大木仓胡同41号</div>
<div class="item">http：//www.pumch.cn/</div>
<div class="item">东院咨询台：010-69155564:；西院咨询台：010-69158010</div>
<div class="item">东院：106,108,110,111,684,685到东单路口北；41,104快，814到东单路口南
；1,52,728,802到东单路口西；20,25,37,39到东单路口东
东院：106,108,110,111,684,685到东单路口北；41,104快，814到东单路口南
；1,52,728,802到东单路口西；20,25,37,39到东单路口东建须知。
</div>
</div>
<img class="main-content-right" src="./img/map-1.png" alt="">
</div>
</div>
</div>
<!-- <div class="hospital_info">
<div class="wrap clearfix all1">
<div class="content-tab">
<div class="caption">
<a href="#" class="item item_focus">预约挂号</a>
<a href="#" class="item">医院介绍</a>
<a href="#" class="item">预约须知</a>
<a href="#" class="item">停诊信息</a>
<a href="#" class="item">查询取消</a>
</div>
<div class="block">
<div class="item">
<div class="one">
<div class="left">
<p class="special">开放预约科室</p>
<table>
<tr>
<td>2301</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
</tr>
<tr>
<td>专科</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
</tr>
<tr>
<td>内科</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
</tr>
<tr>
<td>内科</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
<td>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
<a href="./index1.html">特殊门诊科</a>
</td>
</tr>
</table>
</div>
<div class="right">
<div class="content">
<p class="special">预约规则<span class="one">（更新时间每日8:30更新）</span></p>
<p>预约周期：<span>7天</span></p>
<p>放号时间：<span>8:30</span></p>
<p>停挂时间：<span>下午14:00停止次日预约挂号（周五停挂至下周一）</span></p>
<p>退号时间：<span>就诊前一工作日14点取消</span></p>
<p>特殊规则：<span class="special2">1、午14:00停止次日预约挂号（周五停挂至下周一）
午14:00停止次日预约挂号（周五停挂至下周一）
午14:00停止次日预约挂号（周五停挂至下周一）
午14:00停止次日预约挂号（周五停挂至下周一）
午14:00停止次日预约挂号（周五停挂至下周一）
</span></p>
</div>
</div>
</div>
</div>
<div class="item" style="display: none">
<div class="introduce">
<p>北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生纪委指定的
全国疑难重症诊治指导中心，也是最早承担高干保健和外宾医疗任务的医院之一，以学科齐全、
技术力量雄厚、特色专科突出、多学科综合优势强大享誉海内外。在2010、2011、2012/2013
、2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年列榜首。
</p>
<p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。20
余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三
基、三眼的现代教学理念，形成了以”教授、病案、图书馆“著称的协和”“三宝”，培养造就了张孝
钱、林巧等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大批的医学管理人才，创建了
当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“
待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感新办院理念。
</p>
<p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。20
余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三
基、三眼的现代教学理念，形成了以”教授、病案、图书馆“著称的协和”“三宝”，培养造就了张孝
钱、林巧等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大批的医学管理人才，创建了
当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“
待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感新办院理念。
</p>
<p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。20
余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三
基、三眼的现代教学理念，形成了以”教授、病案、图书馆“著称的协和”“三宝”，培养造就了张孝
</p>
</div>
</div>
<div class="item" style="display: none">
<div class="rule">
<h3>北京协和医院预约挂号须知</h3>
<p class="special">电话预约挂号</p>
<p class="special">网络预约挂号：http://www.bjguahao.gov.cn</p>
<p>根据卫生部8月5日通知和卫生局工作部署，北京协和医院已完成电话、网络预约挂号的流程建设、现将预约挂号、
取号有关事项公布如下，请认真阅读
</p>
<p class="special">一、预约时间范围：</p>
<p>1、您可预约7天内（试点）医院每天下午16:00投放第7日新号源，各银行可挂号时间请参阅各银行ATM机开放时间和个人网银的开放时间。</p>
<p>2、as单aspdas</p>
<p>3、周五停挂至周一</p>
<p class="special">二、预约实名制：</p>
<p>统一平台电话预约和网上预约挂号均采用实名制注册预约，请您如实提供就诊人员的真实姓名有效证件号（身份证）
性别、电话、手机号码等基本有效信息
</p>
<p class="special">三、预约取号：</p>
<p>1、预约成功后，请患者就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息
（核对与预约登记实名信息一致的本人有效证件和预约识别码）和取号，如验证不符则医院不能提供相应的诊疗
服务。如果没有协和医院就诊卡者，请先办好就诊卡后再取号。
</p>
<p>2、取号时间：上午就诊患者，就诊当日早以前取号。下午就诊患者就诊当如下午之间取号。过时未取号者，预约作废</p>
<p>3、取号地点：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号，请保持电话畅通。</p>
<p class="special">四、医生停诊：</p>
<p>如遇特殊情况医生听诊，跟您造成的不便敬请谅解。医生临时停诊工作人员，工作人员会用电话方式及时通知您，请配合，保湿电话畅通</p>
<p class="special">五、取消预约：</p>
<p>挂出的预约号如办理退号，至少在就诊前一工作日14:00前通过网站或者114电话预约识别码进行取消</p>
<p class="special">六、爽约处理：</p>
<p>1、如预约成功后某患者未能时就诊且不办理取消预约号视为爽约</p>
<p>2、一年内（自然年）无故爽约累计达到3次的爽约用户将进入系统爽约名单。此后三个月内将取消预约挂号资格；一年内爽约6次，取消6个月的预约挂号资格。</p>
<p class="special">七、其他注意事项：</p>
<p>1、如预约成功后某患者未能时就诊且不办理取消预约号视为爽约</p>
<p>2、一年内（自然年）无故爽约累计达到3次的爽约用户将进入系统爽约名单。此后三个月内将取消预约挂月的预约挂号资格。</p>
</div>
</div>
<div class="item" style="display: none">
<div class="message">
<h3>停诊信息</h3>
<table>
<tr>
<td>日期</td>
<td>星期</td>
<td>时段</td>
<td>科室</td>
<td>特长</td>
<td>职称</td>
<td>挂号费</td>
<td>可挂号数</td>
<td>剩余号数</td>
<td>替换方式</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr><td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>眼科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
</table>
</div>>
</div>
<div class="item" style="display: none">
<div class="sousuo">
<div>预约识别码：</div>
<input type="text" name="search-content">
<a href="#" class="submit">查询订单</a>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div id="footer" class="footer">
Copyright © 2017慕课网版权所有
</div>
<a href="#" class="go-top"></a>
<script type="text/javascript" src="./js/ui.js"></script>
</body>
</html>
/* #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: 12px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 31px;
/* background-color: orange; */
}
/* #nav 模块内样式 */
.nav .link{
display: inline-block;
float: left;
margin-left: 30px;
line-height: 36px;
color: #fff;
text-align: center;
padding:0 5px;
}
.nav .right{
float: right;
}
.nav .link:hover{
background-color: #87CEEB;
cursor: pointer;
}
/* #hospital_main 模块内样式 */
.hospital_main .wrap .caption{
width: 960px;
height: 40px;
margin: 20px;
position: absolute;
border-bottom: 1px solid gray;
/* padding-bottom: 20px; */
}
.hospital_main .wrap .caption .item-name{
float: left;
font-size: 16px;
}
.hospital_main .wrap .caption .item-name .item-name-dd{
font-size: 10px;
color: orange;
top:10px;
padding-left: 10px;
}
.hospital_main .wrap .caption .item-info{
float: right;
color: #000;
font-size: 13px;
}
.hospital_main .wrap .caption .item-info .info-item{
color: blue;
}
.main-content {
position: absolute;
top: 60px;
margin: 20px;
float: left;
}
.main-content img{
display: block;
width: 200px;
height: 200px;
float: left;
}
.main-content-center{
font-size: 13px;
width: 500px;
float: left;
margin: 10px 20px 10px;
}
.main-content-center .item{
position: relative;
padding-bottom: 12px;
padding-left: 30px;
color: #868686;
}
.main-content-center .item:before{
content: ' ';
display: block;
width: 22px;
height: 21px;
position: absolute;
left: 0;
top: 1px;
background: url('../img/icon-web.png') 5px 0 no-repeat;
}
.main-content-center .item:nth-child(2):before{
background-position-y: -22px;
}
.main-content-center .item:nth-child(3):before{
background-position-y: -60px;
}
.main-content-center .item:nth-child(4):before{
background-position-y: -80px;
}
/*医院介绍*/
.content-tab{
background: none;
}
.content-tab .caption{
height: 34px;
line-height: 34px;
border-bottom: 2px solid #60bff2;
}
.content-tab .caption .item{
display: block;
width: 112px;
height: 34px;
text-align: center;
float: left;
color: #00b3ea;
}
.content-tab .caption .item_focus{
background-color: #60bff2;
color: #fff;
}
.content-tab .block{
/* border: 2px solid black; */
width: 100%;
margin-top: 20px;
}
/*医院介绍*/
.content-tab .block .item .introduce p{
font-size: 14px;
color: gray;
line-height: 20px;
margin: 20px 20px 0px;
text-indent: 20px;
}
/*预约须知*/
.content-tab .block .item .rule h3{
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
.content-tab .block .item .rule p{
font-size: 10px;
color: black;
line-height: 25px;
margin: 0px 20px 0px;
}
.content-tab .block .item .rule .special{
font-weight: bold;
padding-top: 20px;
}
/*停诊信息*/
.content-tab .block .item .message h3{
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
.content-tab .block .item .message table{
border-right:1px solid #868686;border-bottom:1px solid #868686;
color: #868686;
font-size: 13px;
text-align: center;
margin: 0 auto;
border-collapse: collapse;
}
.content-tab .block .item .message table td{
border-left:1px solid #868686;border-top:1px solid #868686;
padding: 10px;
text-align: center;
}
/*查询取消*/
.content-tab .block .item .sousuo{
margin: 0 auto;
height: 100px;
width: 400px;
padding-top: 100px;
}
.content-tab .block .item .sousuo div{
display: inline;
}
.content-tab .block .item .sousuo input{
width: 150px;
height: 20px;
line-height: 20px;
font-size: 13px;
color: #A5A2A2;
border: 1px solid #868686;
}
.content-tab .block .item .sousuo a{
display: inline-block;
background-color:#00b3ea;
color: #fff;
width: 70px;
height: 24px;
line-height: 24px;
font-size: 14px;
border:1px solid #00b3ea;
border-radius: 10px;
text-align: center;
}
/*预约挂号*/
.content-tab .block .item .one{
margin: 0 auto;
height: 500px;
}
/*右边*/
.content-tab .block .item .one .right{
width: 300px;
height: 300px;
overflow: auto;
float:right;
}
.content-tab .block .item .one .right .content{
width: 270px;
height: 800px;
border: 1px solid #f7f7f7;
}
.content-tab .block .item .one .right .content p{
font-size: 13px;
padding: 15px 0px 0px 15px;
color: #868686;
}
.content-tab .block .item .one .right .content p span{
display: block;
}
.content-tab .block .item .one .right .content .special{
font-size: 16px;
padding: 15px 0px 15px 15px;
background-color: #F7F7F7;
}
.content-tab .block .item .one .right .content .special span{
font-size: 14px;
padding: 15px 0px 15px 15px;
color: #00b3ea;
display: inline;
}
/*左边*/
.content-tab .block .item .one .left{
width: 600px;
height: 500px;
float:left;
}
.content-tab .block .item .one .left .special{
font-size: 16px;
padding: 15px 0px 15px 15px;
background-color: #F7F7F7;
color: #868686;
}
.content-tab .block .item .one .left table{
border-right:1px solid #868686;border-bottom:1px solid #868686;
color: #868686;
font-size: 13px;
text-align: center;
margin: 0 auto;
border-collapse: collapse;
margin-top: 10px;
}
.content-tab .block .item .one .left table td{
border-left:1px solid #868686;border-top:1px solid #868686;
padding: 10px;
text-align: center;
}
.content-tab .block .item .one .left table td a{
display: block;
color:#868686;
margin: 10px;
}
*{
margin: 0;
padding: 0;
}
p{
margin: 0;
padding: 0;
/* display: inline-block; */
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: 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: 100px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.all{
height: 300px;
background-color: #F7F7F7;
margin-top: 38px;
}
.all1{
/* height: 300px; */
margin-top: 20px;
margin-bottom: 20px;
}
.footer{
width: 100%;
height: 70px;
background-color: #eceef2;
line-height: 70px;
text-align: center;
font-size: 12px;
color: #acacac;
}
/* 搜索 */
.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;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
line-height: 38px;
}
.ui-search-select-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top: 36px;
z-index: 2;
}
.ui-search-select-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
top: 5px;
left:73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}
// ui-search 定义
$.fn.UiSearh = 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').text( $(this).text() );
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
// 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(){
var index = $(this).index();
tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
cons.hide().eq(index).show();
return false;
})
}
// 页面的脚本逻辑
$(function () {
$('.ui-search').UiSearh();/*搜索*/
$('.content-tab').UiTab('.caption > .item','.block > .item');
});
正在回答
同学你好，老师给同学提供个思路，同学可以参考一下：
（1）先准备一个容器schedule_box，这个外层盒子只能显示一周的日期，可以给schedule_box一个固定宽度，来显示一周的日期，再准备一个schedule_box_wrap的盒子来存放动态生成的七周日期，因为七周日期很多，所以schedule_box_wrap占据的宽度会很宽，所以同学可以给容器schedule_box设置溢出隐藏，界面上就只显示一周的日期。思路跟实现轮播图是差不多的，页面上只显示一张图片，其他的被隐藏。
（2）再实现一个动态生成日期的函数，下部分的代码中，一个for循环内部是一天的排班，也就是一列的内容，将生成的日期通过html.push()方法放到容器schedule_box_wrap中，一共循环了七周49天。参考：
（3）处理按钮，当点击的时候能进行左右切换：
老师只是给同学提供一个思路，同学可以再将样式部分完善一下。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星