Jquery实现挂号平台首页源码2
程序员文章站
2022-06-23 22:36:28
第二个版本：点击预约挂号可跳转到排班表，获取之后7个星期的排班 先放图 首先是index.html index
第二个版本：点击预约挂号可跳转到排班表，获取之后7个星期的排班
先放图
首先是index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<!-- 框架 -->
<link rel="stylesheet" href="css/layout.css">
<!-- 基本样式 -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/ui.css">
</head>
<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">
<a href="#" class="logo"><img src="./img/logo.png" alt=""></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 id="nav" class="nav">
<div class="wrap">
<a href="" class='link'>首页</a>
<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>
<!-- 简介 -->
<div id="about" class="about">
<div class="wrap">
<div class="a-title">
<div class="a-title-left">
<span>北京协和医院</span>
<span class="yellow">关注医院</span>
</div>
<div class="a-title-right">
<span><a href="">等级：</a>三级甲等</span>
<span><a href="">区域：</a>东城区</span>
<span><a href="">分类：</a>中国医科院所属医院</span>
</div>
</div>
<div class="a-content">
<div class="a-content-left"><img src="img/hospital-1.jpg" alt=""></div>
<div class="a-content-center">
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文原意为“客人”。</span></div>
<div class="text"><span class="t-span">医院（hospital）一词</span></div>
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文</span></div>
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。</span></div>
</div>
<div class="a-content-right"><img src="img/map-1.png" alt=""></div>
</div>
</div>
</div>
<!-- tab框 -->
<div id="content" class="content">
<div class="wrap clearfix">
<div class="content-tab">
<!-- tab导航 -->
<div class="caption">
<a href="#8" class="item item_focus">预约挂号</a>
<a href="#7" class="item">医院介绍</a>
<a href="#6" class="item">预约须知</a>
<a href="#5" class="item">停诊信息</a>
<a href="#4" class="item">查询取消</a>
</div>
<!-- tab内容 -->
<div class="block">
<!-- 预约挂号 -->
<div class="item">
<table class='table1' cellpadding='0' cellspacing='0' rules="rows">
<tr class="bg1">
<td colspan="2">开放预约科室</td>
</tr>
<tr>
<td class="bg2">2301</td>
<td>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
<a href="detail.html">特殊门诊科</a>
</td>
</tr>
<tr>
<td class="bg2">专科</td>
<td>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
</td>
</tr>
<tr>
<td class="bg2">内科</td>
<td>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
</td>
</tr>
<tr>
<td class="bg2">内科</td>
<td>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
<a href="detail.html">麻醉科</a>
</td>
</tr>
</table>
<!-- 预约规则 -->
<div class="content-news">
<div class="caption2"> 预约规则 <a href="" class="more">(更新时间，每日8:30更新)</a></div>
<div class="list">
<table class="table3">
<tr>
<td class="left">预约周期：</td>
<td>7天</td>
</tr>
<tr>
<td class="left">房号时间：</td>
<td>8:30</td>
</tr>
<tr>
<td class="left">预约周期：</td>
<td>(更新时间，每日8:30更新)(更新时间，每日8:30更新)</td>
</tr>
<tr>
<td class="left">预约周期：</td>
<td>(更新时间，每日8:30更新)</td>
</tr>
<tr>
<td class="left">特殊规则：</td>
<td>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，*卫生部指定的诊治疑难重症的技术指导中心之一。<br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，*卫生部指定的诊治疑难重症的技术指导中心之一。</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 医院介绍 -->
<div class="item" style="display: none">
<p class="t-about">北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，*卫生部指定的诊治疑难重症的技术指导中心之一。</p>
<p class="t-about">北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。</p>
<p class="t-about">2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首 [1] 。</p>
<p class="t-about">2018年12月4日消息，被国家卫健委公布为首批肿瘤多学科诊疗试点医院。 [2] 2019年11月10日，复旦版《2018年度中国医院排行榜》发布，北京协和居首。</p>
</div>
<!-- 预约须知 -->
<div class="item" style="display: none">
<p class="p-title">北京协和医院预约挂号须知</p>
<p class="p-about"><span>电话预约挂号：010(24小时）</span></p>
<p class="p-about"><span>网络预约挂号：010(24小时）</span><br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院。</p>
<p class="p-about"><span>一、预约时间范围：010(24小时）</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p>
<p class="p-about"><span>二、预约实名制：</span><br>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)。</p>
<p class="p-about"><span>三、预约挂号：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>3、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p>
<p class="p-about"><span>四、医生停诊</span><br>2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。</p>
<p class="p-about"><span>五、医生停诊</span><br>2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。</p>
<p class="p-about"><span>六、爽约处理：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p>
<p class="p-about"><span>七、其他注意事项：</span><br>1、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。<br>2、北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。</p>
<p class="p-footer">北京协和医院</p>
</div>
<!-- 停诊信息 -->
<div class="item" style="display: none">
<p class="p-title">停诊信息</p>
<table class='table1 table2' cellpadding='0' cellspacing='0' rules='all'>
<tr>
<td>日期</td>
<td>星期</td>
<td>时段</td>
<td>科室</td>
<td>特长</td>
<td>职称</td>
<td>挂号费</td>
<td>可挂号数</td>
<td>剩余号数</td>
<td>替换方式</td>
</tr>
<tr>
<td>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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 class="item" style="display: none">
<div class='inner'>
<div class="i-wrap">
<label for="">预约识别码：</label>
<input type="text">
<input type="button" value="查询订单">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div id="footer" class="footer">
copyright © 2019 xxx版权所有
</div>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/ui.js"></script>
</body>
</html>
layout.css
body{
margin:0;
padding:0;
}
.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;
}
.content{
width:1000px;
margin:0 auto;
padding:10px 0 38px 0;
margin-top: 42px;
}
.content-tab{
float:left;
width:1000px;
background-color:#eee;
}
.content-news{
float:right;
width:285px;
border:1px solid #ccc;
}
.footer{
height:132px;
padding:25px 0;
background-color:#eceef2;
}
base.css
p{
margin:0;
padding:0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border:none;
outline:none;
}
.right{
float: right !important;
}
/*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;
float: left;
padding-left:30px;
line-height:36px;
color:#fff;
font-size:16px;
min-width:80px;
text-align: center;
}
.nav .link_focus{
color: #fff;
background-color: #1fa4f0;
padding: 0 20px;
}
.nav a:hover{
color:#d7f3ff;
}
.nav .menu{
width:130px;
padding-right:30px;
background-color:#1fa4f0;
position: relative;
}
.nav .menu .menu-list{
background-color:#1fa4f0;
width:100%;
height:423px;
position: absolute;
left:0;
top:36px;
}
/*简介模块样式*/
.about{
height:250px;
margin-top: 30px;
}
.about .wrap{
background:#f5f5f5;
width:960px;
height:230px;
padding: 20px;
}
.a-title{
width:1000;
height:50px;
border-bottom:1px solid #ddd;
}
.a-title-left{
float:left;
}
.a-title-right{
float:right;
}
.a-title-right span{
font-size: 13px;
margin-right:5px;
}
.a-title-right span a{
color:blue;
}
.yellow{
color: #fec009;
font-size: 13px;
margin-left: 5px;
}
.a-content{
width:100%;
height:150px;
}
.a-content-left{
float:left;
width:200px;
padding-top: 10px;
}
.a-content-center{
float:left;
width:450px;
font-size:13px;
padding: 23px;
}
.a-content-center .text{
position: relative;
height: 24px;
line-height: 24px;
font-size: 12px;
text-indent: 28px;
color:#868686;
}
.a-content-center .text:nth-child(2) .t-span:before {
background-position-y: -18px;
}
.a-content-center .text:nth-child(3) .t-span:before {
background-position-y: -36px;
}
.a-content-center .text:nth-child(4) .t-span:before {
background-position-y: -54px;
}
.t-span:before{
content: '';
display: block;
width: 22px;
height: 18px;
position: absolute;
left: 0;
top: 1px;
background: url(../img/icon-tel.png) 0 0 no-repeat;
}
.a-content-right{
float: right;
width: 250px;
padding-top: 10px;
}
.a-content-right img{
width: 249px;
height: 172px;
}
/*content模块样式*/
/*预约挂号*/
.table1{
border:1px solid #f5f5f5;
width: 70%;
float: left;
}
.bg1{
background-color: #f5f5f5;
height: 30px;
line-height: 30px;
}
.bg2 {
width: 20%;
background-color: rgb(242,252,254);
text-align: center;
vertical-align: top;
color:#868686;
font-size:15px;
}
.table1 td{
padding:10px;
}
.bg1 td{
padding-left: 25px;
}
.table1 td a{
color: #000;
display: inline-block;
width: 123px;
font-size: 15px;
height: 25px;
}
/*医院介绍*/
.t-about {
text-indent: 2em;
font-size: 15px;
line-height: 25px;
margin-bottom: 10px;
}
/*预约须知*/
.p-title{
display: block;
font-weight:bold;
font-size:18px;
text-align:center;
margin-bottom: 15px;
margin-top: 15px;
}
.p-about{
display: block;
font-size:14px;
margin-bottom: 15px;
line-height: 25px;
}
.p-about span{
font-weight:bold;
}
.p-footer{
margin-top: 35px;
display: block;
text-align: center;
font-weight:bold;
}
/*停诊信息*/
.table2{
width:100%;
}
.table2 td {
padding: 10px;
font-size: 13px;
text-align: center;
}
/*查询取消*/
.inner{
margin: 0 auto;
height: 250px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
text-align: center;
margin-top: 50px;
}
.i-wrap{
width: 400px;
margin: 0 auto;
margin-top: 90px;
}
.i-wrap input{
border:1px solid #ddd;
height: 23px;
}
.i-wrap input[type="button"]{
width: 101px;
background-color: #60bff2;
color: #fff;
height: 27px;
border:none;
}
/*预约规则*/
.content-news{
background-color:#fff;
border:1px solid #f4f6fa;
}
.content-news .caption2{
height:48px;
line-height:48px;
background-color:#f4f6f6;
text-indent:20px;
color:#868686;
font-size:15px;
}
.content-news .more{
font-size:12px;
color:#00b3ea;
}
.content-news .list{
font-size:12px;
padding: 5px;
overflow-y: scroll;
height:300px;
}
.content-news .list .link{
display: block;
color:#969696;
}
.table3 td{
height: 21px;
line-height: 21px;
color:#868686;
}
.table3 td.left{
width: 26%;
vertical-align:top;
color:#444;
}
.content-tab{
background:none;
}
.content-tab .caption{
height:34px;
line-height:34px;
margin-bottom: 25px;
border-bottom:1px solid #00b3ea;
}
.content-tab .caption .item{
display: block;
width:112px;
height:34px;
text-align:center;
float:left;
color:#00b3ea;
font-size: 15px;
}
.content-tab .caption .item_focus{
background-color:#60bff2;
color:#fff;
}
.content-tab .block{
float: left;
width:1000px;
}
/*底部*/
.footer{
height: 70px;
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
ui.css
/*搜索*/
.ui-search{
background:url(../img/ui-search.jpg) center no-repeat;
font-size:14px;
color:#fff;
}
.ui-search-selected{
width:70px;
height:38px;
line-height:38px;
position: absolute;
left:0;
top:0;
text-indent:14px;
}
.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:71px;
line-height:26px;
font-size:13px;
color:#a5a2a2;
}
.ui-search-submit{
display: block;
position: absolute;
right:0;
top:1px;
width:40px;
height:36px;
}
/*ui-menu分类菜单*/
.ui-menu{}
.ui-menu-item{
height:22px;
line-height:22px;
padding:8px 5px 9px 6px;
margin-left:2px;
}
.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;
}
.ui-menu-item-department:before{
content:'';
display: block;
width:22px;
height:21px;
position: absolute;
left:0;
top:1px;
background:url(../img/icon-menu.jpg) -22px 0 no-repeat;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
background-position-y:-22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
background-position-y:-66px;
}
.ui-menu-item-disease{
font-size:12px;
float: right;
padding-left:5px;
color:#d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position:0;
}
.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-detail{
display: none;
position: absolute;
width:500px;
height:393px;
padding:20px 10px 10px 29px;
background:#fff url(../img/bg-menu.jpg) center no-repeat;
top:0;
left:190px;
box-shadow:5px 5px 2px rgba(0,0,0,.1);
z-index: 99;
}
.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;
color:#666;
font-size:16px;
font-weight:bold;
}
.ui-menu-item-detail-group-list{
line-height:23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color:#868686;
margin-right:12px;
padding-bottom:5px;
}
.ui-menu-item-detail-group-list a:after{
content:'|';
color:#ddd;
padding-left:12px;
}
/*回到顶部*/
.ui-backtop{
display: none;
position: fixed;
right: 2px;
bottom:2px;
z-index:9;
width:40px;
height:40px;
color:#fff;
background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backtop:hover{
background:rgba(102,102,102,.9);
}
.ui-backtop:hover:after{
content:'回到顶部';
display: block;
line-height:20px;
text-align:center;
}
/*ui-slider幻灯片组件*/
.ui-slider{
width:544px;
height:414px;
position: relative;
overflow:hidden;
}
.ui-slider-wrap{
width:99999px;
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;
position: absolute;
margin-top:-20px;
top:50%;
}
.ui-slider-arrow .item{
display: block;
width:40px;
height:40px;
position: absolute;
top: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_focus,
.ui-slider-process .item:hover{
background-position: -23px 0;
}
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').text($(this).text());
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
//ui-tab
/**
* [uitab description]
* @param {[type]} header [tab选项卡切换部分classname]
* @param {[type]} content [tab选项卡内容区域部分classname]
* @param {[type]} focus_prefix [tab选项卡高亮样式前缀，可选]
*/
$.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;
})
}
//ui-backtop
$.fn.uibacktop=function(){
var ui=$(this);
var el=$('<a class="ui-backtop" href="#0"></a>');
ui.append(el);
var windowheight=$(window).height();
$(window).on('scroll',function(){
var top = $("body").scrolltop() || $(document).scrolltop();
if(top>windowheight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrolltop(0);
});
}
//ui-排班表
$.fn.uidate=function(){
// 循环计算日期
var table=$('.d-date-table');
for(var i=0;i<49;i++){
//生成单日元素
var column=$("<div class='d-date-table-column'></div>");
table.append(column);
//插入星期日期
var div1=$("<div class='d-date-table-title'></div>");
column.append(div1);
var span1=$("<span class='daytext'></span>");
var br=$("<br>");
var span2=$("<span class='datetext'></span>");
div1.append(span1);
div1.append(br);
div1.append(span2);
//插入其他元素
var div2=$("<div class='d-date-table-item'></div>");
var div3=$("<div class='d-date-table-item spe'>约满</div>");
var div4=$("<div class='d-date-table-item'></div>");
column.append(div2);
column.append(div3);
column.append(div4);
var daytext=$('.daytext').eq(i);
var datetext=$('.datetext').eq(i);
//计算明天日期
var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var data = new date();
data.settime(data.gettime()+24*60*60*1000*i);
var year = data.getfullyear();//年
var month= data.getmonth()+1;//月
var date = data.getdate();//日
var day= week[data.getday()];//星期
//显示星期和日期
daytext.html(day);
datetext.html(year+'-'+month+'-'+date);
}
//获取元素
var leftbtn=$('#leftbtn');
var rightbtn=$('#rightbtn');
var table=$('.d-date-table');
//预定义
var current=0;
var width=$('.d-date').width();
//点击事件
leftbtn.on('click',function(){
current--;
if(current<=0){
current=0;
}
table.css('left',current*width*-1);
});
rightbtn.on('click',function(){
current++;
if(current>=6){
current=6;
}
table.css('left',current*width*-1);
});
console.log(current);
}
//页面的脚本逻辑
$(function(){
$('.ui-search').uisearch();
$('.content-tab').uitab('.caption>.item','.block>.item');
$('body').uibacktop();
$('body').uidate();
})
然后是detail.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detail</title>
<!-- 框架 -->
<link rel="stylesheet" href="css/layout.css">
<!-- 基本样式 -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/ui.css">
<!-- 科室排班表样式 -->
<link rel="stylesheet" href="css/detail.css">
</head>
<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">
<a href="#" class="logo"><img src="./img/logo.png" alt=""></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 id="nav" class="nav">
<div class="wrap">
<a href="" class='link'>首页</a>
<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>
<!-- 简介 -->
<div id="about" class="about">
<div class="wrap">
<div class="a-title">
<div class="a-title-left">
<span>北京协和医院</span>
<span class="yellow">关注医院</span>
</div>
<div class="a-title-right">
<span><a href="">等级：</a>三级甲等</span>
<span><a href="">区域：</a>东城区</span>
<span><a href="">分类：</a>中国医科院所属医院</span>
</div>
</div>
<div class="a-content">
<div class="a-content-left"><img src="img/hospital-1.jpg" alt=""></div>
<div class="a-content-center">
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文原意为“客人”。</span></div>
<div class="text"><span class="t-span">医院（hospital）一词</span></div>
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文</span></div>
<div class="text"><span class="t-span">医院（hospital）一词是来自于拉丁文原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。</span></div>
</div>
<div class="a-content-right"><img src="img/map-1.png" alt=""></div>
</div>
</div>
</div>
<!-- 科室排班表 -->
<div id="content" class="content">
<div class="wrap clearfix">
<div class="d-title">
<span class="span1">
科室排班表
<a href="index.html">返回科室列表</a>
</span>
</div>
<div class="d-container">
<div class="d-left">
<div id="leftbtn">
<img src="img/icon-scheduling-left.jpg">
</div>
<div class='d-left-item'>上午</div>
<div class='d-left-item'>下午</div>
<div class='d-left-item'>晚上</div>
</div>
<div class="d-date">
<div class="d-date-table">
<!-- 单天排班信息 -->
<div class="d-date-table-column">
<div class="d-date-table-title">
<span class="daytext">星期二</span>
<br>
<span class="datetext">2019-11-20</span>
</div>
<div class="d-date-table-item"></div>
<div class="d-date-table-item spe">约满</div>
<div class="d-date-table-item"></div>
</div>
</div>
</div>
<div class="d-right">
<div id="rightbtn">
<img src="img/icon-scheduling-right.jpg">
</div>
<div class='d-right-item'></div>
</div>
<div class="d-rule">
<span class="d-rule-title">预约规则</span>
<span class="d-rule-subtitle">预约周期：</span>
<span>7天</span>
<span class="d-rule-subtitle">预约周期：</span>
<span>7天</span>
<span class="d-rule-subtitle">预约周期：</span>
<span>7天</span>
<span class="d-rule-subtitle">退号时间：</span>
<span>7天</span>
<span class="d-rule-subtitle">特殊规则：</span>
<span>这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。</span>
</div>
<div class="d-footer">
！您还没有选择就诊日期
</div>
</div>
<div class="d-footer">
</div>
</div>
</div>
<!-- 底部 -->
<div id="footer" class="footer">
copyright © 2019 xxx版权所有
</div>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/ui.js"></script>
</body>
</html>
detail.css
.content{
margin-bottom:30px;
}
.d-title{
margin-bottom:10px;
}
.span1 a{
color:#60bff2;
font-size: 13px;
margin-left:5px;
}
/*内容区域*/
.d-container{
width: 1000px;
height: 320px;
border: 1px solid #f5f5f5;
}
/*左箭头列*/
.d-left{
width:33px;
float: left;
height: 320px;
border: 1px solid #f5f5f5;
cursor:pointer;
position: relative;
z-index:10;
}
.d-left-item{
height: 90px;
background-color:rgb(241,248,255);
line-height: 90px;
text-align:center;
font-size:14px;
}
/*排班表格*/
.d-date{
width:650px;
float: left;
height: 320px;
border: 1px solid #f5f5f5;
overflow: hidden;
position: relative;
}
/*排班表实际容器*/
.d-date-table{
width:4550px;
position: relative;
transition:all 1s;
left:0;
}
/*单列排班*/
.d-date-table-column{
width:92px;
border: 1px solid #f5f5f5;
border-left:0;
border-bottom:0;
height: 320px;
float:left;
}
.d-date-table-column:nth-child(7n){
border-right:0;
}
.d-date-table-title{
height: 44px;
border-bottom: 1px solid #f5f5f5;
border-right: 1px solid #f5f5f5;
border-left:0;
text-align:center;
}
.d-date-table-title span{
font-size:12px;
color:#868686;
}
.d-date-table-item{
height: 90px;
border: 1px solid #f5f5f5;
border-left:0;
border-bottom:0;
}
.d-date-table-item.spe{
text-align: center;
line-height: 90px;
background-color:rgb(225,238,254);
color:#60bff2;
font-size:14px;
}
.d-date-table-item:last-child{
border-bottom:0;
}
/*右箭头列*/
.d-right{
width:33px;
float: left;
height: 320px;
border: 1px solid #f5f5f5;
cursor:pointer;
position: relative;
z-index:10;
}
.d-right-item{
background-color:rgb(241,248,255);
height: 270px;
}
/*预约规则*/
.d-rule{
width: 243px;
height: 286px;
float: left;
padding: 17px;
overflow-y: scroll;
}
.d-rule span{
font-size:13px;
color:#868686;
display: block;
height:25px;
}
.d-rule .d-rule-title{
font-size:18px;
color:#000;
margin-bottom:10px;
}
.d-rule .d-rule-subtitle{
font-size:14px;
color:#000;
}
.d-footer{
text-align: center;
height:70px;
line-height:70px;
font-size:16px;
color:#868686;
border: 1px solid #f5f5f5;
border-top:0;
clear:both;
}
上一篇： goweb-部署与维护
推荐阅读
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
-
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
-
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】