/*通用*/ text { font-size: 11px; color: #ffffff; } /*顶部模块*/ .TopBar { width:100%; height:202px; } .TopBgImage { width:100%; height:202px; position: absolute; } .avatar { width:70px; height:70px; border-radius: 50%; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); } .userName { font-size: 14px; font-weight: bold; display: block; top: 100px; position: absolute; /*居中*/ left: 50%; transform: translateX(-50%); } .documentView { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } /*上方信息条部分*/ .infoBar { width: 100%; height: 60px; top: 142px; position: absolute; } .infoView { text-align: center; width: 33.3%; height: 100%; display:inline-block; box-sizing: border-box; position: relative; background-color: rgba(255, 255, 255, 0.1); } .lineView { width: 100%; border-right: solid rgba(255, 255, 255, 0.7) 0.5px; border-left: solid rgba(255, 255, 255, 0.7) 0.5px; height: 40px; position: absolute; top: 10px; } .titleText { margin-top: 12px; display:block; } .timeText { font:medium; font-size: 13px; display:block; margin-top: 2px; } .hospitalName { width: 100%; height: 30px; background-color: white; color: #ee7289; font-size: 11px; font: medium; text-align: center; line-height: 30px; } /*中间功能模块的整个框架*/ .founctionModelBG { /*width: 100%;*/ height: 24%; margin-top: 4px; margin-left: 3px; margin-right: 2px; } .modelBig { width: 54%; height: 100%; background-color: white; border-radius: 4px; float: left; position: relative; } .modelSmallBG { width: 23%; background-color: #d8dbd4; height: 50%; float: left; position: relative; } .modelSmall { background-color: white; border-radius: 4px; position: absolute; /*垂直居中*/ /*display: flex; justify-content:center; align-items:Center;*/ } .modelSmallContent { width: 80%; height: 50px; margin-left: 50%; margin-top: 50%; transform: translateX(-50%) translateY(-65%); } /*功能模块小图标*/ .iconBg { width:38px; height:38px; position: absolute; border-radius: 50%; left: 50%; transform: translateX(-50%); } .icon { width:38px; height:38px; margin-left: 50%; transform: translateX(-50%); } /*// 新增模块*/ .newModelBg { margin-top: 3px; margin-left: 3px; margin-right: 2px; height: 12%; display: flex; flex-direction: row; justify-content: space-between; } .newModel_big { height: 100%; width: 55.2%; border-radius: 4px; background-color: white; display: flex; justify-content:center; align-items:Center; } .modelBigContent { width: 38px; height: 52px; } .newModel_small { margin-left: 2px; height: 100%; width: 23%; border-radius: 4px; background-color: white; position: relative; } .newIconBg { width: 38px; height: 38px; border-radius: 50%; margin-left: 50%; transform: translateX(-50%); } .newModelText { margin-top: -6px; transform: translateX(-25%); text-align: center; color: #979797; font-size: 10px; font: medium; width: 180%; } .highRisk_Bg { background: white; margin-left: 3px; margin-top: 3px; margin-right: 3px; } /*首页列表文章 顶部的item 布局*/ .home__list{ background: white; border-radius: 4px; margin: 3px; } /*首页列表文章 顶部的item 布局*/ .home__list__topitem{ border-bottom: 1rpx solid #d8dbd4; } /*首页列表文章 顶部的的item 布局 的图标*/ .home__list-topitem-icon{ /*垂直居中*/ display: flex; justify-content:center; align-items:Center; width: 20px; height: 20px; margin-right: 6px } /*首页列表文章 顶部的的item 布局 的文字*/ .home__list-topitem-text{ font-size: 16px; font:medium; color: #60c7ed } /*首页列表文章 item 最外层布局*/ .home__list-item{ /*border-bottom: 1rpx solid #E5E5E5;*/ /*left: 20px*/ position: relative } /*item 分割线*/ .home__list-item__top{ position: absolute; /*width: 100%;*/ height: 1rpx; background: #d8dbd4; top: 0px; left: 15px; right: 15px } /*首页列表文章 item 外层布局 右侧*/ .home__list-item__right{ width: 100%; height: 32px; position:relative; } /*首页列表文章 item 的文章图片*/ .home__list__img{ width: 80px; height: 100%; vertical-align: top; /*垂直居中*/ display: flex; justify-content:center; align-items:Center; } .home__list-item-content{ margin-left: 15px } /*首页列表文章 item 内的title 布局*/ .home__list-item__title{ position:absolute; top: 0px; left: 0px; right: 60px; font-size: 14px; color: #5e5e5e; font:normal; } /*首页列表文章 item 内的的点赞 布局*/ .home__list-item__like{ position: absolute; top: 0px; right: 0px; /*垂直居中 display: flex; justify-content:center; align-items:Center;*/ } /*首页列表文章 item 内的点赞手图标*/ .home__list-item__title-like-icon { position: absolute; width: 10px; height: 10px; right: 0px; left: 0px; top: 7px } /*首页列表文章 item 内的的点赞 数*/ .home__list-item__title-like-count { /*这个宽度设置后可以变化点赞数整个布局的位置前移后移*/ width: 30px; margin-left:15px; font-size: 10px; margin-top: 4px; color: #c8c6c6; overflow: hidden; text-overflow: ellipsis; } .promptText { background: #f4879b; font: bold; text-align: center; font-size: 10px; color: white; } /*-----------------------------------是否有建档-------------------------------------------*/ .whetherTheDocument { /*position: relative;*/ width: 100%; height: 100%; } .background { width: 100%; height: 100%; } .noDocumentButton{ position: relative; margin-top: 66px; height: 170px; margin-left: 35px; width: 80%; border-radius: 4px; background: white; } .documentButton{ position: relative; margin-top: 20px; height: 170px; margin-left: 35px; width: 80%; border-radius: 4px; background: white; } .prenatalScreen{ position: relative; margin-top: 20px; height: 170px; margin-left: 35px; width: 80%; border-radius: 4px; background: white; } .documentBgImage { position: absolute; width: 100%; height: 100%; top: 0; z-index: 0; border-radius: 4px; } .title{ position: absolute; font-weight: bold; font-size: 20px; color: #ee7289; line-height: 20px; top: 20px; right: 20px; bottom: 8px; left: 20px; } .documentIcon { width: 20px; height: 20px; position: absolute; top: 21px; right: 20px; bottom: 8px; left: 110px; } .content{ position: absolute; font:medium; color: #5e5e5e; font-size: 12px; right: 20px; left: 20px; top: 44px; }