iHealth-app-demo/html/huanzhe/css/info.css

.os-main, .el-main { position: absolute; top: 57px; left: 0; right: 0; bottom: 0; font-size: 14px; color: #28405d; overflow: auto; -webkit-overflow-scrolling: touch; }
.info-list{background: #fff;border-top: solid 1px #d9d9d9;margin-bottom: 10px;border-bottom: solid 1px #d9d9d9;}
.info-list .il-item { position: relative; }
.info-list .il-item p { line-height: 20px; padding-bottom: 15px; }
.info-list .il-item.il-i-table:after { border: none; }
.os-tit-o {box-sizing: border-box; padding: 0px 10px;height: 35px;line-height: 35px; font-size: 16px; color: #28405d; border-bottom: solid 1px #dcdcdc;margin-bottom: 15px;}
.os-tit-o.o-t-o-nb { padding-bottom: 0; }

.os-t-o-name { vertical-align: middle; }

.os-base-info {padding: 0px 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.os-base-info.pl0{padding-left: 0px;padding-right: 0px;}
.os-base-info li {-webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block;margin-bottom: 15px;}
.os-base-info li.flex2 { -webkit-flex: 2; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; }
.os-base-info li.flex1 { -webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.os-base-info li .pd-r { padding-right: 25px; }
.os-base-info li:first-child { padding-right: 20px; }
.os-base-info label { color: #95a1b0; }

.os-tit-t, .os-tit-f { margin-bottom: 10px; color: #95a1b0; }

.os-tit-th { padding-bottom: 10px; color: #95a1b0; }

.os-tit-f { font-weight: 600; color: #28405d; }

.p-bottom { text-align: center; padding: 10px 0 20px 0; font-size: 10px; color: #95a1b0; }

.info-list-t { position: relative;background: #fff;border-top: solid 1px #d9d9d9;margin-bottom: 10px;border-bottom: solid 1px #d9d9d9;}
.il-t-item { position: relative; padding: 0 10px; }
.il-t-item.list-mt{margin-bottom: 10px;}
.il-t-item.list-mt:last-child{margin-bottom: 0px;}
.il-t-item:after { content: " "; position: absolute; left: 14px; bottom: 0; right: 14px; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); }
.il-t-item p { padding-bottom: 15px; line-height: 20px; }
.il-t-item p.ying-pb{padding-bottom: 10px;}
.il-t-item.jiancha-mt{margin-bottom:10px;}
.il-t-item:last-child:after { content: ""; border: none; }
.il-t-item.pl0{padding-left: 0px;padding-right: 0px;}
.sidebar-main { position: absolute; left: 0; top: 45px; right: 0; bottom: 0; background: transparent; z-index: -1; -webkit-transition: all 0.5s; transition: all 0.5s;overflow: auto; }
.sidebar-main.active { background: rgba(0, 0, 0, 0.3); z-index: 900; }

.sidebar-body { position: absolute; width: 210px; top: 0; right: -210px; /*bottom: 0;*/ background: #fff; padding-top: 5px; -webkit-transition: all 0.5s; transition: all 0.5s;min-height: 100%; }
.sidebar-body.active { right: 0; }

.sb-item { position: relative; text-align: center; font-size: 17px; }
.sb-item > a { color: #28405d; position: relative; display: block; height: 45px; line-height: 45px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 10px;}
.sb-item > a.active { background: #f5f7f9; }

.sb-i-list { display: none; text-align: left; }
.sb-i-list li a.active { background: #f5f7f9; }
.sb-i-list a { color: #95a1b0; display: block; height: 45px; line-height: 45px;font-size: 14px;}

.icon { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; vertical-align: middle; margin: 0 10px 0 0; }

.i-ess-info { background-image: url(../images/img/i-ess-info.png); }

.i-visiting-result { background-image: url(../images/img/i-visiting-result.png); }

.i-dia-basis { background-image: url(../images/img/i-dia-basis.png); }

.i-cli-dia { background-image: url(../images/img/i-cli-dia.png); }

.Rp { background-image: url(../images/img/Rp.png); }

.i-pha-info { background-image: url(../images/img/i-pha-info.png); }

.i-ins-res { background-image: url(../images/img/i-ins-res.png); }

.i-inspectors { background-image: url(../images/img/i-inspectors.png); }

.i-pat-info { background-image: url(../images/img/i-pha-info.png); }

.i-hos-sum { background-image: url(../images/img/i-hos-sum.png); }

.i-ope-rec { background-image: url(../images/img/i-ope-rec.png); }

.i-dia-rec { background-image: url(../images/img/i-dia-rec.png); }

.i-doc-info { background-image: url(../images/img/i-doc-info.png); }

.i-test-results { background-image: url(../images/img/i-test-results.png); }

.i-zdjl { background-image: url(../page/info/img/i-zdjl.png); }

.i-home { display: inline-block; width: 40px; height: 40px; position: absolute; right: 14px; bottom: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/img/i-go-home.png); border-radius: 50%; z-index: 888; }

.sidebar { display: inline-block; width: 48px; height: 48px; position: absolute; right: 14px; top: 72px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/img/i-switch.png); border-radius: 50%; z-index: 888; }

.i-d { display: inline-block; width: 10px; height: 6px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/img/i-drop-down.png); -webkit-transition: all 0.5s; transition: all 0.5s; }
.i-d.active { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }

.cm-list { font-size: 0; }
.cm-list li { font-size: 13px; color: #28405d; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.cm-list li div { -webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; padding-bottom: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.cm-list li div span {-webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; }
.cm-list li div span:first-child { text-align: right; }
.cm-list li div:first-child { border-right: 1px dotted #dce5f1; }
.cm-list li:first-child { padding-top: 15px; }
.cm-list li:last-child { padding-bottom: 30px; }
.cm-list li:last-child div { padding-bottom: 0; }
.i-i-list { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.i-i-list li { display: inline-block; padding: 5px 10px 15px 0; text-align: center; }
.i-i-list li img { display: inline-block; height: 75px; width: 92px; border-radius: 5px; }

.el-main { background: #f4f6f9; }

.el-tit { height: 100px; background: #fff; padding-left: 20px; }

.el-t-l { font-size: 12px; color: #95a1b0; padding: 20px 0 5px 0; }

.el-t-m { font-size: 30px; color: #28405d; font-weight: 600; }

.el-list { padding-bottom: 20px; }

.el-item div.list { padding:5px 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; font-size: 14px; color: #95a1b0; }
.el-item div.list span {display: block; -webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.el-item div.list span:last-child { text-align: right; }
.el-item div.title span {display: block; -webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.el-item div.title span:last-child { text-align: right; }
.el-item div.title { height:40px;line-height:40px; font-size: 14px; color: #28405d; font-weight: 600;padding: 0px 10px;border-bottom:solid 1px #d9d9d9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;margin-bottom: 5px;}
.el-item .el-list{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 5px 10px;font-size: 14px; color: #95a1b0;}
.el-item .el-list b{display: block;font-weight: normal;-webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.el-item .el-list b:last-child { text-align: right; }
.el-item .el-title.noline{border-bottom:none;margin-bottom: 0px;}
.el-item .el-title{height:40px;line-height:40px; font-size: 14px; color: #28405d; font-weight: 600;padding: 0px 10px;border-bottom:solid 1px #d9d9d9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;margin-bottom: 5px;}
.el-item .el-title span{display: block;-webkit-flex: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.el-item .el-title span:last-child { text-align: right; }
.lto-con { box-shadow: 1px 1px 2px 0 #edf4fe; background: #fff; margin: 0px 10px 10px 10px;border-radius: 5px;}

.lto-tit { padding: 20px 0 15px 25px; font-size: 14px; color: #1286ff; }

.lto-info { padding: 0 10px 10px 25px; font-size: 14px; color: #28405d; line-height: 20px; position: relative; }
.lto-info span { color: #95a1b0; }
.lto-info:before { content: " "; display: block; width: 5px; height: 5px; background: #1286ff; position: absolute; border-radius: 50%; left: 10px; top: 7px; }

.hp-table { width: 100%; text-align: center; }
.hp-table tr { border: 1px solid #edf4fe; }
.hp-table tr th { height: 40px; background: #f5f7f9; font-size: 13px; color: #28405d; font-weight: 600; }
.hp-table tr td { height: 60px; font-size: 12px; color: #28405d; }

.hp-list { color: #28405d; padding-bottom: 10px; }
.hp-list li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.hp-list li span { text-align: center; padding-bottom: 10px; }
.hp-list li span:first-child { -webkit-flex: 1.5; -webkit-box-flex: 1.5; -ms-flex: 1.5; flex: 1.5; }
.hp-list li span:last-child { -webkit-flex: 2; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; }
.hp-list li:first-child span { font-weight: 600; padding-bottom: 15px; }

.id-table { width: 100%; margin-bottom: 10px; }
.id-table tr { text-align: center; }
.id-table tr th { font-size: 13px; color: #28405d; padding: 10px 0; }
.id-table tr td { font-size: 12px; color: #28405d; padding: 10px 0; }
.id-table tr.up td { color: #ff7e7e; }
.id-table tr.down td { color: #67e39e; }

.up-icon { position: relative; }
.up-icon:after { content: ''; display: block; position: absolute; width: 11px; height: 12px; background-image: url(../images/img/i-up.png); background-position: center; background-repeat: no-repeat; background-size: cover; top: 2px; right: -15px; }

.down-icon { position: relative; }
.down-icon:after { content: ''; display: block; position: absolute; width: 11px; height: 12px; background-image: url(../images/img/i-down.png); background-position: center; background-repeat: no-repeat; background-size: cover; top: 2px; right: -15px; }