老师帮我看看我的科室排班表的页面布局,感觉写的有问题但是找不出哪里的问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 | index.html <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >城市预约挂号统一平台</ title > < link rel = "stylesheet" href = "css/layout.css" /> < link rel = "stylesheet" href = "css/index.css" /> < link rel = "stylesheet" href = "css/ui.css" /> < script src = "js/jquery-1.7.1.min.js" ></ script > </ 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 > </ p > </ div > </ div > < div id = "header" class = "header" > < div class = "wrap" > < div class = "logo" > < img src = "img/logo.png" /> </ div > < div class = "search ui-search" > < div class = "ui-search-selected" >医院</ div > < div class = "ui-search-select-list" > < a href = "#" >科室</ a > < a href = "#" >疾病</ a > < a href = "#" >医院</ 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 = "#" >首页</ a > < a href = "#" >按医院挂号</ a > < a href = "#" >按科室挂号</ a > < a href = "#" >按疾病挂号</ a > < a href = "#" >最新公告</ a > </ div > </ div > < div class = "hospital_intro" > < div class = "wrap" > < div class = "hospital" > < div class = "hospital_caption" > < p class = "name" >北京协和医院< span class = "subname" >关注医院</ span ></ p > < p class = "info" > < a href = "#" >等级: < span >三级甲等</ span ></ a > < a href = "#" >区域: < span >东城区</ span ></ a > < a href = "#" >分类: < span >中国医科院所属医院</ span ></ a > </ p > </ div > < div class = "hospital_content" > < div class = "left" ></ div > < div class = "center" > < div class = "item" > < i ></ i >< span >[东院]北京市东城区帅府园一号 [西院]北京市西城区大木胡同41号</ span > </ div > < div class = "item" > < i ></ i >< span >http://www.pumch.cn/</ span > </ div > < div class = "item" > < i ></ i >东院咨询台:010-69155564;西院咨询台:010-69158010 </ div > < div class = "item" > < i ></ i >< span >东院:106,108,110,111,116,684,685到东单路口北;41,104块,814到东单路口南;1,52,728,802到东单路口西; 地铁1/5号线到东单。西院:68到比才胡同口;更多乘车路线详见须知</ span > </ div > </ div > < div class = "right" ></ div > </ div > </ div > </ div > </ div > < div class = "hospital_system" > < div class = "wrap" > < div class = "hospital_system_caption" > < a class = "item item_focus" href = "javascript:;" >预约挂号</ a > < a class = "item " href = "javascript:;" >医院介绍</ a > < a class = "item " href = "javascript:;" >预约通知</ a > < a class = "item " href = "javascript:;" >停诊信息</ a > < a class = "item " href = "javascript:;" >查询取消</ a > </ div > < div class = "hospital_system_content" > < div class = "item" > < div class = "appointment_office" > < div class = "appointment_office_caption" >预约开放科室</ div > < div class = "appointment_office_content" > < div class = "item" > < div class = "item_caption" >2301</ div > < div class = "item_content" > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > < a href = "#" onclick = "openSche()" class = "link" >特殊门诊科</ a > </ div > </ div > < div class = "item" > < div class = "item_caption" >专科</ div > < div class = "item_content" > < 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" >门诊麻醉科</ 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" >门诊麻醉科</ a > < a href = "#" class = "link" >门诊麻醉科</ a > </ div > </ div > < div class = "item" > < div class = "item_caption" >内科</ div > < div class = "item_content" > < 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" >肿瘤内科门诊</ 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" >肿瘤内科门诊</ a > < a href = "#" class = "link" >肿瘤内科门诊</ a > </ div > </ div > < div class = "item" > < div class = "item_caption" >内科</ div > < div class = "item_content" > < 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" >特需血液内科</ 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" >特需血液内科</ a > < a href = "#" class = "link" >特需血液内科</ a > </ div > </ div > </ div > </ div > < div class = "rule" > < div class = "rule_caption" >预约规则 < span >(更新时间每日8:30更新)</ span ></ div > < div class = "rule_content" > < div class = "rule_content_item" > < p >预约周期:< span >7天</ span ></ p > </ div > < div class = "rule_content_item" > < p >放号时间:< span >8:30</ span ></ p > </ div > < div class = "rule_content_item" > < p >停挂时间:< span >下午14:00停止次日预约挂号(周五14:00后停挂至下周一)</ span ></ p > </ div > < div class = "rule_content_item" > < p >退号时间:< span >就诊前一工作日14:00前取消</ span ></ p > </ div > < div class = "rule_content_item" > < p >特殊规则:< span >取号地点不同:西园区预约取号地点:西园区门诊一号大厅挂号窗口取号。 东园区预约取号地点:东园区门诊一号大厅挂号窗口取号</ span ></ p > </ div > </ div > </ div > </ div > < div class = "item" style = "display: none" >< img src = "img/page2.jpg" /></ div > < div class = "item" style = "display: none" >< img src = "img/page3.jpg" /></ div > < div class = "item" style = "display: none" >< img src = "img/page4.jpg" /></ div > < div class = "item search" style = "display: none" > < div class = "search_detail" > < span >预约识别码 : </ span > < input type = "text" /> < p class = "button" > < a href = "#" >查询订单</ a > </ p > </ div > </ div > </ div > </ div > </ div > < div id = "footer" class = "footer" > Copyright © 2017慕课网版权所有 </ div > < script src = "js/ui.js" ></ script > < script > function openSche(){ window.open('scheduling.html','_self'); } </ script > </ body > </ html > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | scheduling.html <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >城市预约挂号平台</ title > < link rel = "stylesheet" href = "css/scheduling_layout.css" /> < link rel = "stylesheet" href = "css/scheduling.css" /> < link rel = "stylesheet" href = "css/ui.css" /> < script src = "js/jquery-1.7.1.min.js" ></ script > </ 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 > </ p > </ div > </ div > < div id = "header" class = "header" > < div class = "wrap" > < div class = "logo" > < img src = "img/logo.png" /> </ div > < div class = "search ui-search" > < div class = "ui-search-selected" >医院</ div > < div class = "ui-search-select-list" > < a href = "#" >科室</ a > < a href = "#" >疾病</ a > < a href = "#" >医院</ 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 = "#" >首页</ a > < a href = "#" >按医院挂号</ a > < a href = "#" >按科室挂号</ a > < a href = "#" >按疾病挂号</ a > < a href = "#" >最新公告</ a > </ div > </ div > < div class = "hospital_intro" > < div class = "wrap" > < div class = "hospital" > < div class = "hospital_caption" > < p class = "name" >北京协和医院< span class = "subname" >关注医院</ span ></ p > < p class = "info" > < a href = "#" >等级: < span >三级甲等</ span ></ a > < a href = "#" >区域: < span >东城区</ span ></ a > < a href = "#" >分类: < span >中国医科院所属医院</ span ></ a > </ p > </ div > < div class = "hospital_content" > < div class = "left" ></ div > < div class = "center" > < div class = "item" > < i ></ i >< span >[东院]北京市东城区帅府园一号 [西院]北京市西城区大木胡同41号</ span > </ div > < div class = "item" > < i ></ i >< span >http://www.pumch.cn/</ span > </ div > < div class = "item" > < i ></ i >东院咨询台:010-69155564;西院咨询台:010-69158010 </ div > < div class = "item" > < i ></ i >< span >东院:106,108,110,111,116,684,685到东单路口北;41,104块,814到东单路口南;1,52,728,802到东单路口西; 地铁1/5号线到东单。西院:68到比才胡同口;更多乘车路线详见须知</ span > </ div > </ div > < div class = "right" ></ div > </ div > </ div > </ div > </ div > < div class = "scheduling" > < div class = "wrap" > < div class = "scheduling_caption" >科室排班表< a href = "#" onclick = "openIndex()" >返回科室列表</ a ></ div > < div class = "scheduling_content" > < div class = "scheduling_list" > < div class = "scheduling_list_left" > < div class = "date" >< a href = "#" class = "iconfont icon_left" ></ a ></ div > < div class = "status" >上午</ div > < div class = "status" >下午</ div > < div class = "status" >晚上</ div > </ div > < div class = "scheduling_list_box" > < div class = "scheduling_list_box_wrap clearfix" id = "scheduling_list_box_wrap" > < div class = "scheduling_list_box_item date" > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ div > < div class = "scheduling_list_box_item" > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ div > < div class = "scheduling_list_box_item full" > < div >约满</ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ div > < div class = "scheduling_list_box_item" > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ div > </ div > </ div > < div class = "scheduling_list_right" > < div class = "date" >< a href = "#" class = "iconfont icon_right" ></ a ></ div > < div class = "status" ></ div > < div class = "status" ></ div > < div class = "status" ></ div > </ div > </ div > < div class = "scheduling_rule" > < div class = "scheduling_rule_caption" >预约规则</ div > < div class = "scheduling_rule_content" > < div class = "rule_content_item" > < p >预约周期:< span >7天</ span ></ p > </ div > < div class = "rule_content_item" > < p >放号时间:< span >8:30</ span ></ p > </ div > < div class = "rule_content_item" > < p >停挂时间:< span >下午14:00停止次日预约挂号(周五14:00后停挂至下周一)</ span ></ p > </ div > < div class = "rule_content_item" > < p >退号时间:< span >就诊前一工作日14:00前取消</ span ></ p > </ div > < div class = "rule_content_item" > < p >特殊规则:< span >取号地点不同:西园区预约取号地点:西园区门诊一号大厅挂号窗口取号。 东园区预约取号地点:东园区门诊一号大厅挂号窗口取号</ span ></ p > </ div > </ div > </ div > </ div > < div class = "scheduling_tip" > < i class = "iconfont icontip" ></ i >< span >您还没有选择就诊日期</ span > </ div > </ div > </ div > < div id = "footer" class = "footer" > Copyright © 2017慕课网版权所有 </ div > </ body > < script src = "js/ui.js" ></ script > < script > function openIndex(){ window.open('index.html','_self'); } //加载排班表数据 </ script > </ html > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | layout.css /*页面布局样式*/ *{ padding : 0 ; margin : 0 ; } .wrap{ width : 1000px ; margin : 0 auto ; position : relative ; } select,input{ border : 0 ; outline : 0 ; } # top { height : 30px ; background-color : #f5f5f5 ; } #header{ height : 92px ; } #nav{ height : 35px ; background-color : #60bff2 ; } .hospital_intro{ height : 258px ; margin : 30px 0 40px 0 ; } .hospital{ height : 230px ; background-color : #f7f7f7 ; } .hospital_system{ height : 460px ; margin-bottom : 80px ; } .hospital_system_caption{ height : 30px ; border-bottom : 2px solid #60bff2 ; margin-bottom : 20px ; } .hospital_system_content{ height : 410px ; } .appointment_office{ width : 708px ; height : 408px ; border : 1px solid #f4f6fa ; float : left ; } .rule{ width : 273px ; height : 282px ; border : 1px solid #f4f6fa ; float : right ; } #footer{ height : 70px ; background-color : #eceef2 ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 | index.css /*页面样式*/ /*top模块*/ a { text-decoration : none ; } . top { line-height : 30px ; color : #868686 ; font-size : 14px ; } . top p.call { float : left ; background : url ( "../img/icon-call.png" ) no-repeat 0 5px ; text-indent : 20px ; } . top p.welcome { float : right ; } . top p.welcome a { color : #2da5e1 ; } /*header 模块*/ .header .logo { width : 350px ; height : 58px ; padding : 20px 15px ; } .header .logo img { width : 100% ; height : 100% ; } .header .search { width : 328px ; height : 38px ; background-color : orange; position : absolute ; right : 0 ; top : 29px ; } /*nav 模块*/ .nav { line-height : 35px ; } .nav a { display : inline- block ; padding-left : 53px ; color : #fff ; } .nav a:hover { color : #d7f3ff ;; } /*hospital_intro 医院介绍*/ .hospital { padding : 15px 25px 20px 25px ; } .hospital_caption { height : 35px ; border-bottom : 2px solid #dcdddd ; } .hospital_caption p { font-size : 16px ; } .hospital_caption .subname { font-size : 14px ; color : #f29600 ; margin-left : 13px ; } .hospital_caption p.name { float : left ; } .hospital_caption p.info { float : right ; } .hospital_caption p.info a { color : #0000ff ; margin-right : 14px ; } .hospital_caption p.info a:last-child { margin-right : 0 ; } .hospital_caption p.info span { color : #000 ; } .hospital_content { margin-top : 10px ; } .hospital_content . left { width : 200px ; height : 150px ; background : url ( "../img/hospital-1.jpg" ); float : left ; } .hospital_content . center { width : 447px ; height : 157px ; float : left ; margin-left : 30px ; } . center .item { font-size : 14px ; color : #888888 ; margin-bottom : 18px ; } . center .item span { line-height : 23px ; } . center .item i { display : inline- block ; width : 15px ; height : 16px ; margin-right : 15px ; } . center .item:first-child i { background : url ( "../img/icon-web.png" ) 0 0 ; } . center .item:nth-child( 2 ) i { background : url ( "../img/icon-web.png" ) 0 -22px ; } . center .item:nth-child( 3 ) i { background : url ( "../img/icon-web.png" ) 0 -44px ; } . center .item:last-child i { background : url ( "../img/icon-web.png" ) 0 -65px ; } .hospital_content . right { float : right ; width : 250px ; height : 165px ; background : url ( "../img/map-1.png" ); } /*hospital_system 医院体系*/ .hospital_system_caption a { display : inline- block ; width : 110px ; height : 30px ; line-height : 30px ; text-align : center ; color : #60bff2 ; } .hospital_system_caption a.item_focus { background-color : #60bff2 ; color : #fff ; } .hospital_system_content .search { margin-top : 90px ; height : 200px ; border : 1px solid #DCDDDD ; position : relative ; } .search .search_detail { width : 420px ; height : 30px ; position : absolute ; top : 50% ; margin-top : -15px ; left : 50% ; margin-left : -210px ; } .search_detail span { float : left ; } .search_detail input { height : 30px ; width : 194px ; border : 1px solid #dcdcdc ; float : left ; } .search_detail .button { float : left ; width : 110px ; height : 30px ; margin-left : 5px ; line-height : 30px ; text-align : center ; background-color : #00B3EC ; } .search_detail .button a { color : #fff ; } .appointment_office_caption { height : 44px ; background-color : #f4f6fa ; line-height : 40px ; padding-left : 30px ; } .appointment_office_content .item { height : 90px ; border-bottom : 1px solid #f4f6fa ; } .appointment_office_content .item_caption { width : 144px ; height : 80px ; background-color : #f2fbff ; float : left ; text-align : center ; padding-top : 10px ; } .appointment_office_content .item_content { width : 560px ; height : 100% ; float : left ; } .appointment_office_content .item_content .link{ display : inline- block ; width : 100px ; height : 27px ; margin-left : 20px ; padding-top : 3px ; color : #4c4948 ; } .rule { overflow : auto ; } .rule_caption { height : 40px ; padding-left : 10px ; background-color : #f4f6fa ; line-height : 40px ; color : #606060 ; } .rule_caption span { font-size : 14px ; color : #00b3ea ; } .rule_content { height : 244px ; padding : 15px 10px ; } .rule_content .rule_content_item { line-height : 22px ; margin-bottom : 10px ; } .rule_content .rule_content_item p { width : 100% ; color : #555555 ; } .rule_content .rule_content_item span { color : #888888 ; } /*footer 模块*/ .footer { text-align : center ; line-height : 70px ; color : #acacac ; font-size : 14px ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | ui.css /* 搜索 */ .ui-search{ background : url (../img/ui-search.jpg) center no-repeat ; font-size : 14px ; color : #fff ; position : relative ; } .ui-search-selected{ width : 70px ; height : 38px ; line-height : 38px ; position : absolute ; left : 0 ; top : 0 ; text-indent : 14px ; } .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 : 7px ; 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 ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | scheduling_layout.css /*科室排班表页面布局样式*/ * { padding : 0 ; margin : 0 ; } .wrap { width : 1000px ; margin : 0 auto ; position : relative ; } select, input { border : 0 ; outline : 0 ; } .clearfix:after{ content : '' ; display : block ; clear : both ; zoom: 1 ; } /*iconfont 字体*/ @font-face { font-family : 'iconfont' ; src : url ( '../fonts/iconfont.eot' ); src : url ( '../fonts/iconfont.eot?#iefix' ) format ( 'embedded-opentype' ), url ( '../fonts/iconfont.woff' ) format ( 'woff' ), url ( '../fonts/iconfont.ttf' ) format ( 'truetype' ), url ( '../fonts/iconfont.svg#iconfont' ) format ( 'svg' ); } .iconfont { font-family : "iconfont" !important ; font-size : 40px ; color : #01b3f1 ; font-style : normal ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_left{ transform: rotate( 180 deg); } .icontip{ font-size : 30px ; vertical-align : middle ; margin-right : 5px ; color : #a5a5a5 ; } # top { height : 30px ; background-color : #f5f5f5 ; } #header { height : 92px ; } #nav { height : 35px ; background-color : #60bff2 ; } .hospital_intro { height : 258px ; margin : 30px 0 40px 0 ; } .hospital { height : 230px ; background-color : #f7f7f7 ; } .scheduling { height : 425px ; margin-bottom : 110px ; } .scheduling_content{ height : 325px ; } .scheduling_list{ width : 752px ; height : 100% ; float : left ; border : 1px solid #dcdddd ; } .scheduling_rule{ width : 244px ; height : 100% ; float : right ; border : 1px solid #dcdddd ; } .scheduling_tip{ width : 100% ; height : 65px ; border : 1px solid #dcdddd ; } #footer { height : 70px ; background-color : #eceef2 ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 | scheduling.css /*科室排班表页面样式 */ /*top模块*/ a { text-decoration : none ; } . top { line-height : 30px ; color : #868686 ; font-size : 14px ; } . top p.call { float : left ; background : url ( "../img/icon-call.png" ) no-repeat 0 5px ; text-indent : 20px ; } . top p.welcome { float : right ; } . top p.welcome a { color : #2da5e1 ; } /*header 模块*/ .header .logo { width : 350px ; height : 58px ; padding : 20px 15px ; } .header .logo img { width : 100% ; height : 100% ; } .header .search { width : 328px ; height : 38px ; background-color : orange; position : absolute ; right : 0 ; top : 29px ; } /*nav 模块*/ .nav { line-height : 35px ; } .nav a { display : inline- block ; padding-left : 53px ; color : #fff ; } .nav a:hover { color : #d7f3ff ;; } /*hospital_intro 医院介绍*/ .hospital { padding : 15px 25px 20px 25px ; } .hospital_caption { height : 35px ; border-bottom : 2px solid #dcdddd ; } .hospital_caption p { font-size : 16px ; } .hospital_caption .subname { font-size : 14px ; color : #f29600 ; margin-left : 13px ; } .hospital_caption p.name { float : left ; } .hospital_caption p.info { float : right ; } .hospital_caption p.info a { color : #0000ff ; margin-right : 14px ; } .hospital_caption p.info a:last-child { margin-right : 0 ; } .hospital_caption p.info span { color : #000 ; } .hospital_content { margin-top : 10px ; } .hospital_content . left { width : 200px ; height : 150px ; background : url ( "../img/hospital-1.jpg" ); float : left ; } .hospital_content . center { width : 447px ; height : 157px ; float : left ; margin-left : 30px ; } . center .item { font-size : 14px ; color : #888888 ; margin-bottom : 18px ; } . center .item span { line-height : 23px ; } . center .item i { display : inline- block ; width : 15px ; height : 16px ; margin-right : 15px ; } . center .item:first-child i { background : url ( "../img/icon-web.png" ) 0 0 ; } . center .item:nth-child( 2 ) i { background : url ( "../img/icon-web.png" ) 0 -22px ; } . center .item:nth-child( 3 ) i { background : url ( "../img/icon-web.png" ) 0 -44px ; } . center .item:last-child i { background : url ( "../img/icon-web.png" ) 0 -65px ; } .hospital_content . right { float : right ; width : 250px ; height : 165px ; background : url ( "../img/map-1.png" ); } /*scheduling 科室排班区域*/ .scheduling_caption { height : 33px ; padding-left : 10px ; } .scheduling_caption a { margin-left : 15px ; color : #00b3ec ; font-size : 14px ; } .scheduling_list { position : relative ; } .scheduling_list_left { float : left ; } .scheduling_list_right { float : right ; } .scheduling_list_right, .scheduling_list_left { width : 35px ; height : 100% ; border : 1px solid #DCDDDD ; } .scheduling_list_right .date, .scheduling_list_left .date { height : 45px ; } .scheduling_list_right .status, .scheduling_list_left .status { height : 93px ; line-height : 93px ; background-color : #f2f8ff ; } /*.scheduling_list_box {*/ /*position: absolute;*/ /*top: 0px;*/ /*left: 36px;*/ /*}*/ .scheduling_list_box_wrap{ position : absolute ; top : 0px ; left : 36px ; width : 99999px ; transition: all 1 s; } .scheduling_list_box .full div{ background-color : #e0eefd ; color : #4ab4ed ; text-align : center ; line-height : 91px ; } .scheduling_list_box .scheduling_list_box_item div { width : 95px ; height : 91px ; border : 1px solid #DCDDDD ; float : left ; } .scheduling_list_box .date div { width : 95px ; height : 45px ; border : 1px solid #DCDDDD ; } .scheduling_rule { overflow : auto ; } .scheduling_rule_caption { height : 44px ; line-height : 44px ; margin-left : 8px ; } .scheduling_rule_content { height : 244px ; padding : 15px 10px ; } .rule_content_item { line-height : 22px ; margin-bottom : 10px ; } .rule_content_item p { width : 100% ; color : #555555 ; } .rule_content_item span { color : #888888 ; } .scheduling_tip { line-height : 65px ; text-align : center ; color : #9f9f9f ; } /*footer 模块*/ .footer { text-align : center ; line-height : 70px ; color : #acacac ; font-size : 14px ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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(); return false ; }); } //ui-tab定义 $.fn.UiTab= function (header,content){ var ui=$( this ); var tabs=$(header,ui); var cons=$(content,ui); tabs.on( 'click' , function (){ var index=$( this ).index(); tabs.removeClass( 'item_focus' ).eq(index).addClass( 'item_focus' ); cons.hide().eq(index).show(); return false ; }) } //页面脚本逻辑 $( function (){ $( '.ui-search' ).UiSearch(); $( '.hospital_system' ).UiTab( '.hospital_system_caption >.item' , '.hospital_system_content >.item' ); $( '.hospital_system .appointment_office_content .item_content' ) .UiTab( '.item_content .link' , '.section_schedule >.item' ); }) |
9
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧