1221 lines
21 KiB
CSS
1221 lines
21 KiB
CSS
/* ============================================================
|
||
医院救援管理平台 · 移动端设计系统（uni-app x / uvue 适配版）
|
||
Hospital Rescue Management Platform · Mobile Design System
|
||
基准画布 375 × 812 · 主色 #2563EB
|
||
------------------------------------------------------------
|
||
⚠ uvue 约束：
|
||
1) 不支持 ::before / ::after 伪元素 —— 全部改为实体元素承担装饰；
|
||
2) 不支持 CSS 变量 var() —— 颜色全部写实；
|
||
3) 不使用 display:grid —— 栅格一律 flex + 百分比宽度；
|
||
4) 不使用 gap —— 间距一律 margin（跨端最稳）；
|
||
5) 只使用 class 选择器，不使用后代/复合选择器。
|
||
============================================================ */
|
||
|
||
/* ---------- 页面容器 ---------- */
|
||
.hr-page {
|
||
flex: 1;
|
||
background-color: #F3F4F6;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.hr-page-white {
|
||
flex: 1;
|
||
background-color: #FFFFFF;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 页面滚动体 */
|
||
.hr-scroll {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 内容区容器：作为骨架屏覆盖层的定位基准，范围＝导航栏以下、底栏以上 */
|
||
.hr-flow {
|
||
flex: 1;
|
||
min-height: 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* 加载中覆盖层：绝对定位铺满内容区并居中 xLoading，不参与 flex 布局，因此不会被压缩 */
|
||
.hr-loading-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #F3F4F6;
|
||
z-index: 20;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 关键布局约束：scroll-view 是 flex 容器，直接子项默认 flex-shrink:1，
|
||
内容高于容器时会被压缩到「刚好装下」，表现为页面/骨架屏只显示顶部一小截。
|
||
因此滚动体的直接子元素必须显式禁止收缩。 */
|
||
.hr-body {
|
||
padding: 24rpx 32rpx 44rpx 32rpx;
|
||
flex-shrink: 0;
|
||
flex-grow: 0;
|
||
}
|
||
|
||
.hr-body-nopad {
|
||
padding: 24rpx 0 44rpx 0;
|
||
}
|
||
|
||
.hr-body-flush {
|
||
padding: 0 0 44rpx 0;
|
||
}
|
||
|
||
.hr-body-tab {
|
||
padding: 24rpx 32rpx 20rpx 32rpx;
|
||
}
|
||
|
||
/* ---------- 基础布局 ---------- */
|
||
.hr-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.hr-row-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.hr-row-between {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.hr-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hr-center {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hr-flex1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.hr-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ---------- 文本 ---------- */
|
||
.hr-t1 {
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-t2 {
|
||
color: #6B7280;
|
||
}
|
||
|
||
.hr-t3 {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.hr-t-pri {
|
||
color: #2563EB;
|
||
}
|
||
|
||
.hr-t-red {
|
||
color: #DC2626;
|
||
}
|
||
|
||
.hr-t-amb {
|
||
color: #D97706;
|
||
}
|
||
|
||
.hr-t-grn {
|
||
color: #059669;
|
||
}
|
||
|
||
.hr-fs10 {
|
||
font-size: 22.4rpx;
|
||
}
|
||
|
||
.hr-fs11 {
|
||
font-size: 24.6rpx;
|
||
}
|
||
|
||
.hr-fs12 {
|
||
font-size: 26.8rpx;
|
||
}
|
||
|
||
.hr-fs13 {
|
||
font-size: 29.2rpx;
|
||
}
|
||
|
||
.hr-fs14 {
|
||
font-size: 31.4rpx;
|
||
}
|
||
|
||
.hr-fs15 {
|
||
font-size: 33.6rpx;
|
||
}
|
||
|
||
.hr-fs17 {
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.hr-bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-mono {
|
||
font-family: monospace;
|
||
letter-spacing: 0.6rpx;
|
||
}
|
||
|
||
/* ---------- 卡片 ---------- */
|
||
.hr-card {
|
||
background-color: #FFFFFF;
|
||
border-radius: 26rpx;
|
||
padding: 24rpx 26rpx 24rpx 26rpx;
|
||
border: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.hr-card-gap {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.hr-card-tight {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.hr-card-list {
|
||
padding: 14rpx 18rpx 14rpx 18rpx;
|
||
}
|
||
|
||
.hr-card-line {
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.hr-card-danger {
|
||
border: 2rpx solid #FECACA;
|
||
background-color: #FFFBFB;
|
||
}
|
||
|
||
/* ---------- 小节标题 ---------- */
|
||
.hr-sec {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 32rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.hr-sec-first {
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.hr-sec-bar {
|
||
width: 6rpx;
|
||
height: 26rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #2563EB;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.hr-sec-t {
|
||
font-size: 31.4rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-sec-more {
|
||
margin-left: auto;
|
||
font-size: 25.8rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
/* ---------- 底部分隔区 ---------- */
|
||
/* xCell 内部 .xCellWrap 写死了 padding:12px 0（且不随 rpx 缩放），
|
||
会让列表行比设计稿明显高一截、文字块也比左侧图标高。
|
||
这里按项目设计稿收紧，行高由左侧图标（64rpx）决定。 */
|
||
.xCellWrap {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.xCellAvatar {
|
||
margin-right: 20rpx !important;
|
||
}
|
||
|
||
/* ---------- 列表行 ---------- */
|
||
.hr-lrow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-top: 22rpx;
|
||
padding-bottom: 22rpx;
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
min-height: 88rpx;
|
||
}
|
||
|
||
.hr-lrow-last {
|
||
border-bottom-width: 0rpx;
|
||
}
|
||
|
||
.hr-lrow-first {
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.hr-lic {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 33.6rpx;
|
||
background-color: #F3F4F6;
|
||
color: #6B7280;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.hr-lic-lg {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 35.8rpx;
|
||
}
|
||
|
||
.hr-lic-pri {
|
||
background-color: #EFF6FF;
|
||
color: #2563EB;
|
||
}
|
||
|
||
.hr-lic-red {
|
||
background-color: #FEF2F2;
|
||
color: #DC2626;
|
||
}
|
||
|
||
.hr-lic-amb {
|
||
background-color: #FEF3C7;
|
||
color: #D97706;
|
||
}
|
||
|
||
.hr-lic-grn {
|
||
background-color: #ECFDF5;
|
||
color: #059669;
|
||
}
|
||
|
||
.hr-lmain {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hr-lmain-b {
|
||
font-size: 31.4rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
lines: 1;
|
||
}
|
||
|
||
.hr-lmain-s {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
margin-top: 2rpx;
|
||
lines: 1;
|
||
}
|
||
|
||
.hr-lval {
|
||
font-size: 28rpx;
|
||
color: #9CA3AF;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
/* ---------- 按钮 ---------- */
|
||
.hr-btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 88rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 32.4rpx;
|
||
font-weight: bold;
|
||
background-color: #F3F4F6;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-btn-primary {
|
||
background-color: #2563EB;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.hr-btn-danger {
|
||
background-color: #DC2626;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.hr-btn-ghost {
|
||
background-color: #FFFFFF;
|
||
color: #1F2937;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.hr-btn-soft {
|
||
background-color: #EFF6FF;
|
||
color: #2563EB;
|
||
}
|
||
|
||
.hr-btn-lg {
|
||
height: 104rpx;
|
||
font-size: 35.8rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.hr-btn-sm {
|
||
height: 68rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.hr-btn-disabled {
|
||
background-color: #F3F4F6;
|
||
color: #9CA3AF;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
/* ---------- 底部固定操作条 ---------- */
|
||
.hr-fixedbar {
|
||
background-color: #FFFFFF;
|
||
border-top: 2rpx solid #F3F4F6;
|
||
padding: 22rpx 32rpx 28rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.hr-fixedbar-btn {
|
||
flex: 1;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.hr-fixedbar-btn-last {
|
||
flex: 1;
|
||
margin-right: 0rpx;
|
||
}
|
||
|
||
/* ---------- chip ---------- */
|
||
.hr-chip {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
height: 56rpx;
|
||
padding-left: 22rpx;
|
||
padding-right: 22rpx;
|
||
border-radius: 18rpx;
|
||
font-size: 26.8rpx;
|
||
font-weight: bold;
|
||
color: #6B7280;
|
||
background-color: #FFFFFF;
|
||
border: 2rpx solid #E5E7EB;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.hr-chip-active {
|
||
background-color: #2563EB;
|
||
border: 2rpx solid #2563EB;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.hr-chip-red {
|
||
color: #B91C1C;
|
||
background-color: #FEF2F2;
|
||
border: 2rpx solid #FECACA;
|
||
}
|
||
|
||
.hr-chip-amb {
|
||
color: #92400E;
|
||
background-color: #FEF3C7;
|
||
border: 2rpx solid #FDE68A;
|
||
}
|
||
|
||
.hr-chip-grn {
|
||
color: #059669;
|
||
background-color: #ECFDF5;
|
||
border: 2rpx solid #A7F3D0;
|
||
}
|
||
|
||
.hr-chip-lg {
|
||
height: 80rpx;
|
||
padding-left: 26rpx;
|
||
padding-right: 26rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
/* chip 横向滚动条 */
|
||
.hr-chiprow {
|
||
flex-direction: row;
|
||
display: flex;
|
||
}
|
||
|
||
/* ---------- 腕带分级 ---------- */
|
||
.hr-wb {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
height: 48rpx;
|
||
padding-left: 18rpx;
|
||
padding-right: 18rpx;
|
||
border-radius: 14rpx;
|
||
font-size: 25.8rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-wb-dot {
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 4rpx;
|
||
margin-right: 10rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.hr-wb1 {
|
||
background-color: #FEE2E2;
|
||
color: #B91C1C;
|
||
}
|
||
|
||
.hr-wb2 {
|
||
background-color: #FEF3C7;
|
||
color: #92400E;
|
||
}
|
||
|
||
.hr-wb3 {
|
||
background-color: #D1FAE5;
|
||
color: #065F46;
|
||
}
|
||
|
||
.hr-wb4 {
|
||
background-color: #E5E7EB;
|
||
color: #111827;
|
||
}
|
||
|
||
.hr-wb-sm {
|
||
height: 40rpx;
|
||
font-size: 23.6rpx;
|
||
border-radius: 12rpx;
|
||
padding-left: 14rpx;
|
||
padding-right: 14rpx;
|
||
}
|
||
|
||
/* ---------- 优先级 ---------- */
|
||
.hr-pc {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 42rpx;
|
||
padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 23.6rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-pc0 {
|
||
background-color: #DC2626;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.hr-pc1 {
|
||
background-color: #F59E0B;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.hr-pc2 {
|
||
background-color: #2563EB;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* ---------- 角标（全站统一样式） ----------
|
||
基准 = 我的页「消息中心」右侧角标：高/圆角 36rpx、字号 22.4rpx、红底白字。
|
||
组件库 xBadge（x-tabbar / x-tabs 内部使用）尺寸由它自己的 padding + 字号决定，
|
||
且以 inline style 下发，因此只能用 !important 覆盖
|
||
（!important 的样式声明优先级高于 inline style）。 */
|
||
.hr-badge {
|
||
min-width: 36rpx;
|
||
height: 36rpx;
|
||
padding-left: 10rpx;
|
||
padding-right: 10rpx;
|
||
border-radius: 18rpx;
|
||
background-color: #DC2626;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.hr-badge-t {
|
||
font-size: 22.4rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 组件库 xBadge 统一到同一尺寸（tabbar 角标 / tabs 角标） */
|
||
.xBadge-countAndLabel {
|
||
min-width: 36rpx !important;
|
||
height: 36rpx !important;
|
||
padding: 0 10rpx !important;
|
||
border-radius: 18rpx !important;
|
||
/*
|
||
定位（数值实测自 uni_modules 源码 + 375 逻辑宽换算，1rpx = 0.5px）：
|
||
1) 库默认是「半出血」：x-tabbar 给 x-badge 传 :offset="[0,5]"，再叠加
|
||
transform: translate(50%,-50%)，等于「角标中心 = 容器右上角」，
|
||
需要容器上方留出半个角标高度。而 x-tabbar 的 Tab 项高度写死 60px，
|
||
内容(icon 盒 30px + 文字 ≈23px ≈ 53px)上下各只剩 ~3.5px 余量，
|
||
出血超出 Tab 项的部分会被裁掉 → 故先取消出血（transform:none）。
|
||
2) 取消出血后若停在库默认的 right:0，角标会大面积压住 icon：
|
||
角标实际宽 28px —— min-width 36rpx 是「内容盒」最小值，还要加左右各
|
||
10rpx 内边距 ⇒ 18 + 10 = 28px，不是 18px（这点最容易算错）；
|
||
而 .xBadgeWrap 宽度 ≈ 左侧 icon 盒宽 = icon 24px + 左右各 4px = 32px。
|
||
right:0 时角标左缘 = wrap.right - 28，几乎完全盖在 icon 上
|
||
—— 这正是用户反馈的「角标遮挡 icon」。
|
||
3) 故改为「左锚定」，复刻设计稿 .dot 的 left: calc(50% + 6px)：
|
||
角标定位基准 .xBadgeWrap 的水平中心与 Tab 项水平中心重合
|
||
（.xBadge / .xBadgeWrap / .xTabbarItem 均为 align-items:center），
|
||
所以 left = wrap 半宽 16px + 6px = 22px = 44rpx，
|
||
角标左缘落在中心右侧 6px 处，与 icon 只重叠 ~6px（设计稿 5px）。
|
||
左锚定的好处：角标内容变宽（两位数/三位数）只向右生长，
|
||
不会回头盖住 icon，也不用再按「角标自身宽度」重算。
|
||
4) 上提只取 2px(=4rpx)：Tab 项上下余量 ~3.5px，取 2px 后角标顶边仍在
|
||
Tab 项内约 1.5px；即便某些平台文字行高更高，也还有下面的
|
||
overflow:visible 兜底，不会被裁。右侧余量充足：
|
||
角标右缘 = 中心 + 34px，仍小于 5 Tab 布局的项右缘（中心 + 37.5px）。
|
||
*/
|
||
top: -4rpx !important;
|
||
left: 44rpx !important;
|
||
right: auto !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
.xBadge-countAndLabelText {
|
||
font-size: 22.4rpx !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
/*
|
||
角标出血：库内 .xBadge 的内边距是 getNodeInfo() 量出来的，
|
||
量到的尺寸可能早于上面 !important 覆盖生效 → 预留空间不足，
|
||
角标超出容器的部分会被裁掉（tabbar 上最明显）。
|
||
view 在 uvue / H5 上的默认裁剪行为不一致，这里统一放开。
|
||
*/
|
||
.xBadge,
|
||
.xBadgeWrap,
|
||
.xTabbarBox,
|
||
.xTabbarWrap,
|
||
.xTabbarItem {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/*
|
||
.xBadge 的内边距（getNodeInfo() 量出 ≈ 半个角标）只是库为「半出血」预留的空间。
|
||
本项目已取消出血（transform:none），去掉该内边距后：
|
||
.xBadge 盒子由「内容 53px + 上下内边距 18px = 71px」缩到 53px，
|
||
从「超出 60px 的 Tab 项」变成「完整落在 Tab 项内」→ 任何平台都不会被裁。
|
||
内容位置不变：.xTabbarItem 是 justify-content:center，两种盒高下内容都垂直居中。
|
||
*/
|
||
.xBadge {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* ---------- 提示条 ---------- */
|
||
.hr-tip {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
padding: 20rpx 24rpx 20rpx 24rpx;
|
||
border-radius: 22rpx;
|
||
font-size: 26.8rpx;
|
||
}
|
||
|
||
.hr-tip-ic {
|
||
margin-right: 16rpx;
|
||
font-size: 26.8rpx;
|
||
}
|
||
|
||
.hr-tip-tx {
|
||
flex: 1;
|
||
font-size: 26.8rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.hr-tip-info {
|
||
background-color: #EFF6FF;
|
||
color: #1E40AF;
|
||
}
|
||
|
||
.hr-tip-warn {
|
||
background-color: #FFFBEB;
|
||
color: #92400E;
|
||
}
|
||
|
||
.hr-tip-err {
|
||
background-color: #FEF2F2;
|
||
color: #991B1B;
|
||
}
|
||
|
||
.hr-tip-ok {
|
||
background-color: #ECFDF5;
|
||
color: #065F46;
|
||
}
|
||
|
||
/* ---------- 表单 ---------- */
|
||
.hr-field {
|
||
background-color: #FFFFFF;
|
||
border: 2rpx solid #E5E7EB;
|
||
border-radius: 22rpx;
|
||
padding: 16rpx 24rpx 16rpx 24rpx;
|
||
min-height: 104rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hr-field-label {
|
||
font-size: 23.6rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.hr-field-input {
|
||
font-size: 31.4rpx;
|
||
color: #1F2937;
|
||
font-weight: bold;
|
||
height: 52rpx;
|
||
padding: 0 0 0 0;
|
||
}
|
||
|
||
.hr-field-err {
|
||
border: 2rpx solid #DC2626;
|
||
background-color: #FFFBFB;
|
||
}
|
||
|
||
.hr-field-ro {
|
||
background-color: #F9FAFB;
|
||
}
|
||
|
||
/* ---------- 分段控件 ---------- */
|
||
.hr-seg {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: #F3F4F6;
|
||
padding: 6rpx 6rpx 6rpx 6rpx;
|
||
border-radius: 22rpx;
|
||
}
|
||
|
||
.hr-seg-i {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 16rpx;
|
||
padding-bottom: 16rpx;
|
||
border-radius: 18rpx;
|
||
font-size: 29.2rpx;
|
||
font-weight: bold;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.hr-seg-i-on {
|
||
background-color: #FFFFFF;
|
||
color: #2563EB;
|
||
}
|
||
|
||
/* ---------- 进度条 ---------- */
|
||
.hr-pbar {
|
||
height: 8rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #F3F4F6;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.hr-pbar-i {
|
||
height: 8rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #2563EB;
|
||
}
|
||
|
||
/* ---------- 统计块 ---------- */
|
||
.hr-stat-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.hr-stat {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hr-stat-b {
|
||
font-size: 47rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-stat-s {
|
||
font-size: 23.6rpx;
|
||
color: #6B7280;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.hr-stat-sep {
|
||
width: 2rpx;
|
||
background-color: #F3F4F6;
|
||
height: 60rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
/* ---------- 时间线 ---------- */
|
||
.hr-tl {
|
||
position: relative;
|
||
padding-left: 44rpx;
|
||
}
|
||
|
||
.hr-tl-line {
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
width: 4rpx;
|
||
background-color: #E5E7EB;
|
||
}
|
||
|
||
.hr-tl-item {
|
||
position: relative;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.hr-tl-dot {
|
||
position: absolute;
|
||
left: -42rpx;
|
||
top: 8rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #2563EB;
|
||
}
|
||
|
||
.hr-tl-dot-warn {
|
||
background-color: #DC2626;
|
||
}
|
||
|
||
.hr-tl-dot-ok {
|
||
background-color: #10B981;
|
||
}
|
||
|
||
.hr-tl-time {
|
||
font-size: 23.6rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.hr-tl-tx {
|
||
font-size: 28rpx;
|
||
color: #1F2937;
|
||
font-weight: bold;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.hr-tl-sub {
|
||
font-size: 24.6rpx;
|
||
color: #6B7280;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
/* ---------- 空状态 / 加载 ---------- */
|
||
.hr-empty {
|
||
padding: 88rpx 40rpx 88rpx 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.hr-empty-ic {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
border-radius: 36rpx;
|
||
background-color: #F3F4F6;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 56rpx;
|
||
color: #9CA3AF;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.hr-empty-b {
|
||
font-size: 31.4rpx;
|
||
font-weight: bold;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.hr-empty-s {
|
||
font-size: 25.8rpx;
|
||
color: #9CA3AF;
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
lines: 2;
|
||
}
|
||
|
||
/* ---------- 头像 ---------- */
|
||
.hr-avt {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #2563EB;
|
||
color: #FFFFFF;
|
||
font-size: 33.6rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-avt-sm {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 18rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.hr-avt-lg {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
border-radius: 32rpx;
|
||
font-size: 49.2rpx;
|
||
}
|
||
|
||
.hr-avt-red {
|
||
background-color: #DC2626;
|
||
}
|
||
|
||
.hr-avt-amb {
|
||
background-color: #D97706;
|
||
}
|
||
|
||
.hr-avt-grn {
|
||
background-color: #059669;
|
||
}
|
||
|
||
.hr-avt-gy {
|
||
background-color: #94A3B8;
|
||
}
|
||
|
||
/* ---------- 开关（自绘，兜底用） ---------- */
|
||
.hr-sw {
|
||
width: 88rpx;
|
||
height: 52rpx;
|
||
border-radius: 26rpx;
|
||
background-color: #E5E7EB;
|
||
padding: 6rpx 6rpx 6rpx 6rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.hr-sw-on {
|
||
background-color: #10B981;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.hr-sw-knob {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
/* ---------- 分隔线 ---------- */
|
||
.hr-hr {
|
||
height: 2rpx;
|
||
background-color: #F3F4F6;
|
||
}
|
||
|
||
/* ---------- 覆盖层 ---------- */
|
||
.hr-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.45);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hr-toast {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 156rpx;
|
||
margin-left: -160rpx;
|
||
width: 320rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 18rpx 30rpx 18rpx 30rpx;
|
||
border-radius: 22rpx;
|
||
background-color: rgba(17, 24, 39, 0.93);
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-toast-ok {
|
||
background-color: rgba(5, 150, 105, 0.95);
|
||
}
|
||
|
||
.hr-toast-warn {
|
||
background-color: rgba(217, 119, 6, 0.95);
|
||
}
|
||
|
||
.hr-toast-err {
|
||
background-color: rgba(185, 28, 28, 0.95);
|
||
}
|
||
|
||
/* ---------- 离线条 ---------- */
|
||
.hr-offbar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 18rpx 32rpx 18rpx 32rpx;
|
||
background-color: #FFFBEB;
|
||
border-bottom: 2rpx solid #FDE68A;
|
||
font-size: 26.8rpx;
|
||
font-weight: bold;
|
||
color: #92400E;
|
||
}
|
||
|
||
.hr-offbar-cnt {
|
||
background-color: #F59E0B;
|
||
color: #FFFFFF;
|
||
font-size: 22.4rpx;
|
||
font-weight: bold;
|
||
padding: 4rpx 12rpx 4rpx 12rpx;
|
||
border-radius: 18rpx;
|
||
margin-left: 16rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.hr-offbar-go {
|
||
margin-left: auto;
|
||
font-size: 26.8rpx;
|
||
color: #B45309;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* ---------- 底部弹层 ---------- */
|
||
.hr-sheet-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(15, 23, 42, 0.42);
|
||
}
|
||
|
||
.hr-sheet {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #FFFFFF;
|
||
border-radius: 36rpx 36rpx 0rpx 0rpx;
|
||
padding: 28rpx 32rpx 40rpx 32rpx;
|
||
}
|
||
|
||
.hr-sheet-h {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.hr-sheet-h-b {
|
||
font-size: 33.6rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-sheet-h-x {
|
||
margin-left: auto;
|
||
font-size: 35.8rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.hr-sheet-opt {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-top: 26rpx;
|
||
padding-bottom: 26rpx;
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.hr-sheet-opt-t {
|
||
flex: 1;
|
||
font-size: 31.4rpx;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.hr-sheet-opt-on {
|
||
color: #2563EB;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hr-sheet-opt-last {
|
||
border-bottom-width: 0rpx;
|
||
}
|
||
|
||
/* ---------- 2D 人体图鉴（uvue 无 SVG，用几何图形拼装人体示意） ---------- */
|
||
.bm-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.bm-col {
|
||
flex: 1;
|
||
background-color: #FAFBFC;
|
||
border: 2rpx dashed #E5E7EB;
|
||
border-radius: 24rpx;
|
||
padding: 20rpx 12rpx 16rpx 12rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.bm-col-last {
|
||
margin-right: 0rpx;
|
||
}
|
||
|
||
.bm-figure {
|
||
width: 192rpx;
|
||
height: 368rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.bm-head {
|
||
position: absolute;
|
||
left: 66rpx;
|
||
top: 0rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-torso {
|
||
position: absolute;
|
||
left: 52rpx;
|
||
top: 66rpx;
|
||
width: 88rpx;
|
||
height: 124rpx;
|
||
border-radius: 28rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-arm-l {
|
||
position: absolute;
|
||
left: 16rpx;
|
||
top: 72rpx;
|
||
width: 24rpx;
|
||
height: 116rpx;
|
||
border-radius: 12rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-arm-r {
|
||
position: absolute;
|
||
left: 152rpx;
|
||
top: 72rpx;
|
||
width: 24rpx;
|
||
height: 116rpx;
|
||
border-radius: 12rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-leg-l {
|
||
position: absolute;
|
||
left: 56rpx;
|
||
top: 192rpx;
|
||
width: 26rpx;
|
||
height: 168rpx;
|
||
border-radius: 14rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-leg-r {
|
||
position: absolute;
|
||
left: 110rpx;
|
||
top: 192rpx;
|
||
width: 26rpx;
|
||
height: 168rpx;
|
||
border-radius: 14rpx;
|
||
border: 5rpx solid #CBD5E1;
|
||
}
|
||
|
||
.bm-mark {
|
||
position: absolute;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #DC2626;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.bm-mark-t {
|
||
font-size: 22.4rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.bm-tag {
|
||
font-size: 23.6rpx;
|
||
color: #9CA3AF;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
/* ---------- 加载动画 ---------- */
|
||
.hr-spin {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
border: 6rpx solid rgba(255, 255, 255, 0.25);
|
||
border-top-color: #FFFFFF;
|
||
}
|
||
|
||
/* ---------- 骨架屏 ---------- */
|
||
.hr-sk {
|
||
height: 22rpx;
|
||
border-radius: 14rpx;
|
||
background-color: #F3F4F6;
|
||
margin-bottom: 14rpx;
|
||
} |