Jquery實現掛號平臺首頁源碼2

時間 2020-01-06

原文原文鏈接

第二個版本：點擊預定掛號可跳轉到排班表，獲取以後7個星期的排班css

先放圖html

首先是index.htmljquery

<!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">歡迎來到城市醫院預定掛號統一平臺&nbsp;請&nbsp;
            <a href="">登陸</a>
            <a href="">註冊</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <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">&nbsp;</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>1、預定時間範圍：010(24小時）</span><br>一、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>二、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>三、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。</p>
                        
                        <p class="p-about"><span>2、預定實名制：</span><br>北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。它隸屬於中國協和醫科大學(2006年改成北京協和醫學院/清華大學醫學部)。</p>
                        
                        <p class="p-about"><span>3、預定掛號：</span><br>一、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>二、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>三、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。</p>
                        
                        <p class="p-about"><span>4、醫生停診</span><br>2017年11月11日下午，復旦大學醫院管理研究所正式發佈了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》。</p>
                        
                        <p class="p-about"><span>5、醫生停診</span><br>2017年11月11日下午，復旦大學醫院管理研究所正式發佈了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》。</p>
                        
                        <p class="p-about"><span>6、爽約處理：</span><br>一、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>二、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。</p>
                        
                        <p class="p-about"><span>7、其餘注意事項：</span><br>一、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。<br>二、北京協和醫院是一所位於北京市東城區，集醫療、科研、教學爲一體的大型綜合醫院。</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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 &copy; 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.cssapp

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.jside

//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.htmlui

<!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">歡迎來到城市醫院預定掛號統一平臺&nbsp;請&nbsp;
            <a href="">登陸</a>
            <a href="">註冊</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <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">&nbsp;</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 &copy; 2019 XXX版權全部
    </div>
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/ui.js"></script>
</body>
</html>

detail.cssthis

.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;
}