/* 头部 */ .header { height: 50px; background-color: #00ffff; position: fixed; left: 0; top: 0; z-index: 999; } .header .head { display: flex; justify-content: space-between; align-items: center; } /* logo */ .logo { width: 78px; height: 38px; } .logo img { height: 38px; } /* 导航 */ .nav { display: flex; align-items: center; width: calc(100% - 340px); height: 50px; } .nav>li { height: 50px; margin: 0 18px; transition: all .6s; } .nav>li>a { display: block; padding: 0 2px; line-height: 50px; transition: all .6s; } .nav>li:hover>a { transform: rotateX(360deg); } /* 顶部右侧 */ .top-right{ display: flex; justify-content: flex-end; align-items: center; width: 212px; position: relative; } /* 通知 */ .notice{ margin-right: 14%; position: relative; } .notice img{ height: 20px; } .notice>em{ display: block; width: 20px; height: 20px; background-color: rgba(255, 255, 255, .8); border-radius: 100%; font-size: 12px; color: #ff0000; transform: scale(.85); line-height: 20px; text-align: center; position: absolute; right: -16px; top: -6px; } /* 登录/注册 */ .login-registration{ display: flex; align-items: center; } .login-registration ins{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, .4); border-radius: 100%; overflow: hidden; } .login-registration ins>img{ max-width: 100%; } .login-registration span{ margin: 0 8px; } .icon-arrow{ width: 0; height: 0; margin-top: 6px; border-top: 6px solid #565656; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; cursor: pointer; transition: all .6s; } .icon-arrow.cur{ transform: rotateX(180deg); margin-top: -6px; } /* 退出登录 */ .open-more{ display: none; max-width: 100%; background-color: rgba(255, 255, 255, .8); padding: 5px 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); user-select: none; position: absolute; top: 37px; right: 0; } .open-more>a{ display: flex; font-size: 15px; line-height: 2.5; } /* 整屏半透明背景 */ .nav-bg{ display: none; width: 100vw; height: calc(100vh - 50px); background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 50px; z-index: 98; } .nav-bg.active { display: block; } /* 手机端导航按钮 */ .head .head-btn { display: none; width: 20px; float: right; position: relative; cursor: pointer; margin-top: 5px; z-index: 999; } .head .head-btn i { display: block; width: 100%; height: 2px; float: left; background-color: #383838; border-radius: 50px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .head .head-btn i.bar-top { margin-top: 0; } .head .head-btn i.bar-cen { margin-top: 5px; } .head .head-btn i.bar-bom { margin-top: 5px; } .head .head-btn.cur i { background-color: #383838; } .head .head-btn.cur i.bar-cen { opacity: 0; } .head .head-btn.cur i.bar-top { -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); } .head .head-btn.cur i.bar-bom { -webkit-transform: rotate(-45deg) translate(5px, -5px); transform: rotate(-45deg) translate(5px, -5px); } /* 首页样式 */ .main{ margin-top: 86px; min-height: calc(100vh - 204px); } .index-main{ display: flex; justify-content: space-between; align-items: flex-start; } .index-content{ width: calc(77.55% - 20px); } .search{ display: flex; align-items: center; } .search>input{ width: calc(100% - 115px); height: 50px; padding: 0 20px 0 38px; background-color: #fff; border: 1px solid #e9ebed; font-size: 14px; background-image: url(../images/icon/icon-search.png); background-repeat: no-repeat; background-size: 20px; background-position: 10px center; } .search-btn{ display: flex; justify-content: center; align-items: center; width: 115px; height: 50px; background-color: #00ffff; font-size: 20px; } /* 筛选 */ .screen{ background-color: #fff; padding: 2px 20px 8px; margin-top: 22px; font-size: 14px; line-height: 30px; } .screen li{ display: flex; align-items: flex-start; padding: 10px 0 14px; border-bottom: 1px solid #eaebeb; } .screen li:last-child{ border: 0; } .screen li>strong{ width: 105px; padding-right: 14px; margin-top: 10px; font-size: 15px; text-align: right; } .screen li>section{ display: flex; flex-wrap: wrap; width: calc(100% - 155px); height: 40px; overflow: hidden; } .screen li>section.open{ height: auto; } .screen li>section a{ padding: 0 13px; margin-top: 10px; } .screen li>section a.active{ background-color: #00ffff; } .screen li>section select{ width: 30%; height: 30px; background-color: #fff; margin: 10px 9px 0 0; border: 1px solid #eef1f2; padding: 0 10px; background-image: url(../images/icon/icon-arrow.png); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 11px 7px; } .screen li>section select:nth-of-type(3n){ margin-right: 0; } .screen li .more-btn{ display: flex; justify-content: flex-end; align-items: center; width: 45px; margin-top: 10px; user-select:none; cursor: pointer; } .screen li .more-btn>em{ border-top: 6px solid #888; margin-left: 5px; } .screen li:nth-of-type(odd) .more-btn>ins{ color: #00ffff; } .screen li:nth-of-type(odd) .more-btn>em{ border-top: 6px solid #00ffff; } .screen li .more-btn>em.rotate{ transform: rotateX(180deg); margin-top: -6px; } /* 患者列表 */ .patient-list li{ padding: 17px 20px 27px; margin-top: 24px; background-color: #fff; } .patient-top{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 15px; border-bottom: 1px solid #eaebeb; } .patient-top>span{ display: flex; align-items: center; font-size: 15px; line-height: 1.5; } .patient-top>span>img{ height: 19px; margin-right: 5px; } .patient-top>span:nth-of-type(2)>img{ height: 16px; } .patient-top>span:nth-of-type(3)>img{ height: 21px; } .patient-top>span em{ width: 40px; height: 40px; border-radius: 100%; margin-left: 8px; overflow: hidden; } .patient-top>span em>img{ max-width: 100%; } .patient-bottom{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .patient-detailed{ width: 100%; padding: 15px 0 17px; overflow: hidden; } .patient-detailed span{ font-size: 16px; line-height: 1.5; } .patient-detailed span:before{ content: ""; display: block; width: 7px; height: 18px; margin: 3px 6px 0 0; background-color: #00ffff; float: left; } .patient-bl{ width: calc(100% - 250px); line-height: 2; } .patient-bl h2{ font-size: 14px; margin-bottom: 8px; } .patient-bl h2>em{ margin: 0 5px; } .patient-bl h2>span{ margin-left: 45px; } .patient-bl p{ font-size: 14px; opacity: .8; text-align: justify; } .patient-br{ width: 200px; padding: 0 6px; text-align: center; } .patient-br>span{ display: block; font-size: 13px; line-height: 2.1; opacity: .6; } .choice-btn{ display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin: 8px 0 18px; border: 1px solid #00ffff; font-size: 18px; color: #00ffff; transition: all .6s; } .choice-btn:hover{ background-color: #00ffff; color: #383838; } .collection-btn{ display: flex; justify-content: center; align-items: center; width: 100%; font-size: 14px; line-height: 1.4; color: #585858; } .collection-btn>img{ height: 19px; margin-right: 4px; } /* 分页 */ .paging{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 36px 0; } .paging a{ display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; margin: 0 3px; border: 1px solid #e1e1e1; border-radius: 3px; } .paging a.prev, .paging a.next{ width: auto; padding: 0 10px; } .paging a.active{ background-color: #00ffff; border: 1px solid #00ffff; } .paging a>em{ transform: scaleY(1.25); } /* 侧边栏 */ .index-side{ width: 22.45%; padding: 33px 30px 40px; background-color: #fff; } .index-side>span{ display: flex; justify-content: center; align-items: center; width: 92px; height: 92px; border-radius: 100%; margin: 0 auto; overflow: hidden; } .index-side>span img{ max-width: 100%; max-height: 100%; } .index-side>p{ font-size: 14px; line-height: 2.3; font-weight: bold; text-align: center; margin: 8px 0 18px; } .index-side-btn{ display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background-color: #00ffff; border: 1px solid #00ffff; font-size: 16px; transition: all .6s; } .index-side-btn:hover{ background-color: #fff; color: #00ffff; } /* 登录/注册页样式 */ .login-main{ margin-bottom: 40px; min-height: calc(100vh - 244px); } .login{ display: flex; justify-content: space-between; align-items: flex-start; background-color: #fff; } .login-txt{ width: calc(100% - 430px); padding: 44px 20px 0; } .login-txt h1{ font-size: 34px; line-height: 2; padding-left: 70px; } .login-txt>span{ display: block; font-size: 16px; color: #6b6b6b; padding-left: 70px; } .login-txt>span a{ color: #0578ef; } .login-information{ margin-top: 26px; } .login-information li{ display: flex; align-items: center; margin-bottom: 20px; } .login-information li>span{ width: 120px; margin-right: 16px; font-size: 16px; color: #6b6b6b; text-align: right; } .login-information li>input{ width: calc(88% - 136px); height: 48px; padding: 0 10px; border: 1px solid #e9ebed; border-radius: 5px; font-size: 16px; } .login-information li>section{ display: flex; justify-content: space-between; align-items: center; width: calc(88% - 136px); } .login-information li>section input{ width: calc(62% - 10px); height: 48px; padding: 0 10px; border: 1px solid #e9ebed; border-radius: 5px; font-size: 16px; } .code-btn{ width: 38%; height: 48px; background-color: #f6f6f6; border: 1px solid #e9ebed; border-radius: 5px; font-size: 14px; color: #6b6b6b; } .login-img{ width: 430px; } .login-img>img{ width: 100%; } .agree{ display: flex; justify-content: space-between; align-items: center; width: calc(88% - 136px); margin-left: 136px; font-size: 14px; line-height: 2.2; } .agree>span{ display: flex; align-items: center; color: #6b6b6b; } .agree>span em{ width: 22px; height: 22px; border: 1px solid #e9ebed; border-radius: 2px; margin-right: 7px; overflow: hidden; cursor: pointer; transition: all .6s; } .agree>span em.checked{ background-color: #0578ef; background-image: url(../images/icon/icon-yes.png); background-size: 100%; transition: all .6s; } .agree>a{ color: #0578ef; } .agree span>.icon-arrow{ border-top: 6px solid #9b9b9b; margin-left: 7px; } .register-agree{ margin-bottom: 32px; } .login-btn, .register-btn{ width: calc(88% - 136px); height: 48px; margin: 25px 0 40px 136px; background-color: #00ffff; font-size: 16px; font-weight: bold; transition: all .6s; } .register-btn{ margin: 8px 0 20px 136px; } .wechat-btn-bg{ display: flex; justify-content: center; align-items: center; width: calc(88% - 136px); margin-left: 136px; } .wechat-btn{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 100%; background-color: #ebebeb; overflow: hidden; } .wechat-btn img{ max-width: 100%; max-height: 100%; } /* 患者信息列表页样式 */ /* 概况 */ .survey{ display: flex; justify-content: space-between; align-items: center; height: 190px; padding: 0 20px; background-image: url(../images/user-bg.jpg); background-size: cover; } .survey-left{ display: flex; align-items: center; } .survey-left>span{ display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 100%; margin: 0 18px 0 10px; overflow: hidden; } .survey-left>span img{ max-width: 100%; max-height: 100%; } .survey-left h2{ font-size: 24px; line-height: 2; font-weight: normal; } .survey-left p{ font-size: 16px; opacity: .8; } .survey-right{ display: flex; align-items: center; } .survey-right>span{ font-size: 15px; line-height: 2; } .survey-right>span strong{ font-size: 18px; } .withdrawal-btn, .recharge-btn{ width: 138px; height: 42px; background-color: #00ffff; border: 1px solid #00ffff; font-size: 15px; margin-left: 18px; transition: all .6s; } .withdrawal-btn:hover, .recharge-btn:hover{ background-color: transparent; color: #00ffff; } /* 二级导航 */ .pull-nav{ padding: 0 20px; height: 63px; background-color: #fff; margin-bottom: 18px; } .pull-nav-swiper{ width: 100%; overflow: hidden; } .pull-nav-swiper .swiper-wrapper{ justify-content: center; } .pull-nav-swiper .swiper-slide{ display: flex; align-items: center; width: auto; margin: 0 20px; } .pull-nav-swiper .swiper-slide>a{ padding: 0 4px; font-size: 16px; line-height: 62px; } .pull-nav-swiper .swiper-slide>a.active{ color: #00ffff; border-bottom: 1px solid #00ffff; } .pull-nav-swiper .swiper-wrapper.hide{ display: none; } /* 表单 */ .from-list-bg{ border: 1px solid #e9ebed; background-color: #fff; padding: 30px 18px 0; margin-bottom: 44px; } .from-list{ font-size: 15px; } .from-list li{ display: flex; justify-content: space-between; align-items: center; height: 52px; } .from-list li:nth-of-type(odd){ background-color: #f3f6f6; } .from-list li:first-child{ background-color: #ccffff; font-size: 16px; } .from-list li>span{ width: 16%; } .from-list li>span:first-child{ width: 26%; text-indent: 24px; } .from-list li>span>em{ margin-left: 8px; } .from-list li>span>a{ margin-left: 12px; color: #0578ef; } .from-list li>a{ width: 5%; color: #0578ef; } .from-list-last li>a{ width: 8%; } .from-list li:first-child>a{ color: #383838; } .from-list li>ins{ width: 10%; text-align: center; padding-right: 10px; } .from-list li>ins a{ color: #0578ef; } .from-list li>ins em{ color: #0578ef; margin: 0 2px; } .color-01{ color: #969696; } .color-02{ color: #1cc918; } .color-03{ color: #f60000; } .color-04{ color: #0578ef; } /* 三列表单 */ .from-list-three li>span:last-child{ width: 50%; } /* 五列表单 */ .from-list-five li>span:nth-of-type(3){ width: 26%; } /* 六列表单 */ .from-list-six li>span{ width: 18%; } .from-list-six li>span:first-child{ width: 18%; } /* 修改个人资料页样式 */ .information{ background-color: #fff; padding: 18px; border: 1px solid #e9ebed; margin-bottom: 42px; } .information-list{ width: 78%; margin: 0 auto; } .information-list li{ margin-top: 20px; font-size: 16px; color: #6b6b6b; } .information-list li>span em{ color: #ff0000; margin-left: 5px; } .information-list li input{ width: 100%; height: 52px; padding: 0 15px; border: 1px solid #e9ebed; border-radius: 5px; margin-top: 10px; font-size: 14px; color: #6b6b6b; } .half-section, .select-section{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .half-section input{ width: calc(50% - 8px) !important; } .select-section select{ width: calc(33.33% - 10px); height: 52px; padding: 0 15px; background-color: #fff; border: 1px solid #e9ebed; border-radius: 5px; margin-top: 10px; font-size: 14px; color: #6b6b6b; background-image: url(../images/icon/icon-arrow.png); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 11px 7px; } .information-btn{ display: block; width: 240px; height: 56px; background-color: #00ffff; border: 1px solid #00ffff; font-size: 16px; margin: 24px auto 40px; transition: all .6s; } .information-btn:hover{ background-color: #fff; color: #00ffff; } /* 上传患者信息页样式 */ .information h2{ width: 78%; background-color: #e5ffff; margin: 32px auto 22px; font-size: 24px; line-height: 2.25; text-align: center; } .information-upload{ margin-top: -18px; border: 0; padding: 20px; } .radio-section{ display: flex; align-items: center; height: 52px; } .radio-section>span{ display: flex; align-items: center; margin: 10px 40px 0 0; user-select: none; font-size: 14px; cursor: pointer; } .radio-section>span:last-child{ margin-right: 0; } .radio-section>span em{ width: 30px; height: 30px; border: 1px solid #e9ebed; border-radius: 100%; margin-right: 10px; overflow: hidden; cursor: pointer; } .radio-section>span em>ins{ width: 0; height: 0; opacity: 0; } .radio-section>span em.checked{ background-color: #fff; border: 1px solid #0578ef; } .radio-section>span em.checked>ins{ display: block; width: 14px; height: 14px; margin: 7px; border-radius: 100%; background-color: #0578ef; opacity: 1; } .select-section select[name="birth-tiem"], .select-section select[name="age"], .select-section select[name="diagnosis-time"]{ width: calc(50% - 8px); } .select-section input[name="name-initials"]{ width: calc(33.33% - 10px); } .select-section input[name="patient-code"]{ width: calc(66.66% - 5px); } .information-list li textarea{ width: 100%; height: 255px; padding: 15px; border: 1px solid #e9ebed; border-radius: 5px; margin-top: 10px; font-size: 14px; line-height: 1.8; color: #6b6b6b; } .upload-section{ display: flex; align-items: center; padding-bottom: 36px; border-bottom: 1px solid #e9ebed; margin-bottom: 36px; } .upload-section span, .upload-section button{ width: 124px; height: 124px; border: 1px solid #e9ebed; border-radius: 5px; margin: 13px 12px 0 0; overflow: hidden; } .upload-section span img{ width: 100%; min-height: 100%; } .upload-section button{ display: flex; justify-content: center; align-items: center; margin-right: 0; } /* 提现页样式 */ .account-section{ display: flex; align-items: center; margin: 25px 0; font-size: 14px; } .account-section>span{ font-weight: bold; margin-right: 48px; } .account-section>span strong{ margin-left: 18px; } .account-section>a{ color: #0578ef; } .information-withdrawal .information-list{ margin-bottom: 46px; } .information-recharge .upload-section{ margin-bottom: 30px; } /* 订单页样式 */ .order-information{ padding: 26px 36px 11px; background-color: #fff; border: 1px solid #e9ebed; margin-bottom: 24px; } .order-information .patient-top{ padding-top: 18px; border-top: 1px solid #eaebeb; border-bottom: 0; } .order-information .patient-bl{ padding-bottom: 30px; width: 100%; text-align: justify; } .order-information .information-list{ width: 100%; border-top: 1px solid #eaebeb; } .order-information .upload-section{ align-items: flex-end; border-bottom: 0; margin-bottom: 0; padding-bottom: 22px; } .order-information .upload-section>span, .order-information .upload-section>button{ margin-top: 0; } .order-information .upload-section>em{ margin-left: 14px; font-size: 14px; opacity: .7; } .order-btn{ margin: 44px auto; } /* 个人资料页样式 */ .user-information{ background-color: #fff; padding: 18px 38px; border: 1px solid #e9ebed; margin-bottom: 42px; } .information-item li{ display: flex; align-items: center; height: 68px; border-bottom: 1px solid #e9ebed; font-size: 16px; color: #6b6b6b; } .information-item li>span{ width: 22%; text-indent: 17%; } .information-item li>span em{ color: #ff0000; margin-left: 5px; } .user-information .information-btn{ margin: 52px auto 25px 22%; } /* 底部单页样式 */ .page-bg{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 38px; } .page-side{ width: 174px; background-color: #fff; } .page-side>a{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 52px; padding: 0 20px 0 22px; font-size: 16px; } .page-side>a em{ display: none; } .page-side>.active{ background-color: #00ffff; } .page-side>.active em{ display: block; width: 10px; height: 11px; background-image: url(../images/icon/icon-arrow-right.png); background-size: 100%; } .page-content{ width: calc(100% - 204px); padding: 0 26px 34px; background-color: #fff; } .page-content>h1{ display: flex; align-items: center; height: 67px; border-bottom: 1px solid #eaebeb; } .page-content>h1 span{ font-size: 22px; line-height: 66px; border-bottom: 1px solid #00ffff; } .page-content .page-txt{ font-size: 14px; line-height: 2; margin-top: 14px; } .page-content .page-txt img{ max-width: 100%; margin: 10px auto; } .page-txt.feedback-txt{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; } .page-txt.feedback-txt>input, .page-txt.feedback-txt>textarea{ width: calc(50% - 8px); height: 52px; padding: 0 15px; margin-bottom: 16px; border: 1px solid #eaebeb; border-radius: 5px; font-size: 14px; color: #383838; } .page-txt.feedback-txt>textarea{ width: 100%; height: 232px; padding: 15px; line-height: 1.8; } /* 改变表单默认值样式 */ .feedback-txt>input::-webkit-input-placeholder, .feedback-txt>textarea::-webkit-input-placeholder{ color:#6b6b6b; } .feedback-txt>input::-moz-placeholder, .feedback-txt>textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#6b6b6b; } .feedback-txt>input:-moz-placeholder, .feedback-txt>textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#6b6b6b; } .feedback-txt>input:-ms-input-placeholder, .feedback-txt>textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#6b6b6b; } .feedback-btn{ display: block; width: 180px; height: 56px; background-color: #00ffff; border: 1px solid #00ffff; font-size: 16px; margin: 30px auto; transition: all .6s; } .feedback-btn:hover{ background-color: #fff; color: #00ffff; } /* 搜索结果页 */ .search-result{ background-color: #fff; padding: 0 20px 20px; margin: 22px auto 36px; } .search-result>h2{ font-size: 20px; line-height: 66px; border-bottom: 1px solid #eaebeb; } .search-list{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; } .search-list li{ display: flex; align-items: center; width: calc(50% - 8px); height: 38px; } .search-list li>a{ width: calc(100% - 11px); font-size: 14px; line-height: 38px; display: -webkit-box; -webkit-line-clamp: 1; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .search-list li>em{ width: 4px; height: 4px; margin-right: 7px; background-color: #383838; transform: rotateZ(45deg); } /* 尾部 */ .footer{ padding: 20px 0 30px; background-color: #fff; border-top: 2px solid #00ffff; } .foot-nav{ display: flex; align-items: center; } .foot-nav>a{ font-size: 14px; line-height: 2.3; font-weight: bold; margin-right: 28px; } .foot-nav>a:last-child{ margin-right: 0; } .foot-record{ font-size: 14px; line-height: 2.3; opacity: .8; } .foot-record>a:first-child{ margin: 0 13px; } /* 提示框 */ .tips-box{ display: none; min-width: 130px; max-width: 300px; background-color: #fff; border-radius: 3px; padding: 10px 15px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; } .tips-box>span{ display: block; font-size: 16px; margin-bottom: 6px; } .tips-box>p{ font-size: 14px; line-height: 1.6; opacity: .75; } /* 响应式布局 */ @media screen and (max-width:1280px) { .w1140{ width: 90%; } } @media screen and (max-width:1080px) { .index-content{ width: 100%; } .index-side{ display: none; } } @media screen and (max-width:980px) { .from-list{ font-size: 14px; } .from-list li:first-child{ font-size: 15px; } .from-list li>ins{ width: 12%; } .login-txt{ width: 100%; padding-bottom: 30px; } .login-img{ display: none; } .search-list li{ width: 100%; } } @media screen and (max-width:780px) { .w1140{ width: 96%; } /* 头部 */ .header { height: 50px; background-color: rgba(255, 255, 255, 1); } .header .head { justify-content: space-between; height: 50px; } .logo { width: auto; height: 36px; margin: 0; } .logo img { width: auto; height: 36px; margin: 0; } .top-right{ font-size: 14px; width: calc(100% - 120px); } .login-registration ins{ width: 36px; height: 36px; } .notice{ margin-right: 10%; } .notice img{ height: 18px; } .notice>em{ background-color: rgba(0, 0, 0, 0); } .head .head-btn { display: block; margin: 0; } .head .nav { display: block; width: 40vw; height: calc(100vh - 50px); background-color: #fff; border-top: 1px solid #e9ebed; position: fixed; padding-top: 10px; top: 50px; right: -40vw; z-index: 99; transition: all .6s; } .head .nav.active { right: 0; } .head .nav li { margin: 0; padding: 0; height: auto; } .head .nav li>a { width: 100%; font-size: 15px; margin: 0; padding: 0; line-height: 40px; text-align: center; } .head .nav li.active>a { font-weight: normal; border: 0; } .open-more{ position: fixed; top: 50px; right: 2%; } /* 首页 */ .main{ margin-top: 65px; min-height: calc(100vh - 163px); } .index-side{ display: none; } .index-content{ width: 100%; } .search>input{ width: calc(100% - 90px); height: 40px; } .search-btn{ width: 90px; height: 40px; font-size: 15px; } .screen{ padding: 2px 10px 8px; font-size: 13px; line-height: 24px; } .screen li>strong{ width: 95px; font-size: 13px; } .screen li>section{ width: calc(100% - 135px); height: 34px; } .screen li>section a{ padding: 0 10px; } .screen li>section select{ height: 24px; width: 90%; margin-right: 0; } .patient-list li{ padding: 17px 10px 27px; } .patient-top{ height: 70px; flex-wrap: wrap; padding-bottom: 8px; } .patient-top>span{ font-size: 13px; } .patient-top>span em{ width: 30px; height: 30px; } .patient-bl{ width: 100%; } .patient-bl h2{ font-size: 14px; } .patient-bl h2>span{ margin-left: 10px; } .patient-bl p{ text-align: justify; } .patient-br{ margin: 10px auto 0; } .choice-btn{ height: 40px; font-size: 16px; } /* 分页 */ .paging{ margin: 30px 0; } .paging a{ width: 19px; height: 19px; font-size: 12px; margin: 0 2px; } .paging a.prev, .paging a.next{ padding: 0 4px; } .pull-nav-swiper .swiper-wrapper{ justify-content: left; } .survey{ flex-wrap: wrap; padding: 20px 10px; height: auto; } .survey-left>span{ width: 70px; height: 70px; margin-left: 0; } .survey-left h2{ font-size: 20px; } .survey-left p{ font-size: 15px; } .survey-right{ justify-content: space-around; width: 100%; margin-top: 20px; } .survey-right>span strong{ font-size: 17px; } .withdrawal-btn, .recharge-btn{ width: 120px; height: 36px; font-size: 14px; margin-left: 0; } .pull-nav{ width: 100%; height: 51px; padding: 0; margin-bottom: 15px; } .pull-nav-swiper .swiper-slide{ margin: 0 6px; } .pull-nav-swiper .swiper-slide>a{ font-size: 14px; line-height: 50px; } .information{ margin-bottom: 20px; } .information-upload{ padding: 10px; margin-top: 0; } .information h2{ width: 100%; font-size: 18px; margin: 0 0 20px; } .information-list{ width: 100%; } .information-list li{ font-size: 15px; } .information-list li input{ height: 36px; padding: 0 10px; } .select-section select{ width: calc(33.33% - 6.6px); height: 36px; padding: 0 10px; background-position: calc(100% - 10px) center; } .information h2:nth-of-type(2){ margin-top: 30px; } .radio-section>span em{ width: 20px; height: 20px; } .radio-section{ height: 36px; } .radio-section>span em.checked>ins{ width: 8px; height: 8px; margin: 5px; } .select-section select[name="birth-tiem"], .select-section select[name="age"], .select-section select[name="diagnosis-time"]{ width: calc(50% - 5px); } .select-section select[name="diagnosis-time"]{ width: 60%; } .select-section input[name="name-initials"]{ width: calc(40% - 5px); } .select-section input[name="patient-code"]{ width: calc(60% - 5px); } .information-list li textarea{ padding: 10px; height: 160px; } .upload-section{ padding-bottom: 25px; } .upload-section span, .upload-section button{ width: 100px; height: 100px; margin-bottom: 0; } .information-btn{ width: 120px; height: 40px; font-size: 15px; margin: 25px auto; } /* 表单 */ .from-list-bg{ width: 100%; padding: 0; margin-bottom: 25px; } .from-list{ font-size: 12px; } .from-list li:first-child{ font-size: 13px; } .from-list li>span:first-child{ text-indent: 0; padding-left: 10px; width: 30%; } .from-list li>span{ width: 18%; } .from-list li>a{ width: 10%; } .from-list li>span>em{ display: block; margin-left: 0; } .from-list li>ins{ width: 20%; padding-right: 10px; } .from-list li:first-child span>ins{ display: block; } .from-list-patient li>span:nth-of-type(2), .from-list-patient li>span:nth-of-type(3), .from-user-admin li>span:nth-of-type(2), .from-user-admin li>span:nth-of-type(3), .from-withdrawal-admin li>span:nth-of-type(3), .from-list-collection li>span:nth-of-type(3){ display: none; } /* 登录注册页 */ .login-main{ width: 100%; margin: 51px auto 0; } .login-img{ display: none; } .login-txt{ width: 100%; padding: 40px 10px 20px; } .login-txt h1{ font-size: 28px; text-align: center; padding-left: 0; } .login-txt>span{ font-size: 14px; margin-top: 3px; text-align: center; padding-left: 0; } .login-information li>span{ width: 90px; margin-right: 10px; font-size: 14px; } .login-information li>input{ width: calc(100% - 100px); height: 36px; font-size: 14px; } .register-information li>span{ width: 80px; margin-right: 10px; font-size: 14px; } .register-information li>input{ width: calc(100% - 90px); height: 36px; font-size: 14px; } .register-information li>section{ width: calc(100% - 90px); } .register-information li>section input{ width: calc(58% - 10px); height: 36px; font-size: 14px; } .code-btn{ width: 42%; height: 36px; font-size: 13px; } .login-btn{ display: block; width: 130px; height: 40px; margin: 30px auto; font-size: 15px; } .register-btn{ display: block; width: 130px; height: 40px; margin: 20px auto; font-size: 15px; } .agree{ width: 100%; margin-left: 0; justify-content: space-around; } .agree>span em{ width: 18px; height: 18px; } .wechat-btn-bg{ width: 100%; margin-left: 0; } /* 搜索结果页面 */ .search-result{ margin-bottom: 25px; } .search-result>h2{ line-height: 50px; } .search-result{ padding: 0 10px 10px; } .search-list li{ width: 100%; } /* 底部单页 */ .page-bg{ flex-wrap: wrap; } .page-side{ display: flex; justify-content: space-around; align-items: center; width: 100%; margin-bottom: 10px; } .page-side>a{ justify-content: center; padding: 0; font-size: 15px; } .page-side>.active em{ transform: rotateZ(90deg); margin-left: 6px; } .page-content{ width: 100%; padding: 10px; } .page-content>h1{ height: 51px; } .page-content>h1 span{ font-size: 18px; line-height: 50px; } .page-txt.feedback-txt>input, .page-txt.feedback-txt>textarea{ width: 100%; padding: 0 10px; } .page-txt.feedback-txt>textarea{ height: 160px; padding: 10px; } .feedback-btn{ height: 40px; width: 120px; font-size: 15px; } /* 个人资料展示 */ .user-information{ padding: 10px; } .information-item li{ font-size: 14px; } .information-item li>span{ width: 24%; text-indent: 0; } .user-information .information-btn{ margin: 25px auto; } /* 尾部 */ .footer{ padding: 15px 0; text-align: center; } .foot-nav{ justify-content: center; } .foot-record{ font-size: 13px; line-height: 1.8; } .foot-record>a:first-child{ display: inline-block; margin-left: 0; } } @media screen and (max-width:414px) { } @media screen and (max-width:350px) { }